From 9215b76dca9cf23e03fabe2336ccb2860027b951 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 19 Aug 2026 12:21:11 +0300 Subject: [PATCH 1/6] fix(themes): minor tweaks to some component styles --- .../src/button-group/themes/_base.scss | 22 ++++++++++++++----- .../filtering/excel-style/themes/_base.scss | 4 ++++ .../excel-style/themes/_derived.scss | 4 ++-- .../igniteui-angular/grids/themes/_base.scss | 7 +----- 4 files changed, 24 insertions(+), 13 deletions(-) diff --git a/projects/igniteui-angular/button-group/src/button-group/themes/_base.scss b/projects/igniteui-angular/button-group/src/button-group/themes/_base.scss index bb240a9f0c6..c217e155135 100644 --- a/projects/igniteui-angular/button-group/src/button-group/themes/_base.scss +++ b/projects/igniteui-angular/button-group/src/button-group/themes/_base.scss @@ -12,7 +12,7 @@ $_theme: digest-schema($material-button-group); --item-min-width: #{rem(42px)}; --ig-icon-size: #{rem(18px)}; --z-item-elevated: 2; - + @include e(buttons-container) { display: flex; border-radius: var-get($_theme, 'border-radius'); @@ -49,7 +49,7 @@ $_theme: digest-schema($material-button-group); color: var-get($_theme, 'item-icon-color'); } - &:hover { + &[igxButton]:hover { z-index: 1; color: var-get($_theme, 'item-hover-text-color'); background: var-get($_theme, 'item-hover-background'); @@ -60,7 +60,7 @@ $_theme: digest-schema($material-button-group); } } - &:active { + &[igxButton]:active { z-index: var(--z-item-elevated); color: var-get($_theme, 'item-hover-text-color'); background: var-get($_theme, 'item-active-background'); @@ -73,6 +73,12 @@ $_theme: digest-schema($material-button-group); &[igxButton] { border-radius: 0; + background: var-get($_theme, 'item-background'); + color: var-get($_theme, 'item-text-color'); + + igx-icon { + color: var-get($_theme, 'item-icon-color'); + } } &[igxButton][disabled='true'] { @@ -139,14 +145,20 @@ $_theme: digest-schema($material-button-group); z-index: calc(var(--z-item-elevated) + 1); &[igxButton] { + background: var-get($_theme, 'item-selected-background'); border-color: var-get($_theme, 'item-selected-border-color'); + color: var-get($_theme, 'item-selected-text-color'); + + igx-icon { + color: var-get($_theme, 'item-selected-icon-color'); + } } igx-icon { color: var-get($_theme, 'item-selected-icon-color'); } - &:hover { + &[igxButton]:hover { border-color: var-get($_theme, 'item-selected-hover-border-color'); color: var-get($_theme, 'item-selected-hover-text-color'); background: var-get($_theme, 'item-selected-hover-background'); @@ -156,7 +168,7 @@ $_theme: digest-schema($material-button-group); } } - &:active { + &[igxButton]:active { border-color: var-get($_theme, 'item-selected-active-border-color'); color: var-get($_theme, 'item-selected-hover-text-color'); background: var-get($_theme, 'item-selected-active-background'); diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss index f5268560f96..c58f521a7f2 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss @@ -450,6 +450,10 @@ $checkbox-indent: ( flex-grow: 1; } + @include e(empty) { + color: hsl(from #{adaptive-contrast(var-get($theme, 'background'))} h s 60%); + } + @include e(secondary) { --component-size: var(--ig-size, var(--ig-size-large)); diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_derived.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_derived.scss index d393144b56d..5cc9e7812d5 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_derived.scss +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_derived.scss @@ -19,7 +19,7 @@ // (e.g. igniteui-angular-elements) renders it under. @include scope(derived, '.igx-excel-filter, .igx-excel-filter__secondary', $schema) using ($schema) { --_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-secondary-background: #{dynamic-shade(var(--secondary-background, var(--ig-excel-filtering-secondary-background)), $lightness: 95, $offset: 3)}; --_excel-filtering-foreground: var(--foreground, var(--ig-excel-filtering-foreground)); --_excel-filtering-accent-color: var(--accent-color, var(--ig-excel-filtering-accent-color)); @@ -113,7 +113,7 @@ @include tokens( input-group-theme( $schema: $schema, - $box-background: var(--_excel-filtering-background), + $box-background: dynamic-shade(var(--_excel-filtering-background), $lightness: 95, $offset: 3), $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)), diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss index c21372e1243..681029c3667 100644 --- a/projects/igniteui-angular/grids/themes/_base.scss +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -1510,6 +1510,7 @@ $z-grid-loading: 10003; padding-block: 0; flex: 0 0 auto; background: inherit; + background-clip: border-box; z-index: $z-grid-selection; cursor: move; border-inline-end: rem(1px) solid transparent; @@ -2596,12 +2597,6 @@ $z-grid-loading: 10003; :where(.igx-grid-thead__title) { flex: 0 0 auto; } - - //&:last-child { - // igx-pivot-row-dimension-header { - // border-inline-end: 0; - // } - //} } // Scrollbar thumb for header From 83b494bc76fa61a1a0fbfb9abea7b40f19bd2761 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 19 Aug 2026 14:13:48 +0300 Subject: [PATCH 2/6] refactor(styles): apply secondary background change only in material theme --- .../grids/core/src/filtering/excel-style/themes/_derived.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_derived.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_derived.scss index 5cc9e7812d5..c6bfdbfbc21 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_derived.scss +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_derived.scss @@ -19,7 +19,7 @@ // (e.g. igniteui-angular-elements) renders it under. @include scope(derived, '.igx-excel-filter, .igx-excel-filter__secondary', $schema) using ($schema) { --_excel-filtering-background: var(--background, var(--ig-excel-filtering-background)); - --_excel-filtering-secondary-background: #{dynamic-shade(var(--secondary-background, var(--ig-excel-filtering-secondary-background)), $lightness: 95, $offset: 3)}; + --_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)); @@ -110,6 +110,8 @@ ); @if $theme == 'material' { + --_excel-filtering-secondary-background: #{dynamic-shade(var(--secondary-background, var(--ig-excel-filtering-secondary-background)), $lightness: 95, $offset: 3)}; + @include tokens( input-group-theme( $schema: $schema, From 9a01f278d1c087d5748992c2ef750b09419dec08 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 19 Aug 2026 14:39:34 +0300 Subject: [PATCH 3/6] fix(esf): keep "remove filter" button inline in custom dialog --- .../src/filtering/excel-style/themes/_base.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss index c58f521a7f2..3b82bf38e07 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss @@ -496,17 +496,14 @@ $checkbox-indent: ( } @include e(condition) { - display: flex; - flex-wrap: wrap; + // Grid keeps the sroup spans a second row. + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - padding-block: 0; + padding-block: rem(16px); igx-select { - flex-grow: 1; - flex-basis: 40%; - margin-block: rem(16px); - ~ igx-input-group, ~ igx-date-picker, ~ igx-time-picker { @@ -515,7 +512,10 @@ $checkbox-indent: ( } igx-buttongroup { + grid-column: 1 / -1; + justify-self: start; min-width: 30%; + margin-block-start: rem(16px); } [igxIconButton] { From 61892a25ac172ac012d277362c790a179b85d3b6 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 19 Aug 2026 15:03:19 +0300 Subject: [PATCH 4/6] fix(excel-style-filtering): derived colors and paddings --- .../src/filtering/excel-style/themes/_base.scss | 13 +++++++------ .../src/filtering/excel-style/themes/_derived.scss | 1 - 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss index 3b82bf38e07..bb20c5cd021 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss @@ -467,6 +467,8 @@ $checkbox-indent: ( } @include e(secondary-main) { + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); + padding-block: rem(16px); height: rem(232px); overflow: auto; } @@ -500,8 +502,6 @@ $checkbox-indent: ( display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; - padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - padding-block: rem(16px); igx-select { ~ igx-input-group, @@ -515,20 +515,21 @@ $checkbox-indent: ( grid-column: 1 / -1; justify-self: start; min-width: 30%; - margin-block-start: rem(16px); + margin-block: pad-block(rem(8px), rem(12px), rem(16px)); } [igxIconButton] { --component-size: var(--ig-size, var(--ig-size-large)); - margin-inline-start: rem(16px); + margin-inline-start: pad-inline(rem(4px), rem(8px), rem(16px)); } } @include e(add-filter) { --ig-icon-size: #{rem(18px)}; - margin-inline: pad-inline(rem(4px), rem(4px), rem(16px)); - margin-block-start: 0; + &:is(.igx-button) { + margin-block-start: pad-block(rem(8px), rem(12px), rem(16px)); + } } } } diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_derived.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_derived.scss index c6bfdbfbc21..3d2f5a97804 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_derived.scss +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_derived.scss @@ -39,7 +39,6 @@ var(--ig-btn-group-selected-bg, #{color($color: 'gray', $variant: 100)}), ), $item-hover-background: var(--item-selected-background), - $item-hover-text-color: var(--_excel-filtering-foreground, #{color($color: 'gray', $variant: 700)}), $item-active-border-color: transparent, $item-selected-text-color: var(--_excel-filtering-accent-color, #{if( $theme == 'indigo', From 83183125bdc20fe79e807350fa25e9617619701a Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 20 Aug 2026 14:41:53 +0300 Subject: [PATCH 5/6] fix(tree-grid): restore selected row chevron color --- projects/igniteui-angular/grids/themes/_base.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss index 681029c3667..4ba7666d717 100644 --- a/projects/igniteui-angular/grids/themes/_base.scss +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -512,6 +512,13 @@ $z-grid-loading: 10003; border-inline-end-color: var-get($theme, 'body-column-selected-border-color'); } + .igx-grid__tree-grouping-indicator { + color: var-get($theme, 'row-selected-text-color'); + + &:hover { + color: var-get($theme, 'row-selected-text-color'); + } + } &:hover { color: var-get($theme, 'row-selected-hover-text-color'); From 3cc55ac4acffc58b49e7964a2b654f7aa31827a7 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 20 Aug 2026 14:42:54 +0300 Subject: [PATCH 6/6] demos(grid-theme-builder): add tree grid preview --- .../grid-theme-builder.sample.html | 31 ++++++++++++++++++- .../grid-theme-builder.sample.ts | 14 +++++---- 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/src/app/grid-theme-builder/grid-theme-builder.sample.html b/src/app/grid-theme-builder/grid-theme-builder.sample.html index c614dcb2f7a..666c4fc6a22 100644 --- a/src/app/grid-theme-builder/grid-theme-builder.sample.html +++ b/src/app/grid-theme-builder/grid-theme-builder.sample.html @@ -26,8 +26,10 @@ [style.--ig-grid-row-border-color]="gridRowBorderColor() || null" [style.--ig-grid-header-text-color]="gridHeaderTextColor() || null"> - + + @@ -159,6 +161,33 @@ } + @else if (activePreview() === 'tree') { + + + + + + + + + + + + + + } @else { ('sampleEl'); private readonly customControlsTemplate = viewChild.required>('customControls'); - // Only one grid preview is mounted at a time: both a flat grid and a - // 4-level-deep hierarchical grid are expensive to initialize, and neither - // is needed while the other is what's actually being themed. - protected readonly activePreview = signal<'grid' | 'hierarchical'>('grid'); + // Only one grid preview is mounted at a time. The hierarchical preview is + // expensive to initialize, and hidden grids aren't needed while another + // grid type is being themed. + protected readonly activePreview = signal<'grid' | 'tree' | 'hierarchical'>('grid'); protected readonly showExport = signal(false); protected readonly copiedExport = signal<'css' | 'scss' | null>(null); @@ -262,6 +263,7 @@ export class GridThemeBuilderSampleComponent implements OnInit, AfterViewInit { private readonly propertyChangeService = inject(PropertyChangeService); public data: Array; + public readonly treeData = HIERARCHICAL_SAMPLE_DATA; public readonly hierarchicalData = this.generateHierarchicalData(10, 3); public readonly employeesSummary = EmployeesSummary;