fix(material/card): tokenize the card elevation

src/material/card/_card-theme.scss

@@ -1,5 +1,4 @@
 @use '../core/theming/theming';
-@use '../core/style/private';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/card' as tokens-mat-card;
@@ -10,31 +9,29 @@
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $mdc-elevated-card-color-tokens: tokens-mdc-elevated-card.get-color-tokens($config);
-  $mdc-outlined-card-color-tokens: tokens-mdc-outlined-card.get-color-tokens($config);
+  $mdc-elevated-card-color-tokens: token-utils.resolve-elevation(
+      tokens-mdc-elevated-card.get-color-tokens($config),
+      container-elevation,
+      container-shadow-color
+  );
+  $mdc-outlined-card-color-tokens: token-utils.resolve-elevation(
+      tokens-mdc-outlined-card.get-color-tokens($config),
+      container-elevation,
+      container-shadow-color,
+  );
   $mat-card-color-tokens: tokens-mat-card.get-color-tokens($config);
 
   // Add values for card tokens.
   .mat-mdc-card {
     @include mdc-elevated-card-theme.theme($mdc-elevated-card-color-tokens);
     @include mdc-outlined-card-theme.theme($mdc-outlined-card-color-tokens);
     @include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-color-tokens);
-
-    // TODO(mmalerba): This should be based on tokens, but the elevation tokens don't seem to be
-    //  working currently. They wind up setting values like `box-shadow: var(--e); --e: 1`
-    @include private.private-theme-elevation(1, $config);
-  }
-
-  .mat-mdc-card-outlined {
-    // TODO(mmalerba): This should be based on tokens, but the elevation tokens don't seem to be
-    //  working currently. They wind up setting values like `box-shadow: var(--e); --e: 1`
-    @include private.private-theme-elevation(0, $config);
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
-          theming.get-typography-config($config-or-theme));
+      theming.get-typography-config($config-or-theme));
   $mdc-elevated-card-typography-tokens: tokens-mdc-elevated-card.get-typography-tokens($config);
   $mdc-outlined-card-typography-tokens: tokens-mdc-outlined-card.get-typography-tokens($config);
   $mat-card-typography-tokens: tokens-mat-card.get-typography-tokens($config);

src/material/card/card.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '@material/card' as mdc-card;
 @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
 @use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
@@ -17,7 +18,18 @@
 
   .mat-mdc-card {
     // Add the official slots for the MDC elevated-card.
-    @include mdc-elevated-card-theme.theme-styles($mdc-elevated-card-token-slots);
+    @include mdc-elevated-card-theme.theme-styles(map.merge($mdc-elevated-card-token-slots, (
+      // MDC emits the box-shadow on .mdc-card, so the full selector would be
+      // `.mat-mdc-card .mdc-card` which is incorrect. We emit the elevation slot ourselves instead.
+      container-elevation: null,
+      container-shadow-color: null,
+    )));
+
+    // Emit the elevation slot directly on .mat-mdc-card.
+    @include token-utils.use-tokens(
+        tokens-mdc-elevated-card.$prefix, $mdc-elevated-card-token-slots) {
+      @include token-utils.create-token-slot(box-shadow, container-elevation);
+    }
 
     // Add default values for MDC card tokens that aren't outputted by the theming API.
     @include mdc-elevated-card-theme.theme(tokens-mdc-elevated-card.get-unthemable-tokens());
@@ -28,7 +40,19 @@
 
   .mat-mdc-card-outlined {
     // Add the official slots for the MDC outlined-card.
-    @include mdc-outlined-card-theme.theme-styles($mdc-outlined-card-token-slots);
+    @include mdc-outlined-card-theme.theme-styles(map.merge($mdc-outlined-card-token-slots, (
+      // MDC emits the box-shadow on .mdc-card, so the full selector would be
+      // `.mat-mdc-card-outlined .mdc-card` which is incorrect. We emit the elevation slot ourselves
+      // instead.
+      container-elevation: null,
+      container-shadow-color: null,
+    )));
+
+    // Emit the elevation slot directly on .mat-mdc-card-outlined.
+    @include token-utils.use-tokens(
+        tokens-mdc-outlined-card.$prefix, $mdc-outlined-card-token-slots) {
+      @include token-utils.create-token-slot(box-shadow, container-elevation);
+    }
   }
 
   // Add slots for custom Angular Material card tokens.

src/material/core/tokens/_token-utils.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/theme/keys' as mdc-keys;
@@ -11,33 +12,33 @@ $_placeholder-color-palette: theming.define-palette(palette.$red-palette);
 // Placeholder color config that can be passed to token getter functions when generating token
 // slots.
 $placeholder-color-config: (
-    primary: $_placeholder-color-palette,
-    accent: $_placeholder-color-palette,
-    warn: $_placeholder-color-palette,
-    is-dark: false,
-    foreground: palette.$light-theme-foreground-palette,
-    background: palette.$light-theme-background-palette,
+  primary: $_placeholder-color-palette,
+  accent: $_placeholder-color-palette,
+  warn: $_placeholder-color-palette,
+  is-dark: false,
+  foreground: palette.$light-theme-foreground-palette,
+  background: palette.$light-theme-background-palette,
 );
 
 $_placeholder-typography-level-config: mdc-helpers.typography-config-level-from-mdc(body1);
 
 // Placeholder typography config that can be passed to token getter functions when generating token
 // slots.
 $placeholder-typography-config: (
-    font-family: Roboto,
-    headline-1: $_placeholder-typography-level-config,
-    headline-2: $_placeholder-typography-level-config,
-    headline-3: $_placeholder-typography-level-config,
-    headline-4: $_placeholder-typography-level-config,
-    headline-5: $_placeholder-typography-level-config,
-    headline-6: $_placeholder-typography-level-config,
-    subtitle-1: $_placeholder-typography-level-config,
-    subtitle-2: $_placeholder-typography-level-config,
-    body-1: $_placeholder-typography-level-config,
-    body-2: $_placeholder-typography-level-config,
-    caption: $_placeholder-typography-level-config,
-    button: $_placeholder-typography-level-config,
-    overline: $_placeholder-typography-level-config,
+  font-family: Roboto,
+  headline-1: $_placeholder-typography-level-config,
+  headline-2: $_placeholder-typography-level-config,
+  headline-3: $_placeholder-typography-level-config,
+  headline-4: $_placeholder-typography-level-config,
+  headline-5: $_placeholder-typography-level-config,
+  headline-6: $_placeholder-typography-level-config,
+  subtitle-1: $_placeholder-typography-level-config,
+  subtitle-2: $_placeholder-typography-level-config,
+  body-1: $_placeholder-typography-level-config,
+  body-2: $_placeholder-typography-level-config,
+  caption: $_placeholder-typography-level-config,
+  button: $_placeholder-typography-level-config,
+  overline: $_placeholder-typography-level-config,
 );
 
 // Placeholder density config that can be passed to token getter functions when generating token
@@ -94,3 +95,15 @@ $_component-prefix: null;
   }
   @return $result;
 }
