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

14

Description

After the angular material 15 update, the component text colors are no longer taken from the predefined foreground palette. In the past there was taken from the text and secondary-text variable.

Is there a new smart way to force the use of specific text-colors? Or is it not advisable to use your own font colors?

Reproduction

https://stackblitz.com/run?file=src%2Fapp%2Ftable-basic-example.ts

Expected Behavior

Its possible to use the foreground color palette to customize the text-color.

$theme-foreground-palette: (
  base: color.$grey-700,
  divider: color.$dividers,
  dividers: color.$dividers,
  disabled: color.$disabled-text,
  disabled-button: color.$grey-400,
  disabled-text: color.$disabled-text,
  elevation: color.$grey-700,
  hint-text: color.$disabled-text,
  secondary-text: color.$secondary-text, // <-- was also used for mat-header-cells
  icon: color.$primary-text,
  icons: color.$primary-text,
  text: color.$primary-text, // <-- was also used for mat-cells
  slider-min: color.$grey-700,
  slider-off: color.$grey-200,
  slider-off-active: color.$grey-300,
);

Actual Behavior

Some parts from the foreground palette will affect in the theme for the app. But in lists, tables or options there is always used the color rgba(0, 0, 0, 0.87).

Environment

• Angular: 15.0.2
• CDK/Material: 15.0.1

I noticed the same thing. It seems it sets it to a high contrast color by default after updating to v15. To test this, I tried modifying my theme to where background for accent buttons was white. The font color was automatically set to black (regardless of my contrast colors). When I modified accent to be black, the font color was automatically set to white. I looked at the update guide and didn't see any specific mention of this:

https://github.com/angular/components/blob/main/guides/v15-mdc-migration.md#button

This is the only note about colors that I could see:

State colors (hover, focus, active) are slightly different to improve text contrast ratios.

I found a related issue: https://github.com/angular/components/issues/26056

Watching both!

@circleart the reproduction link you have is not working.

This is probably relevant

Notify me if resolved.

I upgraded to the latest version (15.1.2) today and can confirm that the problem still occurs.

As also mentioned by DeanPDX,

It seems it sets it to a high contrast color by default after updating to v15.

I assume that the text colors in version 15 intentionally behave differently than before. It is ensured that the contrast always presupposes an optimal reading experience.

That's why I'd like to ask the question a little differently again.

In the past we overwrote the foreground and background pallets with a scss merge process. This allowed us to flexibly implement the layouts for our customers. Starting with version 15 it seems to work differently. What is now the preferred way to continue using custom font colors for all components?

$theme-background-palette: (
  background: lightgrey,
  ...
);

$theme-foreground-palette: (
  base: blue,
  ...
);

@function define-theme($config) {
  $theme: mat.define-light-theme($config);
  $color: map.get($theme, color);
  $color: map.merge(
    $color,
    (
      background: $theme-background-palette,
      foreground: $theme-foreground-palette,
    )
  );
  @return map.merge(
    $theme,
    (
      color: $color,
    )
  );
}

Angular Material 14 Foreground Pallete

https://stackblitz.com/edit/angular-krdxpi-5vwn1e

Angular Material 15 Foreground Pallete

https://stackblitz.com/edit/angular-krdxpi

Thanks for any advice. Maybe i could ask ChatGPT ^^ but the server seems to be overloaded again. 🤦

hi, I'm facing the same issue. any hint to setup properly the colors would be aprecitated. The docs are not relevant on this topics as it is not working anymore.

Thanks,

I narrowed this down to the migration to Material Design Components. https://github.com/angular/components/blob/main/src/material/core/mdc-helpers/_mdc-helpers.scss#L140

This code literally decides for us whether to use a black or white foreground color based on some hardcoded logic. Ignoring any user defined contrast colors.

I think a better approach would've been

$on-primary: theming.get-color-from-palette(map.get($config, primary), default-contrast);

mdc-theme-color.$on-primary: $on-primary;

And that for all $on- variables

Related:

• https://github.com/angular/components/issues/26544
• https://github.com/angular/components/issues/26605
• https://github.com/angular/components/issues/26056

@crisbeto You've done a fair bit of work in this area already. Are you able to comment on why the move to MDC broke user defined contrast colors?

The tl;dr is that we're mapping our theming system onto MDC's and some thing fell through the cracks. We're currently designing a new theming API that should map better.

Great to hear it's being addressed. Is there a rough time estimate and is there a suggested work-around for the time being?

@mmalerba is currently working on it, but I don't know if we have a precise version we're aiming for. Until it's there, we'll likely have to keep fixing bugs like this as they come up.

As a workaround it seems that using the legacy components works.

Hi,

@crisbeto Could you please tell us how to fix this bug in the mean time?

@mvanderlee How do you switch back to use legacy components?

thanks,

@elvince You can find more information here: https://material.angular.io/guide/mdc-migration#what-has-changed

import {MatLegacyButtonModule} from '@angular/material/legacy-button';

Hello, will it be integrated in a roadmap ? I will keep using legacy components till this issue is solved.

This is also issue within my current project, so any time table to fix this?

Same issue but with card background (surface and on-surface being used instead of my background palette defined in my theme)

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

Still facing the same issue, and the work-around not working for me Any news ?

Still facing the same issue, and the work-around not working for me Any news ?

Are you importing the legacy button like this?

import { MatLegacyButtonModule } from '@angular/material/legacy-button';

That works for me, but you then get a bunch of deprecation warnings in your IDE.

Any updates on this? Mdc components not respecting the foreground and background palettes makes them unusable for my application.

This should've been resolved by https://github.com/angular/components/pull/27192.

This should've been resolved by #27192.

Do you know what release this was included in?

As far as I can tell, it's only in 16.2.0.

Can anybody confirm that this was resolved? I haven't managed to get ng16 .2.0 to use my primary colors either.

Still a problem in version 17

Still a problem in "@angular/material": "17.1.2"

Regarding the two comments saying it's still a problem, what's the issue exactly? In the latest version of the code (hasn't changed in a while) the color is taken from the foreground palette's text color, similarly to the legacy component.

**crisbeto ** commented Feb 29, 2024 Given the following material design palette

$light-primary-text: red;
$dark-primary-text: green;

$revolut-primary-palette: (
  100: #bcdffc,
  500: #2c9bf6,
  600: #2480db,
  700: #206ec8,
  800: #153e96,
  900: #002d81,
  contrast: (
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $dark-primary-text,
    900: $light-primary-text,
  ),
);

When I try to use the above custom palette

$primary: mat.define-palette($revolut-primary-palette, 900, 500, 800);
$accent: mat.define-palette(mat.$orange-palette, 900);


$light-theme: mat.define-light-theme(
  (
    color: (
      primary: $primary,
      accent: $accent,
    ),
    typography:
      mat.define-typography-config(
        $font-family: "IRANSans",
      ),
  )
);

@include mat.radio-theme($light-theme);

Then I expect the primary's text font color for mat-radio-button be red.

Environment

Angular: 17.3.2 CDK/Material: 17.3.2

EDIT: Turns out this is a known bug and will be fixed soon. https://github.com/angular/components/issues/26056

any updates on this dear @crisbeto