angular / angular/components

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

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

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con mat.define-palette e get-contrast-color-from-palette, quindi esegui la riproduzione StackBlitz fornita usando la tonalità predefinita o più chiara. Il lavoro è completato quando la ricerca del contrasto restituisce lo stesso colore del valore corrispondente di default-contrast o lighter-contrast, con copertura del comportamento interessato.

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

Valutazione

Stack tecnologico
angular, sass
Ambito
design, frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.