feat(all): Mixins for changing component color
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Feature Description
## What I want
To easily change the color of a material component.
## Context
It is a very common use case to change a material component default color, and migrating from v18 to v19 this was a pain point for me.
Before in v18, I could change the component color to one in my theme palette like this:
```
@include mat.chips-color(theme.$theme, $color-variant: tertiary);
```
And now in v19, I need to specify every tokens:
```
@include mat.chips-overrides((
elevated-selected-container-color: map.get(theme.$palettes, tertiary, 90),
selected-label-text-color: map.get(theme.$palettes, tertiary, 10),
selected-trailing-icon-color: map.get(theme.$palettes, tertiary, 10),
selected-hover-state-layer-color: map.get(theme.$palettes, tertiary, 10),
selected-trailing-action-state-layer-color: map.get(theme.$palettes, tertiary, 10),
selected-focus-state-layer-color: map.get(theme.$palettes, tertiary, 10),
with-icon-selected-icon-color: map.get(theme.$palettes, tertiary, 10)
));
```
It's much more complicated now, and if we want to keep the same level of contrast (here tones 10 and 90) we have to inspect the generated code and find the equivalent in the new color.
## Proposed solution
In v18 we had to pick a color from our theme, which wasn't very flexible. An ideal solution would be:
```
@include mat.chips-color(#FF0000); // <== We could pass any color here and the mixin would compute the tones
```
If not doable, then the same behavior as v18 would be good enough:
```
@include mat.chips-color(theme.$palettes, tertiary);
// or
$tertiary-palette: map.get(theme.$palettes, tertiary);
@include mat.chips-color($tertiary-palette);
```
There should be one `mat.-color` mixin for each material component.
### Use Case
_No response_
Contributor guide
Research direction
Start by locating the v19 `mat.chips-overrides` API and comparing it with the v18 `mat.chips-color` behavior described here. Decide whether component color mixins should accept a palette or arbitrary color, and define the scope for providing equivalent mixins across Material components. The issue names no files or tests, so the implementation entry points still need to be mapped.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, sass
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100