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

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

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

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 41
Comments: 30 (5 by maintainers)

Most upvoted comments

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

+23

AlvaroP95 on May 10, 2023

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.

+13

crisbeto on Feb 17, 2023

Still a problem in version 17

kptranum on Feb 9, 2024

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 on Feb 17, 2023

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

crisbeto on Aug 10, 2023

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

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

mvanderlee on Mar 1, 2023

Notify me if resolved.

inlym on Jan 6, 2023

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

sfinoteffy on Mar 16, 2023

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

mvanderlee on Feb 17, 2023

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,

elvince on Feb 6, 2023

**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

aligit on Apr 3, 2024

Still a problem in “@angular/material”: “17.1.2”

brunorabaca on Feb 14, 2024

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.

DeanPDX on Aug 9, 2023

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

mvanderlee on Feb 17, 2023