Merge pull request #10563 from IgniteUI/mpopov/hardcoded-colors

refactor(grid): remove hardcoded colors

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

@@ -25,11 +25,11 @@ $dark-bootstrap-grid-summary: $bootstrap-grid-summary;
 
 /// Generates a dark indigo grid-summary schema.
 /// @type {Map}
-/// @property {Color} background-color [igx-color: 'surface'] - The summaries background color is inherited form igx-grid footer.
+/// @property {Map} background-color [igx-color: 'surface'] - The summaries background color is inherited form igx-grid footer.
 /// @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', 200)] - The summaries label color.
 /// @property {map} label-hover-color [igx-color: ('primary', 100)] - The summaries hover label color.
-/// @property {Color} result-color [igx-color: 'surface'] - The summaries value/result color.
+/// @property {Map} result-color [igx-color: 'surface'] - The summaries value/result color.
 /// @property {Map} pinned-border-color [igx-color: ('primary', 200)] - The border color of the summary panel.
 /// @requires {function} extend
 /// @requires $indigo-grid-summary

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss

@@ -7,46 +7,32 @@
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
 
-/// Generates a base dark grid-toolbar schema.
-/// @type {Map}
-/// @prop {Map} background-color [#222] - The toolbar background color.
-/// @prop {Map} dropdown-background [#222] - The toolbar drop-down background color.
-$base-dark-grid-toolbar: (
-    background-color: #222,
-    dropdown-background: #222
-);
-
 /// Generates a dark grid-toolbar schema based on a mix of $light-grid-toolbar and $base-dark-grid-toolbar.
 /// @type {Map}
 /// @requires {function} extend
 /// @requires $light-grid-toolbar
-/// @requires $base-dark-grid-toolbar
 /// @see $default-palette
-$dark-grid-toolbar: extend($light-grid-toolbar, $base-dark-grid-toolbar);
+$dark-grid-toolbar: extend($light-grid-toolbar);
 
 /// Generates a dark fluent grid-toolbar schema based on a mix of $fluent-grid-toolbar and $base-dark-grid-toolbar..
 /// @type {Map}
 /// @requires {function} extend
 /// @requires $fluent-grid-toolbar
-/// @requires $base-dark-grid-toolbar
-$dark-fluent-grid-toolbar: extend($fluent-grid-toolbar, $base-dark-grid-toolbar);
+$dark-fluent-grid-toolbar: extend($fluent-grid-toolbar);
 
 /// Generates a dark bootstrap grid-toolbar schema based on a mix of $bootstrap-grid-toolbar and $base-dark-grid-toolbar..
 /// @type {Map}
 /// @requires {function} extend
 /// @requires $bootstrap-grid-toolbar
-/// @requires $base-dark-grid-toolbar
-$dark-bootstrap-grid-toolbar: extend($bootstrap-grid-toolbar, $base-dark-grid-toolbar);
+$dark-bootstrap-grid-toolbar: extend($bootstrap-grid-toolbar);
 
 /// Generates a dark indigo grid-toolbar schema.
 /// @type {Map}
 /// @property {Map} background-color [igx-color: 'surface'] - The toolbar background color.
 /// @requires {function} extend
 /// @requires $indigo-grid-toolbar
