bug(button): Palette contrast values are not applied

[mlimones-pensare]

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

13.x

Description

When using a custom theme the contrast values from a custom palette are not applied

Reproduction

steps

• define a custom palette with a "slightly light" color and a white contrast color

$md-secondary: (
  ...
  500 : #f86072,
  ...
contrast: (
  ...
    500 : #ffffff
  ...
  )
);

• Apply the theme

$theme-primary: mat.define-palette($md-primary,500);
$theme-accent: mat.define-palette($md-secondary,500);
$theme-warn: mat.define-palette(mat.$red-palette);
$theme: mat.define-light-theme((
  color: (
    primary: $theme-primary,
    accent: $theme-accent,
    warn: $theme-warn,
  ),
  typography: mat.define-typography-config(),
));
@include mat.all-component-themes($theme);

example:

https://stackblitz.com/edit/angular-5b8rw5?file=src/theme.scss

Expected Behavior

Text in accent button should be white (contrast color) as specified in the palette

Actual Behavior

Text in accent button is black

Environment

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

[beckerjohannes]

Also ran into this issue. In my case with a slightly light primary color

1. Raised Buttons shows primary with black text
2. Primary Tool Bar shows primary with white text

The issue seems to be, that the button uses the on-primary calculated by the mdc-theme See:

components/src/material/button/_button-theme.scss

Line 50 in 57676e4

$on-primary: mdc-theme-color.prop-value(on-primary);

Whereas the toolbar uses the contrast color defined by the custom theme. See:

components/src/material/toolbar/_toolbar-theme.scss

Line 20 in 57676e4

color: theming.get-color-from-palette($palette, default-contrast);

[GeorgDangl]

We're having the same issue, using the cyan 600 color as primary, button color (text and icons) is black. It used to be white before.

However, I've noticed that using a slightly darker cyan 700, the color seems to work again. But, then the primary color is off, of course😀

[sergidt]

Same issue, and breaking all my product styles and need to be overwritten, forcing colors hardcoding rules

[inlym]

Notify me if resolved.

[davidpawar]

Also facing the same issue.

[johnnygerard]

Same issue.

[pqt-tmeitz]

are there any updates yet?

[Frankitch]

Same issue for me, my workaround:

.mat-mdc-unelevated-button.mat-primary {
 --mdc-filled-button-label-text-color: var(--player-primary-contrast-500);
}

.mat-mdc-unelevated-button.mat-accent {
  --mdc-filled-button-label-text-color: var(--player-accent-contrast-500);
}

.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-label-text-color: var(--player-primary-contrast-500);
}

.mat-mdc-raised-button.mat-accent {
  --mdc-protected-button-label-text-color: var(--player-accent-contrast-500);
}

[MichalK6677]

The problem is still there. The Angular Material v15 is not usable for more than 2 months.

[bjoernboehnke]

Just as an information for others facing an issue like this:
There seems to be a change affecting "unthemed" buttons. A button in my application changed text-color after upgrading to angular material 15 from white to black. It is placed on a dark background. I found this issue and assumed it was caused by this. Just give it a try and give your button a color attribute if it has none and select primary, accent or warn depending on your background. You can use mat-flat-button and then the correct contrast color is selected.
Definitely not a solution for everybody but worked for me.

[angelaki]

Any chance this will get fixed soon? I need my contrast color to get used because our CI uses a white font on a pretty light blue. Now all the buttons etc. have a black text.

Checkbox' checkmark is affected, too (just like probably most of the compontents).

[mvanderlee]

More details here: #26153