fix(theming): fix currentColor in EDGE

Author: MPopov

projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss

@@ -55,8 +55,6 @@
 @mixin igx-icon($theme) {
     @include igx-root-css-vars($theme);
 
-    // @debug $theme;
-
     $igx-icon-font-size: --var($theme, 'size');
 
     %igx-icon-display {

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

@@ -7,7 +7,7 @@
 ///
 /// Generates a light action-strip schema.
 /// @type {Map}
-/// @prop {Color} $color [currentColor] - The color used for the actions icons.
+/// @prop {Color} $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), hexrgba: #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.
@@ -28,7 +28,7 @@ $_light-action-strip: extend(
             igx-color: ('grays', 100)
         ),
 
-        color: currentColor,
+        color: "'currentColor'",
 
         delete-action: (
             igx-color: ('error')

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

@@ -16,9 +16,9 @@
 /// @prop {Map} flat-hover-text-color [igx-color: ('secondary', 500)] - The hover text color of a flat button.
 /// @prop {Map} flat-focus-background [igx-color: ('secondary', 400), rgba: .12] - The focus background color of a flat button.
 /// @prop {Map} flat-focus-text-color [igx-color: ('secondary', 500)] - The focus text color of a flat button.
-/// @prop {Color} flat-icon-color [currentColor] - The color of a flat button icon.
-/// @prop {Color} flat-hover-icon-color [currentColor] - The hover color of a flat button icon.
-/// @prop {Color} flat-focus-icon-color [currentColor] - The focus color of a flat button icon.
+/// @prop {Color} flat-icon-color ["'currentColor'"] - The color of a flat button icon.
+/// @prop {Color} flat-hover-icon-color ["'currentColor'"] - The hover color of a flat button icon.
+/// @prop {Color} flat-focus-icon-color ["'currentColor'"] - The focus color of a flat button icon.
 ///
 /// @prop {Color} outlined-background [transparent] - The background color of an outlined button
 /// @prop {Map} outlined-text-color [igx-color: ('secondary', 500)] - The idle text color of an outlined button.
@@ -28,19 +28,19 @@
 /// @prop {Map} outlined-hover-text-color [igx-color: ('secondary', 500)] - The hover text color of an outlined button.
 /// @prop {Map} outlined-focus-background [igx-color: ('secondary', 400), rgba: .12] - The focus background color of an outlined button.
 /// @prop {Map} outlined-focus-text-color [igx-color: ('secondary', 500)] - The focus text color of an outlined button.
-/// @prop {Color} outlined-icon-color [currentColor] - The color of a outlined button icon.
-/// @prop {Color} outlined-hover-icon-color [currentColor] - The hover color of a outlined button icon.
-/// @prop {Color} outlined-focus-icon-color [currentColor] - The focus color of a outlined button icon.
+/// @prop {Color} outlined-icon-color ["'currentColor'"] - The color of a outlined button icon.
+/// @prop {Color} outlined-hover-icon-color ["'currentColor'"] - The hover color of a outlined button icon.
+/// @prop {Color} outlined-focus-icon-color ["'currentColor'"] - The focus color of a outlined button icon.
 ///
 /// @prop {Map} raised-background [igx-color: ('secondary', 500)] - The background color of an raised button.
 /// @prop {Map} raised-text-color [igx-contrast-color: ('secondary', 500)] - The idle text color of a raised button.
 /// @prop {Map} raised-hover-background [igx-color: ('secondary', 300)] - The hover background of a raised button.
 /// @prop {Map} raised-hover-text-color [igx-contrast-color: ('secondary', 300)] - The hover text color of a raised button.
 /// @prop {Map} raised-focus-background [igx-color: ('secondary', 300)] - The focus background color of a raised button.
 /// @prop {Map} raised-focus-text-color [igx-contrast-color: ('secondary', 300)] - The focus text color of a raised button.
-/// @prop {Color} raised-icon-color [currentColor] - The color of a raised button icon.
-/// @prop {Color} raised-hover-icon-color [currentColor] - The hover color of a raised button icon.
-/// @prop {Color} raised-focus-icon-color [currentColor] - The focus color of a raised button icon.
+/// @prop {Color} raised-icon-color ["'currentColor'"] - The color of a raised button icon.
+/// @prop {Color} raised-hover-icon-color ["'currentColor'"] - The hover color of a raised button icon.
+/// @prop {Color} raised-focus-icon-color ["'currentColor'"] - The focus color of a raised button icon.
 ///
 /// @prop {Map} fab-background [igx-color: ('secondary', 500)] - The background color of a floating action button.
 /// @prop {Map} fab-text-color [igx-contrast-color: ('secondary', 500)] - The text color of a floating action button.
@@ -86,17 +86,17 @@ $_light-button: extend(
             igx-color: ('secondary', 500)
         ),
 
-        flat-icon-color: currentColor,
-        flat-hover-icon-color: currentColor,
-        flat-focus-icon-color: currentColor,
+        flat-icon-color: "'currentColor'",
+        flat-hover-icon-color: "'currentColor'",
+        flat-focus-icon-color: "'currentColor'",
 
-        raised-icon-color: currentColor,
-        raised-hover-icon-color: currentColor,
-        raised-focus-icon-color: currentColor,
+        raised-icon-color: "'currentColor'",
+        raised-hover-icon-color: "'currentColor'",
+        raised-focus-icon-color: "'currentColor'",
 
-        outlined-icon-color: currentColor,
-        outlined-hover-icon-color: currentColor,
-        outlined-focus-icon-color: currentColor,
+        outlined-icon-color: "'currentColor'",
+        outlined-hover-icon-color: "'currentColor'",
+        outlined-focus-icon-color: "'currentColor'",
 
         flat-hover-background: (
             igx-color: ('secondary', 500),

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

@@ -30,7 +30,7 @@
 /// @prop {Map} focus-selected-background [igx-color: ('grays', 400)] - The selected chip focus background color.
 /// @prop {Color} focus-selected-border-color [transparent] - The selected chip focus border color.
 /// @prop {Number} ghost-elevation [8] - The elevation level for the chip's ghost (dragging mode). Between 0-24.
-/// @prop {color} remove-icon-color [currentColor] - The remove icon color for the chip.
+/// @prop {color} remove-icon-color ["'currentColor'"] - The remove icon color for the chip.
 /// @prop {Map} remove-icon-color-focus [igx-color: ('error')] - The remove icon color on focus for the chip.
 /// @prop {color} $focus-border-color [transparent] - The chip focus border color.
 ///
@@ -44,7 +44,7 @@ $_light-chip: extend(
     (
         variant:'material',
 
-        remove-icon-color: currentColor,
+        remove-icon-color: "'currentColor'",
 
         remove-icon-color-focus: (
             igx-color: ('error')

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss

@@ -13,7 +13,7 @@
 /// @property {Map} focus-background-color [igx-color: ('grays', 100)] - The background color when a summary item is on focus.
 /// @property {map} label-color [igx-color: ('primary', 500)] - The summaries label color.
 /// @property {map} label-hover-color [igx-color: ('primary', 700)] - The summaries hover label color.
-/// @property {Color} result-color [currentColor] - The summaries value/result color.
+/// @property {Color} result-color ["'currentColor'"] - The summaries value/result color.
 /// @property {map} border-color [igx-color: ('grays', 400)] - The summaries border color.
 /// @property {String} pinned-border-width [2px] - The border width of the summary panel.
 /// @property {String} pinned-border-style [solid] - The border style of the summary panel.
@@ -38,7 +38,7 @@ $_light-grid-summary: extend(
             igx-color: ('primary', 700)
         ),
 
-        result-color: currentColor,
+        result-color: "'currentColor'",
 
         border-color: (
             igx-color: ('grays', 400)

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

@@ -9,16 +9,16 @@
 /// Generates a light icon schema.
 /// @type {Map}
 ///
-/// @property {Color} color [currentColor] - The icon color.
+/// @property {Color} color ["'currentColor'"] - The icon color.
 /// @property {String} size [rem(24px)] - The icon size.
-/// @property {Color} disabled-color [currentColor] - The disabled icon color.
+/// @property {Color} disabled-color ["'currentColor'"] - The disabled icon color.
 ///
 /// @see $default-palette
 
 $_light-icon: (
-    color: currentColor,
+    color: "'"'currentColor'"'",
     size: rem(24px),
-    disabled-color: currentColor
+    disabled-color: "'currentColor'"
 );
 
 /// Generates a fluent icon schema.

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

@@ -21,21 +21,21 @@
 /// @property {Map} item-text-color-hover [igx-color: 'surface', text-contrast: (), rgba: .74] - The list item text color.
 /// @property {Map} item-text-color-active [igx-color: 'surface', text-contrast: (), rgba: .74] - The active list item text color.
 ///
-/// @property {Color} item-title-color [currentColor] - The list item title color.
-/// @property {Color} item-title-color-hover [currentColor] - The list item title hover color.
-/// @property {Color} item-title-color-active [currentColor] - The list item title active color.
+/// @property {Color} item-title-color ["'currentColor'"] - The list item title color.
+/// @property {Color} item-title-color-hover ["'currentColor'"] - The list item title hover color.
+/// @property {Color} item-title-color-active ["'currentColor'"] - The list item title active color.
 ///
-/// @property {Color} item-subtitle-color [currentColor] - The list item subtitle color.
-/// @property {Color} item-subtitle-color-hover [currentColor] - The list item subtitle hover color.
-/// @property {Color} item-subtitle-color-active [currentColor] - The list item subtitle active color.
+/// @property {Color} item-subtitle-color ["'currentColor'"] - The list item subtitle color.
+/// @property {Color} item-subtitle-color-hover ["'currentColor'"] - The list item subtitle hover color.
+/// @property {Color} item-subtitle-color-active ["'currentColor'"] - The list item subtitle active color.
 ///
-/// @property {Color} item-action-color [currentColor] - The list item action color.
-/// @property {Color} item-action-color-hover [currentColor] - The list item action hover color.
-/// @property {Color} item-action-color-active [currentColor] - The list item action active color.
+/// @property {Color} item-action-color ["'currentColor'"] - The list item action color.
+/// @property {Color} item-action-color-hover ["'currentColor'"] - The list item action hover color.
+/// @property {Color} item-action-color-active ["'currentColor'"] - The list item action active color.
 ///
-/// @property {Color} item-thumbnail-color [currentColor] - The list item thumbnail color.
-/// @property {Color} item-thumbnail-color-hover [currentColor] - The list item thumbnail hover color.
-/// @property {Color} item-thumbnail-color-active [currentColor] - The list item thumbnail active color.
+/// @property {Color} item-thumbnail-color ["'currentColor'"] - The list item thumbnail color.
+/// @property {Color} item-thumbnail-color-hover ["'currentColor'"] - The list item thumbnail hover color.
+/// @property {Color} item-thumbnail-color-active ["'currentColor'"] - The list item thumbnail active color.
 ///
 /// @prop {Number} border-radius [0] - The border radius fraction, between 0-1 to be used for list component.
 /// @prop {Number} item-border-radius [0] - The border radius fraction, between 0-1 to be used for list item.
@@ -88,29 +88,29 @@ $_light-list: extend(
             rgba: .74
         ),
 
-        item-title-color: currentColor,
+        item-title-color: "'currentColor'",
 
-        item-title-color-hover: currentColor,
+        item-title-color-hover: "'currentColor'",
 
-        item-title-color-active: currentColor,
+        item-title-color-active: "'currentColor'",
 
-        item-action-color: currentColor,
+        item-action-color: "'currentColor'",
 
-        item-action-color-hover: currentColor,
+        item-action-color-hover: "'currentColor'",
 
-        item-action-color-active: currentColor,
+        item-action-color-active: "'currentColor'",
 
-        item-subtitle-color: currentColor,
+        item-subtitle-color: "'currentColor'",
 
-        item-subtitle-color-hover: currentColor,
+        item-subtitle-color-hover: "'currentColor'",
 
-        item-subtitle-color-active: currentColor,
+        item-subtitle-color-active: "'currentColor'",
 
-        item-thumbnail-color: currentColor,
+        item-thumbnail-color: "'currentColor'",
 
-        item-thumbnail-color-hover: currentColor,
+        item-thumbnail-color-hover: "'currentColor'",
 
-        item-thumbnail-color-active: currentColor,
+        item-thumbnail-color-active: "'currentColor'",
 
         border-color: transparent,