bug(material/theming): get-contrast-color-from-palette doesn't work with pre-defined hue names
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
### 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
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par mat.define-palette et get-contrast-color-from-palette, puis exécutez la reproduction StackBlitz fournie en utilisant la teinte par défaut ou la teinte plus claire. C’est terminé lorsque la recherche de contraste renvoie la même couleur que la valeur correspondante de default-contrast ou lighter-contrast, avec une couverture du comportement concerné.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, sass
- Domaine
- design, frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 45/100