-/// @requires $base-dark-grid-toolbar
 $dark-indigo-grid-toolbar: extend(
     $indigo-grid-toolbar,
-    $base-dark-grid-toolbar,
     (
         background-color: (
             igx-color: 'surface',

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

@@ -8,11 +8,11 @@
 
 /// Generates a light grid-filtering schema.
 /// @type {Map}
-/// @prop {Color} menu-background [#fff] - The idle menu background color.
+/// @prop {Color} menu-background [igx-color: ('surface')] - The idle menu background color.
 /// @prop {Color} toggle-background [transparent] - The idle toggle background color.
 /// @prop {Color} toggle-filtered-background [transparent] - The filtered toggle background color.
 /// @prop {Color} toggle-icon-color [inherit] - The idle toggle icon color.
-/// @prop {Color} toggle-icon-hover-color [#fff] - The hover toggle icon color.
+/// @prop {Color} toggle-icon-hover-color [igx-contrast-color: ('grays', 900)] - The hover toggle icon color.
 /// @prop {Color} menu-button-disabled-text-color [initial] - The menu disabled button text color.
 /// @prop {Map} toggle-icon-active-color [igx-contrast-color: ('secondary', 500)] - The active toggle icon color.
 /// @prop {Map} toggle-icon-filtered-color [igx-color: ('secondary', 500)] - The filtered toggle icon color.
@@ -22,11 +22,15 @@
 /// @prop {Map} menu-button-text-color [igx-color: ('secondary', 500)] - The menu button text color.
 /// @see $default-palette
 $light-grid-filtering: (
-    menu-background: #fff,
+    menu-background: (
+        igx-color: ('surface')
+    ),
     toggle-background: transparent,
     toggle-filtered-background: transparent,
     toggle-icon-color: inherit,
-    toggle-icon-hover-color: #fff,
+    toggle-icon-hover-color: (
+        igx-contrast-color: ('grays', 900)
+    ),
     menu-button-disabled-text-color: initial,
 
     toggle-icon-active-color: (

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

@@ -51,9 +51,9 @@ $light-grid-summary: (
 /// Generates a fluent grid-summary schema.
 /// @type {Map}
 ///
-/// @property {Color} background-color [ igx-color: ('surface')] - The summaries background color is inherited from the grid footer.
-/// @property {map} border-color [ igx-color: ('grays', 100)] - The summaries border color.
-/// @property {map} pinned-border-color [igx-color: ('grays', 300), to-opaque: #fff] - The border color of the summary panel.
+/// @property {Map} background-color [igx-color: ('surface')] - The summaries background color is inherited from the grid footer.
+/// @property {map} border-color [igx-color: ('grays', 100)] - The summaries border color.
+/// @property {map} pinned-border-color [igx-color: ('grays', 300)] - The border color of the summary panel.
 ///
 /// @requires {function} extend
 /// @requires {Map} $light-grid-summary
@@ -69,8 +69,7 @@ $fluent-grid-summary: extend(
         ),
 
         pinned-border-color: (
-            igx-color: ('grays', 300),
-            to-opaque: #fff
+            igx-color: ('grays', 300)
         ),
     )
 );
@@ -82,7 +81,7 @@ $bootstrap-grid-summary: $light-grid-summary;
 
 /// Generates an indigo grid-summary schema.
 /// @type {Map}
-/// @property {Color} background-color [igx-color: ('grays', 100), to-opaque: ()] - The summaries background color is inherited from the grid footer.
+/// @property {Map} background-color [igx-color: ('grays', 100)] - The summaries background color is inherited from the grid footer.
 /// @property {map} label-hover-color [igx-color: ('primary', 900)] - The summaries hover label color.
 /// @property {map} border-color [igx-color: ('primary', 50)] - The summaries border color.
 /// @property {map} pinned-border-color [igx-color: ('primary', 200)] - The border color of the summary panel.
@@ -94,8 +93,7 @@ $indigo-grid-summary: extend(
         variant: 'indigo-design',
 
         background-color: (
-            igx-color: ('grays', 100),
-            to-opaque: ()
+            igx-color: ('grays', 100)
         ),
 
         label-hover-color: (

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

@@ -10,8 +10,7 @@
 /// @type {Map}
 /// @property {Map} background-color [igx-color: ('grays', 50)] - The toolbar background color.
 /// @property {Map} title-text-color [igx-color: ('grays', 600)] - The toolbar title text color.
-///
-/// @property {Color} dropdown-background [#fff] - The toolbar drop-down background color.
+/// @property {Map} dropdown-background [igx-color: ('surface')] - The toolbar drop-down background color.
 /// @property {Map} item-text-color [igx-color: ('grays', 600)] - The toolbar drop-down item text color.
 /// @property {Map} item-hover-background [igx-color: ('grays', 100)] - The toolbar drop-down item hover background color.
 /// @property {Map} item-hover-text-color [igx-color: ('grays', 600)] - The toolbar drop-down item hover text color.
@@ -29,7 +28,9 @@ $light-grid-toolbar: (
         igx-color: ('grays', 600)
     ),
 
-    dropdown-background: #fff,
+    dropdown-background: (
+        igx-color: ('surface')
+    ),
 
     item-text-color: (
         igx-color: ('grays', 600)