bug(theme): promlem with css var calculation

[feichin-noreja]

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

If i define a css var with the value of a css var like in the code snippet below some material css variables are not defined correctly.
E.g. --mdc-linear-progress-track-color is set to var(--primary-500) but should be converted to a rgba color with 0,25 opacity.

That causes the theme to have some bad behaviour.

`:root{
--primary-500: #FF0000
}

$primary:(
500: var(--primary-500)
)
`

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-d9ccxk

Expected Behavior

The css var should be handled like a hex value

Actual Behavior

The css var is copied

Environment

• Angular: 17.2
• CDK/Material: 17.2
• Browser(s): Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[Blafasel3]

Upvote, I experienced this today when updating to material v16 as well. Really annoying in combination with #26056 (comment), because of this bug I have to hard copy values out of my custom palette in order to fix the aforementioned bug. Workaround inception which gets really hard to maintain.

[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. This specific case can also be worked around with .mdc-linear-progress__buffer-bar { opacity: 0.25 }, but there's no guarantee other places won't have a similar issue.

[feichin-noreja]

@crisbeto can you update the https://material.angular.io/guide/theming page so that is clear that the Palettes dont "understand" css vars?

The better solution for us would be if the material theme supported css variables.

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