fix(tree-grid): chevron selected icon color

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');

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));
 
@@ -463,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;
         }
@@ -492,17 +498,12 @@ $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;
 
             igx-select {
-                flex-grow: 1;
-                flex-basis: 40%;
-                margin-block: rem(16px);
-
                 ~ igx-input-group,
                 ~ igx-date-picker,
                 ~ igx-time-picker {
@@ -511,20 +512,24 @@ $checkbox-indent: (
             }
 
             igx-buttongroup {
+                grid-column: 1 / -1;
+                justify-self: start;
                 min-width: 30%;
+                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));
+            }
         }
     }
 }

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',
@@ -110,10 +109,12 @@
         );
 
         @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,
-                    $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)),

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');
@@ -1510,6 +1517,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 +2604,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

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">
 
-    <igx-buttongroup class="preview-switcher" selectionMode="singleRequired" (selected)="activePreview.set($event.index === 0 ? 'grid' : 'hierarchical')">
+    <igx-buttongroup class="preview-switcher" selectionMode="singleRequired"
+        (selected)="activePreview.set($event.index === 0 ? 'grid' : $event.index === 1 ? 'tree' : 'hierarchical')">
         <button igxButton [selected]="activePreview() === 'grid'">Grid</button>
+        <button igxButton [selected]="activePreview() === 'tree'">Tree Grid</button>
         <button igxButton [selected]="activePreview() === 'hierarchical'">Hierarchical Grid</button>
     </igx-buttongroup>
 
@@ -159,6 +161,33 @@
         </igx-paginator>
     </igx-grid>
     }
+    @else if (activePreview() === 'tree') {
+    <igx-tree-grid
+        [data]="treeData"
+        [primaryKey]="'ID'"
+        [childDataKey]="'ChildCompanies'"
+        [expansionDepth]="1"
+        [rowSelection]="'multiple'"
+        [cellSelection]="'multiple'"
+        [autoGenerate]="false"
+        [height]="'600px'">
+
+        <igx-column field="ID" header="ID" dataType="string" [hidden]="true">
+        </igx-column>
+        <igx-column field="CompanyName" header="Company" dataType="string"
+            [sortable]="true" [resizable]="true">
+        </igx-column>
+        <igx-column field="ContactName" header="Contact" dataType="string"
+            [sortable]="true" [resizable]="true">
+        </igx-column>
+        <igx-column field="ContactTitle" header="Title" dataType="string"
+            [sortable]="true" [resizable]="true">
+        </igx-column>
+        <igx-column field="Country" header="Country" dataType="string"
+            [sortable]="true" [resizable]="true">
+        </igx-column>
+    </igx-tree-grid>
+    }
     @else {
     <igx-hierarchical-grid
         [style.--ig-grid-summary-pinned-border-width]="gridSummaryPinnedBorderWidth() || null"

src/app/grid-theme-builder/grid-theme-builder.sample.ts

@@ -4,10 +4,11 @@ import { IGX_GRID_DIRECTIVES, IgxActionStripComponent, IgxButtonDirective, IgxBu
 import { IgxAccordionComponent } from 'igniteui-angular/accordion';
 import { IGX_EXPANSION_PANEL_DIRECTIVES } from 'igniteui-angular/expansion-panel';
 import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid';
+import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid';
 import { IgxInputGroupComponent, IgxInputDirective } from 'igniteui-angular/input-group';
 import { IGX_SELECT_DIRECTIVES } from 'igniteui-angular/select';
 import { PropertyChangeService } from '../properties-panel/property-change.service';
-import { SAMPLE_DATA } from '../shared/sample-data';
+import { HIERARCHICAL_SAMPLE_DATA, SAMPLE_DATA } from '../shared/sample-data';
 import { BorderRuleEditorComponent } from './border-rule-editor.component';
 import { BORDER_DEFAULTS, BorderSignals, BorderTarget } from './border-rule-editor.types';
 import { ColorPickerComponent } from './color-picker.component';
@@ -26,7 +27,7 @@ class EmployeesSummary extends IgxNumberSummaryOperand {
     templateUrl: 'grid-theme-builder.sample.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    imports: [FormsModule, IGX_GRID_DIRECTIVES, IgxHierarchicalGridComponent, IgxRowIslandComponent, IgxActionStripComponent, IgxButtonDirective, IgxButtonGroupComponent, IgxAccordionComponent, IGX_EXPANSION_PANEL_DIRECTIVES, IGX_SELECT_DIRECTIVES, IgxInputGroupComponent, IgxInputDirective, ColorPickerComponent, BorderRuleEditorComponent]
+    imports: [FormsModule, IGX_GRID_DIRECTIVES, IgxHierarchicalGridComponent, IgxRowIslandComponent, IgxTreeGridComponent, IgxActionStripComponent, IgxButtonDirective, IgxButtonGroupComponent, IgxAccordionComponent, IGX_EXPANSION_PANEL_DIRECTIVES, IGX_SELECT_DIRECTIVES, IgxInputGroupComponent, IgxInputDirective, ColorPickerComponent, BorderRuleEditorComponent]
 })
 export class GridThemeBuilderSampleComponent implements OnInit, AfterViewInit {
     protected readonly gridForeground = signal('');
@@ -91,10 +92,10 @@ export class GridThemeBuilderSampleComponent implements OnInit, AfterViewInit {
     private readonly sampleEl = viewChild.required<ElementRef>('sampleEl');
     private readonly customControlsTemplate = viewChild.required<TemplateRef<any>>('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<any>;
+    public readonly treeData = HIERARCHICAL_SAMPLE_DATA;
     public readonly hierarchicalData = this.generateHierarchicalData(10, 3);
     public readonly employeesSummary = EmployeesSummary;