diff --git a/package-lock.json b/package-lock.json
index 95f69ce683b..13935d2b43d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
"express": "^5.2.1",
"fflate": "^0.8.1",
"igniteui-i18n-core": "^1.0.2",
- "igniteui-theming": "^25.0.3",
+ "igniteui-theming": "^25.1.0",
"igniteui-trial-watermark": "^3.1.0",
"jspdf": "^4.2.1",
"lodash-es": "^4.17.21",
@@ -14053,9 +14053,9 @@
}
},
"node_modules/igniteui-theming": {
- "version": "25.0.3",
- "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.0.3.tgz",
- "integrity": "sha512-Lq6NusLS6zOjL1E/5942+UNrvf4goeQlVb9XcCSzk7rMyA9Q6ybf9ltLHAag8O/vsIjMsr9FxJaJV3mTYErXzg==",
+ "version": "25.1.0",
+ "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.1.0.tgz",
+ "integrity": "sha512-qM55JURFepSLjU0cl1g8J7E05BXxTp7aQ6oUu4j5ZBZEhKAGCaxZZdMtBSkcKcyghjwkDvurpihzjdnvv76YAg==",
"license": "MIT",
"dependencies": {
"@modelcontextprotocol/sdk": "^1.25.0",
diff --git a/package.json b/package.json
index ea5b4c84fe6..de001b297e4 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
"express": "^5.2.1",
"fflate": "^0.8.1",
"igniteui-i18n-core": "^1.0.2",
- "igniteui-theming": "^25.0.3",
+ "igniteui-theming": "^25.1.0",
"igniteui-trial-watermark": "^3.1.0",
"jspdf": "^4.2.1",
"lodash-es": "^4.17.21",
diff --git a/projects/igniteui-angular-elements/src/index.html b/projects/igniteui-angular-elements/src/index.html
index 8985cbd96a1..579d751b57a 100644
--- a/projects/igniteui-angular-elements/src/index.html
+++ b/projects/igniteui-angular-elements/src/index.html
@@ -17,9 +17,6 @@
igc-grid,
igc-tree-grid {
max-height: 550px;
- --ig-grid-grouparea-background: #ff000012;
- --ig-grid-drop-area-background: #ff004c12;
- --ig-paginator-border-color: #d0ab23;
}
.range-wrapper {
diff --git a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
index 1cd13a4877e..c4e723447a0 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
@@ -373,6 +373,10 @@
border-color: var-get($theme, 'item-selected-border-color');
background: var-get($theme, 'item-selected-hover-background');
+ igx-icon {
+ color: var-get($theme, 'item-selected-icon-color');
+ }
+
&::before {
background: var-get($theme, 'item-selected-focus-background');
}
@@ -382,7 +386,6 @@
@if $variant == 'fluent' {
&:hover {
background: var-get($theme, 'item-selected-background');
- color: var-get($theme, 'item-selected-text-color');
@extend %item-overlay;
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 c5c832e1231..cb3070acd29 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
@@ -40,7 +40,7 @@
flex-grow: 1;
@if $variant == 'indigo' {
- box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) color(null, 'gray', if($theme-variant == 'light', 400, 100));
+ box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) var-get($theme, 'excel-filtering-border-color');
// TODO: The border-radius should not be hardcoded.
border-radius: border-radius(rem(4px));
@@ -102,13 +102,13 @@
opacity: 1;
igx-icon {
- color: if($variant == 'indigo', color($color: 'primary', $variant: 500), color($color: 'secondary'));
+ color: var-get($theme, 'sorted-header-icon-color');
}
@if $variant == 'indigo' {
&:hover {
igx-icon {
- color: color($color: 'primary', $variant: 400);
+ color: var-get($theme, 'sortable-header-icon-hover-color');
}
}
}
@@ -126,65 +126,8 @@
@if $variant != 'indigo' {
background: var-get($theme, 'filtering-row-background');
-
- %igx-group-display {
- --elevation: none;
- --item-background: #{var-get($theme, 'filtering-row-background')};
- --item-hover-background: #{color($color: 'gray', $variant: 100)};
- --item-selected-background: #{color($color: 'gray', $variant: 100)};
- --item-text-color: #{color($color: 'gray', $variant: 700)};
- --item-icon-color: #{color($color: 'gray', $variant: 700)};
- --item-hover-text-color: #{color($color: 'gray', $variant: 800)};
- --item-hover-icon-color: #{color($color: 'gray', $variant: 800)};
- --item-selected-text-color: #{if(
- $variant == 'indigo',
- contrast-color($color: 'surface'),
- color($color: 'secondary', $variant: 500)
- )};
- --item-selected-icon-color: #{if(
- $variant == 'indigo',
- contrast-color($color: 'surface'),
- color($color: 'secondary', $variant: 500)
- )};
- --item-selected-hover-icon-color: #{if(
- $variant == 'fluent',
- color($color: 'secondary', $variant: 500),
- contrast-color($color: 'gray', $variant: 50)
- )};
- --item-border-color: transparent;
- --item-hover-border-color: transparent;
- --item-focused-border-color: #{if(
- $variant == 'fluent',
- color($color: 'gray', $variant: 700),
- transparent
- )};
- --item-selected-border-color: transparent;
- --item-selected-hover-border-color: transparent;
- --item-disabled-border: transparent;
- --disabled-selected-border-color: transparent;
- }
} @else {
- @if $theme-variant == 'light' {
- background: contrast-color($color: 'gray', $variant: 900);
- } @else {
- background: color($color: 'gray', $variant: 50);
- }
-
- %igx-group-display {
- --item-background: transparent;
- @if $theme-variant == 'dark' {
- --item-text-color: #{contrast-color($color: 'surface', $variant: 500)};
- }
- --border-color: transparent;
- --item-border-color: transparent;
- --item-focused-border-color: transparent;
- --item-hover-border-color: transparent;
- --item-selected-border-color: transparent;
- --item-selected-hover-border-color: transparent;
- --item-disabled-border: transparent;
- --disabled-selected-border-color: transparent;
- --elevation: none;
- }
+ background: var-get($theme, 'filtering-dialog-background');
%igx-group-item {
&:not(:nth-child(1)) {
@@ -348,11 +291,7 @@
%grid-excel-actions--selected {
igx-icon {
- color: if(
- $variant == 'indigo',
- color($color: 'primary', $variant: 200),
- color($color: 'secondary')
- );
+ color: var-get($theme, 'excel-filtering-actions-selected-icon-color');
}
}
@@ -401,25 +340,10 @@
&:hover,
&:focus {
color: var-get($theme, 'excel-filtering-actions-hover-foreground');
+ background: var-get($theme, 'excel-filtering-actions-hover-background');
- @if $variant == 'indigo' {
- @if $theme-variant == 'light' {
- background: color($color: 'gray', $variant: 200);
- } @else {
- background: contrast-color($color: 'gray', $variant: 50, $opacity: .1);
- }
-
- igx-icon {
- /* stylelint-disable max-nesting-depth */
- @if $theme-variant == 'light' {
- color: color($color: 'gray', $variant: 700);
- } @else {
- color: contrast-color($color: 'gray', $variant: 50, $opacity: .8);
- }
- /* stylelint-enable max-nesting-depth */
- }
- } @else {
- background: color($color: 'gray', $variant: 100);
+ igx-icon {
+ color: var-get($theme, 'excel-filtering-actions-hover-icon-color');
}
}
@@ -427,11 +351,7 @@
igx-icon {
--component-size: 2;
- @if $theme-variant == 'light' {
- color: color($color: 'gray', $variant: 600);
- } @else {
- color: contrast-color($color: 'gray', $variant: 50, $opacity: .6);
- }
+ color: var-get($theme, 'excel-filtering-actions-icon-color');
}
}
@@ -449,7 +369,6 @@
}
%grid-excel-actions__action--active {
- background: color($color: 'gray', $variant: 100);
color: var-get($theme, 'excel-filtering-actions-hover-foreground');
}
@@ -468,6 +387,7 @@
display: grid;
place-items: center;
height: 100%;
+ color: var-get($theme, 'excel-filtering-subheader-foreground');
}
%grid-excel-main {
@@ -489,7 +409,7 @@
overflow: hidden;
@if $variant == 'indigo' {
- --background: #{color($color: 'surface', $variant: 500)};
+ --background: var(--_grid-background, #{color($color: 'surface', $variant: 500)});
margin-inline: calc(sizable(rem(-16px)) * -1);
@@ -510,19 +430,8 @@
}
border: 0;
-
- @if $bootstrap-theme {
- border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
- border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
- } @else {
- border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
- border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
- }
-
- @if $variant == 'indigo' and $theme-variant == 'dark' {
- border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
- border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
- }
+ border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
+ border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
}
%igx-excel-filter__tree {
@@ -531,19 +440,8 @@
margin-inline: calc(pad-inline(rem(-4px), rem(-8px), rem(-16px)) * -1);
margin-block: 0;
flex: 1;
-
- @if $bootstrap-theme {
- border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
- border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
- } @else {
- border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
- border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
- }
-
- @if $variant == 'indigo' and $theme-variant == 'dark' {
- border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
- border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
- }
+ border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
+ border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
igx-icon {
width: var(--ig-icon-size, #{$tree-node-expander-size});
@@ -721,7 +619,7 @@
@if $bootstrap-theme {
padding-block-start: pad-block(rem(16px));
- border-top: rem(1px) solid color($color: 'gray', $variant: 300);
+ border-top: rem(1px) solid color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 20%, var(--_grid-background, var(--ig-gray-300)));
}
%grid-excel-filter__apply,
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-theme-builder.scss
new file mode 100644
index 00000000000..ae6b2085b25
--- /dev/null
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme-builder.scss
@@ -0,0 +1,391 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use 'igniteui-theming/sass/themes/schemas' 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}'
+ );
+
+ igx-grid,
+ igc-grid,
+ igx-tree-grid,
+ igc-tree-grid,
+ igx-hierarchical-grid,
+ igc-hierarchical-grid,
+ igx-pivot-grid,
+ igc-pivot-grid,
+ igx-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));
+
+ @include tokens(
+ action-strip-theme(
+ $schema: $schema,
+ $background: color-mix(in srgb, var(--_grid-accent-color) 12%, transparent),
+ $actions-background: color-mix(in srgb, var(--_grid-accent-color) 12%, var(--_grid-background)),
+ $icon-color: var(--_grid-accent-color),
+ )
+ );
+
+ @include tokens(
+ badge-theme(
+ $schema: $schema,
+ $background-color: var(--_grid-accent-color),
+ )
+ );
+
+ @include tokens(
+ banner-theme(
+ $schema: $schema,
+ $banner-background: var(--_grid-background),
+ $banner-message-color: var(--_grid-foreground),
+ $banner-illustration-color: var(--_grid-foreground),
+ $banner-border-color: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background))
+ )
+ );
+
+ .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),
+ $content-background: var(--_grid-background),
+ $content-foreground: var(--_grid-foreground),
+ )
+ );
+
+ @include tokens(
+ checkbox-theme(
+ $schema: $schema,
+ $empty-color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
+ $empty-fill-color: var(--_grid-background),
+ $tick-color-hover: color-mix(in srgb, var(--_grid-foreground) 40%, var(--_grid-background)),
+ $fill-color: var(--_grid-accent-color),
+ $label-color: var(--_grid-foreground),
+ $disabled-color: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background)),
+ )
+ );
+
+ @include tokens(
+ chip-theme(
+ $schema: $schema,
+ $background: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+ $text-color: var(--_grid-foreground),
+ $ghost-background: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+ $ghost-text-color: var(--_grid-foreground),
+ $disabled-background: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+ $disabled-text-color: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background)),
+ $disabled-border-color: color-mix(in srgb, var(--_grid-foreground) 24%, var(--_grid-background)),
+ )
+ );
+
+ @include tokens(
+ column-actions-theme(
+ $schema: $schema,
+ $background-color: var(--_grid-background),
+ $title-color: var(--_grid-accent-color)
+ )
+ );
+
+ @include tokens(
+ drop-down-theme(
+ $schema: $schema,
+ $background-color: var(--_grid-background),
+ $item-text-color: var(--_grid-foreground),
+ $border-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+ $hover-item-background: color-mix(in srgb, var(--_grid-accent-color) 8%, var(--_grid-background)),
+ $focused-item-background: color-mix(in srgb, var(--_grid-accent-color) 12%, var(--_grid-background)),
+ $selected-item-background: color-mix(in srgb, var(--_grid-accent-color) 12%, var(--_grid-background)),
+ $selected-hover-item-background: color-mix(in srgb, var(--_grid-accent-color) 16%, var(--_grid-background)),
+ $selected-focus-item-background: color-mix(in srgb, var(--_grid-accent-color) 24%, var(--_grid-background)),
+ )
+ );
+
+ @include tokens(
+ grid-summary-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)
+ )
+ );
+
+ @include tokens(
+ grid-toolbar-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))
+ )
+ );
+
+ @include tokens(
+ highlight-theme(
+ $schema: $schema,
+ $resting-background: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
+ $active-background: var(--_grid-accent-color)
+ )
+ );
+
+ @include tokens(
+ flat-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)),
+ )
+ );
+
+ @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))
+ )
+ );
+
+ @if $variant == 'material' {
+ @include tokens(
+ input-group-theme(
+ $schema: $schema,
+ $box-background: var(--_grid-background),
+ $search-background: color-mix(in srgb, var(--_grid-foreground) 6%, var(--_grid-background)),
+ $idle-bottom-line-color: var(--_grid-accent-color),
+ $idle-secondary-color: var(--_grid-foreground),
+ $focused-secondary-color: var(--_grid-accent-color),
+ $border-color: var(--_grid-accent-color),
+ $idle-text-color: var(--_grid-foreground),
+ $placeholder-color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
+ )
+ );
+ } @else if $variant == 'indigo' {
+ @include tokens(
+ input-group-theme(
+ $schema: $schema,
+ $idle-bottom-line-color: var(--_grid-accent-color),
+ $idle-text-color: var(--_grid-foreground),
+ $placeholder-color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
+ )
+ );
+ } @else {
+ @include tokens(
+ input-group-theme(
+ $schema: $schema,
+ $border-color: var(--_grid-accent-color),
+ $idle-text-color: var(--_grid-foreground),
+ $placeholder-color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
+ $input-prefix-background: var(--_grid-accent-color),
+ $border-disabled-background: transparent,
+ $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, transparent),
+ )
+ );
+ }
+
+ @include tokens(
+ list-theme(
+ $schema: $schema,
+ $background: var(--_grid-background),
+ $item-background-hover: color-mix(in srgb, var(--_grid-accent-color) 8%, var(--_grid-background))
+ )
+ );
+
+ @include tokens(
+ paginator-theme(
+ $schema: $schema,
+ $background-color: var(--_grid-background),
+ $text-color: var(--_grid-foreground),
+ $border-color: color-mix(in srgb, var(--_grid-foreground) 16%, var(--_grid-background)),
+ )
+ );
+
+ @include tokens(
+ progress-circular-theme(
+ $schema: $schema,
+ $base-circle-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+ $fill-color-default: var(--_grid-accent-color),
+ $text-color: var(--_grid-foreground)
+ )
+ );
+
+ @include tokens(
+ progress-linear-theme(
+ $schema: $schema,
+ $track-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+ $fill-color-default: var(--_grid-accent-color),
+ $text-color: var(--_grid-foreground)
+ ),
+ );
+
+ @if $variant == 'bootstrap' {
+ @include tokens(
+ query-builder-theme(
+ $schema: $schema,
+ $background: var(--_grid-background),
+ $header-foreground: var(--_grid-foreground),
+ $header-border: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background)),
+ )
+ );
+ } @else {
+ @include tokens(
+ query-builder-theme(
+ $schema: $schema,
+ $background: var(--_grid-background),
+ $header-foreground: var(--_grid-foreground),
+ )
+ );
+ }
+
+ $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(--_grid-foreground) 50%, var(--_grid-background));
+ --_scrollbar-track-border-color: color-mix(in srgb, var(--_grid-foreground) 16%, var(--_grid-background));
+
+ @include tokens(
+ scrollbar-theme(
+ $schema: $schema,
+ $sb-track-bg-color: var(--_grid-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(--_grid-accent-color),
+ $toggle-button-foreground-disabled: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+ )
+ );
+ } @else {
+ @include tokens(
+ select-theme(
+ $schema: $schema,
+ $toggle-button-background: var(--_grid-accent-color),
+ )
+ );
+ }
+
+ @include tokens(
+ tooltip-theme(
+ $schema: $schema,
+ $background: hsl(from var(--_grid-foreground) h s l / 80%)
+ ),
+ );
+
+ @include tokens(
+ tree-theme(
+ $schema: $schema,
+ $background: var(--_grid-background)
+ ),
+ );
+
+ @include tokens(
+ watermark-theme(
+ $schema: $schema,
+ $base-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+ $color: var(--_grid-foreground),
+ $border-color: color-mix(in srgb, var(--_grid-accent-color) 16%, var(--_grid-background))
+ )
+ );
+
+ }
+}
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 2bdcf85d020..09d7ef44ca0 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
@@ -3,6 +3,8 @@
@use '../../base' as *;
@use './excel-filtering-theme' as *;
@use 'igniteui-theming/sass/animations' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
+@use './grid-theme-builder' as *;
@mixin _filtering-scroll-mask($theme, $dir) {
display: block;
@@ -20,6 +22,7 @@
@mixin grid($theme) {
@include css-vars($theme);
@include scale-in-ver-center();
+ @include grid-theme-builder($theme);
$variant: map.get($theme, '_meta', 'theme');
$theme-variant: map.get($theme, '_meta', 'variant');
@@ -249,6 +252,7 @@
igx-prefix,
igx-suffix {
background: transparent !important;
+ color: var(--ig-input-group-idle-text-color) !important;
border-radius: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
@@ -310,7 +314,7 @@
min-width: rem(140px);
@if $variant != 'fluent' {
- border: rem(1px) solid color($color: 'gray', $variant: 300);
+ border: rem(1px) solid color-mix(in srgb, var(--_grid-accent-color, var(--ig-gray-300)) 70%, var(--_grid-background, var(--ig-gray-300)));
}
--size: calc(#{$filtering-row-height} - #{rem(8px)});
@@ -321,6 +325,7 @@
igx-prefix,
igx-suffix {
background: transparent;
+ color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background));
border-radius: 0;
/* stylelint-disable-next-line */
@@ -367,13 +372,13 @@
&:hover{
color: var-get($theme, 'filtering-row-text-color');
- border-color: color($color: 'primary', $variant: 500);
+ border-color: var(--_grid-accent-color, var(--ig-primary-500));
}
}
.igx-input-group--focused {
@if $variant != 'fluent' {
- border-color: color($color: 'primary', $variant: 500);
+ border-color: var(--_grid-accent-color, var(--ig-primary-500));
border-width: rem(1px);
}
@@ -402,6 +407,7 @@
igx-prefix,
igx-suffix {
background: transparent !important;
+ color: var(--_grid-foreground);
border-radius: 0;
}
}
@@ -411,7 +417,7 @@
}
igx-prefix:focus {
- color: color(map.get($theme, 'palette'), 'secondary');
+ color: var-get($theme, 'sorted-header-icon-color');
}
igx-suffix {
@@ -419,7 +425,7 @@
outline-style: none;
&:focus {
- color: color($color: 'secondary');
+ color: var-get($theme, 'sorted-header-icon-color');
}
+ igx-icon {
@@ -436,43 +442,43 @@
igx-tree-grid {
@if $variant == 'material' {
@if $theme-variant == 'light' {
- --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
- --ig-chip-disabled-background: #{color($color: 'gray', $variant: 300)};
- --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
+ --ig-chip-disabled-text-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-500)) 50%, var(--_grid-background, var(--ig-gray-500)));
+ --ig-chip-disabled-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 12%, var(--_grid-background, var(--ig-gray-300)));
+ --ig-chip-disabled-border-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 24%, var(--_grid-background, var(--ig-gray-300)));
}
@if $theme-variant == 'dark' {
- --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
- --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
- --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+ --ig-chip-disabled-text-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 50%, var(--_grid-background, var(--ig-gray-300)));
+ --ig-chip-disabled-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 12%, var(--_grid-background, var(--ig-gray-200)));
+ --ig-chip-disabled-border-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 24%, var(--_grid-background, var(--ig-gray-200)));
}
}
@if $variant == 'fluent' {
@if $theme-variant == 'dark' {
- --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
- --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
- --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+ --ig-chip-disabled-text-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-400)) 50%, var(--_grid-background, var(--ig-gray-400)));
+ --ig-chip-disabled-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 12%, var(--_grid-background, var(--ig-gray-200)));
+ --ig-chip-disabled-border-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 24%, var(--_grid-background, var(--ig-gray-200)));
}
}
@if $variant == 'bootstrap' {
@if $theme-variant == 'dark' {
- --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
- --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
- --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+ --ig-chip-disabled-text-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-400)) 50%, var(--_grid-background, var(--ig-gray-400)));
+ --ig-chip-disabled-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 12%, var(--_grid-background, var(--ig-gray-200)));
+ --ig-chip-disabled-border-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 24%, var(--_grid-background, var(--ig-gray-200)));
}
}
@if $variant == 'indigo' {
@if $theme-variant == 'light' {
- --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
- --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
- --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
+ --ig-chip-disabled-text-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-500)) 50%, var(--_grid-background, var(--ig-gray-500)));
+ --ig-chip-disabled-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 12%, var(--_grid-background, var(--ig-gray-200)));
+ --ig-chip-disabled-border-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 24%, var(--_grid-background, var(--ig-gray-300)));
}
@if $theme-variant == 'dark' {
- --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
- --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
- --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+ --ig-chip-disabled-text-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 50%, var(--_grid-background, var(--ig-gray-300)));
+ --ig-chip-disabled-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 12%, var(--_grid-background, var(--ig-gray-200)));
+ --ig-chip-disabled-border-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 24%, var(--_grid-background, var(--ig-gray-200)));
}
}
}
@@ -1009,17 +1015,13 @@
}
%igx-icon--error {
- @if $variant == 'indigo' or $theme-variant == 'dark' {
- color: color($color: 'gray', $variant: 500);
- } @else {
- color: color($color: 'gray', $variant: 600);
- }
+ color: var-get($theme, 'grouparea-color');
}
}
%igx-grid__td--bool-true {
%igx-icon--success {
- color: color($color: 'gray', $variant: 700);
+ color: var-get($theme, 'drop-area-text-color');
}
}
@@ -1814,7 +1816,7 @@
}
%grid-summaries--body {
- --summaries-patch-background: var(--ig-gray-100);
+ --summaries-patch-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-100)) 12%, var(--_grid-background, var(--ig-gray-100)));
border-bottom: rem(1px) dashed var-get($theme, 'row-border-color');
background-color: var-get($theme, 'summaries-patch-background');
@@ -2715,14 +2717,7 @@
@include excel-filtering($theme);
%advanced-filtering-dialog {
- @if $variant == 'indigo' {
- $light-variant: contrast-color($color: 'gray', $variant: 900);
- $dark-variant: color($color: 'gray', $variant: 50);
- background: if($theme-variant == 'light', $light-variant, $dark-variant);
- } @else {
- background: color($color: 'surface', $variant: 500);
- }
-
+ 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' {
diff --git a/projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss
index c3e1e78ca44..f146ed5c6df 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss
@@ -259,7 +259,7 @@
}
%form-group-display--filled {
- color: var-get($theme, 'input-prefix-color--filled');
+ color: var-get($theme, 'filled-text-color');
igx-prefix,
[igxPrefix] {
diff --git a/projects/igniteui-angular/core/src/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/select/_select-theme.scss
index aca394245c0..1f00f760b6c 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/select/_select-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/select/_select-theme.scss
@@ -49,7 +49,7 @@
.igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
@if $variant == 'material' {
%igx-select__toggle-button {
- background: var-get($theme, 'toggle-button-background-focus--border');
+ background: var-get($theme, 'toggle-button-background');
}
}
}
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
index c6cb25e48fe..1bccae2bbee 100644
--- a/projects/igniteui-angular/package.json
+++ b/projects/igniteui-angular/package.json
@@ -75,7 +75,7 @@
"igniteui-trial-watermark": "^3.1.0",
"jspdf": "^4.2.1",
"lodash-es": "^4.17.21",
- "igniteui-theming": "^25.0.0",
+ "igniteui-theming": "^25.1.0",
"igniteui-i18n-core": "^1.0.2",
"@igniteui/material-icons-extended": "^3.1.0"
},
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ad0bb8ebc38..9da1b765f44 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -292,6 +292,11 @@ export class AppComponent implements OnInit {
icon: 'view_column',
name: 'Grid Column Moving'
},
+ {
+ link: '/gridThemeBuilder',
+ icon: 'palette',
+ name: 'Grid Theme Builder'
+ },
{
link: '/gridColumnTypes',
icon: 'view_column',
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 2e189e47a3d..127a34167c5 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -56,6 +56,7 @@ import { GridCellMergingComponent } from './grid-cellMerging/grid-cellMerging.co
import { GridSampleComponent } from './grid/grid.sample';
import { GridDataAnalysisComponent } from './grid-data-analysis/grid-data-analysis.component';
import { GridColumnMovingSampleComponent } from './grid-column-moving/grid-column-moving.sample';
+import { GridThemeBuilderSampleComponent } from './grid-theme-builder/grid-theme-builder.sample';
import { GridColumnSelectionSampleComponent } from './grid-column-selection/grid-column-selection.sample';
import { GridColumnPinningSampleComponent } from './grid-column-pinning/grid-column-pinning.sample';
import { GridColumnResizingSampleComponent } from './grid-column-resizing/grid-column-resizing.sample';
@@ -472,6 +473,10 @@ export const appRoutes: Routes = [
path: 'gridColumnMoving',
component: GridColumnMovingSampleComponent
},
+ {
+ path: 'gridThemeBuilder',
+ component: GridThemeBuilderSampleComponent
+ },
{
path: 'gridColumnTypes',
component: GridColumnTypesSampleComponent
diff --git a/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss b/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss
index 8d311316b69..10e46e5f09c 100644
--- a/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss
+++ b/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss
@@ -9,7 +9,7 @@ igx-card {
}
::ng-deep igx-grid-cell {
- border-right: 1px solid lightgray;
+ border-right: 1px solid var(--ig-grid-pinned-border-color);
padding: 0 7px !important;
}
diff --git a/src/app/grid-search-box/grid-search-box.component.html b/src/app/grid-search-box/grid-search-box.component.html
index f4acb8f175c..01217b8c29d 100644
--- a/src/app/grid-search-box/grid-search-box.component.html
+++ b/src/app/grid-search-box/grid-search-box.component.html
@@ -30,17 +30,17 @@
}
-
+
Aa
-
+
Ab
- navigate_before
- navigate_next
+ navigate_before
+ navigate_next
}
diff --git a/src/app/grid-search-box/grid-search-box.component.ts b/src/app/grid-search-box/grid-search-box.component.ts
index 557f3931a07..175724f44ad 100644
--- a/src/app/grid-search-box/grid-search-box.component.ts
+++ b/src/app/grid-search-box/grid-search-box.component.ts
@@ -1,13 +1,13 @@
import { Component, Input } from '@angular/core';
import { FormsModule } from '@angular/forms';
-import { IGX_CHIPS_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IgxGridComponent, IgxHierarchicalGridComponent, IgxIconComponent, IgxRippleDirective, IgxTreeGridComponent } from 'igniteui-angular';
+import { IGX_CHIPS_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IgxGridComponent, IgxHierarchicalGridComponent, IgxIconComponent, IgxTreeGridComponent } from 'igniteui-angular';
@Component({
selector: 'app-grid-search-box',
styleUrls: ['./grid-search-box.component.scss'],
templateUrl: './grid-search-box.component.html',
- imports: [IgxIconComponent, FormsModule, IgxRippleDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_CHIPS_DIRECTIVES]
+ imports: [IgxIconComponent, FormsModule, IGX_INPUT_GROUP_DIRECTIVES, IGX_CHIPS_DIRECTIVES]
})
export class GridSearchBoxComponent {
@Input()
diff --git a/src/app/grid-theme-builder/grid-theme-builder.sample.html b/src/app/grid-theme-builder/grid-theme-builder.sample.html
new file mode 100644
index 00000000000..a8454b64fba
--- /dev/null
+++ b/src/app/grid-theme-builder/grid-theme-builder.sample.html
@@ -0,0 +1,129 @@
+
diff --git a/src/app/grid-theme-builder/grid-theme-builder.sample.scss b/src/app/grid-theme-builder/grid-theme-builder.sample.scss
new file mode 100644
index 00000000000..36e1c26a0f8
--- /dev/null
+++ b/src/app/grid-theme-builder/grid-theme-builder.sample.scss
@@ -0,0 +1,68 @@
+@use '../../../projects/igniteui-angular/core/src/core/styles/themes' as *;
+@use '../../styles/variables' as vars;
+
+.sample {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ padding-block-end: 64px;
+
+ @include tokens(
+ grid-theme(
+ $schema: vars.$schema,
+ $background: #f7f4f0,
+ $accent-color: #5B8F8A
+ )
+ );
+}
+
+.color-pickers {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ padding: 8px 0;
+}
+
+.color-picker-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+
+ input[type='color'] {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 36px;
+ height: 36px;
+ border: 1px solid currentColor;
+ padding: 0;
+ cursor: pointer;
+
+ &::-webkit-color-swatch-wrapper { padding: 0; }
+ &::-webkit-color-swatch { border: none; }
+ &::-moz-color-swatch { border: none; }
+ }
+
+ .no-color {
+ position: relative;
+ width: 36px;
+ height: 36px;
+ border: 1px solid currentColor;
+ background: transparent;
+ cursor: pointer;
+
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ margin: auto;
+ width: 1px;
+ height: 70%;
+ background: red;
+ }
+
+ &::before { transform: rotate(45deg); }
+ &::after { transform: rotate(-45deg); }
+ }
+}
diff --git a/src/app/grid-theme-builder/grid-theme-builder.sample.ts b/src/app/grid-theme-builder/grid-theme-builder.sample.ts
new file mode 100644
index 00000000000..37da5b043cf
--- /dev/null
+++ b/src/app/grid-theme-builder/grid-theme-builder.sample.ts
@@ -0,0 +1,43 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnInit, signal, viewChild } from '@angular/core';
+import { SAMPLE_DATA } from '../shared/sample-data';
+import { IGX_GRID_DIRECTIVES, IgxActionStripComponent, IgxGridComponent, IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular';
+
+class EmployeesSummary extends IgxNumberSummaryOperand {
+ public override operate(data?: any[]): IgxSummaryResult[] {
+ const result = super.operate(data);
+ return result.filter(r => r.key === 'count' || r.key === 'sum');
+ }
+}
+
+@Component({
+ selector: 'app-grid-theme-builder-sample',
+ styleUrls: ['grid-theme-builder.sample.scss'],
+ templateUrl: 'grid-theme-builder.sample.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [IGX_GRID_DIRECTIVES, IgxActionStripComponent]
+})
+export class GridThemeBuilderSampleComponent implements OnInit, AfterViewInit {
+ protected readonly gridForeground = signal('');
+ protected readonly gridBackground = signal('');
+ protected readonly gridAccentColor = signal('');
+
+ protected readonly gridRef = viewChild.required('grid');
+ private readonly sampleEl = viewChild.required('sampleEl');
+
+ public data: Array;
+ public readonly employeesSummary = EmployeesSummary;
+
+ public ngOnInit(): void {
+ this.data = SAMPLE_DATA;
+ }
+
+ public ngAfterViewInit(): void {
+ const styles = getComputedStyle(this.sampleEl().nativeElement);
+ this.gridBackground.set(styles.getPropertyValue('--ig-grid-background').trim());
+ this.gridAccentColor.set(styles.getPropertyValue('--ig-grid-accent-color').trim());
+ }
+
+ protected resetForeground(): void {
+ this.gridForeground.set('');
+ }
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.scss b/src/app/hierarchical-grid/hierarchical-grid.sample.scss
index 493f8cca993..db97e2e90e0 100644
--- a/src/app/hierarchical-grid/hierarchical-grid.sample.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid.sample.scss
@@ -1,7 +1,9 @@
+@use '../../../projects/igniteui-angular/core/src/core/styles/themes' as *;
+
:host::ng-deep {
.activeRow {
- background-color: rgb(201, 241, 201);
- }
+ --row-odd-background: #{dynamic-shade(var(--row-even-background), $offset: 3)};
+ }
}
[igxButton="contained"] {