feat(button-group): update button group styles

Author: didimmova

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

@@ -38,6 +38,7 @@ $theme: $material;
 
 :host(:hover) {
     [part~='toggle'] {
+        z-index: 1;
         color: var-get($theme, 'item-hover-text-color');
         background: var-get($theme, 'item-hover-background');
         border-color: var-get($theme, 'item-hover-border-color');
@@ -51,30 +52,57 @@ $theme: $material;
 :host([part='toggle focused']),
 :host(:focus-within) {
     [part~='toggle'] {
+        z-index: 1;
         color: var-get($theme, 'item-focused-text-color');
         background: var-get($theme, 'item-focused-background');
         border-color: var-get($theme, 'item-focused-border-color');
 
         &:hover {
             background: var-get($theme, 'item-focused-hover-background');
             border-color: var-get($theme, 'item-focused-hover-border-color');
+            color: var-get($theme, 'item-focused-hover-text-color');
         }
 
         &:active {
             background: var-get($theme, 'item-active-background');
+            border-color: var-get($theme, 'item-active-border-color');
+            color: var-get($theme, 'item-hover-text-color');
+
+            ::slotted(igc-icon) {
+                color: var-get($theme, 'item-hover-icon-color');
+            }
         }
     }
+
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-focused-text-color');
+    }
+}
+
+:host([part='toggle focused']:hover),
+:host(:focus-within:hover) {
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-focused-hover-text-color');
+    }
 }
 
 :host(:active),
 [part~='toggle']:active {
     [part~='toggle'] {
+        z-index: 2;
         background: var-get($theme, 'item-active-background');
+        border-color: var-get($theme, 'item-active-border-color');
+        color: var-get($theme, 'item-hover-text-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($theme, 'item-hover-icon-color');
+        }
     }
 }
 
 :host([selected]) {
     [part~='toggle'] {
+        z-index: 3;
         color: var-get($theme, 'item-selected-text-color');
         background: var-get($theme, 'item-selected-background');
         border-color: var-get($theme, 'item-selected-border-color');
@@ -100,23 +128,39 @@ $theme: $material;
 :host([selected][part='toggle focused']),
 :host([selected]:focus-within) {
     [part~='toggle'] {
+        color: var-get($theme, 'item-selected-text-color');
         background: var-get($theme, 'item-selected-focus-background');
         border-color: var-get($theme, 'item-focused-hover-border-color');
 
         &:hover {
             background: var-get($theme, 'item-selected-focus-hover-background');
+            color: var-get($theme, 'item-selected-hover-text-color');
+            border-color: var-get($theme, 'item-selected-border-color');
         }
 
         &:active {
             background: var-get($theme, 'item-selected-active-background');
+            border-color: var-get($theme, 'item-selected-active-border-color');
         }
     }
+
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-selected-icon-color');
+    }
+}
+
+:host([selected][part='toggle focused']:hover),
+:host([selected]:focus-within:hover) {
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-selected-hover-icon-color');
+    }
 }
 
 :host([selected]:active),
 :host([selected]) [part~='toggle']:active {
     [part~='toggle'] {
         background: var-get($theme, 'item-selected-active-background');
+        border-color: var-get($theme, 'item-selected-active-border-color');
     }
 }
 

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

@@ -30,6 +30,27 @@ $group-item-border-thickness: rem(1px);
     }
 }
 
+:host([part='toggle focused']),
+:host(:focus-within) {
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-icon-color');
+    }
+}
+
+:host([part='toggle focused']:hover),
+:host(:focus-within:hover) {
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-hover-icon-color');
+    }
+}
+
+:host([selected][part='toggle focused']:hover),
+:host([selected]:focus-within:hover) {
+    [part~='toggle'] {
+        border-color: var-get($theme, 'item-selected-hover-border-color');
+    }
+}
+
 :host([selected]:disabled),
 :host([selected][disabled]) {
     [part~='toggle'] {

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

@@ -2,3 +2,15 @@
 @use '../../light/themes' as *;
 
 $theme: $material;
+
+:host([selected][part='toggle focused']),
+:host([selected]:focus-within) {
+    [part~='toggle'] {
+        color: var-get($theme, 'item-selected-hover-text-color');
+        border-color: var-get($theme, 'item-selected-hover-border-color');
+    }
+
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-selected-hover-icon-color');
+    }
+}