bug(progress-bar): css vars do not work right with custom theme

[yharaskrik]

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 setting up a custom theme like this

@use '@angular/material' as mat;

@include mat.core();

$dynamic-fundraiser-theme-primary-palette: (
    50: var(--fundraiser-theme-primary-50),
    100: var(--fundraiser-theme-primary-100),
    200: var(--fundraiser-theme-primary-200),
    300: var(--fundraiser-theme-primary-300),
    400: var(--fundraiser-theme-primary-400),
    500: var(--fundraiser-theme-primary-500),
    600: var(--fundraiser-theme-primary-600),
    700: var(--fundraiser-theme-primary-700),
    800: var(--fundraiser-theme-primary-800),
    900: var(--fundraiser-theme-primary-900),
    A100: var(--fundraiser-theme-primary-A100),
    A200: var(--fundraiser-theme-primary-A200),
    A400: var(--fundraiser-theme-primary-A400),
    A700: var(--fundraiser-theme-primary-A700),
    contrast: (
        50: var(--fundraiser-theme-primary-contrast-50),
        100: var(--fundraiser-theme-primary-contrast-100),
        200: var(--fundraiser-theme-primary-contrast-200),
        300: var(--fundraiser-theme-primary-contrast-300),
        400: var(--fundraiser-theme-primary-contrast-400),
        500: var(--fundraiser-theme-primary-contrast-500),
        600: var(--fundraiser-theme-primary-contrast-600),
        700: var(--fundraiser-theme-primary-contrast-700),
        800: var(--fundraiser-theme-primary-contrast-800),
        900: var(--fundraiser-theme-primary-contrast-900),
        A100: var(--fundraiser-theme-primary-contrast-A100),
        A200: var(--fundraiser-theme-primary-contrast-A200),
        A400: var(--fundraiser-theme-primary-contrast-A400),
        A700: var(--fundraiser-theme-primary-contrast-A700),
    ),
);

$dynamic-fundraiser-theme-secondary-palette: (
    50: var(--fundraiser-theme-secondary-50),
    100: var(--fundraiser-theme-secondary-100),
    200: var(--fundraiser-theme-secondary-200),
    300: var(--fundraiser-theme-secondary-300),
    400: var(--fundraiser-theme-secondary-400),
    500: var(--fundraiser-theme-secondary-500),
    600: var(--fundraiser-theme-secondary-600),
    700: var(--fundraiser-theme-secondary-700),
    800: var(--fundraiser-theme-secondary-800),
    900: var(--fundraiser-theme-secondary-900),
    A100: var(--fundraiser-theme-secondary-A100),
    A200: var(--fundraiser-theme-secondary-A200),
    A400: var(--fundraiser-theme-secondary-A400),
    A700: var(--fundraiser-theme-secondary-A700),
    contrast: (
        50: var(--fundraiser-theme-secondary-contrast-50),
        100: var(--fundraiser-theme-secondary-contrast-100),
        200: var(--fundraiser-theme-secondary-contrast-200),
        300: var(--fundraiser-theme-secondary-contrast-300),
        400: var(--fundraiser-theme-secondary-contrast-400),
        500: var(--fundraiser-theme-secondary-contrast-500),
        600: var(--fundraiser-theme-secondary-contrast-600),
        700: var(--fundraiser-theme-secondary-contrast-700),
        800: var(--fundraiser-theme-secondary-contrast-800),
        900: var(--fundraiser-theme-secondary-contrast-900),
        A100: var(--fundraiser-theme-secondary-contrast-A100),
        A200: var(--fundraiser-theme-secondary-contrast-A200),
        A400: var(--fundraiser-theme-secondary-contrast-A400),
        A700: var(--fundraiser-theme-secondary-contrast-A700),
    ),
);

$dynamic-fundraiser-theme-primary: mat.define-palette($dynamic-fundraiser-theme-primary-palette);
$dynamic-fundraiser-theme-secondary: mat.define-palette($dynamic-fundraiser-theme-secondary-palette);
$dynamic-fundraiser-theme-warn: mat.define-palette(mat.$red-palette);

$fundraiser-theme: mat.define-light-theme(
    (
        color: (
            primary: $dynamic-fundraiser-theme-primary,
            accent: $dynamic-fundraiser-theme-secondary,
            warn: $dynamic-fundraiser-theme-warn,
        ),
        typography: mat.define-typography-config(),
        density: 0,
    )
);
@include mat.core-color($fundraiser-theme);
@include mat.core-theme($fundraiser-theme);
@include mat.all-component-colors($fundraiser-theme);

Causes the progress bar to be the same color for the filled and buffer (track). It ends up use the 500 for the MDC components, this was working with the legacy components perfectly fine (setting the css vars the same way as before). The legacy components use 500 for filled and 100 for the buffer.

We think it is related to

components/src/material/core/tokens/m2/mdc/_linear-progress.scss

Lines 30 to 41 in f7e3ae3

	@function get-color-tokens($config) {
	$primary: theming.get-color-from-palette(map.get($config, primary));
	@return (
	// The color of the progress bar's active section.
	active-indicator-color: $primary,
	track-color: if(
	meta.type-of($primary) == color,
	color.adjust($primary, $alpha: -0.75),
	$primary
	)
	);
	}

where that first condition is not hit because we are using a css variable, if I change 500 to just a hex value instead of a css var then it works right.

Reference:
Me and Matthieu discussing it https://angular-team.slack.com/archives/C08M4JKNH/p1691790798360909

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-hrsxmj?file=src%2Fstyles.scss
Steps to reproduce: See description

Expected Behavior

Should be able to use CSS vars to define the different colors in a palette

Actual Behavior

CSS vars cause the background color (in progress bar that is the buffer) to be set to the same value as the main color (500 at least for the progress bar)

Environment

• Angular: 16.1.8
• CDK/Material: 16.1.7
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Mac

[yharaskrik]

I am no CSS expert but wanted to look into this a bit, from what I can tell there is no way to determine the type of what is stored in a custom property (css var), this means that we either cannot use css variables (which I am not sure is an option for us) or

components/src/material/core/tokens/m2/mdc/_linear-progress.scss

Lines 30 to 41 in f7e3ae3

	@function get-color-tokens($config) {
	$primary: theming.get-color-from-palette(map.get($config, primary));
	@return (
	// The color of the progress bar's active section.
	active-indicator-color: $primary,
	track-color: if(
	meta.type-of($primary) == color,
	color.adjust($primary, $alpha: -0.75),
	$primary
	)
	);
	}

should not use an if statement there. Why is it that it needs to be an if statement? Is there cases where $primary could end up as something that is not a color and thus the if is needed?

Maybe another CSS expert knows more than me about this can we can actually check the type of what is stored in a custom property rather than checking the custom property itself.

[TheSlimvReal]

I have a similar issue #27689

[crisbeto]

Closing as a duplicate of #25981.

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