fix(button/btn-group): bind icon colors to foreground colors in theme (#14217)

* fix(button/btn-group): bind icon colors to foreground colors in theme

* fix(button): add if-statement for icon-color-hover

* fix(button): use active-foreground for icon color in active state

---------

Co-authored-by: Simeon Simeonoff <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>

Author: 3 people

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -73,12 +73,12 @@
     $shadow: null,
 
     $item-text-color: null,
-    $item-icon-color: null,
+    $item-icon-color: $item-text-color,
     $item-background: null,
     $item-border-color: null,
 
     $item-hover-text-color: null,
-    $item-hover-icon-color: null,
+    $item-hover-icon-color: $item-hover-text-color,
     $item-hover-background: null,
     $item-hover-border-color: null,
 
@@ -95,19 +95,19 @@
     $item-disabled-border: null,
 
     $item-selected-text-color: null,
-    $item-selected-icon-color: null,
+    $item-selected-icon-color: $item-selected-text-color,
     $item-selected-background: null,
     $item-selected-border-color: null,
 
     $item-selected-hover-text-color: null,
-    $item-selected-hover-icon-color: null,
+    $item-selected-hover-icon-color: $item-selected-hover-text-color,
     $item-selected-hover-background: null,
     $item-selected-hover-border-color: null,
     $item-selected-focus-background: null,
     $item-selected-focus-hover-background: null,
 
     $disabled-selected-text-color: null,
-    $disabled-selected-icon-color: null,
+    $disabled-selected-icon-color: $disabled-selected-text-color,
     $disabled-selected-background: null,
     $disabled-selected-border-color: null,
 ) {
@@ -140,7 +140,7 @@
 
     @if not($item-selected-background) and $item-background {
         @if meta.type-of($item-background) == 'color' {
-            $item-selected-text-color: text-contrast($item-background);
+            $item-selected-background: text-contrast($item-background);
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -65,8 +65,8 @@
     $hover-background: null,
     $hover-foreground: null,
 
-    $icon-color: null,
-    $icon-color-hover: null,
+    $icon-color: $foreground,
+    $icon-color-hover: $hover-foreground,
 
     $focus-background: null,
     $focus-foreground: null,
@@ -96,7 +96,7 @@
 
     $disabled-background: null,
     $disabled-foreground: null,
-    $disabled-icon-color: null,
+    $disabled-icon-color: $disabled-foreground,
     $disabled-border-color: null,
     $size: null,
 ) {
@@ -139,6 +139,12 @@
             }
         }
 
+        @if not($icon-color-hover) and $hover-foreground {
+            @if meta.type-of($hover-background) == 'color' {
+                $icon-color-hover: $hover-foreground;
+            }
+        }
+
         @if not($focus-background) and $background {
             $focus-background: color.scale($background, $lightness: 5%);
         }
@@ -761,6 +767,10 @@
             background: var-get($contained-theme, 'active-background');
             border-color: var-get($contained-theme, 'active-border-color');
             box-shadow: var-get($contained-theme, 'hover-shadow');
+
+            igx-icon {
+                color: var-get($contained-theme, 'active-foreground');
+            }
         }
 
         @if ($variant == 'indigo-design') {
@@ -898,6 +908,10 @@
             border-color: var-get($fab-theme, 'active-border-color');
             box-shadow: var-get($fab-theme, 'focus-shadow');
 
+            igx-icon {
+                color: var-get($fab-theme, 'active-foreground');
+            }
+
             @if ($variant == 'indigo-design') {
                 igx-icon {
                     color: var-get($outlined-theme, 'icon-color-hover');