components
components copied to clipboard
feat(material/theming): fine-grain token override without variable duplication
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;
}