You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
refactor: update to version 30.0.0 of Ignite UI Theming - #17766
Prepares Ignite UI for Angular 23.0.0 for Ignite UI Theming 30.0.0, and rebuilds the Sass ng update migrations on a shared, scanner-based engine.
Ignite UI Theming 30.0.0
The deprecated theme wrappers (light-theme, dark-theme and the Indigo, Fluent and Bootstrap variants) build their palettes with the legacy generator, so their colors don't change.
The grid toolbar and the dark Bootstrap checkbox read the base surface role instead of --ig-surface-500.
The predefined palettes and the pre-built themes compile to the same CSS as with Ignite UI Theming 29.0.0, apart from var(--ig-surface-500) becoming var(--ig-surface-base).
23.0.0 migration
Adds $generator: 'legacy' to existing palette() function calls, so they keep their colors under the new fitted default.
Leaves the palette mixin, members with similar names, and stylesheets that declare their own palette function alone.
Reports calls that spread their arguments for manual review.
Implemented as a theme-changes.json entry on top of the new engine.
Sass migration engine (migrations/common/sass/)
Scanning, and the rename, remove and add operations for members, arguments, variables and @use/@forward rules, move out of UpdateChanges into a shared module. All Sass changes now run in one pass per stylesheet.
Property changes gain four options: add, exactOwner, ownerType and parameterIndex.
Changes a migration can't make safely are logged at the end of ng update as path:line - what to do.
Fixes existing bugs in the older code paths:
Removing a mixin include could delete unrelated code, or corrupt a file when an argument string contained ).
Renames also rewrote longer names (my-toast became my-tokens), stylesheets' own declarations, and comments.
Renaming a variable threw when the variable was the file's first character, which aborted the migration.
@use changes missed with (...), repeated rules, @forward and .sass syntax.
Demos
The color sample shows the surface roles, plus the numbered surface shades for legacy palettes, based on the generator that built the palette. Translucent colors show as 8-digit hex.
Motivation / Context
Ignite UI Theming 30.0.0 switches palette() to a new fitted generator by default and addresses the surface by role (base, sunken, raised, overlay, container) instead of by shade number. Its release is aligned with Ignite UI for Angular 23.0.0, so existing apps need a migration that keeps their palettes unchanged.
Writing that migration showed that the older Sass migration paths relied on substring and regex matching, which could edit the wrong code or none at all. The shared engine fixes them, and makes adding an argument a reusable, config-driven operation.
Type of Change (check all that apply):
Bug fix
New functionality
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Unit tests:npm run test:schematics passes, 603 specs. That covers all existing migration specs unchanged, plus new ones:
an edge-case table run against every Sass operation: comments, strings, url(), Windows line endings, unbalanced brackets
focused cases per operation
end-to-end specs for the new config options and the manual-review log, including line numbers after earlier edits
16 specs for the 23.0.0 migration
Compiled themes: the 13 prebuilt themes compile against Ignite UI Theming 30.0.0. Diffing their CSS against Ignite UI Theming 29.0.0 shows only the surface change described above.
Manual: ran the old and new migration code against crafted stylesheets to confirm each fixed bug. Checked the color sample's generator detection in Chrome.
Test Configuration:
Angular version: 22.2
Browser(s): Chrome (color sample only; the migrations run in Node.js 24)
OS: macOS 27
Checklist:
All relevant tags have been applied to this PR
This PR includes unit tests covering all the new code (test guidelines)
This PR includes API docs for newly added methods/properties (api docs guidelines)
This PR includes feature/README.MD updates for the feature docs
This PR includes general feature table updates in the root README.MD
This PR includes CHANGELOG.MD updates for newly added functionality
This PR contains breaking changes
This PR includes ng update migrations for the breaking changes (migrations guidelines)
This PR includes behavioral changes and the feature specification has been updated with them
Accessibility (ARIA, keyboard navigation, focus management) has been verified
Depends on Ignite UI Theming 30.0.0. The deprecated theme wrappers now pass $generator, which Ignite UI Theming 29.0.0 rejects. The igniteui-theming dependency goes to ^30.0.0 once it's published.
…scanner
Move Sass scanning and the style change operations into common/sass, and
run every Sass change in one pass per stylesheet.
Fixes:
- Removing a mixin include no longer deletes unrelated code, breaks on
brackets in strings, or removes mixins with longer names.
- Renaming a function or mixin matches the exact name only and leaves
declarations, comments and strings alone.
- Renaming a variable no longer throws at the start of a file, and
covers interpolations.
- @use changes handle `with`, repeated rules, @forward and .sass syntax.
Adds `add`, `exactOwner`, `ownerType` and `parameterIndex` to property
changes, and logs what a migration cannot change as path:line entries.
…3.0.0
Ignite UI Theming 30.0.0 generates palettes with the fitted generator by
default. Add $generator: 'legacy' to existing palette() calls so they
keep their colors, and report calls that spread their arguments.
List the surface roles, plus the numbered shades for legacy palettes,
based on the generator that built the palette. Show translucent colors
as 8-digit hex.
- The deprecated theme wrappers build palettes with the legacy
generator.
- The grid toolbar and the dark Bootstrap checkbox read the base surface
role instead of surface 500.
BREAKING CHANGE: palette() uses the fitted generator by default, and
component themes read --ig-surface-base instead of --ig-surface-500.
The reason will be displayed to describe this comment to others. Learn more.
🟡 Changes recommended
The migration engine can corrupt variable removals and interpolated arguments, misses nested palette calls, and remains tested against a beta dependency.
… removing variables
- Recognize a declaration at the start of a line in the indented syntax.
- Skip the braces of an interpolation when finding where a statement
ends, so they are not taken for a content block.
The insertion anchor is the first newline after the last argument, even when that newline is inside a trailing block comment. For palette(\n $surface: white /* explanation\n continues */\n), this inserts $generator between the comment delimiters, so the migration reports success but the call remains unpinned. Locate the end of trailing comments before choosing the new-line anchor, and cover a multiline block comment.
Normalize Sass variable tokens in legacy migration renames
Legacy migration 13.1.0 stores its variable changes without a leading $ (for example, igx-background-color → background-color in update-13_1_0/changes/theme-changes.json:850-867). This comparison therefore never matches the $igx-background-color token, and even a match would emit a replacement without $, so migration-23 no longer performs those four renames. Normalize both configured names to Sass variable tokens and add a regression case for the legacy config.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Description
Prepares Ignite UI for Angular 23.0.0 for Ignite UI Theming 30.0.0, and rebuilds the Sass
ng updatemigrations on a shared, scanner-based engine.Ignite UI Theming 30.0.0
light-theme,dark-themeand the Indigo, Fluent and Bootstrap variants) build their palettes with thelegacygenerator, so their colors don't change.basesurface role instead of--ig-surface-500.var(--ig-surface-500)becomingvar(--ig-surface-base).23.0.0 migration
$generator: 'legacy'to existingpalette()function calls, so they keep their colors under the newfitteddefault.palettemixin, members with similar names, and stylesheets that declare their ownpalettefunction alone.theme-changes.jsonentry on top of the new engine.Sass migration engine (
migrations/common/sass/)@use/@forwardrules, move out ofUpdateChangesinto a shared module. All Sass changes now run in one pass per stylesheet.add,exactOwner,ownerTypeandparameterIndex.ng updateaspath:line - what to do.).my-toastbecamemy-tokens), stylesheets' own declarations, and comments.@usechanges missedwith (...), repeated rules,@forwardand.sasssyntax.Demos
Motivation / Context
Ignite UI Theming 30.0.0 switches
palette()to a newfittedgenerator by default and addresses the surface by role (base,sunken,raised,overlay,container) instead of by shade number. Its release is aligned with Ignite UI for Angular 23.0.0, so existing apps need a migration that keeps their palettes unchanged.Writing that migration showed that the older Sass migration paths relied on substring and regex matching, which could edit the wrong code or none at all. The shared engine fixes them, and makes adding an argument a reusable, config-driven operation.
Type of Change (check all that apply):
Component(s) / Area(s) Affected:
Theming (core theme generators), Grid (toolbar theme), Checkbox (dark Bootstrap theme),
ng updatemigrations (shared Sass engine, 23.0.0 migration), dev demos (color sample)How Has This Been Tested?
Unit tests
Manual testing
Automated e2e tests
Unit tests:
npm run test:schematicspasses, 603 specs. That covers all existing migration specs unchanged, plus new ones:url(), Windows line endings, unbalanced bracketsCompiled themes: the 13 prebuilt themes compile against Ignite UI Theming 30.0.0. Diffing their CSS against Ignite UI Theming 29.0.0 shows only the surface change described above.
Manual: ran the old and new migration code against crafted stylesheets to confirm each fixed bug. Checked the color sample's generator detection in Chrome.
Test Configuration:
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)