feat(COMPONENT): Global Color Specific CSS Generation using Design Tokens

[fireflysemantics]

Feature Description

Currently when we want to generate different themes we scope the classes to the specific themes by nesting the theme css generation within a scope block.

.dark-theme {
   /// Dark theme CSS generation
}

html {
   /// Light theme (Default) CSS generation
}

And this will duplicate the generation of classes that change color, and with the old way of doing it this made sense because we used SASS getters to retrieve color from the theme palette.

When using the Material Design Tokens (CSS Variables) this becomes unnecessary, because the selector context ( .light {}, .dark {}` and so on ... ) decides what CSS are applicable.

And so any CSS that depends on color design tokens only needs to be generated once.

So Angular Material can split of structural classes and generate those within a specific scope block if necessary ( If a different theme implies a different structure), while only generating color specific CSS one time.

Use Case

Application Size Optimization. The CSS Bundles will be smaller.

Notes

This is a slightly tricky concept, so for anyone curious about this here's a minimal demo.

https://stackblitz.com/edit/stackblitz-starters-j3ncju?file=package.json

When the .dark class is applied to the main element it changes the background of the div.