refactor(themes): accessibility color fixes

package.json

@@ -82,7 +82,7 @@
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^7.0.0",
     "igniteui-i18n-resources": "0.7.0-alpha.8",
-    "igniteui-theming": "^23.1.0",
+    "igniteui-theming": "^23.1.1",
     "keep-a-changelog": "^2.7.1",
     "lint-staged": "^16.2.6",
     "lit-analyzer": "^2.0.3",

src/components/button-group/themes/shared/button/button.material.scss

@@ -61,11 +61,11 @@ $theme: $material;
 :host([selected]) {
     [part~='toggle']:active {
         background: var-get($theme, 'item-selected-background');
-        color: var-get($theme, 'item-selected-text-color');
+        color: var-get($theme, 'item-selected-hover-text-color');
         border-color: var-get($theme, 'item-selected-border-color');
 
         ::slotted(igc-icon) {
-            color: var-get($theme, 'item-selected-icon-color');
+            color: var-get($theme, 'item-selected-hover-icon-color');
         }
 
         &::before {

src/components/button/themes/button/shared/button.material.scss

@@ -26,6 +26,28 @@ $outlined-theme: $material-outlined;
     transition: all .1s ease-in-out;
 }
 
+:host(:not([disabled])[variant='flat']) [part~='base'],
+:host(:not(:disabled)[variant='flat']) [part~='base'] {
+    &:active {
+        ::slotted(igc-icon) {
+            color: var-get($flat-theme, 'active-foreground');
+        }
+    }
+}
+
+:host(:not([disabled])[variant='flat']) [part='base focused'],
+:host(:not(:disabled)[variant='flat']) [part='base focused'] {
+    ::slotted(igc-icon) {
+        color: var-get($flat-theme, 'icon-color-hover');
+    }
+
+    &:active {
+        ::slotted(igc-icon) {
+            color: var-get($flat-theme, 'focus-foreground');
+        }
+    }
+}
+
 :host(:not([disabled])[variant='outlined']) [part~='base'],
 :host(:not(:disabled)[variant='outlined']) [part~='base'] {
     &:hover {
@@ -34,12 +56,28 @@ $outlined-theme: $material-outlined;
 
     &:active {
         border-color: var-get($outlined-theme, 'active-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($outlined-theme, 'active-foreground');
+        }
     }
 }
 
 :host(:not([disabled])[variant='outlined']) [part='base focused'],
 :host(:not(:disabled)[variant='outlined']) [part='base focused'] {
     border-color: var-get($outlined-theme, 'focus-visible-border-color');
+
+    ::slotted(igc-icon) {
+        color: var-get($outlined-theme, 'focus-visible-foreground');
+    }
+
+    &:active {
+        border-color: var-get($outlined-theme, 'focus-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($outlined-theme, 'focus-foreground');
+        }
+    }
 }
 
 :host(:not([disabled])[variant='contained']) [part~='base'],

src/components/stepper/themes/step/shared/step.common.scss

@@ -23,14 +23,30 @@ $theme: $material;
 
     &:hover {
         background: var-get($theme, 'step-hover-background');
-        color: var-get($theme, 'title-hover-color')
+        color: var-get($theme, 'title-hover-color');
+
+        [part~='title'] {
+            color: var-get($theme, 'title-hover-color');
+        }
+
+        [part~='subtitle'] {
+            color: var-get($theme, 'subtitle-hover-color')
+        }
     }
 
     &:focus,
     &:focus-within,
     &:active {
         background: var-get($theme, 'step-focus-background');
         color: var-get($theme, 'title-focus-color');
+
+        [part~='title'] {
+            color: var-get($theme, 'title-focus-color');
+        }
+
+        [part~='subtitle'] {
+            color: var-get($theme, 'subtitle-focus-color')
+        }
     }
 }
 
@@ -83,27 +99,6 @@ $theme: $material;
     }
 }
 
