bug(button): Palette contrast values are not applied #26056

mlimones-pensare · 2022-11-22T12:32:19Z

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 · 2022-11-23T09:31:03Z

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

Raised Buttons shows primary with black text
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 · 2022-11-27T11:18:25Z

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 · 2022-12-19T10:30:21Z

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

inlym · 2023-01-06T06:43:17Z

Notify me if resolved.

davidpawar · 2023-01-09T15:52:30Z

Also facing the same issue.

johnnygerard · 2023-01-09T20:51:06Z

Same issue.

pqt-tmeitz · 2023-01-30T08:55:28Z

are there any updates yet?

Frankitch · 2023-02-01T14:49:50Z

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 · 2023-02-02T09:08:47Z

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

bjoernboehnke · 2023-02-06T00:49:27Z

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 · 2023-02-17T08:58:47Z

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 · 2023-02-17T20:39:49Z

More details here: #26153

sonphnt · 2023-02-23T21:51:22Z

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

Geniewave · 2023-03-16T21:58:05Z

same issue here

ChristianKohler · 2023-03-22T08:04:58Z

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.

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

Line 50 in 96aadaa

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

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 · 2023-04-04T08:47:57Z

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

Thank you @Frankitch for the workaround!

the-ult · 2023-04-12T09:18:27Z

See: #26179 for the same kind of issues

ProjectBay · 2023-05-06T14:45:45Z

Same with checkboxes

AlvaroP95 · 2023-05-10T13:40:20Z

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

aponski · 2023-05-12T10:01:50Z

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

Leccho · 2023-06-01T00:30:57Z

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 · 2023-07-04T08:17:46Z

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

nandomegale · 2024-01-07T14:40:53Z

Same here with v17.0.4

The contrast for 600 is white.

But the raised-button applys black

rom111419 · 2024-01-28T15:09:21Z

