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

[circleart]

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

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

[DeanPDX]

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: #26056

Watching both!

[DmitryEfimenko]

@circleart the reproduction link you have is not working.

This is probably relevant

[inlym]

Notify me if resolved.

[circleart]

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

[elvince]

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,

[mvanderlee]

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.

[mvanderlee]

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

[mvanderlee]

Related:

• help(mat-select): Can't apply theme color because of MDC #26544
• bug(checkbox): tick colour does not change when using css variables #26605
• bug(button): Palette contrast values are not applied #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?

[crisbeto]

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.

[mvanderlee]

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

[crisbeto]

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

[mvanderlee]

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

[elvince]

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,