fix(material/core): elevation classes emit invalid shadows with system theme

[ManicardiFrancesco]

What is the current behavior?

mat.elevation-classes() emits no shadow at all for apps themed with mat.theme.

Each mat-elevation-z* class resolves to var(--mat-app-elevation-shadow-level-<n>, <fallback>), and the fallback is built from the shadow entry of the system theme. In the $fallbacks map that entry is the CSS variable name --mat-sys-shadow rather than a color, and _compute-color-opacity() in core/style/_elevation.scss only handled Sass color values — anything else was returned untouched and interpolated into the shadow verbatim:

.mat-elevation-z6, .mat-mdc-elevation-specific.mat-elevation-z6 {
  box-shadow: var(--mat-app-elevation-shadow-level-6, 0px 3px 5px -1px --mat-sys-shadow, 0px 6px 10px 0px --mat-sys-shadow, 0px 1px 18px 0px --mat-sys-shadow);
}

A bare --mat-sys-shadow is not a valid <color>, so the declaration is invalid at computed-value time and the browser drops it.

This only bites the mat.theme API. The --mat-app-elevation-shadow-level-* tokens are emitted exclusively by mat.core-theme (i.e. the all-component-themes / prebuilt theme path), so those apps never reach the fallback. mat.theme never defines them, which means the broken fallback is the only value they ever get. The dev-app themes with mat.m2-theme + all-component-themes, which is why this isn't visible there.

Reproduction (against main):

@use '@angular/material' as mat;

html {
  @include mat.theme((color: mat.$violet-palette, typography: Roboto, density: 0));
}

@include mat.elevation-classes();

What is the new behavior?

_compute-color-opacity() now recognizes a CSS variable name, wraps it in var() and applies the umbra/penumbra/ambient opacities with color-mix, reusing the m3-utils.color-with-opacity helper that already handles this exact case for other tokens:

.mat-elevation-z6, .mat-mdc-elevation-specific.mat-elevation-z6 {
  box-shadow: var(--mat-app-elevation-shadow-level-6, 0px 3px 5px -1px color-mix(in srgb, var(--mat-sys-shadow) 20%, transparent), 0px 6px 10px 0px color-mix(in srgb, var(--mat-sys-shadow) 14%, transparent), 0px 1px 18px 0px color-mix(in srgb, var(--mat-sys-shadow) 12%, transparent));
}

I compiled a stylesheet exercising all three theming paths (mat.m2-theme, mat.define-theme + all-component-themes, and mat.theme) plus all four prebuilt themes before and after the change. The only difference is the 25 mat-elevation-z* rules; every other declaration in the bundle is byte-identical. Prebuilt and M2 themes are unaffected because they define the app elevation tokens, so the fallback is never used there.

The added test in m3-theme.spec.ts asserts that no box-shadow emitted by mat.elevation-classes() contains a bare token name. It reports 25 failures before this change and none after.

Does this PR introduce a breaking change?

• Yes
• No