bug(THEME): Using css var() in palette contrast is not applied on all components

[sschoorens]

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

No response

Description

When I defined a theme like that

@use '@angular/material' as mat;
@include mat.core();

:root {
  --primary: #2656cf;
  --primary-contrast: #FFFFFF;
}

$light-primary-palette: (
  700: var(--primary),
  500: var(--primary),
  100: var(--primary),
  contrast: (
    700: var(--primary-contrast),
    500: var(--primary-contrast),
    100: var(--primary-contrast)
  )
);

$light-theme: mat.define-light-theme((
 color: (
   primary: mat.define-palette($light-primary-palette),
   accent: mat.define-palette(mat.$pink-palette)
 ),
 typography: mat.define-typography-config( ),
 density: 0
));

@include mat.all-component-themes($light-theme);

Buttons don't apply the --primary-contrast but some other components use it

Badges apply it

  --mat-badge-background-color: var(--primary);
  --mat-badge-text-color: var(--primary-contrast);

Buttons don't apply it

  --mdc-protected-button-container-color: var(--primary);
  --mdc-protected-button-label-text-color: #000;
  --mat-protected-button-state-layer-color: #000;
  --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1);

--mdc-protected-button-label-text-color should be --mdc-protected-button-label-text-color: var(--primary-contrast);

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-u6e7fj
Steps to reproduce:

1. apply theme in styles.scss
2. look at the result on a primary button

Expected Behavior

Button contrast should work

Actual Behavior

Button contrast doesn't work

Environment

Package Version

@angular-devkit/architect 0.1702.1
@angular-devkit/build-angular 17.2.1
@angular-devkit/core 17.2.1
@angular-devkit/schematics 17.2.1
@angular/cdk 17.2.1
@angular/cli 17.2.1
@angular/material 17.2.1
@angular/material-moment-adapter 17.2.1
@schematics/angular 17.2.1
ng-packagr 17.2.0
rxjs 7.8.1
typescript 5.3.3
zone.js 0.14.4

[sschoorens]

Hovering buttons in mat-calendar also got the problem

[sschoorens]

Checkboxes too

slide toggle also doesn't apply the primary color

[crisbeto]

Palettes based on CSS variables were never supported, see #25981 (comment). Instead of creating a palette with CSS variables that are initialized to colors, you can pass those colors directly to the palette and it'll create variables for you.

[crisbeto]

For what it's worth, testing it with the latest version (17.2.2) seems to mostly work, aside from the ripple colors which are also reported in #28706.

[sschoorens]

Hello, thank you very much for all your answers and the fix in 17.2.2 also thanks for your fast work on #28706 that I also encounter.
Very good job !

[angular-automatic-lock-bot]

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