angular / angular/components

feat(all): Mixins for changing component color

Ouverte
#30,241 0 commentaires 11 réactions 0 personnes assignées Voir sur GitHub
area: theming feature P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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_

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par localiser l’API `mat.chips-overrides` de v19 et comparez-la au comportement de `mat.chips-color` de v18 décrit ici. Déterminez si les mixins de couleur des composants doivent accepter une palette ou une couleur arbitraire, et définissez le périmètre de la fourniture de mixins équivalents pour les composants Material. L’issue ne mentionne aucun fichier ni test ; les points d’entrée de l’implémentation doivent donc encore être identifiés.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, sass
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.