From 45e26af672e8d01df449f2fa9987092eea2f63e7 Mon Sep 17 00:00:00 2001 From: MPopov Date: Thu, 18 Nov 2021 11:30:07 +0200 Subject: [PATCH 1/2] refactor(grid): remove hardcoded colors --- .../themes/schemas/dark/_grid-summary.scss | 4 ++-- .../themes/schemas/dark/_grid-toolbar.scss | 22 ++++--------------- .../themes/schemas/light/_grid-filtering.scss | 12 ++++++---- .../themes/schemas/light/_grid-summary.scss | 10 ++++----- .../themes/schemas/light/_grid-toolbar.scss | 7 +++--- 5 files changed, 22 insertions(+), 33 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss index 99c2e66df36..6999f0b1c07 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss +++ b/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 diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss index 4f6c21c7a33..f365cf42e14 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss @@ -7,46 +7,32 @@ /// @author Marin Popov //// -/// 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, + $indigo-grid-toolbar ( background-color: ( igx-color: 'surface', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss index 2a4cd73dc95..54576519693 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss +++ b/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: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss index 82e53351c50..7822b5ac07d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss @@ -53,7 +53,7 @@ $light-grid-summary: ( /// /// @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} 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 {Color} 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: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss index 6e3f086372a..aa434c095ef 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss +++ b/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) From 91482eb3cae1cb9c4bc4aa1af9d46c5a8b72189b Mon Sep 17 00:00:00 2001 From: MPopov Date: Fri, 19 Nov 2021 14:26:09 +0200 Subject: [PATCH 2/2] fix(toolbar): fix build error --- .../lib/core/styles/themes/schemas/dark/_grid-toolbar.scss | 2 +- .../lib/core/styles/themes/schemas/light/_grid-summary.scss | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss index f365cf42e14..db2607cb38a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss @@ -32,7 +32,7 @@ $dark-bootstrap-grid-toolbar: extend($bootstrap-grid-toolbar); /// @requires {function} extend /// @requires $indigo-grid-toolbar $dark-indigo-grid-toolbar: extend( - $indigo-grid-toolbar + $indigo-grid-toolbar, ( background-color: ( igx-color: 'surface', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss index 7822b5ac07d..25350934350 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss @@ -51,8 +51,8 @@ $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} 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 @@ -81,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)] - 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.