refactor(themes): accessibility color fixes

Author: SisIvanova

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

@@ -132,6 +132,36 @@ $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([active]) {

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"