fix(action-strip): icon color override (#9804)

Author: SisIvanova

CHANGELOG.md

@@ -83,6 +83,10 @@ All notable changes for each version of this project will be documented in this
         </igx-expansion-panel>
     ```
 
+### Themes
+- **Breaking Change**  - The `$color` property of the `igx-action-strip-theme` has been renamed as follows:
+    - `$color` -> `$icon-color`
+
 ## 12.0.3
 
 ### General

projects/igniteui-angular/migrations/update-12_1_0/changes/theme-props.json

@@ -0,0 +1,10 @@
+{
+    "$schema": "../../common/schema/theme-props.schema.json",
+    "changes": [
+        {
+            "name": "$color",
+            "replaceWith": "$icon-color",
+            "owner": "igx-action-strip-theme"
+        }
+    ]
+}

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -9,7 +9,7 @@
 /// @param {Map} $palette [null] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
 ///
-/// @param {Color} $color [null] - The color used for the actions icons.
+/// @param {Color} $icon-color [null] - The color used for the actions icons.
 /// @param {Color} $background [null] - The color used for the action strip component content background.
 /// @param {Color} $actions-background [null] - The color used for the actions background.
 /// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.
@@ -30,7 +30,7 @@
 
     $background: null,
     $actions-background: null,
-    $color: null,
+    $icon-color: null,
     $delete-action: null,
     $actions-border-radius: null,
 ) {
@@ -49,16 +49,16 @@
         if($actions-border-radius, $actions-border-radius, map-get($action-strip-schema, 'actions-border-radius')), 0, 24px
     );
 
-    @if not($color) and $actions-background {
-        $color: text-contrast($actions-background);
+    @if not($icon-color) and $actions-background {
+        $icon-color: text-contrast($actions-background);
     }
 
     @return extend($theme, (
         name: $name,
         palette: $palette,
         background: $background,
         actions-background: $actions-background,
-        color: $color,
+        icon-color: $icon-color,
         delete-action: $delete-action,
         actions-border-radius: $actions-border-radius,
     ));
@@ -175,7 +175,7 @@
         justify-content: center;
         pointer-events: all;
         position: relative;
-        color: --var($theme, 'color');
+        color: --var($theme, 'icon-color');
         border-radius: --var($theme, 'actions-border-radius');
         background: --var($theme, 'actions-background');
         max-height: 36px;
@@ -185,12 +185,12 @@
         }
 
         igx-icon {
-            color: --var($theme, 'color');
+            color: --var($theme, 'icon-color');
         }
 
         [igxButton='icon'] {
             igx-icon {
-                color: --var($theme, 'color');
+                color: --var($theme, 'icon-color');
             }
 
             @if $variant == 'indigo-design' {

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_action-strip.scss

@@ -8,7 +8,7 @@
 
 /// Generates a light action-strip schema.
 /// @type {Map}
-/// @prop {Color} color ["'currentColor'"] - The color used for the actions icons.
+/// @prop {Color} icon-color ["'currentColor'"] - The color used for the actions icons.
 /// @prop {Map} background [igx-color: ('grays', 100] - The color used for the action strip component content background.
 /// @prop {Map} actions-background [igx-color: ('grays', 200), to-opaque: #fff, rgba: .9] - The color used for actions background.
 /// @prop {Map} delete-action [igx-color: ('error')] - The color used for the delete icon in action strip component.
@@ -31,7 +31,7 @@ $_light-action-strip: extend(
             igx-color: ('grays', 100)
         ),
 
-        color: "'currentColor'",
+        icon-color: "'currentColor'",
 
         delete-action: (
             igx-color: ('error')
@@ -85,7 +85,7 @@ $_indigo-action-strip: extend(
             igx-color: ('primary')
         ),
 
-        color: (
+        icon-color: (
             igx-contrast-color: 'primary'
         ),
     )