angular / angular/components

bug(material/theming): get-contrast-color-from-palette doesn't work with pre-defined hue names

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

Beschreibung

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

Using `get-contrast-color-from-palette` is convenient and explicit as it gives you the contrast color without having to add `-contrast` to the hue value. It seems to me as the right thing to choose, even though the theming documentation currently doesn't mention this function.

However the behavior can be confusing because hues such as `default`, `lighter` or `darker` are added only to the outer map, not the inner contrast map, when calling `define-palette`. Therefore you can only use it with hues that are defined in the contrast-palette from the beginning (such as 500).

There is an easy workaround but I also think that it should be fairly easy to add `default`, `lighter`, `darker` etc. to the inner contrast map in `mat.define-palette`.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-egs21k?file=src%2Fstyles.scss
Steps to reproduce:
1. Use `mat.get-contrast-color-from-palette` with a pre-defined hue value such as `default` or `lighter`

### Expected Behavior

I expect `mat.get-contrast-color-from-palette($palette, default)` to return the same color as `mat-get-color-from-palette($palette, default-contrast)` after defining a palette using `mat.define-palette`.

### Actual Behavior

`mat.get-contrast-color-from-palette` looks for a hue called `default` in the inner contrast map but that doesn't get added to the inner contrast map when calling `mat.define-palette`.

### Environment

- Angular: 16.2.6
- CDK/Material: 16.2.9
- Browser(s): Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit mat.define-palette und get-contrast-color-from-palette und führe anschließend die bereitgestellte StackBlitz-Reproduktion mit dem standardmäßigen oder helleren Farbton aus. Die Aufgabe ist abgeschlossen, wenn die Kontrastsuche dieselbe Farbe wie der entsprechende Wert von default-contrast oder lighter-contrast zurückgibt und das betroffene Verhalten abgedeckt ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, sass
Bereich
design, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

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