The same error. I want assign my theme and dont want rewriting initial vars, cause it`s bad idea or crutch

mrctrifork · 2024-01-30T14:12:03Z

Same here. I've been hitting myself in the head for the past two hours… thank god I found this issue. Thanks for the fix @Plabbee

Iancovski · 2024-01-31T00:54:00Z

Same problem in Angular Material 17.1.0. I'm using the package from @Plabbee for workaround, it works perfectly!

Blafasel3 · 2024-02-20T11:29:23Z

Pls fix this. There is actually a forked repo with a fix. This bug is super painful, because even if you got a workaround, it breaks on every major update eventually and one has to find a new workaround. This is the 3rd time i'm stumbling over this.

marcguillemdev · 2024-02-20T11:42:28Z

I'm exactly at this point and with the same problem:

Same here with v17.0.4

The contrast for 600 is white.

But the raised-button applys black

MichalK6677 · 2024-02-20T12:14:26Z

This is a real show stopper for version 17. This version should be considered as beta. I am not able to update without destroyed branding and I have to stay on v16 with legacy components.

timneil · 2024-02-26T11:24:23Z

Why are the Angular Material team not reponding to this issue?!

BelangerB · 2024-02-28T14:25:58Z

Imagine being asked by your manager to update your project to the latest version and having to tell them "sorry I can't, Angular team broke the CSS formatting and won't fix it". I'm sure that'd go over great. Please, fix this already.

Edit: crisbeto has swept in and saved us!

During the transition to tokens, we ended up with a bunch of places with hardcoded values in the form of `if($is-dark, #fff, #000)`. This is problematic for custom palettes, because the value is always hardcoded. These changes attempt to derive the same values from the palette directly. Fixes angular#26056.

noel-invonto · 2024-02-29T14:55:02Z

This is really painful. Is there no hope? The fact I need a bazooka to change the text color of a button after creating a palette is actually insane. The additional tech debt I need to add to my project for a button text color is really frustrating.

mvanderlee · 2024-02-29T14:59:38Z

@noel-invonto I was about to say "No there is no hope" as it's been ignored for over a year. And I get an email at least once a week from the various tickets on this.
BUT I see that crisbeto has started work on this today, so yes.. there is definitely hope!

During the transition to tokens, we ended up with a bunch of places with hardcoded values in the form of `if($is-dark, #fff, #000)`. This is problematic for custom palettes, because the value is always hardcoded. These changes attempt to derive the same values from the palette directly. Fixes angular#26056.

During the transition to tokens, we ended up with a bunch of places with hardcoded values in the form of `if($is-dark, #fff, #000)`. This is problematic for custom palettes, because the value is always hardcoded. These changes attempt to derive the same values from the palette directly. Fixes #26056.

During the transition to tokens, we ended up with a bunch of places with hardcoded values in the form of `if($is-dark, #fff, #000)`. This is problematic for custom palettes, because the value is always hardcoded. These changes attempt to derive the same values from the palette directly. Fixes #26056. (cherry picked from commit cfdfa9a)

nandomegale · 2024-03-01T15:13:25Z

@crisbeto when the fix will be avaible?

crisbeto · 2024-03-01T16:12:45Z

It will be in the release next week.

angular-automatic-lock-bot · 2024-04-01T00:09:43Z

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

mlimones-pensare added the needs triage This issue needs to be triaged by the team label Nov 22, 2022

DeanPDX mentioned this issue Dec 5, 2022

bug(MatTable): Text-color are no longer taken from the predefined foreground palette #26153

Open

1 task

GeorgDangl mentioned this issue Dec 21, 2022

Fix Styles for Angular Material v15 GeorgDangl/angular-material-shared#54

Closed

Frankitch mentioned this issue Apr 17, 2023

bug(theming): WARNING: var(--primary, #4bcd3e) is not a color. Falling back to "dark" tone. #25981

Closed

1 task

wagnermaciel added P2 The issue is important to a large percentage of users, with a workaround area: material/button and removed needs triage This issue needs to be triaged by the team labels May 15, 2023

andrewseguin mentioned this issue May 20, 2023

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

Closed

1 task

Blafasel3 mentioned this issue Feb 20, 2024

bug(theme): promlem with css var calculation #28621

Closed

1 task

crisbeto mentioned this issue Feb 29, 2024

fix(multiple): derive all token values from theme #28664

Merged

crisbeto self-assigned this Feb 29, 2024

crisbeto closed this as completed in #28664 Feb 29, 2024

sleidig mentioned this issue Mar 22, 2024

remove contrast color overrides Aam-Digital/ndb-core#2317

Open

angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 1, 2024

bug(button): Palette contrast values are not applied #26056

bug(button): Palette contrast values are not applied #26056

Comments

mlimones-pensare commented Nov 22, 2022

Is this a regression?

The previous version in which this bug was not present was

Description

Reproduction

steps

example:

Expected Behavior

Actual Behavior

Environment

beckerjohannes commented Nov 23, 2022

GeorgDangl commented Nov 27, 2022

sergidt commented Dec 19, 2022

inlym commented Jan 6, 2023

davidpawar commented Jan 9, 2023

johnnygerard commented Jan 9, 2023

pqt-tmeitz commented Jan 30, 2023

Frankitch commented Feb 1, 2023 • edited Loading

MichalK6677 commented Feb 2, 2023

bjoernboehnke commented Feb 6, 2023

angelaki commented Feb 17, 2023 • edited Loading

mvanderlee commented Feb 17, 2023

sonphnt commented Feb 23, 2023

Geniewave commented Mar 16, 2023

ChristianKohler commented Mar 22, 2023

jnain commented Apr 4, 2023

the-ult commented Apr 12, 2023

ProjectBay commented May 6, 2023

AlvaroP95 commented May 10, 2023

aponski commented May 12, 2023

Leccho commented Jun 1, 2023 • edited Loading

p3pp8 commented Jul 4, 2023

nandomegale commented Jan 7, 2024

rom111419 commented Jan 28, 2024 • edited Loading

mrctrifork commented Jan 30, 2024 • edited Loading

Iancovski commented Jan 31, 2024

Blafasel3 commented Feb 20, 2024

marcguillemdev commented Feb 20, 2024 • edited Loading

MichalK6677 commented Feb 20, 2024

timneil commented Feb 26, 2024

BelangerB commented Feb 28, 2024 • edited Loading

noel-invonto commented Feb 29, 2024

mvanderlee commented Feb 29, 2024

nandomegale commented Mar 1, 2024 • edited Loading

crisbeto commented Mar 1, 2024

angular-automatic-lock-bot bot commented Apr 1, 2024

Frankitch commented Feb 1, 2023 •

edited

Loading

angelaki commented Feb 17, 2023 •

edited

Loading

Leccho commented Jun 1, 2023 •

edited

Loading

rom111419 commented Jan 28, 2024 •

edited

Loading

mrctrifork commented Jan 30, 2024 •

edited

Loading

marcguillemdev commented Feb 20, 2024 •

edited

Loading

BelangerB commented Feb 28, 2024 •

edited

Loading

nandomegale commented Mar 1, 2024 •

edited

Loading