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

[fireflysemantics]

Feature Description

This issue is related to this issue:
#27369

Angular 19 is adding system design tokens that provide some of the colors in the created theme.

It would be nice if Angular supplemented this with named design tokens for all the color tones in the color palettes.

So for example if we want the system primary color (Which I think is color tone 40 ) we could do this ( This is a design token that comes with Angular 19 Material Design 3):

.my-button {
  color: var(--mat-sys-primary);
}

But if we want a different color tone ( Lets say number 10) this is still something we would have to use scss getters for. So for example if we wanted to do something like this:

.my-button {
  color: var(--mat-sys-primary-10);
}

We would have to generate those design tokens ourselves, and each project might do that a little differently, so it would be nice if Angular had a SASS utility mixin that could do this for us.

Use Case

Accessing color palette tones by number at runtime.

.my-button-tone-weight-10 {
  color: var(--mat-sys-primary-10);
}

.my-button-tone-weight-20 {
  color: var(--mat-sys-primary-20);
}
.my-button-tone-weight-30 {
  color: var(--mat-sys-primary-30);
}