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

src/material/core/style/BUILD.bazel

@@ -19,6 +19,7 @@ sass_library(
     deps = [
         ":sass_utils",
         ":variables",
+        "//src/material/core/tokens:m3_utils",
     ],
 )
 

src/material/core/style/_elevation.scss

@@ -4,6 +4,7 @@
 @use 'sass:string';
 @use './variables';
 @use './sass-utils';
+@use '../tokens/m3-utils';
 
 $_umbra-opacity: 0.2;
 $_penumbra-opacity: 0.14;
@@ -199,10 +200,20 @@ $prefix: 'mat-elevation-z';
 }
 
 @function _compute-color-opacity($color, $opacity) {
-  @if meta.type-of($color) == color and $opacity != null {
+  @if $opacity == null {
+    @return $color;
+  }
+
+  @if meta.type-of($color) == color {
     @return rgba($color, $opacity);
   }
-  @else {
-    @return $color;
+
+  // The color can also be the name of a CSS variable (e.g. `--mat-sys-shadow`) whose value isn't
+  // known at build time. Wrap it in `var()` and apply the opacity using `color-mix`, otherwise
+  // we'd interpolate the bare variable name into the shadow and produce invalid CSS.
+  @if sass-utils.is-css-var-name($color) {
+    @return m3-utils.color-with-opacity($color, $opacity);
   }
+
+  @return $color;
 }

src/material/core/theming/tests/m3-theme.spec.ts

@@ -91,6 +91,31 @@ describe('M3 theme', () => {
     expect(nonVarProps).toEqual([]);
   });
 
+  it('should emit valid elevation classes when used with the system-level theme', () => {
+    const root = parse(
+      transpile(`
+        html {
+          @include mat.theme((
+            color: mat.$violet-palette,
+            typography: Roboto,
+            density: 0,
+          ));
+        }
+        @include mat.elevation-classes();
+      `),
+    );
+    const invalidValues: string[] = [];
+    root.walkDecls('box-shadow', decl => {
+      // Any reference to a token has to be wrapped in `var()`. A bare token name (e.g.
+      // `0px 2px 1px -1px --mat-sys-shadow`) is invalid CSS which makes the browser drop the
+      // entire declaration, resulting in no shadow at all.
+      if (/(^|[\s,(])--/.test(decl.value.replace(/var\(\s*--/g, 'var('))) {
+        invalidValues.push(decl.value);
+      }
+    });
+    expect(invalidValues).toEqual([]);
+  });
+
   it('should not have overlapping tokens between theme dimensions', () => {
     const css = transpile(`
         $theme: mat.define-theme();