From 6764847e3d2e3db57bb646b98252998204d11279 Mon Sep 17 00:00:00 2001
From: "Bajohr, Rayk" <rayk.bajohr@siemens.com>
Date: Fri, 24 Apr 2026 09:29:54 +0200
Subject: [PATCH] refactor(theme): use relative units for .pills

---
 .../filter-bar/si-filter-bar.component.scss   |  7 +++++--
 .../filter-bar/si-filter-pill.component.scss  |  5 +----
 .../si-filtered-search-value.component.scss   |  8 +-------
 .../src/styles/components/_pills.scss         | 19 +++++++++++--------
 4 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/projects/element-ng/filter-bar/si-filter-bar.component.scss b/projects/element-ng/filter-bar/si-filter-bar.component.scss
index 40c2a1a4f1..d8569df693 100644
--- a/projects/element-ng/filter-bar/si-filter-bar.component.scss
+++ b/projects/element-ng/filter-bar/si-filter-bar.component.scss
@@ -5,7 +5,10 @@
 $list-header-filter-padding-horizontal: map.get(all-variables.$spacers, 5);
 $list-header-filter-padding-vertical: map.get(all-variables.$spacers, 3);
 $filter-bar-background-color: all-variables.$element-base-0;
-$filter-pill-gap: map.get(all-variables.$spacers, 4); // Keep in sync with si-filter-pill.
+
+:host {
+  --filter-pill-gap: #{map.get(all-variables.$spacers, 4)};
+}
 
 :host.reset .responsive .list-text {
   line-height: calc(all-variables.$btn-font-size-lg + all-variables.$btn-padding-y * 2);
@@ -24,7 +27,7 @@ $filter-pill-gap: map.get(all-variables.$spacers, 4); // Keep in sync with si-fi
   overflow: hidden;
   display: flex;
   align-items: center;
-  gap: $filter-pill-gap;
+  gap: var(--filter-pill-gap);
 
   .list-text {
     color: all-variables.$element-text-disabled;
diff --git a/projects/element-ng/filter-bar/si-filter-pill.component.scss b/projects/element-ng/filter-bar/si-filter-pill.component.scss
index c6b11e38f1..331480652b 100644
--- a/projects/element-ng/filter-bar/si-filter-pill.component.scss
+++ b/projects/element-ng/filter-bar/si-filter-pill.component.scss
@@ -1,10 +1,8 @@
 @use 'sass:map';
-@use 'sass:math';
 
 @use '@siemens/element-theme/src/styles/variables';
 
 $filter-pill-height: map.get(variables.$spacers, 9);
-$filter-pill-gap: map.get(variables.$spacers, 4);
 
 :host {
   --filter-pill-background-color: #{variables.$element-base-1};
@@ -15,8 +13,7 @@ $filter-pill-gap: map.get(variables.$spacers, 4);
 }
 
 .pill {
-  margin-inline-start: $filter-pill-gap;
-  background: var(--filter-pill-background-color);
+  margin-inline-start: var(--filter-pill-gap, #{map.get(variables.$spacers, 4)});
 }
 
 .wrapper {
diff --git a/projects/element-ng/filtered-search/si-filtered-search-value.component.scss b/projects/element-ng/filtered-search/si-filtered-search-value.component.scss
index 839540b0d7..f2ee994235 100644
--- a/projects/element-ng/filtered-search/si-filtered-search-value.component.scss
+++ b/projects/element-ng/filtered-search/si-filtered-search-value.component.scss
@@ -1,17 +1,12 @@
 @use '@siemens/element-theme/src/styles/variables';
 @use 'sass:map';
 
-.pill {
-  background: var(--filter-pill-background-color);
-}
-
 .criteria {
-  display: flex;
   cursor: pointer;
   white-space: nowrap;
-  border-radius: 12px;
 
   &.invalid-criterion {
+    border-radius: 0.75rem;
     box-shadow: 0 0 0 1px variables.$element-status-danger;
   }
 
@@ -26,7 +21,6 @@
 }
 
 .operator-input {
-  background: var(--filter-pill-background-color);
   padding-inline: map.get(variables.$spacers, 2);
   inline-size: calc(1ch + #{2 * map.get(variables.$spacers, 2)});
 }
diff --git a/projects/element-theme/src/styles/components/_pills.scss b/projects/element-theme/src/styles/components/_pills.scss
index 5769cd518d..5686326766 100644
--- a/projects/element-theme/src/styles/components/_pills.scss
+++ b/projects/element-theme/src/styles/components/_pills.scss
@@ -5,10 +5,8 @@
 .pill {
   display: flex;
   align-items: center;
-  block-size: 24px;
-  border-radius: 12px;
-  background: variables.$element-base-0;
-  padding-block: map.get(variables.$spacers, 2);
+  border-radius: 0.75rem;
+  background: var(--filter-pill-background-color, variables.$element-base-0);
   padding-inline: map.get(variables.$spacers, 4);
   max-inline-size: 100%;
 
@@ -23,6 +21,11 @@
       background: variables.$element-action-secondary-hover;
     }
   }
+
+  .name,
+  .value {
+    padding-block: map.get(variables.$spacers, 2);
+  }
 }
 
 .pill-group {
@@ -33,13 +36,13 @@
     border-radius: 0;
 
     &:first-child {
-      border-start-start-radius: 12px;
-      border-end-start-radius: 12px;
+      border-start-start-radius: 0.75rem;
+      border-end-start-radius: 0.75rem;
     }
 
     &:last-child {
-      border-start-end-radius: 12px;
-      border-end-end-radius: 12px;
+      border-start-end-radius: 0.75rem;
+      border-end-end-radius: 0.75rem;
     }
   }
 }