Skip to content

Commit 753718e

Browse files
kdinevkdinev
authored
Merge pull request #10563 from IgniteUI/mpopov/hardcoded-colors
refactor(grid): remove hardcoded colors
2 parents c195aa4 + 03bf65e commit 753718e

File tree

5 files changed

+23
-34
lines changed

5 files changed

+23
-34
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ $dark-bootstrap-grid-summary: $bootstrap-grid-summary;
2525

2626
/// Generates a dark indigo grid-summary schema.
2727
/// @type {Map}
28-
/// @property {Color} background-color [igx-color: 'surface'] - The summaries background color is inherited form igx-grid footer.
28+
/// @property {Map} background-color [igx-color: 'surface'] - The summaries background color is inherited form igx-grid footer.
2929
/// @property {Map} focus-background-color [igx-color: ('grays', 100)] - The background color when a summary item is on focus.
3030
/// @property {Map} label-color [igx-color: ('primary', 200)] - The summaries label color.
3131
/// @property {map} label-hover-color [igx-color: ('primary', 100)] - The summaries hover label color.
32-
/// @property {Color} result-color [igx-color: 'surface'] - The summaries value/result color.
32+
/// @property {Map} result-color [igx-color: 'surface'] - The summaries value/result color.
3333
/// @property {Map} pinned-border-color [igx-color: ('primary', 200)] - The border color of the summary panel.
3434
/// @requires {function} extend
3535
/// @requires $indigo-grid-summary

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

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,46 +7,32 @@
77
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
88
////
99

10-
/// Generates a base dark grid-toolbar schema.
11-
/// @type {Map}
12-
/// @prop {Map} background-color [#222] - The toolbar background color.
13-
/// @prop {Map} dropdown-background [#222] - The toolbar drop-down background color.
14-
$base-dark-grid-toolbar: (
15-
background-color: #222,
16-
dropdown-background: #222
17-
);
18-
1910
/// Generates a dark grid-toolbar schema based on a mix of $light-grid-toolbar and $base-dark-grid-toolbar.
2011
/// @type {Map}
2112
/// @requires {function} extend
2213
/// @requires $light-grid-toolbar
23-
/// @requires $base-dark-grid-toolbar
2414
/// @see $default-palette
25-
$dark-grid-toolbar: extend($light-grid-toolbar, $base-dark-grid-toolbar);
15+
$dark-grid-toolbar: extend($light-grid-toolbar);
2616

2717
/// Generates a dark fluent grid-toolbar schema based on a mix of $fluent-grid-toolbar and $base-dark-grid-toolbar..
2818
/// @type {Map}
2919
/// @requires {function} extend
3020
/// @requires $fluent-grid-toolbar
31-
/// @requires $base-dark-grid-toolbar
32-
$dark-fluent-grid-toolbar: extend($fluent-grid-toolbar, $base-dark-grid-toolbar);
21+
$dark-fluent-grid-toolbar: extend($fluent-grid-toolbar);
3322

3423
/// Generates a dark bootstrap grid-toolbar schema based on a mix of $bootstrap-grid-toolbar and $base-dark-grid-toolbar..
3524
/// @type {Map}
3625
/// @requires {function} extend
3726
/// @requires $bootstrap-grid-toolbar
38-
/// @requires $base-dark-grid-toolbar
39-
$dark-bootstrap-grid-toolbar: extend($bootstrap-grid-toolbar, $base-dark-grid-toolbar);
27+
$dark-bootstrap-grid-toolbar: extend($bootstrap-grid-toolbar);
4028

