feat(grids): add theming samples and grid theme playground

live-editing/configs/GridConfigGenerator.ts

@@ -574,6 +574,11 @@ export class GridConfigGenerator implements IConfigGenerator {
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/customers.ts', '/src/app/grid/grid-sample-pinning-styling/layout.scss'],
             appConfig: BaseAppConfig
         }));
+        configs.push(new Config({
+            component: 'GridThemingComponent',
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/invoiceData.ts'],
+            appConfig: BaseAppConfig
+        }));
         configs.push(new Config({
             component: 'GridGroupByStylingComponent',
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/invoiceData.ts', '/src/app/grid/grid-groupby-styling/layout.scss'],

live-editing/configs/PivotGridConfigGenerator.ts

@@ -83,7 +83,7 @@ export class PivotGridConfigGenerator implements IConfigGenerator {
         }));
 
         configs.push(new Config({
-            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/dataToAnalyze.ts'],
+            additionalFiles: ['/src/app/data/pivot-data.ts', '/src/app/pivot-grid/pivot-styling/layout.scss'],
             appConfig: BaseAppConfig,
             component: 'PivotStylingComponent'
         }));

live-editing/configs/ThemingConfigGenerator.ts

@@ -72,6 +72,22 @@ export class ThemingConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: '/theming/angular/'
         }));
 
