angular / angular/components

feat(all): Mixins for changing component color

Aperta
#30,241 0 commenti 11 reazioni 0 assegnatari Vedi su GitHub
area: theming feature P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### 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_

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia individuando l’API `mat.chips-overrides` della v19 e confrontandola con il comportamento di `mat.chips-color` della v18 descritto qui. Decidi se i mixin per il colore dei componenti debbano accettare una palette o un colore arbitrario e definisci l’ambito per fornire mixin equivalenti per i componenti Material. L’issue non indica file né test, quindi è ancora necessario mappare i punti di ingresso dell’implementazione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, sass
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
25/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.