components icon indicating copy to clipboard operation
components copied to clipboard

feat(material/theming): fine-grain token override without variable duplication

Open wagnermaciel opened this issue 2 months ago • 0 comments

Feature Description

Add a Sass function to our components theming API which allows users to alter the tokens map in a theme config.

This design satisfies the following pain points for our users:

  • There are no guard rails preventing users from misspelling variable names.
  • Our CSS variables are prefixed with "--mat" and "--mdc" which can be confusing for users.

Use Case

Situations where a user would like to override our styles on more of an application level without generating duplicate css variables.

For more context, compare the example output below to the example output of https://github.com/angular/components/issues/28929.

Example Usage

$theme: mat.define-theme(...);

$theme: mat.checkbox-extend-theme($theme, (
    checkbox-color: blue,
));

@include mat.checkbox-theme($theme);

Example Output

html {
    --mdc-checkbox-checkmark-color: blue;
}

wagnermaciel avatar Apr 22 '24 19:04 wagnermaciel