cosmetic(pie-icon-button): PEW-109 css var update for bg-color

justeattakeaway · Feb 19, 2025 · 30f2615 · 30f2615
1 parent 71d0e44
commit 30f2615
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/packages/components/pie-icon-button/src/iconButton.scss b/packages/components/pie-icon-button/src/iconButton.scss
@@ -15,7 +15,7 @@
 // Base button styles
 .o-iconBtn {
     --btn-border-radius: var(--dt-radius-rounded-e);
-    --btn-bg-color: var(--dt-color-interactive-brand);
+    --bg-color: var(--dt-color-interactive-brand); // var without prefix to support interactive-states mixin
     --btn-icon-fill: var(--dt-color-content-interactive-light);
     --icon-display-override: block;
 
@@ -24,7 +24,7 @@
 
     border-color: var(--btn-border-color);
     border-radius: var(--btn-border-radius);
-    background-color: var(--btn-bg-color);
+    background-color: var(--bg-color);
     color: var(--btn-icon-fill);
     cursor: pointer;
     user-select: none;
@@ -51,14 +51,14 @@
     }
 
     &.o-iconBtn--secondary {
-        --btn-bg-color: var(--dt-color-interactive-secondary);
+        --bg-color: var(--dt-color-interactive-secondary);
         --btn-icon-fill: var(--dt-color-content-interactive-secondary);
 
         @include p.interactive-states('--dt-color-interactive-secondary');
     }
 
     &.o-iconBtn--outline {
-        --btn-bg-color: transparent;
+        --bg-color: transparent;
         --btn-icon-fill: var(--dt-color-content-interactive-brand);
 
         border: 1px solid var(--dt-color-border-strong);
@@ -67,28 +67,28 @@
     }
 
     &.o-iconBtn--ghost {
-        --btn-bg-color: transparent;
+        --bg-color: transparent;
         --btn-icon-fill: var(--dt-color-content-interactive-brand);
 
         @include p.interactive-states('--btn-bg-transparent', 'transparent');
     }
 
     &.o-iconBtn--ghost-secondary {
-        --btn-bg-color: transparent;
+        --bg-color: transparent;
         --btn-icon-fill: var(--dt-color-content-interactive-secondary);
 
         @include p.interactive-states('--btn-bg-transparent', 'transparent');
     }
 
     &.o-iconBtn--inverse {
-        --btn-bg-color: var(--dt-color-interactive-inverse);
+        --bg-color: var(--dt-color-interactive-inverse);
         --btn-icon-fill: var(--dt-color-content-interactive-brand);
 
         @include p.interactive-states('--dt-color-interactive-inverse');
     }
 
     &.o-iconBtn--ghost-inverse {
-        --btn-bg-color: transparent;
+        --bg-color: transparent;
         --btn-icon-fill: var(--dt-color-content-inverse);
 
         @include p.interactive-states('--btn-bg-transparent', 'transparent', '02');
@@ -101,7 +101,7 @@
 
         // For every variant (except ghost variants) set the disabled background color
         &:not(.o-iconBtn--ghost, .o-iconBtn--ghost-secondary, .o-iconBtn--ghost-inverse) {
-            --btn-bg-color: var(--dt-color-disabled-01);
+            --bg-color: var(--dt-color-disabled-01);
         }
 
         // For outline variants, set the border to the disabled color