From a14d7a3c44ee249fa3041a2a17f1c90a40c8ca13 Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Fri, 6 Dec 2024 16:58:21 -0500
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=9B=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/breadcrumbs/breadcrumbs.scss          | 11 +++++--
 packages/itwinui-css/src/menu/menu.scss       |  4 ++-
 .../progress-indicator.scss                   |  8 +++--
 .../src/radio-tile/radio-tile.scss            | 23 +++++++------
 packages/itwinui-css/src/tabs/base.scss       | 32 ++++++++++++++-----
 packages/itwinui-css/src/tabs/default.scss    |  2 +-
 packages/itwinui-css/src/utils/icon.scss      |  5 +--
 7 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss b/packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss
index bce71c12a7c..91e686bce84 100644
--- a/packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss
+++ b/packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss
@@ -7,6 +7,11 @@
 .iui-breadcrumbs {
   --_iui-breadcrumbs-height: var(--iui-component-height);
 
+  --_iui-breadcrumbs-content-color-default: var(--iui-color-text-accent);
+  --_iui-breadcrumbs-content-color-current: var(--iui-color-text);
+  --_iui-breadcrumbs-content-color-link-hover: var(--iui-color-text-accent-hover);
+  --_iui-breadcrumbs-content-color: var(--_iui-breadcrumbs-content-color-default);
+
   @include mixins.iui-reset;
   display: flex;
   align-items: center;
@@ -48,7 +53,7 @@
     outline-offset: -1px;
 
     &:hover {
-      color: var(--iui-color-text-accent-hover);
+      --_iui-breadcrumbs-content-color: var(--_iui-breadcrumbs-content-color-link-hover);
       text-decoration: underline;
     }
   }
@@ -56,10 +61,10 @@
   &:where(button, :any-link) {
     @include base.iui-button;
     @include borderless.iui-button-borderless;
-    color: var(--iui-color-text-accent);
+    color: var(--_iui-breadcrumbs-content-color);
 
     &[aria-current] {
-      color: var(--iui-color-text);
+      --_iui-breadcrumbs-content-color: var(--_iui-breadcrumbs-content-color-current);
     }
   }
 }
