bug(style): Custom palette's text hue not propagated to MDC styles
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### Is this a regression?
- [X] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
14.x
### Description
[Re-opening #26021 which was incorrectly closed as a duplicate of a similar but different issue]
[This is a regression insofar as the legacy non-MDC implementations do not have this problem]
Hi, after running the MDC schematic on one of my projects I have found that the MDC-based components do not use the `$text` hue specified in the theme config, which can cause accessibility issues for themes whose default hues do not provide sufficient contrast against a neutral background. In particular I have noticed this causes legibility issues for the floating placeholder on form fields and the label text on default-appearance buttons, but it might apply to other components as well.
My theme is configured as follows:
`$my-palette: mat.define-palette($greens, 600, 200, 900, 700);`
Note that the $text hue is overridden to `700` in the call to `define-palette`.
Here is a screenshot showing the 700 hue being correctly applied to the aforementioned text elements under the legacy components:

And here is how the new MDC components look:

I had a hard time reading the Angular Material => MDC SCSS theming code but it seems like the $text hue preference isn't being passed to the MDC mixins in any way.
### Reproduction
StackBlitz link:
Steps to reproduce:
1. https://stackblitz.com/edit/components-issue-9ugktp?file=src%2Fstyles.scss
2. Note that text hue is set to 900 but text button and form field label use 500
### Expected Behavior
MDC components should use specified text hue where applicable
### Actual Behavior
MDC components used primary hue regardless
### Environment
Environment
Angular: 15.0.0-18.0.1
CDK/Material: 15.0.0-18.0.1
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): Windows 10
Beitragsleitfaden
Rechercherichtung
Beginnen Sie mit src/styles.scss im verknüpften StackBlitz und verfolgen Sie den Angular Material MDC SCSS-Theming-Code rund um mat.define-palette und die MDC-Mixins. Vergleichen Sie die Legacy- und MDC-Ausgabe für den konfigurierten $text-Farbton und überprüfen Sie anschließend, dass die zutreffenden MDC-Textelemente, einschließlich Formularfeldbeschriftungen und Standardschaltflächen, im Reproduktionsbeispiel den angegebenen Farbton verwenden.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, scss, typescript
- Bereich
- accessibility, frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100