Skip to content

feat(material/theming): add type-safe mat.token-var() for CSS custom properties#33069

Open
lekhmanrus wants to merge 1 commit intoangular:mainfrom
lekhmanrus:feat/32800/mat-token-var
Open

feat(material/theming): add type-safe mat.token-var() for CSS custom properties#33069
lekhmanrus wants to merge 1 commit intoangular:mainfrom
lekhmanrus:feat/32800/mat-token-var

Conversation

@lekhmanrus
Copy link
Copy Markdown
Contributor

Developers can now write mat.token-var(snack-bar, container-color) to get var(--mat-snack-bar-container-color) with compile-time validation of both the component name and token name.
A new _token-registry.scss imports all M3 component token files and exposes a token-var($component, $token, $fallback?) function via the public mat.* API. Throws a Sass compile error for unknown component or token names.

close #32800

@pullapprove pullapprove bot requested review from andrewseguin and ok7sai April 11, 2026 06:02
@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label Apr 11, 2026
…properties

Developers can now write `mat.token-var(snack-bar, container-color)` to
get `var(--mat-snack-bar-container-color)` with compile-time validation
of both the component name and token name.
A new `_token-registry.scss` imports all M3 component token files and
exposes a `token-var($component, $token, $fallback?)` function via the
public `mat.*` API. Throws a Sass compile error for unknown component
or token names.

close angular#32800

Signed-off-by: Ruslan Lekhman <[email protected]>
@lekhmanrus lekhmanrus force-pushed the feat/32800/mat-token-var branch from 8a5c781 to df6a1df Compare April 11, 2026 06:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

detected: feature PR contains a feature commit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(theming): Add a typesafe like API to get theming tokens CSS var names

1 participant