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 22.3.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).
22.3.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 22.3.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 22.3.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.
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.
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 search skips the body of each matched call, so property migrations miss nested matching owners. With the common suffix owner theme, $x: outer-theme($schema: inner-theme($old: 1)) never updates $old: the outer call has no such top-level argument and the inner call is not visited. Process nested calls as well; because the current edits replace whole argument bodies, the implementation must also avoid dropping overlapping inner/outer edits.
Preserve Sass interpolation when scanning quoted strings
Quoted Sass strings can contain executable interpolation, but this masks the entire string. For example, "#{igx-color($palette, primary, 500)}" is valid Sass; the 13.1 member migration will now leave igx-color() unchanged even though that API was renamed. The same masking also hides module references that should be reported for manual review. Preserve #{...} expression contents when scanning references and add an interpolated-call regression case.
parameterIndex is documented as a 1-based index, but the schema accepts zero, negative, and fractional values. Those values bypass or distort the positional-argument guard and can make a configured migration add/remove the wrong argument. Constrain this to positive integers.
…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.
…2.3.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.
… 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.
Ignite UI Theming 30 now ships with Ignite UI for Angular 22.3.0 instead of 23.0.0. Move the migration to update-22_3_0_palette-generator, set its version to 22.3.0, and move the CHANGELOG entries under 22.3.0.
An escaped bracket such as `\)` is part of an unquoted url() address, but the scanner ended the token there and exposed the rest of the address to the migrations. Skip escaped characters while scanning the token, and add the case to the URL regression table.
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 22.3.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).22.3.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 22.3.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, 22.3.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)