diff --git a/projects/igniteui-angular/core/src/core/styles/components/_common/_extract-theme-schema.scss b/projects/igniteui-angular/core/src/core/styles/components/_common/_extract-theme-schema.scss
new file mode 100644
index 00000000000..a37f1ed97a2
--- /dev/null
+++ b/projects/igniteui-angular/core/src/core/styles/components/_common/_extract-theme-schema.scss
@@ -0,0 +1,29 @@
+@use 'sass:map';
+@use 'igniteui-theming/sass/themes/schemas' as *;
+
+/// Function to extract theme variant and schema for derived themes
+/// @param $theme - The theme map
+/// @returns Map with keys: 'variant', 'theme-variant', 'schema'
+@function extract-theme-schema($theme) {
+ $variant: map.get($theme, '_meta', 'theme');
+ $theme-variant: map.get($theme, '_meta', 'variant');
+ $schema: map.get(
+ (
+ 'light-material': $light-material-schema,
+ 'light-bootstrap': $light-bootstrap-schema,
+ 'light-fluent': $light-fluent-schema,
+ 'light-indigo': $light-indigo-schema,
+ 'dark-material': $dark-material-schema,
+ 'dark-bootstrap': $dark-bootstrap-schema,
+ 'dark-fluent': $dark-fluent-schema,
+ 'dark-indigo': $dark-indigo-schema,
+ ),
+ '#{$theme-variant}-#{$variant}'
+ );
+
+ @return (
+ 'variant': $variant,
+ 'theme-variant': $theme-variant,
+ 'schema': $schema
+ );
+}
diff --git a/projects/igniteui-angular/core/src/core/styles/components/_index.scss b/projects/igniteui-angular/core/src/core/styles/components/_index.scss
index 5f0d6a09fc6..da45529ed7b 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/_index.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/_index.scss
@@ -22,6 +22,7 @@
@forward 'drop-down/drop-down-theme';
@forward 'expansion-panel/expansion-panel-theme';
@forward 'grid/grid-theme';
+@forward 'grid/excel-filtering-theme';
@forward 'grid/pivot-data-selector-theme';
@forward 'grid-summary/grid-summary-theme';
@forward 'grid-toolbar/grid-toolbar-theme';
diff --git a/projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-derived-themes.scss b/projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-derived-themes.scss
new file mode 100644
index 00000000000..421fec1efd8
--- /dev/null
+++ b/projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-derived-themes.scss
@@ -0,0 +1,78 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use '../_common/extract-theme-schema' as *;
+
+/// Column actions internal components theming
+@mixin column-actions-derived-themes($theme) {
+ $theme-info: extract-theme-schema($theme);
+ $schema: map.get($theme-info, 'schema');
+
+ :where(igx-column-actions) {
+ --_column-actions-background: var(--background, var(--ig-column-actions-background));
+ --_column-actions-foreground: var(--foreground, var(--ig-column-actions-foreground));
+ --_column-actions-accent-color: var(--accent-color, var(--ig-column-actions-accent-color));
+
+ @include tokens(
+ checkbox-theme(
+ $schema: $schema,
+ $empty-color: color-mix(in srgb, var(--_column-actions-foreground) 80%, var(--_column-actions-background)),
+ $empty-fill-color: var(--_column-actions-background),
+ $tick-color-hover: color-mix(in srgb, var(--_column-actions-foreground) 40%, var(--_column-actions-background)),
+ $fill-color: var(--_column-actions-accent-color),
+ $label-color: var(--_column-actions-foreground),
+ $disabled-color: color-mix(in srgb, var(--_column-actions-foreground) 50%, var(--_column-actions-background)),
+ )
+ );
+
+ @include tokens(
+ drop-down-theme(
+ $schema: $schema,
+ $background-color: var(--_column-actions-background),
+ $item-text-color: var(--_column-actions-foreground),
+ $border-color: color-mix(in srgb, var(--_column-actions-foreground) 12%, var(--_column-actions-background)),
+ $hover-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 8%, var(--_column-actions-background)),
+ $focused-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 12%, var(--_column-actions-background)),
+ $selected-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 12%, var(--_column-actions-background)),
+ $selected-hover-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 16%, var(--_column-actions-background)),
+ $selected-focus-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 24%, var(--_column-actions-background)),
+ )
+ );
+
+ @include tokens(
+ flat-button-theme(
+ $schema: $schema,
+ $foreground: var(--_column-actions-accent-color),
+ $disabled-background: transparent,
+ $disabled-foreground: color-mix(in srgb, var(--_column-actions-accent-color) 50%, var(--_column-actions-background)),
+ )
+ );
+
+ @include tokens(
+ input-group-theme(
+ $schema: $schema,
+ $idle-bottom-line-color: var(--_column-actions-accent-color),
+ $border-color: var(--_column-actions-accent-color),
+ $idle-text-color: var(--_column-actions-foreground),
+ $placeholder-color: color-mix(in srgb, var(--_column-actions-foreground) 80%, var(--_column-actions-background)),
+ )
+ );
+
+ $scrollbar-theme: digest-schema(map.get($schema, 'scrollbar'));
+ $scrollbar-bg-color: map.get($scrollbar-theme, 'sb-track-bg-color');
+ $scrollbar-thumb-color: map.get($scrollbar-theme, 'sb-thumb-bg-color');
+ $scrollbar-track-border-color: map.get($scrollbar-theme, 'sb-track-border-color');
+
+ --_scrollbar-thumb-color: color-mix(in srgb, var(--_column-actions-foreground) 50%, var(--_column-actions-background));
+ --_scrollbar-track-border-color: color-mix(in srgb, var(--_column-actions-foreground) 16%, var(--_column-actions-background));
+
+ @include tokens(
+ scrollbar-theme(
+ $schema: $schema,
+ $sb-track-bg-color: var(--_column-actions-background, $scrollbar-bg-color),
+ $sb-thumb-bg-color: var(--_scrollbar-thumb-color, $scrollbar-thumb-color),
+ $sb-track-border-color: var(--_scrollbar-track-border-color, $scrollbar-track-border-color),
+ ),
+ $mode: 'scoped'
+ );
+ }
+}
diff --git a/projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-theme.scss
index 319f935d6b3..218cfab911a 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-theme.scss
@@ -1,17 +1,20 @@
@use 'sass:map';
@use '../../base' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
+@use './column-actions-derived-themes' as *;
-/// @deprecated Use the `css-vars` mixin instead.
-/// @see {mixin} css-vars
+/// @deprecated Use the `tokens` mixin instead.
+/// @see {mixin} tokens
/// @param {Map} $theme - The theme used to style the component.
@mixin column-actions($theme) {
- @include css-vars($theme);
+ @include tokens($theme, $mode: 'scoped');
+ @include column-actions-derived-themes($theme);
$variant: map.get($theme, '_meta', 'theme');
%column-actions-display {
display: flex;
flex-flow: column nowrap;
- background: var-get($theme, 'background-color');
+ background: var-get($theme, 'background');
box-shadow: elevation(8);
width: 100%;
flex: 1 1 auto;
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-derived-themes.scss b/projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-derived-themes.scss
new file mode 100644
index 00000000000..882bb540d57
--- /dev/null
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-derived-themes.scss
@@ -0,0 +1,38 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
+@use '../_common/extract-theme-schema' as *;
+
+/// Grid toolbar internal theming
+/// @access private
+/// @param {Map} $theme - The grid toolbar theme map.
+@mixin grid-toolbar-derived-themes($theme) {
+ $theme-info: extract-theme-schema($theme);
+ $schema: map.get($theme-info, 'schema');
+
+ :where(igx-grid-toolbar) {
+ --_grid-toolbar-background: var(--background, var(--ig-grid-toolbar-background));
+ --_grid-toolbar-foreground: var(--foreground, var(--ig-grid-toolbar-foreground));
+ --_grid-toolbar-accent-color: var(--accent-color, var(--ig-grid-toolbar-accent-color));
+
+ @include tokens(
+ column-actions-theme(
+ $schema: $schema,
+ $background: var(--_grid-toolbar-background),
+ $foreground: var(--_grid-toolbar-foreground),
+ $title-color: var(--_grid-toolbar-accent-color),
+ $accent-color: var(--_grid-toolbar-accent-color)
+ )
+ );
+
+ @include tokens(
+ outlined-button-theme(
+ $schema: $schema,
+ $foreground: var(--_grid-toolbar-accent-color),
+ $disabled-background: transparent,
+ $disabled-foreground: color-mix(in srgb, var(--_grid-toolbar-accent-color) 50%, var(--_grid-toolbar-background)),
+ $disabled-border-color: color-mix(in srgb, var(--_grid-toolbar-accent-color) 50%, var(--_grid-toolbar-background)),
+ )
+ );
+ }
+}
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
index dcc63f3d22c..8675111a167 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
@@ -1,11 +1,14 @@
@use 'sass:map';
@use '../../base' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
+@use './grid-toolbar-derived-themes' as *;
-/// @deprecated Use the `css-vars` mixin instead.
-/// @see {mixin} css-vars
+/// @deprecated Use the `tokens` mixin instead.
+/// @see {mixin} tokens
/// @param {Map} $theme - The theme used to style the component.
@mixin grid-toolbar($theme) {
- @include css-vars($theme);
+ @include tokens($theme, $mode: 'scoped');
+ @include grid-toolbar-derived-themes($theme);
$variant: map.get($theme, '_meta', 'theme');
$bootstrap-theme: $variant == 'bootstrap';
@@ -67,7 +70,7 @@
grid-row: 1;
font-size: $grid-toolbar-fs;
border-bottom: rem(1px) solid var-get($theme, 'border-color');
- background: var-get($theme, 'background-color');
+ background: var-get($theme, 'background');
height: auto;
min-height: var-get($theme, 'size');
padding-block: 0;
@@ -179,7 +182,7 @@
bottom: rem(-1px);
height: rem(2px);
overflow: hidden;
- background: var-get($theme, 'background-color');
+ background: var-get($theme, 'background');
igx-linear-bar > * {
border-radius: 0;
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-component.scss
index 3e2c91e373a..0afaa1681d8 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-component.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-component.scss
@@ -1,8 +1,19 @@
@use '../../base' as *;
+@use 'sass:string';
/// @access private
/// @author Simeon Simeonoff
@mixin excel-filtering-partial {
+ @include register-component(
+ $name: 'igx-grid-excel-style-filtering',
+ $deps: (
+ igx-button,
+ igx-checkbox,
+ igx-icon-button,
+ igx-input-group,
+ )
+ );
+
@include b(igx-excel-filter) {
@extend %grid-excel-filter !optional;
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-derived-themes.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-derived-themes.scss
new file mode 100644
index 00000000000..49aa84f7b8f
--- /dev/null
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-derived-themes.scss
@@ -0,0 +1,190 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
+@use '../_common/extract-theme-schema' as *;
+
+/// Applies all sub-component token overrides used by the excel filtering.
+/// @access private
+/// @param {Map} $theme - The excel filtering theme map.
+@mixin excel-filtering-derived-themes($theme) {
+ $theme-info: extract-theme-schema($theme);
+ $schema: map.get($theme-info, 'schema');
+ $variant: map.get($theme-info, 'variant');
+
+ :where(
+ igx-grid-excel-style-filtering,
+ .igx-excel-filter__secondary
+ ) {
+ --_excel-filtering-background: var(--background, var(--ig-excel-filtering-background));
+ --_excel-filtering-secondary-background: var(--secondary-background, var(--ig-excel-filtering-secondary-background));
+ --_excel-filtering-foreground: var(--foreground, var(--ig-excel-filtering-foreground));
+ --_excel-filtering-accent-color: var(--accent-color, var(--ig-excel-filtering-accent-color));
+
+ .igx-excel-filter__menu .igx-button-group,
+ .igx-button-group {
+ --ig-btn-group-selected-bg: color-mix(in srgb, var(--_excel-filtering-accent-color) 8%, var(--_excel-filtering-background));
+
+ @include tokens(
+ button-group-theme(
+ $schema: $schema,
+ $item-background: transparent,
+ $item-border-color: transparent,
+ $item-text-color: var(--_excel-filtering-foreground, #{color($color: 'gray', $variant: 700)}),
+ $item-selected-background: if(
+ $variant == 'indigo',
+ var(--ig-btn-group-selected-bg, var(--ig-primary-500)),
+ var(--ig-btn-group-selected-bg, #{color($color: 'gray', $variant: 100)}),
+ ),
+ $item-hover-background: var(--item-selected-background),
+ $item-active-border-color: transparent,
+ $item-selected-text-color: var(--_excel-filtering-accent-color, #{if(
+ $variant == 'indigo',
+ contrast-color($color: 'primary'),
+ if($variant == 'material',
+ color($color: 'secondary', $variant: 500),
+ color($color: 'primary', $variant: 500)
+ )
+ )}),
+ $item-selected-hover-text-color: var(--_excel-filtering-accent-color, #{if(
+ $variant == 'indigo',
+ contrast-color($color: 'primary'),
+ if($variant == 'material',
+ color($color: 'secondary', $variant: 500),
+ color($color: 'primary', $variant: 500)
+ )
+ )}),
+ $item-selected-hover-background: dynamic-shade(var(--item-hover-background), $offset: 3),
+ $shadow: none
+ ),
+ $mode: 'scoped'
+ );
+ }
+
+ @include tokens(
+ contained-button-theme(
+ $schema: $schema,
+ $background: var(--_excel-filtering-accent-color),
+ $disabled-background: color-mix(in srgb, var(--_excel-filtering-accent-color) 50%, var(--_excel-filtering-background)),
+ $disabled-foreground: color-mix(in srgb, var(--_excel-filtering-foreground) 50%, var(--_excel-filtering-background)),
+ )
+ );
+
+ @include tokens(
+ flat-button-theme(
+ $schema: $schema,
+ $foreground: var(--_excel-filtering-accent-color),
+ $disabled-background: transparent,
+ $disabled-foreground: color-mix(in srgb, var(--_excel-filtering-accent-color) 50%, var(--_excel-filtering-background)),
+ )
+ );
+
+ @include tokens(
+ checkbox-theme(
+ $schema: $schema,
+ $empty-color: color-mix(in srgb, var(--_excel-filtering-foreground) 80%, var(--_excel-filtering-background)),
+ $empty-fill-color: var(--_excel-filtering-background),
+ $tick-color-hover: color-mix(in srgb, var(--_excel-filtering-foreground) 40%, var(--_excel-filtering-background)),
+ $fill-color: var(--_excel-filtering-accent-color),
+ $label-color: var(--_excel-filtering-foreground),
+ $disabled-color: color-mix(in srgb, var(--_excel-filtering-foreground) 50%, var(--_excel-filtering-background)),
+ )
+ );
+
+ @include tokens(
+ drop-down-theme(
+ $schema: $schema,
+ $background-color: var(--_excel-filtering-background),
+ $item-text-color: var(--_excel-filtering-foreground),
+ $border-color: color-mix(in srgb, var(--_excel-filtering-foreground) 12%, var(--_excel-filtering-background)),
+ $hover-item-background: color-mix(in srgb, var(--_excel-filtering-accent-color) 8%, var(--_excel-filtering-background)),
+ $focused-item-background: color-mix(in srgb, var(--_excel-filtering-accent-color) 12%, var(--_excel-filtering-background)),
+ $selected-item-background: color-mix(in srgb, var(--_excel-filtering-accent-color) 12%, var(--_excel-filtering-background)),
+ $selected-hover-item-background: color-mix(in srgb, var(--_excel-filtering-accent-color) 16%, var(--_excel-filtering-background)),
+ $selected-focus-item-background: color-mix(in srgb, var(--_excel-filtering-accent-color) 24%, var(--_excel-filtering-background)),
+ )
+ );
+
+ @if $variant == 'material' {
+ @include tokens(
+ input-group-theme(
+ $schema: $schema,
+ $box-background: var(--_excel-filtering-background),
+ $idle-bottom-line-color: var(--_excel-filtering-accent-color),
+ $idle-text-color: var(--_excel-filtering-foreground),
+ $placeholder-color: color-mix(in srgb, var(--_excel-filtering-foreground) 80%, var(--_excel-filtering-background)),
+ )
+ );
+ } @else if $variant == 'indigo' {
+ @include tokens(
+ input-group-theme(
+ $schema: $schema,
+ $idle-bottom-line-color: var(--_excel-filtering-accent-color),
+ $idle-text-color: var(--_excel-filtering-foreground),
+ $placeholder-color: color-mix(in srgb, var(--_excel-filtering-foreground) 80%, var(--_excel-filtering-background)),
+ )
+ );
+ } @else {
+ @include tokens(
+ input-group-theme(
+ $schema: $schema,
+ $border-color: var(--_excel-filtering-accent-color),
+ $idle-text-color: var(--_excel-filtering-foreground),
+ $placeholder-color: color-mix(in srgb, var(--_excel-filtering-foreground) 80%, var(--_excel-filtering-background)),
+ $input-prefix-background: var(--_excel-filtering-accent-color),
+ )
+ );
+ }
+
+ @if $variant == 'indigo' {
+ @include tokens(
+ select-theme(
+ $schema: $schema,
+ $toggle-button-foreground: var(--_excel-filtering-accent-color),
+ $toggle-button-foreground-disabled: color-mix(in srgb, var(--_excel-filtering-accent-color) 50%, var(--_excel-filtering-background)),
+ )
+ );
+ } @else {
+ @include tokens(
+ select-theme(
+ $schema: $schema,
+ $toggle-button-background: var(--_excel-filtering-accent-color),
+ )
+ );
+ }
+
+ @include tokens(
+ flat-icon-button-theme(
+ $schema: $schema,
+ $foreground: var(--_excel-filtering-accent-color),
+ $disabled-background: transparent,
+ $disabled-foreground: color-mix(in srgb, var(--_excel-filtering-accent-color) 50%, var(--_excel-filtering-background)),
+ )
+ );
+
+ @include tokens(
+ list-theme(
+ $schema: $schema,
+ $background: var(--_excel-filtering-secondary-background),
+ $item-background-hover: color-mix(in srgb, var(--_excel-filtering-accent-color) 8%, var(--_excel-filtering-background))
+ )
+ );
+
+ $scrollbar-theme: digest-schema(map.get($schema, 'scrollbar'));
+ $scrollbar-bg-color: map.get($scrollbar-theme, 'sb-track-bg-color');
+ $scrollbar-thumb-color: map.get($scrollbar-theme, 'sb-thumb-bg-color');
+ $scrollbar-track-border-color: map.get($scrollbar-theme, 'sb-track-border-color');
+
+ --_scrollbar-thumb-color: color-mix(in srgb, var(--_excel-filtering-foreground) 50%, var(--_excel-filtering-background));
+ --_scrollbar-track-border-color: color-mix(in srgb, var(--_excel-filtering-foreground) 16%, var(--_excel-filtering-background));
+
+ @include tokens(
+ scrollbar-theme(
+ $schema: $schema,
+ $sb-track-bg-color: var(--_excel-filtering-background, $scrollbar-bg-color),
+ $sb-thumb-bg-color: var(--_scrollbar-thumb-color, $scrollbar-thumb-color),
+ $sb-track-border-color: var(--_scrollbar-track-border-color, $scrollbar-track-border-color),
+ ),
+ $mode: 'scoped'
+ );
+ }
+}
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss
index cb3070acd29..c54d198814b 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss
@@ -1,13 +1,14 @@
@use 'sass:map';
@use '../../base' as *;
-@use '../button-group/button-group-component' as *;
-@use '../button-group/button-group-theme' as *;
-@use '../tree/tree-theme' as *;
+@use 'igniteui-theming/sass/themes/functions' as *;
+@use 'excel-filtering-derived-themes' as *;
-/// @deprecated Use the `css-vars` mixin instead.
-/// @see {mixin} css-vars
-/// @param {Map} $theme - The grid theme used to style the component.
+/// @deprecated Use the `tokens` mixin instead.
+/// @see {mixin} tokens
+/// @param {Map} $theme - The excel theme used to style the component.
@mixin excel-filtering($theme) {
+ @include tokens($theme, $mode: 'scoped');
+ @include excel-filtering-derived-themes($theme);
$variant: map.get($theme, '_meta', 'theme');
$theme-variant: map.get($theme, '_meta', 'variant');
$bootstrap-theme: $variant == 'bootstrap';
@@ -40,7 +41,7 @@
flex-grow: 1;
@if $variant == 'indigo' {
- box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) var-get($theme, 'excel-filtering-border-color');
+ box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) var-get($theme, 'border-color');
// TODO: The border-radius should not be hardcoded.
border-radius: border-radius(rem(4px));
@@ -102,15 +103,7 @@
opacity: 1;
igx-icon {
- color: var-get($theme, 'sorted-header-icon-color');
- }
-
- @if $variant == 'indigo' {
- &:hover {
- igx-icon {
- color: var-get($theme, 'sortable-header-icon-hover-color');
- }
- }
+ color: var-get($theme, 'actions-selected-icon-color');
}
}
@@ -123,12 +116,9 @@
// TODO: The border-radius should not be hardcoded.
border-radius: border-radius(rem(4px));
+ background: var-get($theme, 'background');
- @if $variant != 'indigo' {
- background: var-get($theme, 'filtering-row-background');
- } @else {
- background: var-get($theme, 'filtering-dialog-background');
-
+ @if $variant == 'indigo' {
%igx-group-item {
&:not(:nth-child(1)) {
margin: 0;
@@ -138,17 +128,6 @@
}
}
- @include tree(tree-theme(
- $background: color($color: 'surface'),
- $background-selected: color($color: 'surface'),
- $background-active: color($color: 'surface'),
- $background-active-selected: color($color: 'surface'),
- $foreground: contrast-color($color: 'surface'),
- $foreground-selected: contrast-color($color: 'surface'),
- $foreground-active: contrast-color($color: 'surface'),
- $foreground-active-selected: contrast-color($color: 'surface'),
- ));
-
.igx-tree-node__wrapper {
padding: 0;
}
@@ -171,7 +150,7 @@
padding: pad(rem(4px), rem(8px), rem(16px));
}
- color: var-get($theme, 'excel-filtering-header-foreground');
+ color: var-get($theme, 'header-foreground');
}
@if $variant == 'indigo' {
@@ -234,7 +213,7 @@
}
header {
- color: var-get($theme, 'excel-filtering-subheader-foreground');
+ color: var-get($theme, 'subheader-foreground');
@if $variant == 'indigo' {
margin-block-end: sizable(rem(0), rem(4px), rem(4px)) !important;
@@ -291,7 +270,7 @@
%grid-excel-actions--selected {
igx-icon {
- color: var-get($theme, 'excel-filtering-actions-selected-icon-color');
+ color: var-get($theme, 'actions-selected-icon-color');
}
}
@@ -334,16 +313,16 @@
}
cursor: pointer;
- color: var-get($theme, 'excel-filtering-actions-foreground');
+ color: var-get($theme, 'actions-foreground');
outline-style: none;
&:hover,
&:focus {
- color: var-get($theme, 'excel-filtering-actions-hover-foreground');
- background: var-get($theme, 'excel-filtering-actions-hover-background');
+ color: var-get($theme, 'actions-hover-foreground');
+ background: var-get($theme, 'actions-hover-background');
igx-icon {
- color: var-get($theme, 'excel-filtering-actions-hover-icon-color');
+ color: var-get($theme, 'actions-hover-icon-color');
}
}
@@ -351,7 +330,7 @@
igx-icon {
--component-size: 2;
- color: var-get($theme, 'excel-filtering-actions-icon-color');
+ color: var-get($theme, 'actions-icon-color');
}
}
@@ -369,16 +348,16 @@
}
%grid-excel-actions__action--active {
- color: var-get($theme, 'excel-filtering-actions-hover-foreground');
+ color: var-get($theme, 'actions-hover-foreground');
}
%grid-excel-actions__action--disabled {
- color: var-get($theme, 'excel-filtering-actions-disabled-foreground');
+ color: var-get($theme, 'actions-disabled-foreground');
pointer-events: none;
@if $variant == 'indigo' {
igx-icon {
- color: var-get($theme, 'excel-filtering-actions-disabled-foreground');
+ color: var-get($theme, 'actions-disabled-foreground');
}
}
}
@@ -387,7 +366,7 @@
display: grid;
place-items: center;
height: 100%;
- color: var-get($theme, 'excel-filtering-subheader-foreground');
+ color: var-get($theme, 'subheader-foreground');
}
%grid-excel-main {
@@ -409,8 +388,6 @@
overflow: hidden;
@if $variant == 'indigo' {
- --background: var(--_grid-background, #{color($color: 'surface', $variant: 500)});
-
margin-inline: calc(sizable(rem(-16px)) * -1);
// This is the only way to take the gap from the list,
@@ -430,8 +407,8 @@
}
border: 0;
- border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
- border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
+ border-top: rem(1px) dashed var-get($theme, 'border-color');
+ border-bottom: rem(1px) dashed var-get($theme, 'border-color');
}
%igx-excel-filter__tree {
@@ -440,8 +417,8 @@
margin-inline: calc(pad-inline(rem(-4px), rem(-8px), rem(-16px)) * -1);
margin-block: 0;
flex: 1;
- border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
- border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
+ border-top: rem(1px) dashed var-get($theme, 'border-color');
+ border-bottom: rem(1px) dashed var-get($theme, 'border-color');
igx-icon {
width: var(--ig-icon-size, #{$tree-node-expander-size});
@@ -542,7 +519,7 @@
%grid-excel-menu__secondary {
width: rem(520px);
min-width: rem(520px);
- background: var-get($theme, 'filtering-row-background');
+ background: var-get($theme, 'secondary-background');
box-shadow: elevation(12);
border-radius: border-radius(rem(4px));
}
@@ -619,7 +596,7 @@
@if $bootstrap-theme {
padding-block-start: pad-block(rem(16px));
- border-top: rem(1px) solid color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 20%, var(--_grid-background, var(--ig-gray-300)));
+ border-top: rem(1px) solid var-get($theme, 'border-color');
}
%grid-excel-filter__apply,
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss
index 28598c12fde..44137c2010c 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss
@@ -17,11 +17,13 @@
$deps: (
igx-checkbox,
igx-chip,
+ igx-grid-excel-style-filtering,
igx-grid-summary,
igx-icon-button,
igx-input-group,
igx-grid-toolbar,
igx-paginator,
+ igx-query-builder,
igx-watermark,
)
);
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme-builder.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss
similarity index 76%
rename from projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme-builder.scss
rename to projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss
index 89ea0cd3218..bb3e6ce01ab 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme-builder.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss
@@ -1,29 +1,15 @@
@use 'sass:map';
@use '../../base' as *;
-@use 'igniteui-theming/sass/themes/schemas' as *;
-
+@use '../_common/extract-theme-schema' as *;
/// Applies all sub-component token overrides used by the grid.
/// @access private
/// @param {Map} $theme - The grid theme map.
-@mixin grid-theme-builder($theme) {
- $variant: map.get($theme, '_meta', 'theme');
- $theme-variant: map.get($theme, '_meta', 'variant');
-
- $schema: map.get(
- (
- 'light-material': $light-material-schema,
- 'light-bootstrap': $light-bootstrap-schema,
- 'light-fluent': $light-fluent-schema,
- 'light-indigo': $light-indigo-schema,
- 'dark-material': $dark-material-schema,
- 'dark-bootstrap': $dark-bootstrap-schema,
- 'dark-fluent': $dark-fluent-schema,
- 'dark-indigo': $dark-indigo-schema,
- ),
- '#{$theme-variant}-#{$variant}'
- );
+@mixin grid-derived-themes($theme) {
+ $theme-info: extract-theme-schema($theme);
+ $schema: map.get($theme-info, 'schema');
+ $variant: map.get($theme-info, 'variant');
- igx-grid,
+ :where(igx-grid,
igc-grid,
igx-tree-grid,
igc-tree-grid,
@@ -32,7 +18,7 @@
igx-pivot-grid,
igc-pivot-grid,
igx-grid-lite,
- igc-grid-lite {
+ igc-grid-lite) {
--_grid-background: var(--background, var(--ig-grid-background));
--_grid-foreground: var(--foreground, var(--ig-grid-foreground));
--_grid-accent-color: var(--accent-color, var(--ig-grid-accent-color));
@@ -63,73 +49,6 @@
)
);
- .igx-excel-filter__menu .igx-button-group,
- .igx-button-group {
- --ig-btn-group-selected-bg: color-mix(in srgb, var(--_grid-accent-color) 8%, var(--_grid-background));
-
- @include tokens(
- button-group-theme(
- $schema: $schema,
- $item-background: var(--_grid-background, #{var-get($theme, if($variant == 'indigo', 'filtering-dialog-background', 'filtering-row-background'))}),
- $item-border-color: transparent,
- $item-text-color: var(--_grid-foreground, #{color($color: 'gray', $variant: 700)}),
- $item-selected-background: if(
- $variant == 'indigo',
- var(--ig-btn-group-selected-bg, var(--ig-primary-500)),
- var(--ig-btn-group-selected-bg, #{color($color: 'gray', $variant: 100)}),
- ),
- $item-hover-background: var(--item-selected-background),
- $item-selected-text-color: var(--_grid-accent-color, #{if(
- $variant == 'indigo',
- contrast-color($color: 'primary'),
- if($variant == 'material',
- color($color: 'secondary', $variant: 500),
- color($color: 'primary', $variant: 500)
- )
- )}),
- $item-selected-hover-text-color: var(--_grid-accent-color, #{if(
- $variant == 'indigo',
- contrast-color($color: 'primary'),
- if($variant == 'material',
- color($color: 'secondary', $variant: 500),
- color($color: 'primary', $variant: 500)
- )
- )}),
- $item-selected-hover-background: dynamic-shade(var(--item-hover-background), $offset: 3),
- $shadow: none
- ),
- $mode: 'scoped'
- );
- }
-
- @include tokens(
- contained-button-theme(
- $schema: $schema,
- $background: var(--_grid-accent-color),
- $disabled-background: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
- $disabled-foreground: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background)),
- )
- );
-
- @include tokens(
- flat-button-theme(
- $schema: $schema,
- $foreground: var(--_grid-accent-color),
- $disabled-background: transparent,
- $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
- )
- );
-
- @include tokens(
- outlined-button-theme(
- $schema: $schema,
- $foreground: var(--_grid-accent-color),
- $disabled-background: transparent,
- $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
- $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
- )
- );
-
@include tokens(
calendar-theme(
$header-background: var(--_grid-accent-color),
@@ -164,10 +83,11 @@
);
@include tokens(
- column-actions-theme(
+ contained-button-theme(
$schema: $schema,
- $background-color: var(--_grid-background),
- $title-color: var(--_grid-accent-color)
+ $background: var(--_grid-accent-color),
+ $disabled-background: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+ $disabled-foreground: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background)),
)
);
@@ -186,55 +106,66 @@
);
@include tokens(
- grid-summary-theme(
+ excel-filtering-theme(
+ $background: var(--_grid-background),
+ $foreground: var(--_grid-foreground),
+ $accent-color: var(--_grid-accent-color),
+ $header-foreground: var(--excel-filtering-header-foreground),
+ $subheader-foreground: var(--excel-filtering-subheader-foreground),
+ $actions-foreground: var(--excel-filtering-actions-foreground),
+ $actions-icon-color: var(--excel-filtering-actions-icon-color),
+ $actions-hover-foreground: var(--excel-filtering-actions-hover-foreground),
+ $actions-hover-icon-color: var(--excel-filtering-actions-hover-icon-color),
+ $actions-selected-icon-color: var(--excel-filtering-actions-selected-icon-color),
+ $actions-hover-background: var(--excel-filtering-actions-hover-background),
+ $actions-disabled-foreground: var(--excel-filtering-actions-disabled-foreground),
+ $border-color: var(--excel-filtering-border-color),
+ )
+ );
+
+ @include tokens(
+ flat-button-theme(
$schema: $schema,
- $background-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
- $border-color: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background)),
- $pinned-border-color: color-mix(in srgb, var(--_grid-foreground) 30%, var(--_grid-background)),
- $label-color: var(--_grid-accent-color),
- $result-color: var(--_grid-foreground)
+ $foreground: var(--_grid-accent-color),
+ $disabled-background: transparent,
+ $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
)
);
@include tokens(
- grid-toolbar-theme(
+ flat-icon-button-theme(
$schema: $schema,
- $background-color: var(--_grid-background),
- $title-text-color: var(--_grid-foreground),
- $dropdown-background: var(--_grid-background),
- $item-text-color: var(--_grid-foreground),
- $item-hover-background: color-mix(in srgb, var(--_grid-accent-color) 8%, var(--_grid-background)),
- $item-hover-text-color: var(--_grid-foreground),
- $item-focus-background: color-mix(in srgb, var(--_grid-accent-color) 12%, var(--_grid-background)),
- $item-focus-text-color: var(--_grid-foreground),
- $border-color: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background))
+ $foreground: var(--_grid-accent-color),
+ $disabled-background: transparent,
+ $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
)
);
@include tokens(
- highlight-theme(
+ grid-summary-theme(
$schema: $schema,
- $resting-background: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
- $active-background: var(--_grid-accent-color)
+ $background-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+ $border-color: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background)),
+ $pinned-border-color: color-mix(in srgb, var(--_grid-foreground) 30%, var(--_grid-background)),
+ $label-color: var(--_grid-accent-color),
+ $result-color: var(--_grid-foreground)
)
);
@include tokens(
- flat-icon-button-theme(
+ grid-toolbar-theme(
$schema: $schema,
- $foreground: var(--_grid-accent-color),
- $disabled-background: transparent,
- $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+ $background: var(--_grid-background),
+ $foreground: var(--_grid-foreground),
+ $accent-color: var(--_grid-accent-color)
)
);
@include tokens(
- outlined-icon-button-theme(
+ highlight-theme(
$schema: $schema,
- $foreground: var(--_grid-accent-color),
- $disabled-background: transparent,
- $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
- $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background))
+ $resting-background: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
+ $active-background: var(--_grid-accent-color)
)
);
@@ -276,19 +207,32 @@
}
@include tokens(
- list-theme(
+ outlined-button-theme(
$schema: $schema,
- $background: var(--_grid-background),
- $item-background-hover: color-mix(in srgb, var(--_grid-accent-color) 8%, var(--_grid-background))
+ $foreground: var(--_grid-accent-color),
+ $disabled-background: transparent,
+ $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+ $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+ )
+ );
+
+ @include tokens(
+ outlined-icon-button-theme(
+ $schema: $schema,
+ $foreground: var(--_grid-accent-color),
+ $disabled-background: transparent,
+ $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+ $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background))
)
);
@include tokens(
paginator-theme(
$schema: $schema,
- $background-color: var(--_grid-background),
- $text-color: var(--_grid-foreground),
+ $background: var(--_grid-background),
+ $foreground: var(--_grid-foreground),
$border-color: color-mix(in srgb, var(--_grid-foreground) 16%, var(--_grid-background)),
+ $accent-color: var(--_grid-accent-color)
)
);
@@ -315,6 +259,8 @@
query-builder-theme(
$schema: $schema,
$background: var(--_grid-background),
+ $foreground: var(--_grid-foreground),
+ $accent-color: var(--_grid-accent-color),
$header-foreground: var(--_grid-foreground),
$header-border: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background)),
)
@@ -324,6 +270,8 @@
query-builder-theme(
$schema: $schema,
$background: var(--_grid-background),
+ $foreground: var(--_grid-foreground),
+ $accent-color: var(--_grid-accent-color),
$header-foreground: var(--_grid-foreground),
)
);
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
index a5f9779a215..787d0a7eee9 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
@@ -4,7 +4,7 @@
@use './excel-filtering-theme' as *;
@use 'igniteui-theming/sass/animations' as *;
@use 'igniteui-theming/sass/themes/schemas' as *;
-@use './grid-theme-builder' as *;
+@use './grid-derived-themes' as *;
@mixin _filtering-scroll-mask($theme, $dir) {
display: block;
@@ -15,14 +15,14 @@
background: linear-gradient(to #{$dir}, var-get($theme, 'filtering-row-background'), transparent);
}
-/// @deprecated Use the `css-vars` mixin instead.
-/// @see {mixin} css-vars
+/// @deprecated Use the `tokens` mixin instead.
+/// @see {mixin} tokens
/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} excel-filtering
@mixin grid($theme) {
- @include css-vars($theme);
+ @include tokens($theme, $mode: 'scoped');
@include scale-in-ver-center();
- @include grid-theme-builder($theme);
+ @include grid-derived-themes($theme);
$variant: map.get($theme, '_meta', 'theme');
$theme-variant: map.get($theme, '_meta', 'variant');
@@ -901,12 +901,16 @@
outline: rem(1px) solid var-get($theme, 'row-ghost-border-color');
z-index: 10002;
- @include css-vars((
- name: 'igx-grid-row',
- row-ghost-background: map.get($theme, 'row-ghost-background'),
- row-drag-color: map.get($theme, 'row-drag-color'),
- row-ghost-border-color: map.get($theme, 'row-ghost-border-color')
- ));
+ $ghost-row-tokens: (
+ _meta: (
+ name: 'grid'
+ ),
+ 'row-ghost-background': map.get($theme, 'row-ghost-background'),
+ 'row-drag-color': map.get($theme, 'row-drag-color'),
+ 'row-ghost-border-color': map.get($theme, 'row-ghost-border-color')
+ );
+
+ @include tokens($ghost-row-tokens, $mode: 'scoped');
}
}
@@ -2688,35 +2692,6 @@
}
}
- @include excel-filtering($theme);
-
- %advanced-filtering-dialog {
- background: var-get($theme, 'filtering-dialog-background');
- box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24));
-
- @if $variant == 'material' or $variant == 'bootstrap' {
- border-radius: rem(4px);
- }
-
- @if $variant == 'fluent' {
- border-radius: rem(2px);
- }
-
- @if $variant == 'indigo' {
- border-radius: rem(10px);
- }
-
- igx-query-builder {
- box-shadow: none;
- border: none;
- border-radius: inherit;
- }
-
- igx-query-builder-header {
- cursor: grab;
- }
- }
-
%igx-grid__filtering-row-editing-buttons--small,
%igx-grid__filtering-row-editing-buttons {
display: flex;
diff --git a/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-derived-themes.scss b/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-derived-themes.scss
new file mode 100644
index 00000000000..eb34d437fbc
--- /dev/null
+++ b/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-derived-themes.scss
@@ -0,0 +1,70 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
+@use '../_common/extract-theme-schema' as *;
+
+/// Paginator internal theming
+/// @access private
+/// @param {Map} $theme - The paginator theme map.
+@mixin paginator-derived-themes($theme) {
+ $theme-info: extract-theme-schema($theme);
+ $schema: map.get($theme-info, 'schema');
+ $variant: map.get($theme-info, 'variant');
+
+ :where(igx-paginator) {
+ --_paginator-background: var(--background, var(--ig-paginator-background));
+ --_paginator-foreground: var(--foreground, var(--ig-paginator-foreground));
+ --_paginator-accent-color: var(--accent-color, var(--ig-paginator-accent-color));
+
+ @include tokens(
+ drop-down-theme(
+ $schema: $schema,
+ $background-color: var(--_paginator-background),
+ $item-text-color: var(--_paginator-foreground),
+ $border-color: color-mix(in srgb, var(--_paginator-foreground) 12%, var(--_paginator-background)),
+ $hover-item-background: color-mix(in srgb, var(--_paginator-accent-color) 8%, var(--_paginator-background)),
+ $focused-item-background: color-mix(in srgb, var(--_paginator-accent-color) 12%, var(--_paginator-background)),
+ $selected-item-background: color-mix(in srgb, var(--_paginator-accent-color) 12%, var(--_paginator-background)),
+ $selected-hover-item-background: color-mix(in srgb, var(--_paginator-accent-color) 16%, var(--_paginator-background)),
+ $selected-focus-item-background: color-mix(in srgb, var(--_paginator-accent-color) 24%, var(--_paginator-background)),
+ )
+ );
+
+ @include tokens(
+ flat-icon-button-theme(
+ $schema: $schema,
+ $foreground: var(--_paginator-accent-color),
+ $disabled-background: transparent,
+ $disabled-foreground: color-mix(in srgb, var(--_paginator-accent-color) 50%, var(--_paginator-background)),
+ )
+ );
+
+ @include tokens(
+ input-group-theme(
+ $schema: $schema,
+ $idle-bottom-line-color: var(--_paginator-accent-color),
+ $border-color: var(--_paginator-accent-color),
+ $idle-text-color: var(--_paginator-foreground),
+ $placeholder-color: color-mix(in srgb, var(--_paginator-foreground) 80%, var(--_paginator-background)),
+ )
+ );
+
+ @if $variant == 'indigo' {
+ @include tokens(
+ select-theme(
+ $schema: $schema,
+ $toggle-button-foreground: var(--_paginator-accent-color),
+ $toggle-button-foreground-disabled: color-mix(in srgb, var(--_paginator-accent-color) 50%, var(--_paginator-background)),
+ )
+ );
+ } @else {
+ @include tokens(
+ select-theme(
+ $schema: $schema,
+ $toggle-button-background: var(--_paginator-accent-color),
+ )
+ );
+ }
+ }
+
+}
diff --git a/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-theme.scss
index 5aeb1c6ed8b..13aae749e9d 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-theme.scss
@@ -1,11 +1,13 @@
@use 'sass:map';
@use '../../base' as *;
+@use './paginator-derived-themes' as *;
-/// @deprecated Use the `css-vars` mixin instead.
-/// @see {mixin} css-vars
+/// @deprecated Use the `tokens` mixin instead.
+/// @see {mixin} tokens
/// @param {Map} $theme - The theme used to style the component.
@mixin paginator($theme) {
- @include css-vars($theme);
+ @include tokens($theme, $mode: 'scoped');
+ @include paginator-derived-themes($theme);
$variant: map.get($theme, '_meta', 'theme');
@@ -21,8 +23,8 @@
display: flex;
justify-content: space-between;
align-items: center;
- color: var-get($theme, 'text-color');
- background: var-get($theme, 'background-color');
+ color: var-get($theme, 'foreground');
+ background: var-get($theme, 'background');
font-size: rem(12px);
border-top: rem(1px) solid var-get($theme, 'border-color');
diff --git a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss
index fce80b8f03d..b63bbcf5f12 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss
@@ -1,5 +1,6 @@
@use '../../base' as *;
@use 'sass:string';
+@use '../grid/advanced-filtering-component' as *;
/// @access private
/// @author Simeon Simeonoff
@@ -110,10 +111,10 @@
@include e(expression-item-drop-ghost) {
@extend %filter-tree__expression-item-ghost !optional;
}
-
- @include e(expression-item-keyboard-ghost) {
- @extend %filter-tree__expression-item-keyboard-ghost !optional;
- }
+
+ @include e(expression-item-keyboard-ghost) {
+ @extend %filter-tree__expression-item-keyboard-ghost !optional;
+ }
@include e(expression-column) {
@extend %filter-tree__expression-column !optional;
diff --git a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-derived-themes.scss b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-derived-themes.scss
new file mode 100644
index 00000000000..23e00c47a99
--- /dev/null
+++ b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-derived-themes.scss
@@ -0,0 +1,169 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use '../_common/extract-theme-schema' as *;
+
+/// Query Builder internal theming
+/// @access private
+/// @param {Map} $theme - The query builder theme map.
+@mixin query-builder-derived-themes($theme) {
+ $theme-info: extract-theme-schema($theme);
+ $schema: map.get($theme-info, 'schema');
+ $variant: map.get($theme-info, 'variant');
+
+ @include tokens($theme, $mode: 'scoped', $scope: 'igx-advanced-filtering-dialog');
+
+ :where(igx-query-builder, igx-advanced-filtering-dialog) {
+ --_query-builder-background: var(--background, var(--ig-query-builder-background));
+ --_query-builder-foreground: var(--foreground, var(--ig-query-builder-foreground));
+ --_query-builder-accent-color: var(--accent-color, var(--ig-query-builder-accent-color));
+
+ @include tokens(
+ checkbox-theme(
+ $schema: $schema,
+ $empty-color: color-mix(in srgb, var(--_query-builder-foreground) 80%, var(--_query-builder-background)),
+ $empty-fill-color: var(--_query-builder-background),
+ $tick-color-hover: color-mix(in srgb, var(--_query-builder-foreground) 40%, var(--_query-builder-background)),
+ $fill-color: var(--_query-builder-accent-color),
+ $label-color: var(--_query-builder-foreground),
+ $disabled-color: color-mix(in srgb, var(--_query-builder-foreground) 50%, var(--_query-builder-background)),
+ )
+ );
+
+ @include tokens(
+ chip-theme(
+ $schema: $schema,
+ $background: color-mix(in srgb, var(--_query-builder-foreground) 12%, var(--_query-builder-background)),
+ $text-color: var(--_query-builder-foreground),
+ $ghost-background: color-mix(in srgb, var(--_query-builder-foreground) 12%, var(--_query-builder-background)),
+ $ghost-text-color: var(--_query-builder-foreground),
+ $disabled-background: color-mix(in srgb, var(--_query-builder-foreground) 12%, var(--_query-builder-background)),
+ $disabled-text-color: color-mix(in srgb, var(--_query-builder-foreground) 50%, var(--_query-builder-background)),
+ $disabled-border-color: color-mix(in srgb, var(--_query-builder-foreground) 24%, var(--_query-builder-background)),
+ )
+ );
+
+ @if $variant == 'indigo' {
+ @include tokens(
+ combo-theme(
+ $schema: $schema,
+ $toggle-button-foreground: var(--_query-builder-accent-color),
+ $toggle-button-foreground-disabled: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+ $clear-button-foreground: var(--_query-builder-foreground)
+ )
+ );
+ } @else {
+ @include tokens(
+ combo-theme(
+ $schema: $schema,
+ $toggle-button-background: var(--_query-builder-accent-color),
+ $clear-button-foreground: var(--_query-builder-foreground)
+ )
+ );
+ }
+
+ @include tokens(
+ contained-button-theme(
+ $schema: $schema,
+ $background: var(--_query-builder-accent-color),
+ $disabled-background: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+ $disabled-foreground: color-mix(in srgb, var(--_query-builder-foreground) 50%, var(--_query-builder-background)),
+ )
+ );
+
+ @include tokens(
+ drop-down-theme(
+ $schema: $schema,
+ $background-color: var(--_query-builder-background),
+ $item-text-color: var(--_query-builder-foreground),
+ $border-color: color-mix(in srgb, var(--_query-builder-foreground) 12%, var(--_query-builder-background)),
+ $hover-item-background: color-mix(in srgb, var(--_query-builder-accent-color) 8%, var(--_query-builder-background)),
+ $focused-item-background: color-mix(in srgb, var(--_query-builder-accent-color) 12%, var(--_query-builder-background)),
+ $selected-item-background: color-mix(in srgb, var(--_query-builder-accent-color) 12%, var(--_query-builder-background)),
+ $selected-hover-item-background: color-mix(in srgb, var(--_query-builder-accent-color) 16%, var(--_query-builder-background)),
+ $selected-focus-item-background: color-mix(in srgb, var(--_query-builder-accent-color) 24%, var(--_query-builder-background)),
+ )
+ );
+
+ @include tokens(
+ flat-button-theme(
+ $schema: $schema,
+ $foreground: var(--_query-builder-accent-color),
+ $disabled-background: transparent,
+ $disabled-foreground: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+ )
+ );
+
+ @include tokens(
+ input-group-theme(
+ $schema: $schema,
+ $idle-bottom-line-color: var(--_query-builder-accent-color),
+ $box-background: var(--_query-builder-background),
+ $border-color: var(--_query-builder-accent-color),
+ $idle-text-color: var(--_query-builder-foreground),
+ $placeholder-color: color-mix(in srgb, var(--_query-builder-foreground) 80%, var(--_query-builder-background)),
+ )
+ );
+
+ @include tokens(
+ outlined-button-theme(
+ $schema: $schema,
+ $foreground: var(--_query-builder-accent-color),
+ $disabled-background: transparent,
+ $disabled-foreground: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+ $disabled-border-color: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+ )
+ );
+
+ @include tokens(
+ outlined-icon-button-theme(
+ $schema: $schema,
+ $foreground: var(--_query-builder-accent-color),
+ $disabled-background: transparent,
+ $disabled-foreground: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+ $disabled-border-color: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background))
+ )
+ );
+
+ $scrollbar-theme: digest-schema(map.get($schema, 'scrollbar'));
+ $scrollbar-bg-color: map.get($scrollbar-theme, 'sb-track-bg-color');
+ $scrollbar-thumb-color: map.get($scrollbar-theme, 'sb-thumb-bg-color');
+ $scrollbar-track-border-color: map.get($scrollbar-theme, 'sb-track-border-color');
+
+ --_scrollbar-thumb-color: color-mix(in srgb, var(--_query-builder-foreground) 50%, var(--_query-builder-background));
+ --_scrollbar-track-border-color: color-mix(in srgb, var(--_query-builder-foreground) 16%, var(--_query-builder-background));
+
+ @include tokens(
+ scrollbar-theme(
+ $schema: $schema,
+ $sb-track-bg-color: var(--_query-builder-background, $scrollbar-bg-color),
+ $sb-thumb-bg-color: var(--_scrollbar-thumb-color, $scrollbar-thumb-color),
+ $sb-track-border-color: var(--_scrollbar-track-border-color, $scrollbar-track-border-color),
+ ),
+ $mode: 'scoped'
+ );
+
+ @if $variant == 'indigo' {
+ @include tokens(
+ select-theme(
+ $schema: $schema,
+ $toggle-button-foreground: var(--_query-builder-accent-color),
+ $toggle-button-foreground-disabled: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+ )
+ );
+ } @else {
+ @include tokens(
+ select-theme(
+ $schema: $schema,
+ $toggle-button-background: var(--_query-builder-accent-color),
+ )
+ );
+ }
+
+ @include tokens(
+ tooltip-theme(
+ $schema: $schema,
+ $background: hsl(from var(--_query-builder-foreground) h s l / 80%)
+ ),
+ );
+ }
+}
diff --git a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss
index a579ad671e4..3d94d4f6a41 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss
@@ -1,11 +1,13 @@
@use 'sass:map';
@use '../../base' as *;
+@use 'query-builder-derived-themes' as *;
-/// @deprecated Use the `css-vars` mixin instead.
-/// @see {mixin} css-vars
+/// @deprecated Use the `tokens` mixin instead.
+/// @see {mixin} tokens
/// @param {Map} $theme - The grid theme used to style the component.
@mixin query-builder($theme) {
- @include css-vars($theme);
+ @include tokens($theme, $mode: 'scoped');
+ @include query-builder-derived-themes($theme);
$variant: map.get($theme, '_meta', 'theme');
$theme-variant: map.get($theme, '_meta', 'variant');
@@ -562,6 +564,33 @@
flex-grow: 1;
}
}
+
+ %advanced-filtering-dialog {
+ background: var-get($theme, 'background');
+ box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24));
+
+ @if $variant == 'material' or $variant == 'bootstrap' {
+ border-radius: rem(4px);
+ }
+
+ @if $variant == 'fluent' {
+ border-radius: rem(2px);
+ }
+
+ @if $variant == 'indigo' {
+ border-radius: rem(10px);
+ }
+
+ igx-query-builder {
+ box-shadow: none;
+ border: none;
+ border-radius: inherit;
+ }
+
+ igx-query-builder-header {
+ cursor: grab;
+ }
+ }
}
/// Adds typography styles for the igx-query-builder component.
diff --git a/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss
index 16ca17025ea..780334b43ec 100644
--- a/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss
+++ b/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss
@@ -474,6 +474,17 @@
@include grid($grid-theme-map);
}
+ @if is-used('igx-grid-excel-style-filtering', $exclude) {
+ $grid-excel-style-filtering-theme-map: excel-filtering-theme(
+ $schema: $schema,
+ );
+ $grid-excel-style-filtering-theme-map: meta.call(
+ $theme-handler,
+ $grid-excel-style-filtering-theme-map
+ );
+ @include excel-filtering($grid-excel-style-filtering-theme-map);
+ }
+
@if is-used('igx-grid-summary', $exclude) {
$grid-summary-theme-map: grid-summary-theme(
$schema: $schema,
diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json
index a7da8435657..7fae5e49350 100644
--- a/projects/igniteui-angular/migrations/migration-collection.json
+++ b/projects/igniteui-angular/migrations/migration-collection.json
@@ -284,6 +284,11 @@
"version": "21.2.0",
"description": "Updates Ignite UI for Angular from v21.1.x to v21.2.0",
"factory": "./update-21_2_0"
+ },
+ "migration-56": {
+ "version": "21.2.2",
+ "description": "Updates Ignite UI for Angular from v21.2.0 to v21.2.2",
+ "factory": "./update-21_2_2"
}
}
}
diff --git a/projects/igniteui-angular/migrations/update-21_2_2/changes/theme-changes.json b/projects/igniteui-angular/migrations/update-21_2_2/changes/theme-changes.json
new file mode 100644
index 00000000000..848399fc70d
--- /dev/null
+++ b/projects/igniteui-angular/migrations/update-21_2_2/changes/theme-changes.json
@@ -0,0 +1,29 @@
+{
+ "$schema": "../../common/schema/theme-changes.schema.json",
+ "changes": [
+ {
+ "name": "$background-color",
+ "replaceWith": "$background",
+ "owner": "column-actions-theme",
+ "type": "property"
+ },
+ {
+ "name": "$background-color",
+ "replaceWith": "$background",
+ "owner": "grid-toolbar-theme",
+ "type": "property"
+ },
+ {
+ "name": "$text-color",
+ "replaceWith": "$foreground",
+ "owner": "paginator-theme",
+ "type": "property"
+ },
+ {
+ "name": "$background-color",
+ "replaceWith": "$background",
+ "owner": "paginator-theme",
+ "type": "property"
+ }
+ ]
+}
diff --git a/projects/igniteui-angular/migrations/update-21_2_2/index.spec.ts b/projects/igniteui-angular/migrations/update-21_2_2/index.spec.ts
new file mode 100644
index 00000000000..e692a328435
--- /dev/null
+++ b/projects/igniteui-angular/migrations/update-21_2_2/index.spec.ts
@@ -0,0 +1,175 @@
+import * as path from 'path';
+
+import {
+ SchematicTestRunner,
+ UnitTestTree,
+} from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '21.2.2';
+const columnActionsThemes = ['column-actions-theme'];
+const gridToolbarThemes = ['grid-toolbar-theme'];
+const paginatorThemes = ['paginator-theme'];
+const testFilePath = '/testSrc/appPrefix/component/test.component.scss';
+
+describe(`Update to ${version}`, () => {
+ let appTree: UnitTestTree;
+ const schematicRunner = new SchematicTestRunner(
+ 'ig-migrate',
+ path.join(__dirname, '../migration-collection.json')
+ );
+
+ beforeEach(() => {
+ appTree = setupTestTree();
+ });
+
+ const migrationName = 'migration-56';
+
+ columnActionsThemes.forEach((theme) => {
+ it(`should rename $background-color to $background in ${theme}`, async () => {
+ appTree.create(
+ testFilePath,
+ `$custom-${theme}: ${theme}($background-color: red);`
+ );
+
+ const tree = await schematicRunner.runSchematic(
+ migrationName,
+ {},
+ appTree
+ );
+
+ expect(tree.readContent(testFilePath)).toEqual(
+ `$custom-${theme}: ${theme}($background: red);`
+ );
+ });
+ });
+
+ gridToolbarThemes.forEach((theme) => {
+ it(`should rename $background-color to $background in ${theme}`, async () => {
+ appTree.create(
+ testFilePath,
+ `$custom-${theme}: ${theme}($background-color: red);`
+ );
+
+ const tree = await schematicRunner.runSchematic(
+ migrationName,
+ {},
+ appTree
+ );
+
+ expect(tree.readContent(testFilePath)).toEqual(
+ `$custom-${theme}: ${theme}($background: red);`
+ );
+ });
+ });
+
+ it('should rename --ig-column-actions-background-color CSS variable', async () => {
+ appTree.create(
+ testFilePath,
+ `igx-column-actions { --ig-column-actions-background-color: #fff; }`
+ );
+
+ const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+ expect(tree.readContent(testFilePath)).toEqual(
+ `igx-column-actions { --ig-column-actions-background: #fff; }`
+ );
+ });
+
+ it('should rename --ig-grid-toolbar-background-color CSS variable', async () => {
+ appTree.create(
+ testFilePath,
+ `igx-grid-toolbar { --ig-grid-toolbar-background-color: #333; }`
+ );
+
+ const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+ expect(tree.readContent(testFilePath)).toEqual(
+ `igx-grid-toolbar { --ig-grid-toolbar-background: #333; }`
+ );
+ });
+
+ it('should rename --ig-grid-filtering-dialog-background to --ig-query-builder-background', async () => {
+ appTree.create(
+ testFilePath,
+ `igx-grid { --ig-grid-filtering-dialog-background: #111; }`
+ );
+
+ const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+ expect(tree.readContent(testFilePath)).toEqual(
+ `igx-grid { --ig-query-builder-background: #111; }`
+ );
+ });
+
+ it('should leave unrelated CSS variables unchanged', async () => {
+ const original = `igx-grid { --ig-grid-content-background: #fff; }`;
+ appTree.create(testFilePath, original);
+
+ const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+ expect(tree.readContent(testFilePath)).toEqual(original);
+ });
+
+ paginatorThemes.forEach((theme) => {
+ it(`should rename $text-color to $foreground in ${theme}`, async () => {
+ appTree.create(
+ testFilePath,
+ `$custom-${theme}: ${theme}($text-color: red);`
+ );
+
+ const tree = await schematicRunner.runSchematic(
+ migrationName,
+ {},
+ appTree
+ );
+
+ expect(tree.readContent(testFilePath)).toEqual(
+ `$custom-${theme}: ${theme}($foreground: red);`
+ );
+ });
+
+ it(`should rename $background-color to $background in ${theme}`, async () => {
+ appTree.create(
+ testFilePath,
+ `$custom-${theme}: ${theme}($background-color: blue);`
+ );
+
+ const tree = await schematicRunner.runSchematic(
+ migrationName,
+ {},
+ appTree
+ );
+
+ expect(tree.readContent(testFilePath)).toEqual(
+ `$custom-${theme}: ${theme}($background: blue);`
+ );
+ });
+ });
+
+ it('should rename --ig-paginator-text-color CSS variable', async () => {
+ appTree.create(
+ testFilePath,
+ `igx-paginator { --ig-paginator-text-color: #000; }`
+ );
+
+ const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+ expect(tree.readContent(testFilePath)).toEqual(
+ `igx-paginator { --ig-paginator-foreground: #000; }`
+ );
+ });
+
+ it('should rename --ig-paginator-background-color CSS variable', async () => {
+ appTree.create(
+ testFilePath,
+ `igx-paginator { --ig-paginator-background-color: #eee; }`
+ );
+
+ const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+ expect(tree.readContent(testFilePath)).toEqual(
+ `igx-paginator { --ig-paginator-background: #eee; }`
+ );
+ });
+});
diff --git a/projects/igniteui-angular/migrations/update-21_2_2/index.ts b/projects/igniteui-angular/migrations/update-21_2_2/index.ts
new file mode 100644
index 00000000000..1f42149cef4
--- /dev/null
+++ b/projects/igniteui-angular/migrations/update-21_2_2/index.ts
@@ -0,0 +1,35 @@
+import type { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '21.2.2';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+ context.logger.info(
+ `Applying migration for Ignite UI for Angular to version ${version}`,
+ );
+ const update = new UpdateChanges(__dirname, host, context);
+ update.applyChanges();
+
+ for (const entryPath of update.sassFiles) {
+ let content = host.read(entryPath).toString();
+ let migrated = content;
+
+ // grid-theme: --ig-grid-filtering-dialog-background → --ig-query-builder-background
+ migrated = migrated.replace(/--ig-grid-filtering-dialog-background\b/g, '--ig-query-builder-background');
+
+ // column-actions-theme CSS variable rename
+ migrated = migrated.replace(/--ig-column-actions-background-color\b/g, '--ig-column-actions-background');
+
+ // grid-toolbar-theme CSS variable rename
+ migrated = migrated.replace(/--ig-grid-toolbar-background-color\b/g, '--ig-grid-toolbar-background');
+
+ // paginator-theme CSS variable renames
+ migrated = migrated.replace(/--ig-paginator-text-color\b/g, '--ig-paginator-foreground');
+ migrated = migrated.replace(/--ig-paginator-background-color\b/g, '--ig-paginator-background');
+
+ if (migrated !== content) {
+ host.overwrite(entryPath, migrated);
+ context.logger.info(` ✓ Migrated ${entryPath}`);
+ }
+ }
+};