feat(grid): update grid for header background changes

projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme-builder.scss

@@ -73,6 +73,7 @@
                     $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-active-border-color: var(--item-active-background),
                     $item-selected-background: if(
                         $variant == 'indigo',
                         var(--ig-btn-group-selected-bg, var(--ig-primary-500)),
@@ -87,6 +88,7 @@
                             color($color: 'primary', $variant: 500)
                         )
                     )}),
+                    $item-selected-active-border-color: var(--item-selected-active-background),
                     $item-selected-hover-text-color: var(--_grid-accent-color, #{if(
                         $variant == 'indigo',
                         contrast-color($color: 'primary'),
@@ -150,6 +152,19 @@
             )
         );
 
+        igx-grid-header-row {
+            @include tokens(
+                checkbox-theme(
+                    $schema: $schema,
+                    $empty-color: var(--header-text-color),
+                    $empty-fill-color: var(--header-background),
+                    $tick-color-hover: color-mix(in srgb, var(--header-text-color) 40%, var(--header-background)),
+                    $fill-color: var(--_grid-accent-color),
+                    $label-color: var(--header-text-color),
+                    $disabled-color: color-mix(in srgb, var(--header-text-color) 50%, var(--header-background)),
+                ));
+        }
+
         @include tokens(
             chip-theme(
                 $schema: $schema,

projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss

@@ -1502,7 +1502,7 @@
         min-height: var(--header-size);
         outline-style: none;
         overflow: hidden;
-        transition: color 250ms ease-in-out;
+        transition: color 120ms $ease-in-out-cubic;
     }
 
     %grid-cell-header--filtering {
@@ -1526,7 +1526,7 @@
         flex-grow: 1; /* hey IE, the text should take most of the space */
         // align-self: flex-end; /* commenting out for now on external request */
         line-height: var(--header-size);
-        transition: color 250ms ease-in-out;
+        transition: color 120ms $ease-in-out-cubic;
     }
 
     %grid-cell-header-icons {
@@ -1744,7 +1744,7 @@
     %grid-excel-icon--filtered,
     %grid-excel-icon,
     .sort-icon {
-        transition: all 250ms ease-in-out;
+        transition: all 120ms $ease-in-out-cubic;
     }
 
     %grid-cell-number {

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

@@ -1,18 +1,21 @@
 <div class="sample" #sampleEl
+    [class.has-header-overrides]="gridHeaderBackground() || gridHeaderTextColor()"
     [style.--ig-grid-foreground]="gridForeground() || null"
     [style.--ig-grid-background]="gridBackground() || null"
-    [style.--ig-grid-accent-color]="gridAccentColor() || null">
+    [style.--ig-grid-accent-color]="gridAccentColor() || null"
+    [style.--ig-grid-header-background]="gridHeaderBackground() || null"
+    [style.--ig-grid-header-text-color]="gridHeaderTextColor() || null">
 
     <div class="color-pickers">
         <span class="color-picker-item">
-            <label for="gridBackground">Background</label>
+            <label for="gridBackground">Grid Background</label>
             <input id="gridBackground" type="color" [value]="gridBackground()" (input)="gridBackground.set($any($event.target).value)" />
         </span>
         <span class="color-picker-item">
-            <label for="gridForeground">Foreground</label>
+            <label for="gridForeground">Grid Foreground</label>
             @if (gridForeground()) {
                 <input id="gridForeground" type="color" [value]="gridForeground()" (input)="gridForeground.set($any($event.target).value)" />
-                <button (click)="resetForeground()" title="Reset to auto">↺</button>
+                <button (click)="gridForeground.set('')" title="Reset to auto">↺</button>
             } @else {
                 <button class="no-color" (click)="gridForeground.set('#1E2A35')" title="Auto (click to override)"></button>
             }
@@ -23,6 +26,27 @@
         </span>
     </div>
 
+    <div class="color-pickers">
+        <span class="color-picker-item">
+            <label for="gridHeaderBackground">Header Background</label>
+            @if (gridHeaderBackground()) {
+                <input id="gridHeaderBackground" type="color" [value]="gridHeaderBackground()" (input)="gridHeaderBackground.set($any($event.target).value)" />
+                <button (click)="gridHeaderBackground.set('')" title="Reset to auto">↺</button>
+            } @else {
+                <button class="no-color" (click)="gridHeaderBackground.set('#e8e6e2')" title="Auto (click to override)"></button>
+            }
+        </span>
+        <span class="color-picker-item">
+            <label for="gridHeaderTextColor">Header Text Color</label>
+            @if (gridHeaderTextColor()) {
+                <input id="gridHeaderTextColor" type="color" [value]="gridHeaderTextColor()" (input)="gridHeaderTextColor.set($any($event.target).value)" />
+                <button (click)="gridHeaderTextColor.set('')" title="Reset to auto">↺</button>
+            } @else {
+                <button class="no-color" (click)="gridHeaderTextColor.set('#1E2A35')" title="Auto (click to override)"></button>
+            }
+        </span>
+    </div>
+
     <igx-grid #grid
         [data]="data"
         [primaryKey]="'ID'"

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

@@ -11,9 +11,20 @@
         grid-theme(
             $schema: vars.$schema,
             $background: #f7f4f0,
-            $accent-color: #5B8F8A
+            $accent-color: #5B8F8A,
         )
     );
+
+    &.has-header-overrides {
+        @include tokens(
+            grid-theme(
+                $schema: vars.$schema,
+                $background: #f7f4f0,
+                $accent-color: #5B8F8A,
+                $header-background: var(--ig-grid-header-background),
+            )
+        );
+    }
 }
 
 .color-pickers {

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

@@ -20,6 +20,8 @@ export class GridThemeBuilderSampleComponent implements OnInit, AfterViewInit {
     protected readonly gridForeground = signal('');
     protected readonly gridBackground = signal('');
     protected readonly gridAccentColor = signal('');
+    protected readonly gridHeaderBackground = signal('');
+    protected readonly gridHeaderTextColor = signal('');
 
     protected readonly gridRef = viewChild.required<IgxGridComponent>('grid');
     private readonly sampleEl = viewChild.required<ElementRef>('sampleEl');
@@ -36,8 +38,4 @@ export class GridThemeBuilderSampleComponent implements OnInit, AfterViewInit {
         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('');
-    }
 }