From b75a33b48d7647be368b9692dfe482b3c06d5d6c Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 1 May 2026 19:15:55 +0300 Subject: [PATCH] feat(themes): export excel-filtering theme and update grid-related inner component themes --- .../button-group/_button-group-theme.scss | 2 +- .../column-actions/_column-actions-theme.scss | 24 ++- .../grid/_grid-excel-filtering-theme.scss | 172 ++++++++++++++++ .../components/grid/_grid-toolbar-theme.scss | 63 +++++- .../sass/themes/components/grid/_index.scss | 1 + .../paginator/_paginator-theme.scss | 23 ++- .../query-builder/_query-builder-theme.scss | 10 + .../dark/_grid-excel-filtering.scss | 37 ++++ .../schemas/components/dark/_index.scss | 5 + .../schemas/components/dark/_pagination.scss | 8 +- .../components/light/_column-actions.scss | 5 +- .../light/_grid-excel-filtering.scss | 185 ++++++++++++++++++ .../components/light/_grid-toolbar.scss | 12 +- .../schemas/components/light/_index.scss | 5 + .../schemas/components/light/_pagination.scss | 20 +- .../components/light/_query-builder.scss | 2 +- 16 files changed, 524 insertions(+), 50 deletions(-) create mode 100644 packages/theming/sass/themes/components/grid/_grid-excel-filtering-theme.scss create mode 100644 packages/theming/sass/themes/schemas/components/dark/_grid-excel-filtering.scss create mode 100644 packages/theming/sass/themes/schemas/components/light/_grid-excel-filtering.scss diff --git a/packages/theming/sass/themes/components/button-group/_button-group-theme.scss b/packages/theming/sass/themes/components/button-group/_button-group-theme.scss index 3ecf4192..a905497f 100644 --- a/packages/theming/sass/themes/components/button-group/_button-group-theme.scss +++ b/packages/theming/sass/themes/components/button-group/_button-group-theme.scss @@ -140,7 +140,7 @@ $theme: digest-schema($button-group-schema); $border: rem(1px, 16px) solid map.get($theme, 'item-selected-border-color'); - @if not($item-hover-text-color) and $item-text-color { + @if not($item-hover-text-color) and not($item-hover-background) and ($item-text-color) { $item-hover-text-color: dynamic-shade(var(--item-text-color)); } diff --git a/packages/theming/sass/themes/components/column-actions/_column-actions-theme.scss b/packages/theming/sass/themes/components/column-actions/_column-actions-theme.scss index 3aa4d44e..2b997c77 100644 --- a/packages/theming/sass/themes/components/column-actions/_column-actions-theme.scss +++ b/packages/theming/sass/themes/components/column-actions/_column-actions-theme.scss @@ -15,13 +15,15 @@ /// Column Actions Theme /// /// PRIMARY TOKENS: -/// - `$background-color` — The background color of the panel. +/// - `$background` — The background color of the panel. /// /// Derived colors are auto-calculated for contrast. /// /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $title-color [null]- The text color used for the title of the list. Auto-derived from background-color. -/// @param {Color} $background-color [null] - The background color of the panel. PRIMARY - derives title-color. +/// @param {Color} $title-color [null] - The text color used for the title of the list. Auto-derived from foreground. +/// @param {Color} $background [null] - The background color of the panel. PRIMARY - derives foreground and title-color. +/// @param {Color} $foreground [null] - The foreground color for content and icons in the panel. Auto-derived from background. +/// @param {Color} $accent-color [null] - The accent color used for highlights or active states in the panel. /// /// @requires $light-material-schema /// @@ -34,7 +36,9 @@ $schema: $light-material-schema, $title-color: null, - $background-color: null + $background: null, + $foreground: null, + $accent-color: null ) { $selector: #{config.element-prefix() + '-' + 'column-actions'}; $column-actions-schema: (); @@ -47,8 +51,12 @@ $theme: digest-schema($column-actions-schema); - @if not($title-color) and $background-color { - $title-color: adaptive-contrast(var(--background-color)); + @if not($foreground) and $background { + $foreground: adaptive-contrast(var(--background)); + } + + @if not($title-color) and $foreground { + $title-color: var(--foreground); } @return extend( @@ -56,7 +64,9 @@ ( selector: $selector, title-color: $title-color, - background-color: $background-color, + background: $background, + foreground: $foreground, + accent-color: $accent-color, ) ); } diff --git a/packages/theming/sass/themes/components/grid/_grid-excel-filtering-theme.scss b/packages/theming/sass/themes/components/grid/_grid-excel-filtering-theme.scss new file mode 100644 index 00000000..75bda254 --- /dev/null +++ b/packages/theming/sass/themes/components/grid/_grid-excel-filtering-theme.scss @@ -0,0 +1,172 @@ +@use 'sass:map'; +@use '../../config'; +@use '../../functions' as *; +@use '../../schemas/' as *; +@use '../../../utils/map' as *; +@use '../../../color/functions' as *; + +//// +/// @package theming +/// @group themes +/// @access public +//// + +/// Excel Filtering Theme +/// +/// PRIMARY TOKENS: +/// - `$background` — The background color for the excel filtering area. +/// - `$foreground` — The foreground/text color for the excel filtering area. +/// - `$accent-color` — The accent color for the excel filtering area and its internal components. +/// +/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. +/// @param {Color} $background [null] - The background color for the excel filtering area. +/// @param {Color} $foreground [null] - The foreground/text color for the excel filtering area. +/// @param {Color} $accent-color [null] - The accent color for the excel filtering and its internal components. +/// @param {Color} $secondary-background [null] - The secondary background color for the excel filtering area. +/// @param {Color} $header-foreground [null] - The excel filtering header text color. +/// @param {Color} $subheader-foreground [null] - The excel filtering subheader text color. +/// @param {Color} $actions-foreground [null] - The excel filtering actions text color. +/// @param {Color} $actions-icon-color [null] - The excel filtering actions icon color. +/// @param {Color} $actions-hover-foreground [null] - The excel filtering actions hover text color. +/// @param {Color} $actions-hover-icon-color [null] - The excel filtering actions hover icon color. +/// @param {Color} $actions-selected-icon-color [null] - The excel filtering actions selected icon color. +/// @param {Color} $actions-hover-background [null] - The excel filtering actions hover background color. +/// @param {Color} $actions-disabled-foreground [null] - The excel filtering actions disabled text color. +/// @param {Color} $border-color [null] - The border color used in the excel style filter. +/// @requires $light-material-schema +/// @example scss - Change excel filtering header color +/// $my-excel-filtering-theme: excel-filtering-theme($background: blue, $accent-color: orange); +/// @include css-vars($my-excel-filtering-theme); +@function excel-filtering-theme( + $schema: $light-material-schema, + $background: null, + $foreground: null, + $accent-color: null, + $secondary-background: null, + $header-foreground: null, + $subheader-foreground: null, + $actions-foreground: null, + $actions-icon-color: null, + $actions-hover-foreground: null, + $actions-hover-icon-color: null, + $actions-selected-icon-color: null, + $actions-hover-background: null, + $actions-disabled-foreground: null, + $border-color: null +) { + $selector: (#{config.element-prefix() + '-' + 'grid-excel-style-filtering'}, '.igx-excel-filter__secondary'); + $excel-filtering-schema: (); + + @if map.has-key($schema, 'grid-excel-filtering') { + $excel-filtering-schema: map.get($schema, 'grid-excel-filtering'); + } @else { + $excel-filtering-schema: $schema; + } + + $theme: digest-schema($excel-filtering-schema); + + @if not($foreground) and $background { + $foreground: adaptive-contrast(var(--background)); + } + + @if not($secondary-background) and $background { + $secondary-background: var(--background); + } + + @if not($header-foreground) and $foreground { + $header-foreground: var(--foreground); + } + + @if not($subheader-foreground) and $foreground { + $subheader-foreground: var(--foreground); + } + + @if not($actions-foreground) and $foreground { + $actions-foreground: var(--foreground); + } + + @if not($actions-icon-color) and $foreground { + $actions-icon-color: var(--foreground); + } + + @if not($actions-hover-foreground) and $foreground { + $actions-hover-foreground: var(--foreground); + } + + @if not($actions-hover-icon-color) and $foreground { + $actions-hover-icon-color: var(--foreground); + } + + @if not($actions-hover-background) and $accent-color and $background { + $actions-hover-background: color-mix(in srgb, var(--accent-color) 8%, var(--background)); + } + + @if not($actions-disabled-foreground) and $foreground and $background { + $actions-disabled-foreground: color-mix(in srgb, var(--foreground) 50%, var(--background)); + } + + @if not($border-color) and $foreground and $background { + $border-color: color-mix(in srgb, var(--foreground) 16%, var(--background)); + } + + @if not($header-foreground) and $foreground { + $header-foreground: var(--foreground); + } + + @if not($subheader-foreground) and $foreground { + $subheader-foreground: var(--foreground); + } + + @if not($actions-foreground) and $foreground { + $actions-foreground: var(--foreground); + } + + @if not($actions-icon-color) and $foreground { + $actions-icon-color: var(--foreground); + } + + @if not($actions-hover-foreground) and $foreground { + $actions-hover-foreground: var(--foreground); + } + + @if not($actions-hover-icon-color) and $foreground { + $actions-hover-icon-color: var(--foreground); + } + + @if not($actions-selected-icon-color) and $accent-color { + $actions-selected-icon-color: var(--accent-color); + } + + @if not($actions-hover-background) and $accent-color and $background { + $actions-hover-background: color-mix(in srgb, var(--accent-color) 8%, var(--background)); + } + + @if not($actions-disabled-foreground) and $foreground and $background { + $actions-disabled-foreground: color-mix(in srgb, var(--foreground) 50%, var(--background)); + } + + @if not($border-color) and $foreground and $background { + $border-color: color-mix(in srgb, var(--foreground) 16%, var(--background)); + } + + @return extend( + $theme, + ( + selector: $selector, + background: $background, + foreground: $foreground, + accent-color: $accent-color, + secondary-background: $secondary-background, + header-foreground: $header-foreground, + subheader-foreground: $subheader-foreground, + actions-foreground: $actions-foreground, + actions-icon-color: $actions-icon-color, + actions-hover-foreground: $actions-hover-foreground, + actions-hover-icon-color: $actions-hover-icon-color, + actions-selected-icon-color: $actions-selected-icon-color, + actions-hover-background: $actions-hover-background, + actions-disabled-foreground: $actions-disabled-foreground, + border-color: $border-color, + ) + ); +} diff --git a/packages/theming/sass/themes/components/grid/_grid-toolbar-theme.scss b/packages/theming/sass/themes/components/grid/_grid-toolbar-theme.scss index 37be4af5..bf3b1e46 100644 --- a/packages/theming/sass/themes/components/grid/_grid-toolbar-theme.scss +++ b/packages/theming/sass/themes/components/grid/_grid-toolbar-theme.scss @@ -17,7 +17,9 @@ /// Grid Toolbar Theme /// /// PRIMARY TOKENS: -/// - `$background-color` — The toolbar background color. +/// - `$background` — The toolbar background and drop-down background color. +/// - `$foreground` — The toolbar title and drop-down item text color. +/// - `$accent-color` — The accent color used to derive interactive item backgrounds. /// - `$dropdown-background` — The toolbar drop-down background color. /// - `$item-hover-background` — The drop-down item hover background. /// - `$item-focus-background` — The drop-down item focus background. @@ -25,28 +27,33 @@ /// Derived colors are auto-calculated for contrast. /// /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $background-color [null] - The toolbar background color. PRIMARY - derives title-text-color. -/// @param {Color} $title-text-color [null] - The toolbar title text color. Auto-derived from background-color. +/// @param {Color} $background [null] - The toolbar background and drop-down background color. PRIMARY - derives title-text-color and dropdown-background. +/// @param {Color} $foreground [null] - The toolbar title and drop-down item text color. PRIMARY - derives title-text-color and item-text-color. +/// @param {Color} $accent-color [null] - The accent color used to derive interactive item backgrounds. +/// @param {Color} $title-text-color [null] - The toolbar title text color. Auto-derived from background. /// @param {Color} $dropdown-background [null] - The toolbar drop-down background color. PRIMARY - derives item-text-color. /// @param {Color} $item-text-color [null] - The toolbar drop-down item text color. Auto-derived from dropdown-background. /// @param {Color} $item-hover-background [null] - The toolbar drop-down item hover background color. PRIMARY - derives item-hover-text-color. /// @param {Color} $item-hover-text-color [null] - The toolbar drop-down item hover text color. Auto-derived from dropdown-background or item-hover-background. /// @param {Color} $item-focus-background [null] - The toolbar drop-down item focus background color. PRIMARY - derives item-focus-text-color. /// @param {Color} $item-focus-text-color [null] - The toolbar drop-down item focus text color. Auto-derived from dropdown-background or item-focus-background. +/// @param {List} $size [null] - The size used for the grid toolbar min-height. /// @param {Color} $border-color [null] - The toolbar border-bottom color. /// @requires $light-material-schema /// @example scss - Change the toolbar background color /// $my-toolbar-theme: grid-toolbar-theme( -/// $background-color: black +/// $background: black /// ); /// // Pass the theme to the css-vars mixin /// @include css-vars($my-toolbar-theme); @function grid-toolbar-theme( $schema: $light-material-schema, - $background-color: null, - $title-text-color: null, + $background: null, + $foreground: null, + $accent-color: null, + $title-text-color: null, $dropdown-background: null, $item-text-color: null, $item-hover-background: null, @@ -67,8 +74,44 @@ $theme: digest-schema($grid-toolbar-schema); - @if not($title-text-color) and $background-color { - $title-text-color: adaptive-contrast(var(--background-color)); + @if not($foreground) and $background { + $foreground: adaptive-contrast(var(--background)); + } + + @if not($title-text-color) and $foreground { + $title-text-color: var(--foreground); + } + + @if not($dropdown-background) and $background { + $dropdown-background: var(--background); + } + + @if not($item-text-color) and $foreground { + $item-text-color: var(--foreground); + } + + @if not($item-hover-background) and $background and $accent-color { + $item-hover-background: color-mix(in srgb, var(--accent-color) 8%, var(--background)); + } + + @if not($item-hover-text-color) and $item-text-color { + $item-hover-text-color: var(--item-text-color); + } + + @if not($item-focus-background) and $background and $accent-color { + $item-focus-background: color-mix(in srgb, var(--accent-color) 12%, var(--background)); + } + + @if not($item-focus-text-color) and $item-text-color { + $item-focus-text-color: var(--item-text-color); + } + + @if not($border-color) and $foreground and $background { + $border-color: color-mix(in srgb, var(--foreground) 20%, var(--background)); + } + + @if not($title-text-color) and $background { + $title-text-color: adaptive-contrast(var(--background)); } @if not($item-text-color) and $dropdown-background { @@ -95,7 +138,9 @@ $theme, ( selector: $selector, - background-color: $background-color, + background: $background, + foreground: $foreground, + accent-color: $accent-color, title-text-color: $title-text-color, item-text-color: $item-text-color, dropdown-background: $dropdown-background, diff --git a/packages/theming/sass/themes/components/grid/_index.scss b/packages/theming/sass/themes/components/grid/_index.scss index 9fd9c91e..14bd5d4e 100644 --- a/packages/theming/sass/themes/components/grid/_index.scss +++ b/packages/theming/sass/themes/components/grid/_index.scss @@ -1,4 +1,5 @@ @forward 'grid-theme'; +@forward 'grid-excel-filtering-theme'; @forward 'grid-summary-theme'; @forward 'grid-toolbar-theme'; @forward 'pivot-data-selector-theme'; diff --git a/packages/theming/sass/themes/components/paginator/_paginator-theme.scss b/packages/theming/sass/themes/components/paginator/_paginator-theme.scss index 42de0253..5fce0d8a 100644 --- a/packages/theming/sass/themes/components/paginator/_paginator-theme.scss +++ b/packages/theming/sass/themes/components/paginator/_paginator-theme.scss @@ -17,14 +17,15 @@ /// Paginator Theme /// /// PRIMARY TOKENS: -/// - `$background-color` — The paginator background. +/// - `$background` — The paginator background. /// /// Derived colors are auto-calculated for contrast. /// /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $text-color [currentColor] - The text color. Auto-derived from background-color. -/// @param {Color} $background-color [rgba(0, 0, 0, .04)] - The background color of the paging panel. PRIMARY - derives text-color. +/// @param {Color} $foreground [currentColor] - The text color. Auto-derived from background. +/// @param {Color} $background [rgba(0, 0, 0, .04)] - The background color of the paging panel. PRIMARY - derives foreground. /// @param {Color} $border-color [rgba(0, 0, 0, .26)] - The border color of the paging panel. +/// @param {Color} $accent-color [null] - The accent color used for paginator interactive elements. /// @requires $light-material-schema /// @example scss - Change the stripes color /// $my-paginator-theme: paginator-theme( @@ -35,9 +36,10 @@ @function paginator-theme( $schema: $light-material-schema, - $text-color: null, - $background-color: null, - $border-color: null + $foreground: null, + $background: null, + $border-color: null, + $accent-color: null ) { $selector: #{config.element-prefix() + '-' + 'paginator'}; $grid-paginator-schema: (); @@ -50,17 +52,18 @@ $theme: digest-schema($grid-paginator-schema); - @if not($text-color) and $background-color { - $text-color: adaptive-contrast($background-color); + @if not($foreground) and $background { + $foreground: adaptive-contrast($background); } @return extend( $theme, ( selector: $selector, - text-color: $text-color, - background-color: $background-color, + foreground: $foreground, + background: $background, border-color: $border-color, + accent-color: $accent-color, ) ); } diff --git a/packages/theming/sass/themes/components/query-builder/_query-builder-theme.scss b/packages/theming/sass/themes/components/query-builder/_query-builder-theme.scss index e1b0c217..d147279d 100644 --- a/packages/theming/sass/themes/components/query-builder/_query-builder-theme.scss +++ b/packages/theming/sass/themes/components/query-builder/_query-builder-theme.scss @@ -24,6 +24,8 @@ /// /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. /// @param {Color} $background [null] - The background color of the filtering row. PRIMARY - derives label-foreground, header-background. +/// @param {Color} $foreground [null] - The foreground color for text and icons in the query builder. +/// @param {Color} $accent-color [null] - The accent color for highlights and interactive elements in the query builder. /// @param {Color} $header-background [null] - The background color of the query builder header. PRIMARY - derives header-foreground, subquery-header-background. Auto-derived from background. /// @param {Color} $header-foreground [null] - The foreground color of the query builder header. Auto-derived from header-background. /// @param {Color} $header-border [null] - The border color of the query builder header. Auto-derived from subquery-border-color (bootstrap only). @@ -46,6 +48,8 @@ @function query-builder-theme( $schema: $light-material-schema, $background: null, + $foreground: null, + $accent-color: null, $header-background: null, $header-foreground: null, $header-border: null, @@ -70,6 +74,10 @@ $theme: digest-schema($query-builder-schema); $variant: map.get($theme, '_meta', 'theme'); + @if not($foreground) and $background { + $foreground: adaptive-contrast($background); + } + @if not($label-foreground) and $background { $label-foreground: hsl(from adaptive-contrast(var(--background)) h s l / 0.6); } @@ -105,6 +113,8 @@ ( selector: $selector, background: $background, + foreground: $foreground, + accent-color: $accent-color, header-background: $header-background, header-foreground: $header-foreground, header-border: $header-border, diff --git a/packages/theming/sass/themes/schemas/components/dark/_grid-excel-filtering.scss b/packages/theming/sass/themes/schemas/components/dark/_grid-excel-filtering.scss new file mode 100644 index 00000000..ee95d281 --- /dev/null +++ b/packages/theming/sass/themes/schemas/components/dark/_grid-excel-filtering.scss @@ -0,0 +1,37 @@ +@use '../../../../utils/map' as *; +@use '../light/grid-excel-filtering' as *; + +//// +/// @package theming +/// @group schemas +/// @access public +//// + +/// Generates a base dark excel-filtering schema. +/// @access private +/// @type Map +$base-dark-excel-filtering: ( + _meta: ( + variant: 'dark', + ), +); + +/// Generates a dark material excel-filtering schema. +/// @type Map +/// @requires $material-excel-filtering +$dark-material-excel-filtering: extend($material-excel-filtering, $base-dark-excel-filtering); + +/// Generates a dark fluent excel-filtering schema. +/// @type Map +/// @requires $fluent-excel-filtering +$dark-fluent-excel-filtering: extend($fluent-excel-filtering, $base-dark-excel-filtering); + +/// Generates a dark bootstrap excel-filtering schema. +/// @type Map +/// @requires $bootstrap-excel-filtering +$dark-bootstrap-excel-filtering: extend($bootstrap-excel-filtering, $base-dark-excel-filtering); + +/// Generates a dark indigo excel-filtering schema. +/// @type Map +/// @requires $indigo-excel-filtering +$dark-indigo-excel-filtering: extend($indigo-excel-filtering, $base-dark-excel-filtering); diff --git a/packages/theming/sass/themes/schemas/components/dark/_index.scss b/packages/theming/sass/themes/schemas/components/dark/_index.scss index ba45e5f2..aa051342 100644 --- a/packages/theming/sass/themes/schemas/components/dark/_index.scss +++ b/packages/theming/sass/themes/schemas/components/dark/_index.scss @@ -27,6 +27,7 @@ @use './drop-down' as *; @use './expansion-panel' as *; @use './grid' as *; +@use './grid-excel-filtering' as *; @use './grid-filtering' as *; @use './grid-summary' as *; @use './grid-toolbar' as *; @@ -91,6 +92,7 @@ $dark-material-schema: ( drop-down: $dark-material-drop-down, expansion-panel: $dark-material-expansion-panel, grid: $dark-material-grid, + grid-excel-filtering: $dark-material-excel-filtering, grid-filtering: $dark-material-grid-filtering, grid-summary: $dark-material-grid-summary, grid-toolbar: $dark-material-grid-toolbar, @@ -161,6 +163,7 @@ $dark-fluent-schema: ( drop-down: $dark-fluent-drop-down, expansion-panel: $dark-fluent-expansion-panel, grid: $dark-fluent-grid, + grid-excel-filtering: $dark-fluent-excel-filtering, grid-filtering: $dark-fluent-grid-filtering, grid-summary: $dark-fluent-grid-summary, grid-toolbar: $dark-fluent-grid-toolbar, @@ -231,6 +234,7 @@ $dark-bootstrap-schema: ( drop-down: $dark-bootstrap-drop-down, expansion-panel: $dark-bootstrap-expansion-panel, grid: $dark-bootstrap-grid, + grid-excel-filtering: $dark-bootstrap-excel-filtering, grid-filtering: $dark-bootstrap-grid-filtering, grid-summary: $dark-bootstrap-grid-summary, grid-toolbar: $dark-bootstrap-grid-toolbar, @@ -301,6 +305,7 @@ $dark-indigo-schema: ( drop-down: $dark-indigo-drop-down, expansion-panel: $dark-indigo-expansion-panel, grid: $dark-indigo-grid, + grid-excel-filtering: $dark-indigo-excel-filtering, grid-filtering: $dark-indigo-grid-filtering, grid-summary: $dark-indigo-grid-summary, grid-toolbar: $dark-indigo-grid-toolbar, diff --git a/packages/theming/sass/themes/schemas/components/dark/_pagination.scss b/packages/theming/sass/themes/schemas/components/dark/_pagination.scss index f70f0a93..d8b201e7 100644 --- a/packages/theming/sass/themes/schemas/components/dark/_pagination.scss +++ b/packages/theming/sass/themes/schemas/components/dark/_pagination.scss @@ -18,14 +18,14 @@ $base-dark-pagination: ( /// Generates a dark material pagination schema. /// @type Map -/// @prop {Map} background-color [color: ('surface')] - The background color of the paging panel. +/// @prop {Map} background [color: ('surface')] - The background color of the paging panel. /// @requires $material-pagination /// @requires $base-dark-pagination $dark-material-pagination: extend( $material-pagination, $base-dark-pagination, ( - background-color: ( + background: ( color: ( 'surface', ), @@ -35,14 +35,14 @@ $dark-material-pagination: extend( /// Generates a dark fluent pagination schema. /// @type Map -/// @prop {Map} background-color [color: ('surface')] - The background color of the paging panel. +/// @prop {Map} background [color: ('surface')] - The background color of the paging panel. /// @requires $fluent-pagination /// @requires $base-dark-pagination $dark-fluent-pagination: extend( $fluent-pagination, $base-dark-pagination, ( - background-color: ( + background: ( color: ( 'surface', ), diff --git a/packages/theming/sass/themes/schemas/components/light/_column-actions.scss b/packages/theming/sass/themes/schemas/components/light/_column-actions.scss index b1fbe640..e21747da 100644 --- a/packages/theming/sass/themes/schemas/components/light/_column-actions.scss +++ b/packages/theming/sass/themes/schemas/components/light/_column-actions.scss @@ -10,10 +10,11 @@ /// Generates a light column actions schema. /// @type Map /// @prop {Map} title-color [color: ('primary', 500)]- The text color used for the title of the list. -/// @prop {Map} background-color [color: ('surface')] - The background color of the panel. +/// @prop {Map} background [color: ('surface')] - The background color of the panel. /// @prop {Map} typography [title: (value: 'subtitle-1')] - The typography styles used for the component. + $light-column-actions: ( - background-color: ( + background: ( color: ( 'surface', ), diff --git a/packages/theming/sass/themes/schemas/components/light/_grid-excel-filtering.scss b/packages/theming/sass/themes/schemas/components/light/_grid-excel-filtering.scss new file mode 100644 index 00000000..225e38f7 --- /dev/null +++ b/packages/theming/sass/themes/schemas/components/light/_grid-excel-filtering.scss @@ -0,0 +1,185 @@ +@use '../../../../utils/map' as *; + +//// +/// @package theming +/// @group schemas +/// @access public +//// + +/// Generates a light excel filtering schema. +/// @type Map +/// @prop {Map} background [color: ('gray', 50)] - The background color for the excel filtering area. +/// @prop {Map} secondary-background [color: ('gray', 50)] - The secondary background color for the excel filtering area. +/// @prop {Map} header-foreground [color: ('gray', 700)] - The text color of the header in the excel style filtering. +/// @prop {Map} subheader-foreground [color: ('gray', 700)] - The text color of the sorting and moving headers in the excel style filtering. +/// @prop {Map} actions-foreground [color: ('gray', 700)] - The text color of the excel style filtering options. +/// @prop {Map} actions-icon-color [color: ('gray', 700)] - The icon color of the excel style filtering options. +/// @prop {Map} actions-hover-foreground [color: ('gray', 700)] - The text color of the excel style filtering options in hover/focus state. +/// @prop {Map} actions-hover-icon-color [color: ('gray', 700)] - The icon color of the excel style filtering options in hover/focus state. +/// @prop {Map} actions-selected-icon-color [color: ('secondary', 500)] - The icon color of the excel style filtering options in active state. +/// @prop {Map} actions-hover-background [color: ('gray', 100)] - The background color of the excel style filtering options in hover/focus state. +/// @prop {Map} actions-disabled-foreground [color: ('gray', 400)] - The text color of the excel style filtering options in disabled state. +/// @prop {Map} border-color [color: ('gray', 300)] - The border color used in the excel style filter. +/// @type Map +$light-excel-filtering: ( + background: ( + color: ( + 'gray', + 50, + ), + ), + + secondary-background: ( + color: ( + 'gray', + 50, + ), + ), + + header-foreground: ( + color: ( + 'gray', + 700, + ), + ), + + subheader-foreground: ( + color: ( + 'gray', + 700, + ), + ), + + actions-foreground: ( + color: ( + 'gray', + 700, + ), + ), + + actions-icon-color: ( + color: ( + 'gray', + 700, + ), + ), + + actions-hover-foreground: ( + color: ( + 'gray', + 700, + ), + ), + + actions-hover-icon-color: ( + color: ( + 'gray', + 700, + ), + ), + + actions-selected-icon-color: ( + color: ( + 'secondary', + 500, + ), + ), + + actions-hover-background: ( + color: ( + 'gray', + 100, + ), + ), + + actions-disabled-foreground: ( + color: ( + 'gray', + 400, + ), + ), + + border-color: ( + color: ( + 'gray', + 300, + ), + ), + + _meta: ( + name: 'excel-filtering', + variant: 'light', + ), +); + +/// Generates a material excel filtering schema. +/// @type Map +/// @requires $light-excel-filtering +$material-excel-filtering: extend( + $light-excel-filtering, + ( + _meta: ( + theme: 'material', + ), + ) +); + +/// Generates a fluent excel filtering schema. +/// @type Map +/// @requires $light-excel-filtering +$fluent-excel-filtering: extend( + $light-excel-filtering, + ( + _meta: ( + theme: 'fluent', + ), + ) +); + +/// Generates a bootstrap excel filtering schema. +/// @type Map +/// @requires $light-excel-filtering +/// @prop {Map} actions-selected-icon-color [color: ('primary', 500)] - The icon color of the excel style filtering options in active state (overrides secondary 500). +$bootstrap-excel-filtering: extend( + $light-excel-filtering, + ( + actions-selected-icon-color: ( + color: ( + 'primary', + 500, + ), + ), + + _meta: ( + theme: 'bootstrap', + ), + ) +); + +/// Generates an indigo excel filtering schema. +/// @prop {Map} background [contrast-color: ('gray', 900)] - The background contrast color for the excel filtering area. +/// @prop {Map} secondary-background [color: ('surface', 500)] - The secondary background color for the excel filtering area. +/// @type Map +/// @requires $light-excel-filtering +$indigo-excel-filtering: extend( + $light-excel-filtering, + ( + background: ( + contrast-color: ( + 'gray', + 900, + ), + ), + + secondary-background: ( + color: ( + 'surface', + 500, + ), + ), + + _meta: ( + theme: 'indigo', + ), + ) +); diff --git a/packages/theming/sass/themes/schemas/components/light/_grid-toolbar.scss b/packages/theming/sass/themes/schemas/components/light/_grid-toolbar.scss index afa68cf6..fc99c958 100644 --- a/packages/theming/sass/themes/schemas/components/light/_grid-toolbar.scss +++ b/packages/theming/sass/themes/schemas/components/light/_grid-toolbar.scss @@ -9,7 +9,7 @@ /// Generates a light grid-toolbar schema. /// @type Map -/// @prop {Map} background-color [color: ('gray', 50)] - The toolbar background color. +/// @prop {Map} background [color: ('gray', 50)] - The toolbar background color. /// @prop {Map} title-text-color [color: ('gray', 700)] - The toolbar title text color. /// @prop {Map} dropdown-background [color: ('surface')] - The toolbar drop-down background color. /// @prop {Map} item-text-color [color: ('gray', 600)] - The toolbar drop-down item text color. @@ -20,7 +20,7 @@ /// @prop {List} size [(rem(44px), rem(52px), rem(58px))] - The size used for the grid toolbar min-height. /// @prop {Map} border-color [color: ('gray', 300)] - The toolbar border-bottom color. $light-grid-toolbar: ( - background-color: ( + background: ( color: ( 'gray', 50, @@ -110,12 +110,12 @@ $material-grid-toolbar: extend( /// Generates a fluent grid-toolbar schema. /// @type Map -/// @prop {Map} background-color [color: 'surface'] - The toolbar background color. +/// @prop {Map} background [color: 'surface'] - The toolbar background color. /// @requires $light-grid-toolbar $fluent-grid-toolbar: extend( $light-grid-toolbar, ( - background-color: ( + background: ( color: 'surface', ), @@ -147,13 +147,13 @@ $bootstrap-grid-toolbar: extend( /// Generates an indigo grid-toolbar schema. /// @type Map -/// @prop {Color} background-color [color: ('surface', 500)] - The toolbar background color. +/// @prop {Color} background [color: ('surface', 500)] - The toolbar background color. /// @prop {Map} border-color [color: ('gray', 400)] - The toolbar border-bottom color. /// @requires $light-grid-toolbar $indigo-grid-toolbar: extend( $light-grid-toolbar, ( - background-color: ( + background: ( color: ( 'surface', 500, diff --git a/packages/theming/sass/themes/schemas/components/light/_index.scss b/packages/theming/sass/themes/schemas/components/light/_index.scss index 318e76ca..2a2468f4 100644 --- a/packages/theming/sass/themes/schemas/components/light/_index.scss +++ b/packages/theming/sass/themes/schemas/components/light/_index.scss @@ -27,6 +27,7 @@ @use './drop-down' as *; @use './expansion-panel' as *; @use './grid' as *; +@use './grid-excel-filtering' as *; @use './grid-filtering' as *; @use './grid-summary' as *; @use './grid-toolbar' as *; @@ -91,6 +92,7 @@ $light-material-schema: ( drop-down: $material-drop-down, expansion-panel: $material-expansion-panel, grid: $material-grid, + grid-excel-filtering: $material-excel-filtering, grid-filtering: $material-grid-filtering, grid-summary: $material-grid-summary, grid-toolbar: $material-grid-toolbar, @@ -161,6 +163,7 @@ $light-fluent-schema: ( drop-down: $fluent-drop-down, expansion-panel: $fluent-expansion-panel, grid: $fluent-grid, + grid-excel-filtering: $fluent-excel-filtering, grid-filtering: $fluent-grid-filtering, grid-summary: $fluent-grid-summary, grid-toolbar: $fluent-grid-toolbar, @@ -231,6 +234,7 @@ $light-bootstrap-schema: ( drop-down: $bootstrap-drop-down, expansion-panel: $bootstrap-expansion-panel, grid: $bootstrap-grid, + grid-excel-filtering: $bootstrap-excel-filtering, grid-filtering: $bootstrap-grid-filtering, grid-summary: $bootstrap-grid-summary, grid-toolbar: $bootstrap-grid-toolbar, @@ -301,6 +305,7 @@ $light-indigo-schema: ( drop-down: $indigo-drop-down, expansion-panel: $indigo-expansion-panel, grid: $indigo-grid, + grid-excel-filtering: $indigo-excel-filtering, grid-filtering: $indigo-grid-filtering, grid-summary: $indigo-grid-summary, grid-toolbar: $indigo-grid-toolbar, diff --git a/packages/theming/sass/themes/schemas/components/light/_pagination.scss b/packages/theming/sass/themes/schemas/components/light/_pagination.scss index c18ce5b1..a2f3c67f 100644 --- a/packages/theming/sass/themes/schemas/components/light/_pagination.scss +++ b/packages/theming/sass/themes/schemas/components/light/_pagination.scss @@ -9,19 +9,19 @@ /// Generates a base light pagination schema. /// @type Map -/// @prop {Map} text-color [color: ('gray', 800)] - The text color. -/// @prop {Map} background-color [color: ('gray', 100)] - The background color of the paging panel. +/// @prop {Map} foreground [color: ('gray', 800)] - The text color. +/// @prop {Map} background [color: ('gray', 100)] - The background color of the paging panel. /// @prop {Map} border-color [color: ('gray', 200)] - The border color of the paging panel. /// @prop {List} size [(rem(44px), rem(48px), rem(56px))] - The size used for the paginator. $light-pagination: ( - text-color: ( + foreground: ( color: ( 'gray', 800, ), ), - background-color: ( + background: ( color: ( 'gray', 100, @@ -62,13 +62,13 @@ $material-pagination: extend( /// Generates a fluent pagination schema. /// @type Map -/// @prop {Map} background-color [color: 'surface'] - The background color of the paging panel. +/// @prop {Map} background [color: 'surface'] - The background color of the paging panel. /// @prop {Map} border-color [color: ('gray', 100)] - The border color of the paging panel. /// @requires $light-pagination $fluent-pagination: extend( $light-pagination, ( - background-color: ( + background: ( color: 'surface', ), @@ -86,12 +86,12 @@ $fluent-pagination: extend( /// Generates a bootstrap pagination schema. /// @type Map -/// @prop {Map} background-color [color: ('gray', 50)] - The background color of the paging panel. +/// @prop {Map} background [color: ('gray', 50)] - The background color of the paging panel. /// @requires $light-pagination $bootstrap-pagination: extend( $light-pagination, ( - background-color: ( + background: ( color: ( 'gray', 50, @@ -105,13 +105,13 @@ $bootstrap-pagination: extend( /// Generates an indigo pagination schema. /// @type Map -/// @prop {Map} background-color [color: ('surface', 500)] - The background color of the paging panel. +/// @prop {Map} background [color: ('surface', 500)] - The background color of the paging panel. /// @prop {Map} border-color [color: ('gray', 400)] - The border color of the paging panel. /// @requires $light-pagination $indigo-pagination: extend( $light-pagination, ( - background-color: ( + background: ( color: ( 'surface', 500, diff --git a/packages/theming/sass/themes/schemas/components/light/_query-builder.scss b/packages/theming/sass/themes/schemas/components/light/_query-builder.scss index 484910ef..c431230b 100644 --- a/packages/theming/sass/themes/schemas/components/light/_query-builder.scss +++ b/packages/theming/sass/themes/schemas/components/light/_query-builder.scss @@ -104,7 +104,7 @@ $material-query-builder: extend( /// Generates a fluent query builder schema. /// @type Map -/// @prop {Number} border-radius [rem(4px)] - The border radius of the query builder. +/// @prop {Number} border-radius [rem(2px)] - The border radius of the query builder. /// @requires $light-query-builder $fluent-query-builder: extend( $light-query-builder,