+        configs.push(new Config({
+            component: 'GridThemePlaygroundComponent',
+            additionalFiles: [
+                '/src/app/theming/grid-theme-playground/theme-color-field.component.ts',
+                '/src/app/theming/grid-theme-playground/theme-color-field.component.html',
+                '/src/app/theming/grid-theme-playground/theme-color-field.component.scss',
+                '/src/app/theming/grid-theme-playground/color-utils.ts',
+                '/src/app/data/invoiceData.ts',
+                '/src/app/data/pivot-data.ts',
+                '/src/app/data/singersData.ts',
+                '/src/app/tree-grid/data/employees-flat-avatars.ts'
+            ],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: '/theming/grid-theme-playground/'
+        }));
+
         configs.push(new Config({
             component: 'TailwindSampleComponent',
             appConfig: BaseAppConfig,

src/app/app.routes.server.ts

@@ -49,6 +49,16 @@ export const serverRoutes: ServerRoute[] = [
         path: 'samples/lists/**',
         renderMode: RenderMode.Client // TODO: Fails with Prerender
     },
+    {
+        // Hosts grid previews, and grids fail under Prerender like every other
+        // grid route below. Must precede the theming/** globs.
+        path: 'theming/grid-theme-playground',
+        renderMode: RenderMode.Client
+    },
+    {
+        path: 'samples/theming/grid-theme-playground',
+        renderMode: RenderMode.Client
+    },
     {
         path: 'theming/**',
         renderMode: RenderMode.Prerender

src/app/grid/grid-routes-data.ts

@@ -4,6 +4,7 @@ export const gridsRoutesData = {
     'grid-groupby': { displayName: 'Grid GroupBy', parentName: 'Grid' },
     'grid-cellMerge': { displayName: 'Grid Cell Merge', parentName: 'Grid' },
     'grid-cellMerge-custom': { displayName: 'Grid Cell Merge Custom', parentName: 'Grid' },
+    'grid-theming': { displayName: 'Grid Theming', parentName: 'Grid' },
     'grid-groupby-custom': {displayName: 'Grid GroupBy Custom', parentName: 'Grid'},
     'grid-groupby-paging': { displayName: 'Grid GroupBy Paging', parentName: 'Grid' },
     'grid-groupby-styling': { displayName: 'Grid GroupBy Styling', parentName: 'Grid' },

src/app/grid/grid-theming/grid-theming.component.html

@@ -0,0 +1,64 @@
+<div class="sample grid-theming-sample">
+    <div class="theme-picker">
+        <span class="theme-picker__label">Pick a theme</span>
+
+        <igx-buttongroup
+            class="theme-switcher"
+            selectionMode="singleRequired"
+            (selected)="selectTheme($event)">
+            @for (theme of themes; track theme.class) {
+                <button igxButton [selected]="activeTheme() === theme.class">
+                    <span class="theme-swatch" [class]="theme.swatch"></span>
+                    {{ theme.label }}
+                </button>
+            }
+        </igx-buttongroup>
+
+        <p class="theme-picker__hint">
+            Custom themes, not built-in: each is a <code>grid-theme()</code> with its
+            own background and accent.
+        </p>
+    </div>
+
+    <igx-grid
+        [igxPreventDocumentScroll]="true"
+        [class]="activeTheme()"
+        [data]="data"
+        [width]="'100%'"
+        [height]="'560px'"
+        [allowFiltering]="true"
+        [filterMode]="'excelStyleFilter'"
+        [rowSelection]="'multiple'"
+        [columnSelection]="'multiple'">
+
+        <igx-grid-toolbar>
+            <igx-grid-toolbar-title>Invoices</igx-grid-toolbar-title>
+            <igx-grid-toolbar-actions>
+                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
+                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
+            </igx-grid-toolbar-actions>
+        </igx-grid-toolbar>
+
+        <igx-column field="ShipCountry" header="Country" width="160px"
+            [sortable]="true" [filterable]="true" [pinned]="true">
+        </igx-column>
+        <igx-column field="ShipCity" header="City" width="160px"
+            [sortable]="true" [filterable]="true">
+        </igx-column>
+        <igx-column field="ShipName" header="Ship Name" width="240px"
+            [sortable]="true" [filterable]="true">
+        </igx-column>
+        <igx-column field="Salesperson" header="Salesperson" width="200px"
+            [sortable]="true" [filterable]="true">
+        </igx-column>
+        <igx-column field="UnitPrice" header="Unit Price" width="140px"
+            dataType="number" [formatter]="formatCurrency"
+            [sortable]="true" [hasSummary]="true" [summaries]="compactSummary">
+        </igx-column>
+        <igx-column field="Quantity" header="Quantity" width="140px"
+            dataType="number" [sortable]="true">
+        </igx-column>
+
+        <igx-paginator [perPage]="10"></igx-paginator>
+    </igx-grid>
+</div>

src/app/grid/grid-theming/grid-theming.component.scss

@@ -0,0 +1,145 @@
+@use "igniteui-angular/theming" as *;
+
+$studio-bg: #faf4ed;
+$studio-accent: #907aa9;
+$ledger-bg: #eceff4;
+$ledger-accent: #5e81ac;
+$editorial-bg: #333c43;
+$editorial-accent: #a7c080;
+$midnight-bg: #282a36;
+$midnight-accent: #bd93f9;
+
+:host {
+    display: block;
+    padding: 16px;
+}
+
+.theme-studio {
+    --ig-size: var(--ig-size-large);
+    --ig-radius-factor: 0.6;
+
+    @include tokens(grid-theme(
+        $background: $studio-bg,
+        $foreground: #575279,
+        $accent-color: $studio-accent,
+        $header-background: #fffaf3,
+        $header-border-color: #dfdad9,
+        $row-border-color: #f2e9e1,
+        $grid-border-color: #dfdad9,
+        $grid-shadow: (0 1px 3px rgba(87, 82, 121, 0.10), 0 1px 2px rgba(87, 82, 121, 0.06))
+    ));
+}
+
+.theme-ledger {
+    --ig-size: var(--ig-size-small);
+    --ig-radius-factor: 0;
+
+    @include tokens(grid-theme(
+        $background: $ledger-bg,
+        $foreground: #2e3440,
+        $accent-color: $ledger-accent,
+        $header-background: #d8dee9,
+        $row-odd-background: #eceff4,
+        $row-even-background: #e5e9f0,
+        $body-column-border-color-odd: #d8dee9,
+        $body-column-border-color-even: #d8dee9,
+        $row-border-color: #d8dee9,
+        $grid-border-color: #c8d0dc
+    ));
+}
+
+.theme-editorial {
+    --ig-size: var(--ig-size-large);
+    --ig-radius-factor: 0;
+
+    @include tokens(grid-theme(
+        $schema: $dark-material-schema,
+        $background: $editorial-bg,
+        $foreground: #d3c6aa,
+        $accent-color: $editorial-accent,
+        $header-background: #3a464c,
+        $row-border-color: #333c43,
+        $grid-border-color: #333c43
+    ));
+}
+
+.theme-midnight {
+    --ig-size: var(--ig-size-medium);
+    --ig-radius-factor: 0.25;
+
+    @include tokens(grid-theme(
+        $schema: $dark-material-schema,
+        $background: $midnight-bg,
+        $foreground: #f8f8f2,
+        $accent-color: $midnight-accent,
+        $header-background: #21222c,
+        $body-column-border-color-odd: #44475a,
+        $body-column-border-color-even: #44475a,
+        $row-border-color: #44475a,
+        $grid-border-color: #44475a
+    ));
+}
+
+.grid-theming-sample {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.theme-picker {
+    --ig-button-group-elevation: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-self: flex-start;
+}
+
+.theme-picker__label {
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    color: var(--ig-gray-700);
+}
+
+.theme-picker__hint {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.45;
+    color: var(--ig-gray-600);
+
+    code {
+        font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+        font-size: 11px;
+    }
+}
+
+.theme-swatch {
+    display: inline-block;
+    min-width: 14px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    border: 1px solid var(--ig-gray-300);
+    vertical-align: -2px;
+    background: linear-gradient(135deg, var(--swatch-bg) 0 50%, var(--swatch-accent) 50% 100%);
+}
+
+.theme-swatch--studio {
+    --swatch-bg: #{$studio-bg};
+    --swatch-accent: #{$studio-accent};
+}
+
+.theme-swatch--ledger {
+    --swatch-bg: #{$ledger-bg};
+    --swatch-accent: #{$ledger-accent};
+}
+
+.theme-swatch--editorial {
+    --swatch-bg: #{$editorial-bg};
+    --swatch-accent: #{$editorial-accent};
+}
+
+.theme-swatch--midnight {
+    --swatch-bg: #{$midnight-bg};
+    --swatch-accent: #{$midnight-accent};
+}

src/app/grid/grid-theming/grid-theming.component.ts

@@ -0,0 +1,53 @@
+import { Component, signal } from '@angular/core';
+import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core';
+import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core';
+import { IgxGridComponent } from 'igniteui-angular/grids/grid';
+import { IgxPaginatorComponent } from 'igniteui-angular/paginator';
+import { INVOICE_DATA } from '../../data/invoiceData';
+import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
+class CompactSummary extends IgxNumberSummaryOperand {
+    public override operate(data?: any[]): IgxSummaryResult[] {
+        return super.operate(data).filter(r => r.key === 'count' || r.key === 'sum');
+    }
+}
+
+@Component({
+    selector: 'app-grid-theming',
+    styleUrls: ['./grid-theming.component.scss'],
+    templateUrl: './grid-theming.component.html',
+    imports: [
+        IgxButtonDirective,
+        IgxButtonGroupComponent,
+        IgxColumnComponent,
+        IgxGridComponent,
+        IgxGridToolbarActionsComponent,
+        IgxGridToolbarComponent,
+        IgxGridToolbarHidingComponent,
+        IgxGridToolbarPinningComponent,
+        IgxGridToolbarTitleComponent,
+        IgxPaginatorComponent,
+        IgxPreventDocumentScrollDirective
+    ]
+})
+export class GridThemingComponent {
+    public data = INVOICE_DATA;
+    public compactSummary = CompactSummary;
+    public themes = [
+        { label: 'Studio', class: 'theme-studio', swatch: 'theme-swatch--studio' },
+        { label: 'Ledger', class: 'theme-ledger', swatch: 'theme-swatch--ledger' },
+        { label: 'Editorial', class: 'theme-editorial', swatch: 'theme-swatch--editorial' },
+        { label: 'Midnight', class: 'theme-midnight', swatch: 'theme-swatch--midnight' }
+    ];
+
+    public activeTheme = signal(this.themes[0].class);
+
+    public selectTheme(args: { index: number }) {
+        this.activeTheme.set(this.themes[args.index].class);
+    }
+
+    public formatCurrency(value: number) {
+        return '$' + value.toFixed(2);
+    }
+}

src/app/grid/grid-validation-style/grid-validation-style.component.ts

@@ -14,7 +14,7 @@ import { NgTemplateOutlet } from '@angular/common';
 export class GridValidationStyleComponent {
     @ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
     public data: any[];
-    public rowStyles = {
+    public rowStyles: any = {
         background: (row: RowType) => row.validation.status === 'INVALID' ? '#FF000033' : '#00000000'
     };
     public cellStyles = {

src/app/grid/grids.routes.ts

@@ -31,6 +31,7 @@ import { GridGroupByCustomSampleComponent } from './grid-groupby-custom-sample/g
 import { GridGroupByPagingSampleComponent } from './grid-group-by-paging-sample/grid-group-by-paging-sample.component';
 import { GridGroupBySampleComponent } from './grid-groupby-sample/grid-groupby-sample.component';
 import { GridGroupByStylingComponent } from './grid-groupby-styling/grid-groupby-styling.component';
+import { GridThemingComponent } from './grid-theming/grid-theming.component';
 import { GridGroupBySummarySampleComponent } from './grid-groupby-summary-sample/grid-groupby-summary-sample.component';
 import { GridGroupBySummaryStylingSampleComponent } from './grid-groupby-summary-styling-sample/grid-groupby-summary-styling-sample.component';
 import { GridMovingSampleComponent } from './grid-moving-sample/grid-moving-sample.component';
@@ -168,6 +169,11 @@ export const GridsRoutes: Routes = [
         data: gridsRoutesData['grid-cellMerge-custom'],
         path: 'grid-cellMerge-custom'
     },
+    {
+        component: GridThemingComponent,
+        data: gridsRoutesData['grid-theming'],
+        path: 'grid-theming'
+    },
     {
         component: GridGroupByStylingComponent,
         data: gridsRoutesData['grid-groupby-styling'],

src/app/hierarchical-grid/hgrid-rowStyle-sample/hgrid-rowStyles.component.ts

@@ -18,12 +18,12 @@ export class HGridRowStylesSampleComponent implements OnInit {
     private hierarchicalGrid: IgxHierarchicalGridComponent;
 
     public localdata;
-    public  rowStyles = {
+    public  rowStyles: any = {
         background:(row: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb',
         'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null
     };
 
-    public  childRowStyles = {
+    public  childRowStyles: any = {
         'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
     };
     constructor() { }