components icon indicating copy to clipboard operation
components copied to clipboard

feat(material-experimental/theming): Add support for color variants

Open mmalerba opened this issue 1 year ago • 0 comments

Adds token infrastructure to be able to support color variants for M3 components. This is accomplished by adding an additional namesapce to the token map per color variant. For example, if the mat-icon tokens live in the token map under (mat, icon): (token-values...), and we want to support a primary color variant, we will add a new namespace (mat, icon, primary): (token-value-overrides...).

When applying a color or theme mixin for an M3 theme, users can specify the desired variant as an extra parameter to the mixin: @include mat.icon-theme($theme, $color-variant: primary). The mixin will then merge any overrides from the variant namespace into the default values from the standard namespace to determine the final value for each CSS variable. Note that the user must provide this a keyword argument, not a positional argument. This makes the API easier to maintain should we need to add other options later.

In addition to adding the necessary infrastructure for color variants, this PR also builds out the color variant supprot for mat-icon to prove out the infrstructure and serve as an example.

mmalerba avatar Dec 14 '23 01:12 mmalerba