4129
/// Generates a dark indigo grid-toolbar schema.
4230
/// @type {Map}
4331
/// @property {Map} background-color [igx-color: 'surface'] - The toolbar background color.
4432
/// @requires {function} extend
4533
/// @requires $indigo-grid-toolbar
46-
/// @requires $base-dark-grid-toolbar
4734
$dark-indigo-grid-toolbar: extend(
4835
$indigo-grid-toolbar,
49-
$base-dark-grid-toolbar,
5036
(
5137
background-color: (
5238
igx-color: 'surface',

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88

99
/// Generates a light grid-filtering schema.
1010
/// @type {Map}
11-
/// @prop {Color} menu-background [#fff] - The idle menu background color.
11+
/// @prop {Color} menu-background [igx-color: ('surface')] - The idle menu background color.
1212
/// @prop {Color} toggle-background [transparent] - The idle toggle background color.
1313
/// @prop {Color} toggle-filtered-background [transparent] - The filtered toggle background color.
1414
/// @prop {Color} toggle-icon-color [inherit] - The idle toggle icon color.
15-
/// @prop {Color} toggle-icon-hover-color [#fff] - The hover toggle icon color.
15+
/// @prop {Color} toggle-icon-hover-color [igx-contrast-color: ('grays', 900)] - The hover toggle icon color.
1616
/// @prop {Color} menu-button-disabled-text-color [initial] - The menu disabled button text color.
1717
/// @prop {Map} toggle-icon-active-color [igx-contrast-color: ('secondary', 500)] - The active toggle icon color.
1818
/// @prop {Map} toggle-icon-filtered-color [igx-color: ('secondary', 500)] - The filtered toggle icon color.
@@ -22,11 +22,15 @@
2222
/// @prop {Map} menu-button-text-color [igx-color: ('secondary', 500)] - The menu button text color.
2323
/// @see $default-palette
2424
$light-grid-filtering: (
25-
menu-background: #fff,
25+
menu-background: (
26+
igx-color: ('surface')
27+
),
2628
toggle-background: transparent,
2729
toggle-filtered-background: transparent,
2830
toggle-icon-color: inherit,
29-
toggle-icon-hover-color: #fff,
31+
toggle-icon-hover-color: (
32+
igx-contrast-color: ('grays', 900)
33+
),
3034
menu-button-disabled-text-color: initial,
3135

3236
toggle-icon-active-color: (

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,9 @@ $light-grid-summary: (
5151
/// Generates a fluent grid-summary schema.
5252
/// @type {Map}
5353
///
54-
/// @property {Color} background-color [ igx-color: ('surface')] - The summaries background color is inherited from the grid footer.
55-
/// @property {map} border-color [ igx-color: ('grays', 100)] - The summaries border color.
56-
/// @property {map} pinned-border-color [igx-color: ('grays', 300), to-opaque: #fff] - The border color of the summary panel.
54+
/// @property {Map} background-color [igx-color: ('surface')] - The summaries background color is inherited from the grid footer.
55+
/// @property {map} border-color [igx-color: ('grays', 100)] - The summaries border color.
56+
/// @property {map} pinned-border-color [igx-color: ('grays', 300)] - The border color of the summary panel.
5757
///
5858
/// @requires {function} extend
5959
/// @requires {Map} $light-grid-summary
@@ -69,8 +69,7 @@ $fluent-grid-summary: extend(
6969
),
7070

7171
pinned-border-color: (
72-
igx-color: ('grays', 300),
73-
to-opaque: #fff
72+
igx-color: ('grays', 300)
7473
),
7574
)
7675
);
@@ -82,7 +81,7 @@ $bootstrap-grid-summary: $light-grid-summary;
8281

8382
/// Generates an indigo grid-summary schema.
8483
/// @type {Map}
85-
/// @property {Color} background-color [igx-color: ('grays', 100), to-opaque: ()] - The summaries background color is inherited from the grid footer.
84+
/// @property {Map} background-color [igx-color: ('grays', 100)] - The summaries background color is inherited from the grid footer.
8685
/// @property {map} label-hover-color [igx-color: ('primary', 900)] - The summaries hover label color.
8786
/// @property {map} border-color [igx-color: ('primary', 50)] - The summaries border color.
8887
/// @property {map} pinned-border-color [igx-color: ('primary', 200)] - The border color of the summary panel.
@@ -94,8 +93,7 @@ $indigo-grid-summary: extend(
9493
variant: 'indigo-design',
9594

9695
background-color: (
97-
igx-color: ('grays', 100),
98-
to-opaque: ()
96+
igx-color: ('grays', 100)
9997
),
10098

10199
label-hover-color: (

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@
1010
/// @type {Map}
1111
/// @property {Map} background-color [igx-color: ('grays', 50)] - The toolbar background color.
1212
/// @property {Map} title-text-color [igx-color: ('grays', 600)] - The toolbar title text color.
13-
///
14-
/// @property {Color} dropdown-background [#fff] - The toolbar drop-down background color.
13+
/// @property {Map} dropdown-background [igx-color: ('surface')] - The toolbar drop-down background color.
1514
/// @property {Map} item-text-color [igx-color: ('grays', 600)] - The toolbar drop-down item text color.
1615
/// @property {Map} item-hover-background [igx-color: ('grays', 100)] - The toolbar drop-down item hover background color.
1716
/// @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: (
2928
igx-color: ('grays', 600)
3029
),
3130

32-
dropdown-background: #fff,
31+
dropdown-background: (
32+
igx-color: ('surface')
33+
),
3334

3435
item-text-color: (
3536
igx-color: ('grays', 600)

0 commit comments

Comments
 (0)