-:host([complete]) {
-	[part~='header'] {
-		&:hover {
-			background: var-get($theme, 'complete-step-hover-background');
-		}
-
-		&:focus,
-		&:focus-within,
-		&:active {
-			background: var-get($theme, 'complete-step-focus-background');
-		}
-	}
-
-    [part~='body'] {
-        &::before {
-            border-inline-start-style: var-get($theme, 'complete-step-separator-style');
-            border-inline-start-color: var-get($theme, 'complete-step-separator-color');
-        }
-    }
-}
-
 [part~='complete-end'] {
     &::before {
         border-block-start-style: var-get($theme, 'complete-step-separator-style');
@@ -132,18 +127,105 @@ $theme: $material;
     [part~='subtitle'] {
         color: var-get($theme, 'invalid-subtitle-color')
     }
+
+    [part~='header'] {
+        background: var-get($theme, 'invalid-step-background');
+
+        &:hover {
+            background: var-get($theme, 'invalid-step-hover-background');
+
+            [part~='title'] {
+                color: var-get($theme, 'invalid-title-hover-color');
+            }
+
+            [part~='subtitle'] {
+                color: var-get($theme, 'invalid-subtitle-hover-color')
+            }
+        }
+
+        &:focus,
+		&:focus-within,
+		&:active {
+            background: var-get($theme, 'invalid-step-focus-background');
+
+			[part~='title'] {
+                color: var-get($theme, 'invalid-title-focus-color');
+            }
+
+            [part~='subtitle'] {
+                color: var-get($theme, 'invalid-subtitle-focus-color')
+            }
+		}
+    }
+}
+
+:host([complete]:not([active])) {
+	[part~='header'] {
+        background: var-get($theme, 'complete-step-background');
+
+		&:hover {
+			background: var-get($theme, 'complete-step-hover-background');
+
+            [part~='title'] {
+                color: var-get($theme, 'complete-title-hover-color');
+            }
+
+            [part~='subtitle'] {
+                color: var-get($theme, 'complete-subtitle-hover-color');
+            }
+		}
+
+		&:focus,
+		&:focus-within,
+		&:active {
+			background: var-get($theme, 'complete-step-focus-background');
+
+            [part~='title'] {
+                color: var-get($theme, 'complete-title-focus-color');
+            }
+
+            [part~='subtitle'] {
+                color: var-get($theme, 'complete-subtitle-focus-color');
+            }
+		}
+	}
+
+    [part~='body'] {
+        &::before {
+            border-inline-start-style: var-get($theme, 'complete-step-separator-style');
+            border-inline-start-color: var-get($theme, 'complete-step-separator-color');
+        }
+    }
 }
 
 :host([active]) {
 	[part~='header'] {
+        background: var-get($theme, 'current-step-background');
+
 		&:hover {
 			background: var-get($theme, 'current-step-hover-background');
+
+            [part~='title'] {
+                color: var-get($theme, 'current-title-hover-color');
+            }
+
+            [part~='subtitle'] {
+                color: var-get($theme, 'current-subtitle-hover-color');
+            }
 		}
 
 		&:focus,
 		&:focus-within,
 		&:active {
 			background: var-get($theme, 'current-step-focus-background');
+
+            [part~='title'] {
+                color: var-get($theme, 'current-title-focus-color');
+            }
+
+            [part~='subtitle'] {
+                color: var-get($theme, 'current-subtitle-focus-color');
+            }
 		}
 	}
 
@@ -163,6 +245,12 @@ $theme: $material;
     }
 }
 
+[part~='content'] {
+    @include type-style('body-2');
+
+    color: var-get($theme, 'content-foreground');
+}
+
 [part~='disabled'] {
     &:focus,
     &:focus-visible,
@@ -172,6 +260,14 @@ $theme: $material;
         [part='header'] {
             background: var-get($theme, 'step-background');
         }
+
+        [part~='title'] {
+            color: var-get($theme, 'disabled-title-color');
+        }
+
+        [part~='subtitle'] {
+            color: var-get($theme, 'disabled-subtitle-color');
+        }
     }
 
     [part~='indicator'] {

src/components/stepper/themes/step/shared/step.indigo.scss

@@ -25,12 +25,6 @@ $theme: $indigo;
     }
 }
 
-[part~='content'] {
-    @include type-style('body-2');
-
-    color: var-get($theme, 'content-foreground');
-}
-
 [part~='disabled'] {
     [part~='indicator'] {
         box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline');

src/components/tabs/themes/shared/tab/tab.common.scss

@@ -4,10 +4,12 @@
 $theme: $material;
 
 [part='tab-header'] {
+    --_border-width: #{rem(1px)};
+
     color: var-get($theme, 'item-text-color');
     background: var-get($theme, 'item-background');
     border-radius: var-get($theme, 'border-radius');
-    border: rem(1px) solid var-get($theme, 'border-color');
+    border: var(--_border-width) solid var-get($theme, 'border-color');
 
     ::slotted(igc-icon) {
         color: var-get($theme, 'item-icon-color');

src/components/tabs/themes/shared/tab/tab.material.scss

@@ -9,6 +9,31 @@ $theme: $material;
 
 [part='tab-header'] {
     padding: pad-block(rem(12px)) pad-inline(rem(16px));
+    background: initial;
+
+    &::before,
+    &::after {
+        position: absolute;
+        inset: calc(var(--_border-width) * -1);
+        content: '';
+        border: inherit;
+    }
+
+    &::before {
+        background: var-get($theme, 'item-background');
+        z-index: -2;
+    }
+
+    &::after {
+        z-index: -1;
+    }
+
+    &:hover,
+    &:focus-within {
+        &::after {
+            background: var-get($theme, 'item-hover-background');
+        }
+    }
 }
 
 ::slotted(igc-icon) {

stories/stepper.stories.ts

@@ -167,6 +167,7 @@ const BasicTemplate = ({
     >
       <igc-step invalid>
         <span slot="title">Step1</span>
+        <span slot="subtitle">Required</span>
         <form id="form">
           <igc-input
             label="First Name"
@@ -179,6 +180,7 @@ const BasicTemplate = ({
 
       <igc-step invalid>
         <span slot="title">Step 2</span>
+        <span slot="subtitle">Required</span>
         <form id="form">
           <igc-input
             label="Last Name"