+
+// MDC doesn't currently handle elevation tokens properly. As a temporary workaround we can combine
+// the elevation and shadow-color tokens into a full box-shadow and use it as the value for the
+// elevation token.
+@function resolve-elevation($tokens, $elevation-token, $shadow-color-token) {
+  $elevation: map.get($tokens, $elevation-token);
+  $shadow-color: map.get($tokens, $shadow-color-token);
+  @return map.merge($tokens, (
+    $elevation-token: mdc-elevation-theme.elevation-box-shadow($elevation, $shadow-color),
+    $shadow-color-token: null,
+  ));
+}

src/material/core/tokens/m2/mdc/_elevated-card.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../../../style/elevation';
 @use '../../../theming/theming';
 @use '../../token-utils';
 
@@ -14,45 +15,49 @@ $prefix: (mdc, elevated-card);
 @function get-unthemable-tokens() {
   @return (
     // The border-radius of the card.
-      container-shape: 4px,
+    container-shape: 4px,
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
-    // TODO(mmalerba): The elevation tokens don't seem to work currently.
-    //  Should work with MDC to figure out what's wrong.
-      container-elevation: null,
-      container-shadow-color: null,
     // Angular Material's card is not an interactive element, and therefore does not support states.
-      disabled-container-color: null,
-      disabled-container-elevation: null,
-      disabled-container-opacity: null,
-      dragged-container-elevation: null,
-      dragged-state-layer-color: null,
-      dragged-state-layer-opacity: null,
-      focus-container-elevation: null,
-      focus-state-layer-color:null,
-      focus-state-layer-opacity: null,
-      hover-container-elevation: null,
-      hover-state-layer-color: null,
-      hover-state-layer-opacity: null,
-      pressed-container-elevation: null,
-      pressed-state-layer-color: null,
-      pressed-state-layer-opacity: null,
+    disabled-container-color: null,
+    disabled-container-elevation: null,
+    disabled-container-opacity: null,
+    dragged-container-elevation: null,
+    dragged-state-layer-color: null,
+    dragged-state-layer-opacity: null,
+    focus-container-elevation: null,
+    focus-state-layer-color:null,
+    focus-state-layer-opacity: null,
+    hover-container-elevation: null,
+    hover-state-layer-color: null,
+    hover-state-layer-opacity: null,
+    pressed-container-elevation: null,
+    pressed-state-layer-color: null,
+    pressed-state-layer-opacity: null,
     // Angular Material does not currently support surface tint.
-      container-surface-tint-layer-color: null,
+    container-surface-tint-layer-color: null,
     // MDC does not seem to use these tokens.
-      icon-color: null,
-      icon-size: null,
+    icon-color: null,
+    icon-size: null,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($config) {
   $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
+  $elevation: theming.get-color-from-palette($foreground, elevation);
 
   @return (
     // The background color of the card.
-      container-color: theming.get-color-from-palette($background, card),
+    container-color: theming.get-color-from-palette($background, card),
+    // The elevation level of the card.
+    // (Part of the color tokens because it needs to be combined with the shadow color to generate
+    // the final box-shadow).
+    container-elevation: 1,
+    // The color of the card's shadow.
+    container-shadow-color: if($elevation != null, $elevation, elevation.$color),
   );
 }
 
@@ -70,9 +75,9 @@ $prefix: (mdc, elevated-card);
 // This is used to create token slots.
 @function get-token-slots() {
   @return token-utils.merge-all(
-          get-unthemable-tokens(),
-          get-color-tokens(token-utils.$placeholder-color-config),
-          get-typography-tokens(token-utils.$placeholder-typography-config),
-          get-density-tokens(token-utils.$placeholder-density-config)
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
   );
 }

src/material/core/tokens/m2/mdc/_outlined-card.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../../../style/elevation';
 @use '../../../theming/theming';
 @use '../../token-utils';
 
@@ -14,54 +15,57 @@ $prefix: (mdc, outlined-card);
 @function get-unthemable-tokens() {
   @return (
     // The border-radius of the card.
-      container-shape: 4px,
+    container-shape: 4px,
     // The thickness of the card's border.
-      outline-width: 1px,
+    outline-width: 1px,
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
-    // TODO(mmalerba): The elevation tokens don't seem to work currently.
-    //  Should work with MDC to figure out what's wrong.
-      container-elevation: null,
-      container-shadow-color: null,
     // Angular Material's card is not an interactive element, and therefore does not support states.
-      disabled-container-elevation: null,
-      disabled-outline-color: null,
-      disabled-outline-opacity: null,
-      dragged-container-elevation: null,
-      dragged-outline-color: null,
-      dragged-state-layer-color: null,
-      dragged-state-layer-opacity: null,
-      focus-container-elevation: null,
-      focus-outline-color: null,
-      focus-state-layer-color: null,
-      focus-state-layer-opacity: null,
-      hover-container-elevation: null,
-      hover-outline-color: null,
-      hover-state-layer-color: null,
-      hover-state-layer-opacity: null,
-      pressed-container-elevation: null,
-      pressed-outline-color: null,
-      pressed-state-layer-color: null,
-      pressed-state-layer-opacity: null,
+    disabled-container-elevation: null,
+    disabled-outline-color: null,
+    disabled-outline-opacity: null,
+    dragged-container-elevation: null,
+    dragged-outline-color: null,
+    dragged-state-layer-color: null,
+    dragged-state-layer-opacity: null,
+    focus-container-elevation: null,
+    focus-outline-color: null,
+    focus-state-layer-color: null,
+    focus-state-layer-opacity: null,
+    hover-container-elevation: null,
+    hover-outline-color: null,
+    hover-state-layer-color: null,
+    hover-state-layer-opacity: null,
+    pressed-container-elevation: null,
+    pressed-outline-color: null,
+    pressed-state-layer-color: null,
+    pressed-state-layer-opacity: null,
     // Angular Material does not currently support surface tint.
-      container-surface-tint-layer-color: null,
+    container-surface-tint-layer-color: null,
     // MDC does not seem to use these tokens.
-      icon-color: null,
-      icon-size: null,
+    icon-color: null,
+    icon-size: null,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($config) {
   $background: map.get($config, background);
   $foreground: map.get($config, foreground);
+  $elevation: theming.get-color-from-palette($foreground, elevation);
 
   @return (
     // The background color of the card.
-      container-color: theming.get-color-from-palette($background, card),
+    container-color: theming.get-color-from-palette($background, card),
     // The border color of the card.
-      outline-color: theming.get-color-from-palette($foreground, base, 0.12),
+    outline-color: theming.get-color-from-palette($foreground, base, 0.12),
+    // The elevation level of the card.
+    // (Part of the color tokens because it needs to be combined with the shadow color to generate
+    // the final box-shadow).
+    container-elevation: 0,
+    // The color of the card's shadow.
+    container-shadow-color: if($elevation != null, $elevation, elevation.$color),
   );
 }
 
@@ -79,9 +83,9 @@ $prefix: (mdc, outlined-card);
 // This is used to create token slots.
 @function get-token-slots() {
   @return token-utils.merge-all(
-          get-unthemable-tokens(),
-          get-color-tokens(token-utils.$placeholder-color-config),
-          get-typography-tokens(token-utils.$placeholder-typography-config),
-          get-density-tokens(token-utils.$placeholder-density-config)
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
   );
 }