bug(button): Palette contrast values are not applied

[mlimones-pensare]

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

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: https://github.com/angular/components/blob/57676e467a1ed9875def9a825746799c3427c942/src/material/button/_button-theme.scss#L50 Whereas the toolbar uses the contrast color defined by the custom theme. See: https://github.com/angular/components/blob/57676e467a1ed9875def9a825746799c3427c942/src/material/toolbar/_toolbar-theme.scss#L20

[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: https://github.com/angular/components/issues/26153

[sonphnt]

the same issue to me as well, contrast color does not work.

[Geniewave]

same issue here

[ChristianKohler]

Same issue. As @beckerjohannes mentioned above, the issue is that for buttons the contrast color is not used. Instead the on-primary color from material/theme is applied.

The on-primary color is used for the button text color.

https://github.com/angular/components/blob/96aadaa411a3af93626af9aa73fb4abd6600d0b3/src/material/button/_button-theme.scss#L50

Now on-primary is defined here:

https://github.com/material-components/material-components-web/blob/cedffb44c0c5e2b6aeca591b4e5d19346a52983c/packages/mdc-theme/_theme-color.scss#L137

@function tone($color) {
  $minimumContrast: 3.1;

  $lightContrast: contrast($color, white);
  $darkContrast: contrast($color, rgba(black, 0.87));

  @if ($lightContrast < $minimumContrast) and ($darkContrast > $lightContrast) {
    @return 'light';
  } @else {
    @return 'dark';
  }
}

@function contrast-tone($color) {
  @return if(tone($color) == 'dark', 'light', 'dark');
}


$on-primary: if(contrast-tone($primary) == 'dark', #000, #fff) !default;

As you can see, the minimal contrast is hardcoded. Depending on the contrast the tone is set to light or dark and depending on the tone the text color is set to white or black.

[jnain]

Same issue here. Hope it'll get fixed soon! :)

Thank you @Frankitch for the workaround!

[the-ult]

See: https://github.com/angular/components/issues/26179 for the same kind of issues

[ProjectBay]

Same with checkboxes

[AlvaroP95]

Angular 16 is already live, and this is not fixed. Any news on this?

[aponski]

I have the same problem with buttons and checkboxes. Contrast color of my custom theme is not applied correctly.

[Leccho]

Most of the Angular Material Components don't work properly for the color. I don't know how this as not been fix already. Should have been fix first week after the release of v15, yet here we are at v16 and the problem persist. I'm deceived by this.

[p3pp8]

Same here! V16.1.3 as well, i had to override text color for raised button as contrast palette wasn't applied.

[marc-wilson]

Same thing in 16.1.5 with chips

[DeanPDX]

Same thing in 16.1.5 with chips

Yeah - it doesn't appear to be getting fixed (I think they might view it as a feature rather than a bug; because it DOES enforce a certain level of contrast, which helps with accessibility). I just targeted the elements I cared about with CSS in my global styles and moved on.

[sebastianhaberey]

Same issue. Just posting here as a vote to fix this.

Edit: please 😄

[Davidihl]

I set up a fresh angular in the newest version in combination with material. While trying to setup a custom theme, I noticed that the issue still persists :(

I am using angular 16.1.0 and angular material 16.1.7

[danieljohnson107]

I'm having the same issue using angular 16.1.0 and angular material 16.2.1. This only an issue when defining your own palette, the contrast colors work correctly if you use one of the predefined palettes from angular material.

[AlirezaEbrahimkhani]

Same issue using angular material 16.2.1 and angular 16.0.4

[sanurah]

Same issue. Can someone tell us if this is not considered as a bug?

[WasiakSzymon]

Same issue here using angular material 16.2.5