angular / angular/components

feat(all): Mixins for changing component color

Offen
#30,241 0 Kommentare 11 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: theming feature P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, die v19-API `mat.chips-overrides` zu finden und sie mit dem hier beschriebenen Verhalten von v18 `mat.chips-color` zu vergleichen. Entscheide, ob Farb-Mixins für Komponenten eine Palette oder eine beliebige Farbe akzeptieren sollten, und lege den Umfang für die Bereitstellung gleichwertiger Mixins für Material-Komponenten fest. Im Issue werden keine Dateien oder Tests genannt, daher müssen die Einstiegspunkte für die Implementierung noch ermittelt werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, sass
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.