feat(COMPONENT): Design Tokens for Accessing Theme Colors as Variables at Runtime

[fireflysemantics]

Feature Description

This is related to this request.

https://github.com/angular/components/issues/27362

The request is for theme color variables that can be accessed at Runtime. Something like:

p {
color: var(--mat-primary-default);
background-color: var(--mat-primary-contrast-default);
}

This is something that can be done currently only at compile time.

If Angular adds this, then themes that use the design Tokens can switch out the color theme and the design Token variable references will automatically apply the new values.

This allows for reloading of new themes only in order to change the color theme.

With the way it's currently done, the entire app would have to be recompiled and redeployed in order to change the theme color values.

Use Case

Change theme color values dynamically based on Design Tokens.

[austinw-fineart]

I'd imagine this to be implemented as part of Material You support anyway since dynamic palettes need to be calculated at runtime as well.

[fireflysemantics]

Perhaps Angular Material could provide a sass mixin that we could call to generate consistent tokens across all themes.

This way Angular could use it to generate Tokens for the default themes ( Perhaps put a configuration flag for this on the theme configuration?), and if users generate custom themes, then they could call the mixin to generate the same token. Something like:

@use "@angular/material" as mat;
@include mat.all-theme-color-tokens($my-theme);

or if a configuration flag is added to the theme indicating that tokens should be generated then it could be part of the call to mat.all-component-themes

$my-theme: mat.define-light-theme((
 color-tokens: true,
 color: (
   primary: $my-primary,
   accent: $my-accent,
 ),
 typography: mat.define-typography-config(),
 density: 0,
));

@include mat.all-component-themes($my-theme);

So in this example above I added a color-tokens: true property. Perhaps there should be a settings map on the theme that is optional, but could have theme configuration settings when present.

[jermowery]

Having the general color, shape, and typescale tokens generated would be very help, especially now that official M3 support has landed.