fix(material/card): allow for elevation to be overridden

Fixes that users weren't able to override the card elevation by setting the elevation classes.

Fixes #26094.

Author: crisbeto

src/material/card/_card-theme.scss

@@ -1,6 +1,5 @@
 @use '../core/theming/theming';
 @use '../core/mdc-helpers/mdc-helpers';
-@use '../core/style/private';
 @use '../core/typography/typography';
 @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
 @use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
@@ -15,18 +14,12 @@
 
   @include mdc-helpers.using-mdc-theme($config) {
     .mat-mdc-card {
-      // MDC's theme has `container-elevation` and `container-shadow-color` tokens, but we can't
-      // use them because they output under a `.mdc-card` selector whereas the rest of the theme
-      // isn't under any selector. Even if the mixin is pulled out of the selector, it throws a
-      // different error.
-      @include private.private-theme-elevation(1, $config);
       @include mdc-elevated-card-theme.theme((
         container-color: mdc-theme-color.prop-value(surface),
       ));
     }
 
     .mat-mdc-card-outlined {
-      @include private.private-theme-elevation(0, $config);
       @include mdc-outlined-card-theme.theme((
         outline-color: color.mix(mdc-theme-color.prop-value(on-surface),
           mdc-theme-color.prop-value(surface), 12%)

src/material/card/card.scss

@@ -3,6 +3,7 @@
 @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
 @use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
 @use '../core/mdc-helpers/mdc-helpers';
+@use '../core/style/elevation';
 
 // TODO(jelbourn): move header and title-group styles to their own files.
 
@@ -18,6 +19,11 @@ $mat-card-default-padding: 16px !default;
 }
 
 .mat-mdc-card {
+  // MDC's theme has `container-elevation` and `container-shadow-color` tokens, but we can't
+  // use them because they output under a `.mdc-card` selector whereas the rest of the theme
+  // isn't under any selector. Even if the mixin is pulled out of the selector, it throws a
+  // different error.
+  box-shadow: var(--mat-mdc-elevation-override, #{elevation.private-get-elevation-shadow(1)});
   position: relative;
 
   @include mdc-helpers.disable-mdc-fallback-declarations {
@@ -29,6 +35,8 @@ $mat-card-default-padding: 16px !default;
 }
 
 .mat-mdc-card-outlined {
+  --mat-mdc-elevation-override: none;
+
   @include mdc-helpers.disable-mdc-fallback-declarations {
     @include mdc-outlined-card-theme.theme-styles((
       outline-color: transparent,

src/material/core/style/_elevation.scss

@@ -34,11 +34,10 @@ $color: black !default;
 // Prefix for elevation-related selectors.
 $prefix: 'mat-elevation-z';
 
-// Applies the correct css rules to an element to give it the elevation specified by $zValue.
-// The $zValue must be between 0 and 24.
-@mixin elevation($zValue, $color: $color, $opacity: null) {
+// Gets the box shadow value for a specific elevation.
+@function private-get-elevation-shadow($zValue, $color: $color, $opacity: null) {
   @if meta.type-of($color) == color and $opacity == null {
-    @include mdc-elevation.elevation($zValue, $color);
+    @return mdc-elevation.elevation-box-shadow($zValue, $color);
   }
   @else {
     // Copied from @material/elevation/_elevation-theme.scss#_box-shadow
@@ -53,10 +52,18 @@ $prefix: 'mat-elevation-z';
       #{'#{$penumbra-z-value} #{$shadow-color}'},
       #{$ambient-z-value} $shadow-color
     );
-    @include mdc-elevation.shadow($box-shadow);
+    @return $box-shadow;
   }
 }
 
+// Applies the correct css rules to an element to give it the elevation specified by $zValue.
+// The $zValue must be between 0 and 24.
+@mixin elevation($zValue, $color: $color, $opacity: null) {
+  $shadow: private-get-elevation-shadow($zValue, $color, $opacity);
+  box-shadow: $shadow;
+  --mat-mdc-elevation-override: #{$shadow};
+}
+
 // Applies the elevation to an element in a manner that allows
 // consumers to override it via the Material elevation classes.
 @mixin overridable-elevation($zValue, $color: $color) {