Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(grid): remove hardcoded colors #10563

Merged
merged 7 commits into from
Nov 19, 2021
Merged

refactor(grid): remove hardcoded colors #10563

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
45e26af
refactor(grid): remove hardcoded colors
desig9stein Nov 18, 2021
171a360
Merge branch 'master' into mpopov/hardcoded-colors
simeonoff Nov 18, 2021
f15fbcf
Merge branch 'master' into mpopov/hardcoded-colors
simeonoff Nov 19, 2021
91482eb
fix(toolbar): fix build error
desig9stein Nov 19, 2021
d331629
Merge remote-tracking branch 'origin/mpopov/hardcoded-colors' into mp…
desig9stein Nov 19, 2021
641b25f
Merge branch 'master' into mpopov/hardcoded-colors
simeonoff Nov 19, 2021
03bf65e
Merge branch 'master' into mpopov/hardcoded-colors
kdinev Nov 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
20 changes: 3 additions & 17 deletions projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
12 changes: 8 additions & 4 deletions projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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: (
Expand Down
14 changes: 6 additions & 8 deletions projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -69,8 +69,7 @@ $fluent-grid-summary: extend(
),

pinned-border-color: (
igx-color: ('grays', 300),
to-opaque: #fff
igx-color: ('grays', 300)
),
)
);
Expand All @@ -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.
Expand All @@ -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: (
Expand Down
7 changes: 4 additions & 3 deletions projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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)
Expand Down