bug(Theming): Using CSS variables breaks themes

[TheSlimvReal]

Description

I wanted to use CSS variables to change my Angular Material theme at runtime.
When implementing this I came across some issues where once CSS variables are used inside a theme, some Material styles were broken.
This even happens when the variable is never initialised and only the fallback value is used.
There are various places where problems occur, I have now just picked one example for the StackBlitz reproduction:

The accent contrast color falls back to black for buttons.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-fu4s5b?file=src%2Ftheme.scss

In the src/theme.scss file I added a variable for the A200 color of my theme palette.
This breaks the buttons color as the wrong contrast color is used for the text.

Steps to reproduce:

1. Look at the compilation: The button has black text
2. Comment out the A200: var(...) line
3. Remove the comment from the following A200: map-get(...) line
4. Look at the compilation: The button has white text (as it should have)

Expected Behavior

The button should use the correct contrast color and behave the same as if no CSS variable was used.

Actual Behavior

The buttons uses a wrong accent color.

Environment

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

[TheSlimvReal]

I found potentially similar issues #27636 #27204 #25981 and many more (https://github.com/angular/components/issues?q=is%3Aissue+is%3Aopen+css+variables)
I hope this will get picked up at one point.

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