feat(themes): add derived themes for inner components by didimmova · Pull Request #17257 · IgniteUI/igniteui-angular

didimmova · 2026-05-01T09:38:00Z

Creates derived themes for inner components of the column actions, paginator, grid-toolbar, query-builder, advanced-filtering, excel-style-filtering.

Implements the new excel-filtering theme

Adds migratons for the changed properties in the theming package

Test with IgniteUI/igniteui-theming#570

…ations

Copilot

Pull request overview

This PR extends the Sass theming layer by introducing “derived themes” for several inner/grid-related components (column actions, paginator, grid toolbar, query builder, advanced filtering, and excel-style filtering). It also adds a new 21.2.2 migration to automatically rename updated theme properties/CSS variables so existing apps can upgrade with minimal manual changes.

Changes:

Added derived-theme mixins for multiple components to scope and propagate token overrides to internal sub-components.
Implemented/updated the excel-style filtering theme and wired it into the global theme generator.
Added a 21.2.2 migration (and tests) to rename changed theme properties and CSS custom properties.

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
projects/igniteui-angular/migrations/update-21_2_2/index.ts	Adds `21.2.2` migration runner and manual CSS-var renames.
projects/igniteui-angular/migrations/update-21_2_2/index.spec.ts	Adds schematic tests for property/CSS-var renames.
projects/igniteui-angular/migrations/update-21_2_2/changes/theme-changes.json	Declares theme property renames for affected themes.
projects/igniteui-angular/migrations/migration-collection.json	Registers the new migration in the schematics collection.
projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss	Includes excel-style filtering theme generation in the base theme pipeline.
projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss	Switches query-builder theming to `tokens` + derived themes and adds dialog styling placeholder.
projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-derived-themes.scss	New: derived token overrides for query-builder internal dependencies.
projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss	Imports advanced-filtering component styles (and whitespace cleanup).
projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-theme.scss	Switches paginator theming to `tokens` + derived themes and renames token keys.
projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-derived-themes.scss	New: derived token overrides for paginator internal dependencies.
projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss	Switches grid theming to `tokens` + derived themes and adjusts ghost-row token scoping.
projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss	Refactors/updates grid sub-component token overrides (incl. excel filtering).
projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss	Updates excel filtering theme to `tokens` + derived themes and renames token keys.
projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-derived-themes.scss	New: derived token overrides for excel filtering internal dependencies.
projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss	Switches grid-toolbar theming to `tokens` + derived themes and renames token keys.
projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-derived-themes.scss	New: derived token overrides for grid-toolbar inner dependencies.
projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-theme.scss	Switches column-actions theming to `tokens` + derived themes and renames token keys.
projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-derived-themes.scss	New: derived token overrides for column-actions internal dependencies.
projects/igniteui-angular/core/src/core/styles/components/_index.scss	Exposes the excel-filtering theme via the components index.
projects/igniteui-angular/core/src/core/styles/components/_common/_extract-theme-schema.scss	New helper for extracting schema/variant from a theme map.

Comments suppressed due to low confidence (1)

projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss:123

In grid-derived-themes, the excel-filtering-theme(...) token overrides are set to values like var(--excel-filtering-header-foreground) / var(--excel-filtering-border-color), but those CSS variables are not defined anywhere else in the repo. This will make the resulting --ig-excel-filtering-* tokens resolve to undefined vars and break styling. Use existing variables (e.g. var(--_grid-foreground), var(--_grid-background), etc.) or add explicit fallbacks in the var() expressions.

+        "migration-55": {
+            "version": "21.2.0",
+            "description": "Updates Ignite UI for Angular from v21.1.x to v21.2.0",
+            "factory": "./update-21_2_0"
+        },


 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The grid theme used to style the component.
 @mixin query-builder($theme) {
-    @include css-vars($theme);
+    @include tokens($theme, $mode: 'scoped');
+    @include query-builder-derived-themes($theme);


-            cursor: grab;
-        }
-    }
+    // @include excel-filtering($theme);


+        // @include tree(tree-theme(
+        //     $background: color($color: 'surface'),
+        //     $background-selected: color($color: 'surface'),
+        //     $background-active: color($color: 'surface'),
+        //     $background-active-selected: color($color: 'surface'),
+        //     $foreground: contrast-color($color: 'surface'),
+        //     $foreground-selected: contrast-color($color: 'surface'),
+        //     $foreground-active: contrast-color($color: 'surface'),
+        //     $foreground-active-selected: contrast-color($color: 'surface'),
+        // ));



+  $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}'
+  );
+
+  @return (
+    'variant': $variant,
+    'theme-variant': $theme-variant,
+    'schema': $schema
+  );


Copilot

Pull request overview

Copilot reviewed 20 out of 20 changed files in this pull request and generated 5 comments.

 	    @include e(expression-item-keyboard-ghost) {
 		    @extend %filter-tree__expression-item-keyboard-ghost !optional;
 	    }


+    @if is-used('igx-grid-excel-style-filtering', $exclude) {
+        $grid-excel-style-filtering-theme-map: excel-filtering-theme(
+            $schema: $schema,
+        );
+        $grid-excel-style-filtering-theme-map: meta.call(


+    %advanced-filtering-dialog {
+        background: var-get($theme, 'background');
+        box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24));
+
+        @if $variant == 'material' or $variant == 'bootstrap' {


+import * as path from "path";
+
+import {
+    SchematicTestRunner,
+    UnitTestTree,
+} from "@angular-devkit/schematics/testing";
+import { setupTestTree } from "../common/setup.spec";
+
+const version = "21.2.2";
+const columnActionsThemes = ["column-actions-theme"];
+const gridToolbarThemes = ["grid-toolbar-theme"];
+const paginatorThemes = ["paginator-theme"];
+const testFilePath = "/testSrc/appPrefix/component/test.component.scss";
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner(
+        "ig-migrate",
+        path.join(__dirname, "../migration-collection.json"),
+    );
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    const migrationName = "migration-56";


Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

didimmova · 2026-05-19T07:47:29Z

@copilot resolve the merge conflicts in this pull request

…emes # Conflicts: # projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss Co-authored-by: didimmova <45598235+didimmova@users.noreply.github.com>

Copilot · 2026-05-19T07:55:17Z

@copilot resolve the merge conflicts in this pull request

Resolved by merging latest master into this branch and fixing the only merge conflict in projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss in commit 27544dad. This update does not include UI changes, so there is no UI screenshot to provide.

didimmova added 2 commits May 1, 2026 12:35

feat(themes): add derived themes for inner components

59c3bc4

feat(paginator/migations): update paginator properties and write migr…

8d5c133

…ations

didimmova mentioned this pull request May 1, 2026

feat(themes): export excel-filtering theme and update grid-related inner component themes IgniteUI/igniteui-theming#570

Open

Merge branch 'master' into didimmova/derive-themes

943257f

didimmova requested a review from simeonoff May 7, 2026 05:56

didimmova assigned desig9stein May 7, 2026

didimmova added ❌ status: awaiting-test PRs awaiting manual verification grid: toolbar grid: excel-style-filtering grid: advanced-filtering paginator grid query-builder grid: column-actions labels May 7, 2026

didimmova marked this pull request as ready for review May 7, 2026 05:57

didimmova added the migrations label May 7, 2026

Copilot AI review requested due to automatic review settings May 7, 2026 06:03

Copilot started reviewing on behalf of didimmova May 7, 2026 06:04 View session

Copilot AI reviewed May 7, 2026

View reviewed changes

didimmova and others added 2 commits May 7, 2026 09:14

Merge branch 'master' into didimmova/derive-themes

3d94e84

chore(grid): address comments

13682f0

didimmova requested a review from Copilot May 7, 2026 06:33

Copilot started reviewing on behalf of didimmova May 7, 2026 06:34 View session

Copilot AI reviewed May 7, 2026

View reviewed changes

didimmova and others added 3 commits May 7, 2026 10:20

Potential fix for pull request finding

37d620a

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

chore(*): fix migrations formatting and component register

6fa26c3

Merge branch 'master' into didimmova/derive-themes

df2d0cb

desig9stein added 💥 status: in-test PRs currently being tested and removed ❌ status: awaiting-test PRs awaiting manual verification labels May 8, 2026

Merge branch 'master' into didimmova/derive-themes

f1c8a29

didimmova assigned adrianptrv and unassigned desig9stein May 19, 2026

Copilot started work on behalf of didimmova May 19, 2026 07:47 View session

Merge remote-tracking branch 'origin/master' into didimmova/derive-th…

27544da

…emes # Conflicts: # projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss Co-authored-by: didimmova <45598235+didimmova@users.noreply.github.com>

Copilot finished work on behalf of didimmova May 19, 2026 07:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(themes): add derived themes for inner components#17257

feat(themes): add derived themes for inner components#17257
didimmova wants to merge 10 commits into
masterfrom
didimmova/derive-themes

didimmova commented May 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

didimmova commented May 19, 2026

Uh oh!

Copilot AI commented May 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

didimmova commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

didimmova commented May 19, 2026

Uh oh!

Copilot AI commented May 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

didimmova commented May 1, 2026 •

edited

Loading