diff --git a/packages/itwinui-css/src/menu/menu.scss b/packages/itwinui-css/src/menu/menu.scss
index e8becba1f9a..9109e52fb7c 100644
--- a/packages/itwinui-css/src/menu/menu.scss
+++ b/packages/itwinui-css/src/menu/menu.scss
@@ -33,6 +33,8 @@ $iui-active-outline: 1px solid var(--iui-color-border-accent);
 }
 
 :is(.iui-list-item, .iui-menu-item-skeleton) {
+  --_iui-list-item-background-hover: var(--iui-color-background-hover);
+
   display: flex;
   align-items: center;
   gap: var(--iui-size-xs);
@@ -54,7 +56,7 @@ $iui-active-outline: 1px solid var(--iui-color-border-accent);
   &:where([data-iui-actionable='true']:hover),
   &:where(:has(.iui-link-action):hover) {
     cursor: pointer;
-    background-color: var(--iui-color-background-hover);
+    background-color: var(--_iui-list-item-background-hover);
   }
 
   &:where(.iui-large, [data-iui-size='large']) {
diff --git a/packages/itwinui-css/src/progress-indicator/progress-indicator.scss b/packages/itwinui-css/src/progress-indicator/progress-indicator.scss
index 539e9e12633..ce0f8034e8f 100644
--- a/packages/itwinui-css/src/progress-indicator/progress-indicator.scss
+++ b/packages/itwinui-css/src/progress-indicator/progress-indicator.scss
@@ -4,6 +4,10 @@
 @use 'sass:string';
 @use '../mixins';
 
+:is(.iui-progress-indicator-radial, .iui-progress-indicator-linear) {
+  --_iui-progress-indicator-color-default-progress: var(--iui-color-border-accent);
+}
+
 .iui-progress-indicator-radial {
   --_iui-progress-indicator-radial-size: #{map.get(mixins.$iui-icon-sizes, xl)};
   vertical-align: middle;
@@ -34,7 +38,7 @@
   &::after {
     mask-composite: subtract;
     mask-clip: border-box, content-box;
-    background-color: var(--iui-color-border-accent);
+    background-color: var(--_iui-progress-indicator-color-default-progress);
   }
 
   &::before,
@@ -144,7 +148,7 @@
     content: '';
     block-size: var(--iui-size-2xs);
     $percentage: var(--iui-progress-percentage, 100%);
-    $fill: var(--_iui-progress-indicator-track-fill, var(--iui-color-border-accent));
+    $fill: var(--_iui-progress-indicator-track-fill, var(--_iui-progress-indicator-color-default-progress));
 
     background-color: var(--iui-color-border);
     background-image: linear-gradient(90deg, $fill 0% 100%);
diff --git a/packages/itwinui-css/src/radio-tile/radio-tile.scss b/packages/itwinui-css/src/radio-tile/radio-tile.scss
index 72289dfd01c..d06cee2b824 100644
--- a/packages/itwinui-css/src/radio-tile/radio-tile.scss
+++ b/packages/itwinui-css/src/radio-tile/radio-tile.scss
@@ -3,6 +3,12 @@
 @use '../mixins';
 
 .iui-radio-tile {
+  --_iui-radio-tile-color-icon: var(--_iui-radio-tile-color-icon-default);
+  --_iui-radio-tile-color-icon-default: var(--iui-color-icon-muted);
+  --_iui-radio-tile-color-icon-hover: var(--iui-color-icon-hover);
+  --_iui-radio-tile-color-icon-checked: var(--iui-color-icon-accent);
+  --_iui-radio-tile-color-icon-disabled: var(--iui-color-icon-disabled);
+
   display: grid;
   align-content: center;
   justify-items: center;
@@ -18,10 +24,7 @@
   &:where(:hover) {
     z-index: 2;
     outline-color: var(--iui-color-border-hover);
-
-    .iui-radio-tile-icon svg {
-      fill: var(--iui-color-icon-hover);
-    }
+    --_iui-radio-tile-color-icon: var(--_iui-radio-tile-color-icon-hover);
   }
 
   &:where(:has(input:disabled), [data-iui-disabled='true']) {
@@ -58,9 +61,10 @@
     }
 
     + .iui-radio-tile-icon svg {
-      fill: var(--iui-color-icon-accent);
+      --_iui-radio-tile-color-icon: var(--_iui-radio-tile-color-icon-checked);
+
       @media (forced-colors: active) {
-        fill: Highlight;
+        --_iui-radio-tile-color-icon-checked: Highlight;
       }
     }
 
@@ -90,9 +94,10 @@
 
     + .iui-radio-tile-icon svg {
       filter: mixins.$iui-icon-color-multicolor-disabled;
-      fill: var(--iui-color-icon-disabled);
+      --_iui-radio-tile-color-icon: var(--_iui-radio-tile-color-icon-disabled);
+
       @media (forced-colors: active) {
-        fill: GrayText;
+        --_iui-radio-tile-color-icon-disabled: GrayText;
       }
     }
 
@@ -125,7 +130,7 @@
   &,
   svg {
     @include mixins.iui-icon-style('xl');
-    @include mixins.iui-icon-color;
+    fill: var(--_iui-radio-tile-color-icon);
     transition: fill var(--iui-duration-1) ease-out;
   }
 }
diff --git a/packages/itwinui-css/src/tabs/base.scss b/packages/itwinui-css/src/tabs/base.scss
index 87d31acc4d8..254f3a8fbca 100644
--- a/packages/itwinui-css/src/tabs/base.scss
+++ b/packages/itwinui-css/src/tabs/base.scss
@@ -18,6 +18,16 @@ $borderless-horizontal-tab-min-height: calc(
 );
 
 @mixin iui-tabs-wrapper {
+  --_iui-tab-color-stripe-blue: var(--iui-color-border-accent);
+  --_iui-tab-color-stripe-green: var(--iui-color-border-positive);
+  --_iui-tab-color-stripe: var(--_iui-tab-color-stripe-blue);
+
+  --_iui-tab-color-default: var(--iui-color-text);
+  --_iui-tab-color-selected: var(--iui-color-text-accent);
+  --_iui-tab-color-disabled: var(--iui-color-text-disabled);
+  --_iui-tab-color-green-selected: var(--iui-color-text-positive);
+  --_iui-tab-color: var(--_iui-tab-color-default);
+
   display: grid;
   position: relative;
 }
@@ -44,13 +54,17 @@ $borderless-horizontal-tab-min-height: calc(
     min-block-size: calc(var(--iui-size-m) * 2.5);
     block-size: 100%;
     cursor: pointer;
-    color: var(--iui-color-text);
+    color: var(--_iui-tab-color);
     transition: background-color var(--iui-duration-1) ease-out;
     text-align: start;
     scroll-margin: var(--iui-size-m);
 
+    &::after {
+      background-color: var(--_iui-tab-color-stripe);
+    }
+
     &[aria-selected='true'] {
-      color: var(--iui-color-text-accent);
+      --_iui-tab-color: var(--_iui-tab-color-selected);
 
       .iui-tab-icon svg {
         fill: currentColor;
@@ -63,7 +77,7 @@ $borderless-horizontal-tab-min-height: calc(
 
     &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
       cursor: not-allowed;
-      color: var(--iui-color-text-disabled);
+      --_iui-tab-color: var(--_iui-tab-color-disabled);
 
       .iui-tab-description {
         color: inherit;
@@ -105,7 +119,7 @@ $borderless-horizontal-tab-min-height: calc(
     }
 
     &[aria-selected='true'] {
-      color: var(--iui-color-text-positive);
+      --_iui-tab-color: var(--_iui-tab-color-green-selected);
 
       .iui-tab-icon svg {
         fill: currentColor;
@@ -235,7 +249,8 @@ $borderless-horizontal-tab-min-height: calc(
   .iui-tab::after {
     content: '';
     position: absolute;
-    background-color: var(--iui-color-border-accent);
+
+    --_iui-tab-color-stripe: var(--_iui-tab-color-stripe-blue);
   }
 
   [aria-selected='true']::after {
@@ -247,7 +262,7 @@ $borderless-horizontal-tab-min-height: calc(
   }
 
   &.iui-green .iui-tab::after {
-    background-color: var(--iui-color-border-positive);
+    --_iui-tab-color-stripe: var(--_iui-tab-color-stripe-green);
   }
 }
 
@@ -255,11 +270,12 @@ $borderless-horizontal-tab-min-height: calc(
   &::after {
     position: absolute;
     content: ' ';
-    background-color: var(--iui-color-border-accent);
+
+    background-color: var(--_iui-tab-color-stripe);
   }
 
   &.iui-green::after {
-    background-color: var(--iui-color-border-positive);
+    --_iui-tab-color-stripe: var(--_iui-tab-color-stripe-green);
   }
 
   .iui-horizontal &::after {
diff --git a/packages/itwinui-css/src/tabs/default.scss b/packages/itwinui-css/src/tabs/default.scss
index 0d7400f0b77..23119497bed 100644
--- a/packages/itwinui-css/src/tabs/default.scss
+++ b/packages/itwinui-css/src/tabs/default.scss
@@ -81,7 +81,7 @@
   }
 
   &.iui-green .iui-tab::after {
-    background-color: var(--iui-color-border-positive);
+    --_iui-tab-color-stripe: var(--_iui-tab-color-stripe-green);
   }
 
   ~ .iui-tabs-content {
diff --git a/packages/itwinui-css/src/utils/icon.scss b/packages/itwinui-css/src/utils/icon.scss
index 1cf20336461..96b6f97da0d 100644
--- a/packages/itwinui-css/src/utils/icon.scss
+++ b/packages/itwinui-css/src/utils/icon.scss
@@ -11,16 +11,17 @@ $icon-sizes: (
 );
 
 $default-size: #{map.get($icon-sizes, m)};
-$default-fill: var(--iui-color-icon-muted);
 
 .iui-svg-icon {
+  --_iui-svg-icon-fill-default: var(--iui-color-icon-muted);
+
   display: inline-flex;
   flex-shrink: 0;
 
   svg {
     inline-size: var(--iui-svg-size, var(--_iui-svg-size, #{$default-size}));
     block-size: var(--iui-svg-size, var(--_iui-svg-size, #{$default-size}));
-    fill: var(--iui-svg-fill, var(--_iui-svg-fill, #{$default-fill}));
+    fill: var(--iui-svg-fill, var(--_iui-svg-fill, var(--_iui-svg-icon-fill-default)));
   }
 
   @each $size in 's', 'm', 'l', 'auto' {

From 237c1a79d7d9215e8b59d153ca2d807512283367 Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Fri, 20 Dec 2024 09:03:37 -0500
Subject: [PATCH 2/3] Simplification

---
 .../src/breadcrumbs/breadcrumbs.scss          | 10 +++-----
 .../src/radio-tile/radio-tile.scss            | 23 ++++++++-----------
 packages/itwinui-css/src/utils/icon.scss      |  5 ++--
 3 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss b/packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss
index 91e686bce84..e5b4af1683b 100644
--- a/packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss
+++ b/packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss
@@ -6,11 +6,7 @@
 
 .iui-breadcrumbs {
   --_iui-breadcrumbs-height: var(--iui-component-height);
-
   --_iui-breadcrumbs-content-color-default: var(--iui-color-text-accent);
-  --_iui-breadcrumbs-content-color-current: var(--iui-color-text);
-  --_iui-breadcrumbs-content-color-link-hover: var(--iui-color-text-accent-hover);
-  --_iui-breadcrumbs-content-color: var(--_iui-breadcrumbs-content-color-default);
 
   @include mixins.iui-reset;
   display: flex;
@@ -53,7 +49,7 @@
     outline-offset: -1px;
 
     &:hover {
-      --_iui-breadcrumbs-content-color: var(--_iui-breadcrumbs-content-color-link-hover);
+      color: var(--iui-color-text-accent-hover);
       text-decoration: underline;
     }
   }
@@ -61,10 +57,10 @@
   &:where(button, :any-link) {
     @include base.iui-button;
     @include borderless.iui-button-borderless;
-    color: var(--_iui-breadcrumbs-content-color);
+    color: var(--_iui-breadcrumbs-content-color-default);
 
     &[aria-current] {
-      --_iui-breadcrumbs-content-color: var(--_iui-breadcrumbs-content-color-current);
+      color: var(--iui-color-text);
     }
   }
 }
diff --git a/packages/itwinui-css/src/radio-tile/radio-tile.scss b/packages/itwinui-css/src/radio-tile/radio-tile.scss
index d06cee2b824..72289dfd01c 100644
--- a/packages/itwinui-css/src/radio-tile/radio-tile.scss
+++ b/packages/itwinui-css/src/radio-tile/radio-tile.scss
@@ -3,12 +3,6 @@
 @use '../mixins';
 
 .iui-radio-tile {
-  --_iui-radio-tile-color-icon: var(--_iui-radio-tile-color-icon-default);
-  --_iui-radio-tile-color-icon-default: var(--iui-color-icon-muted);
-  --_iui-radio-tile-color-icon-hover: var(--iui-color-icon-hover);
-  --_iui-radio-tile-color-icon-checked: var(--iui-color-icon-accent);
-  --_iui-radio-tile-color-icon-disabled: var(--iui-color-icon-disabled);
-
   display: grid;
   align-content: center;
   justify-items: center;
@@ -24,7 +18,10 @@
   &:where(:hover) {
     z-index: 2;
     outline-color: var(--iui-color-border-hover);
-    --_iui-radio-tile-color-icon: var(--_iui-radio-tile-color-icon-hover);
+
+    .iui-radio-tile-icon svg {
+      fill: var(--iui-color-icon-hover);
+    }
   }
 
   &:where(:has(input:disabled), [data-iui-disabled='true']) {
@@ -61,10 +58,9 @@
     }
 
     + .iui-radio-tile-icon svg {
-      --_iui-radio-tile-color-icon: var(--_iui-radio-tile-color-icon-checked);
-
+      fill: var(--iui-color-icon-accent);
       @media (forced-colors: active) {
-        --_iui-radio-tile-color-icon-checked: Highlight;
+        fill: Highlight;
       }
     }
 
@@ -94,10 +90,9 @@
 
     + .iui-radio-tile-icon svg {
       filter: mixins.$iui-icon-color-multicolor-disabled;
-      --_iui-radio-tile-color-icon: var(--_iui-radio-tile-color-icon-disabled);
-
+      fill: var(--iui-color-icon-disabled);
       @media (forced-colors: active) {
-        --_iui-radio-tile-color-icon-disabled: GrayText;
+        fill: GrayText;
       }
     }
 
@@ -130,7 +125,7 @@
   &,
   svg {
     @include mixins.iui-icon-style('xl');
-    fill: var(--_iui-radio-tile-color-icon);
+    @include mixins.iui-icon-color;
     transition: fill var(--iui-duration-1) ease-out;
   }
 }
diff --git a/packages/itwinui-css/src/utils/icon.scss b/packages/itwinui-css/src/utils/icon.scss
index 96b6f97da0d..1cf20336461 100644
--- a/packages/itwinui-css/src/utils/icon.scss
+++ b/packages/itwinui-css/src/utils/icon.scss
@@ -11,17 +11,16 @@ $icon-sizes: (
 );
 
 $default-size: #{map.get($icon-sizes, m)};
+$default-fill: var(--iui-color-icon-muted);
 
 .iui-svg-icon {
-  --_iui-svg-icon-fill-default: var(--iui-color-icon-muted);
-
   display: inline-flex;
   flex-shrink: 0;
 
   svg {
     inline-size: var(--iui-svg-size, var(--_iui-svg-size, #{$default-size}));
     block-size: var(--iui-svg-size, var(--_iui-svg-size, #{$default-size}));
-    fill: var(--iui-svg-fill, var(--_iui-svg-fill, var(--_iui-svg-icon-fill-default)));
+    fill: var(--iui-svg-fill, var(--_iui-svg-fill, #{$default-fill}));
   }
 
   @each $size in 's', 'm', 'l', 'auto' {

From 04dd4a1cf8fd43b48e4b3ab55cdef4ce617357fb Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Tue, 24 Dec 2024 11:54:34 -0500
Subject: [PATCH 3/3] Leftover

---
 .../itwinui-css/src/expandable-block/expandable-block.scss  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/itwinui-css/src/expandable-block/expandable-block.scss b/packages/itwinui-css/src/expandable-block/expandable-block.scss
index 23865372520..fb1627efb4d 100644
--- a/packages/itwinui-css/src/expandable-block/expandable-block.scss
+++ b/packages/itwinui-css/src/expandable-block/expandable-block.scss
@@ -17,6 +17,8 @@
   --_iui-expandable-block-header-focus-offset: -2px;
   --_iui-expandable-block-header-focus-thickness: 2px;
 
+  --_iui-expandable-block-header-caption-color-hover: var(--iui-color-text-hover);
+
   &[data-iui-expanded='true'] {
     --_iui-expandable-block-header-bottom-border-radius: 0;
     --_iui-expandable-block-expander-icon-transform: rotate(90deg);
@@ -80,14 +82,14 @@
 
   &:where(:hover) {
     --_iui-expandable-block-expander-icon-fill: var(--iui-color-icon-hover);
-    --_iui-expandable-block-header-caption-color: var(--iui-color-text-hover);
+    --_iui-expandable-block-header-caption-color: var(--_iui-expandable-block-header-caption-color-hover);
     --_iui-expandable-block-header-label-color: var(--iui-color-text-hover);
 
     background-color: var(--_iui-expandable-block-header-background-color-hover);
 
     @media (forced-colors: active) {
       --_iui-expandable-block-expander-icon-fill: Highlight;
-      --_iui-expandable-block-header-caption-color: Highlight;
+      --_iui-expandable-block-header-caption-color-hover: Highlight;
       --_iui-expandable-block-header-label-color: Highlight;
       border-color: Highlight;
     }