bug(style): Custom palette's text hue not propagated to MDC styles

[benelliott]

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

14.x

Description

[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

Expected Behavior

MDC components should use specified text hue where applicable

Actual Behavior

MDC components used primary hue regardless

Environment

• Angular: 15.0.0
• CDK/Material: 15.0.0
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[blogcraft]

I have 2 themes (light and dark) which both have black as the primary theme color.

In v14 the text of buttons inside the toolbar had white color no matter if the theme was dark or light.

Now with v15 text is white in dark but black in light. So, my text is invisible in dark.

Looks that 14 used to care about the contrast in color and adapt text to it. Now it just sets black in light and white in dark which is a bad oversimplification.

[aastrouski]

Same issue.
v15 can't pass WCAG test, because guys broke all colors here. TEXT color isn't applied to Buttons, Form Fields, Toolbar, Lists and many other components. Some components don't use light/dark colors from the theme.
Input / Mat-select / Autocomplete have very light background for focussed and selected items.
And so on...
All components should be fixed manually before it can be used in the production.
v15 is a terrible regression in accessibility.

[andrewseguin]

Duplicate of #26056

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}