bug(Theme): mat.theme doesn't support color palettes with CSS variables

[JuNe98]

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

We are building our own token based theming with custom tokens named by our department. Then we translate them to Material 3 color palettes with the var() function of CSS. The colorpalettes will be the implemented like following:

:root {
  --my-selector-0: #000000,
  ....
  --my-neutral-0: #000000,
}

$_palettes: (
  primary: (
    0: var(--my-selector-0),
    10: var(--my-selector-10),
    20: var(--my-selector-25),
    25: var(--my-selector-20),
    ...
  ),
  neutral: (
    0: var(--my-neutral-0),
    10: var(--my-neutral-10),
    20: var(--my-neutral-25),
    25: var(--my-neutral-20),
    ...
  ),
)

But the mat.theme mixin generates transparencies of neutral-0 which doesn't work, because the is a function which converts the Hex-Color into RGB and then sets the transparency.

Reproduction

1. Generate a theme with ng generate @angular/material:theme-color
2. Change the neutral with hue 0 to a CSS variable which you have defined at root level and set its color to e.g. #000000
3. start the app with
4. inspect the the --mat-sys-level variables

Expected Behavior

You should be able to insert the transparency RGB colors needed for the --mat-sys-level1 variables into the mat.theme mixin to get working box shadows for e.g. buttons.

Actual Behavior

Instead of a fancy transparency the var(--my-neutral-0) will be shown and the box shadow looks really dark deep and black

Environment

• Angular: 19.1.5
• CDK/Material: 19.1.3
• Browser(s): Google Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows