Button text color adopts background color after upgrading to Angular Material 18

[ct-dixit]

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

After upgrading to Angular and Angular Material version 18.0.0, the button text color incorrectly takes on the button's background color, making the text unreadable. This issue did not exist in version 17.0.0.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-xswcad?file=src%2Fcustom-theme.scss,src%2Fcolor.scss,src%2Fmain.ts,src%2Fglobal_styles.css

Steps to Reproduce:

1. Set up a new Angular project with Angular 18 and Angular Material 18.
2. Implement a button using Angular Material components.
3. Apply a custom theme to the button with specific text and background colors.
4. Observe that the button text color adopts the background color instead of the specified text color.

Expected Behavior

The button text color should remain distinct from the background color as specified in the theme settings.

Actual Behavior

The button text color adopts the button's background color, making the text difficult to read.

Environment

• Angular: 18.0.0
• CDK/Material: 18.0.2
• Browser(s): chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Window

[json-derulo]

See https://stackoverflow.com/a/78617559/5470544

In your custom palettes, you are using the same colors for hue and contrast. You should choose either black or white as contrast color, depending on which color gives best contrast. This is not an issue with Angular Material.

Updated stackblitz: https://stackblitz.com/edit/stackblitz-starters-a3pvnb?file=src%2Fcolor.scss

[crisbeto]

Closing since it looks like the palette wasn't defined correctly. Note that you can also generate a custom theme by running ng generate @angular/material:m3-theme.

[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.}