refactor(material/card): simplify structural styles

src/material/card/_card-theme.scss

@@ -8,17 +8,17 @@
 @use '../core/tokens/m2/mat/card' as tokens-mat-card;
 @use '../core/tokens/m2/mdc/elevated-card' as tokens-mdc-elevated-card;
 @use '../core/tokens/m2/mdc/outlined-card' as tokens-mdc-outlined-card;
-@use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
-@use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-elevated-card-theme.theme(tokens-mdc-elevated-card.get-unthemable-tokens());
-      @include mdc-outlined-card-theme.theme(tokens-mdc-outlined-card.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+          tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+          tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-unthemable-tokens());
       @include token-utils.create-token-values(
           tokens-mat-card.$prefix, tokens-mat-card.get-unthemable-tokens());
     }
@@ -30,23 +30,13 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
-    $mdc-elevated-card-color-tokens: token-utils.resolve-elevation(
-        tokens-mdc-elevated-card.get-color-tokens($theme),
-        container-elevation,
-        container-shadow-color
-    );
-    $mdc-outlined-card-color-tokens: token-utils.resolve-elevation(
-        tokens-mdc-outlined-card.get-color-tokens($theme),
-        container-elevation,
-        container-shadow-color,
-    );
-    $mat-card-color-tokens: tokens-mat-card.get-color-tokens($theme);
-
-    // Add values for card tokens.
     @include sass-utils.current-selector-or-root() {
-      @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);
+      @include token-utils.create-token-values(tokens-mdc-elevated-card.$prefix,
+        tokens-mdc-elevated-card.get-color-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-card.$prefix,
+        tokens-mdc-outlined-card.get-color-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-card.$prefix,
+        tokens-mat-card.get-color-tokens($theme));
     }
   }
 }
@@ -56,16 +46,13 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
-    $mdc-elevated-card-typography-tokens: tokens-mdc-elevated-card.get-typography-tokens($theme);
-    $mdc-outlined-card-typography-tokens: tokens-mdc-outlined-card.get-typography-tokens($theme);
-    $mat-card-typography-tokens: tokens-mat-card.get-typography-tokens($theme);
-
-    // Add values for card tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-elevated-card-theme.theme($mdc-elevated-card-typography-tokens);
-      @include mdc-outlined-card-theme.theme($mdc-outlined-card-typography-tokens);
       @include token-utils.create-token-values(
-          tokens-mat-card.$prefix, $mat-card-typography-tokens);
+        tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-card.$prefix, tokens-mat-card.get-typography-tokens($theme));
     }
   }
 }
@@ -75,15 +62,13 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    $mdc-elevated-card-density-tokens: tokens-mdc-elevated-card.get-density-tokens($theme);
-    $mdc-outlined-card-density-tokens: tokens-mdc-outlined-card.get-density-tokens($theme);
-    $mat-card-density-tokens: tokens-mat-card.get-density-tokens($theme);
-
-    // Add values for card tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-elevated-card-theme.theme($mdc-elevated-card-density-tokens);
-      @include mdc-outlined-card-theme.theme($mdc-outlined-card-density-tokens);
-      @include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-density-tokens);
+      @include token-utils.create-token-values(tokens-mdc-elevated-card.$prefix,
+        tokens-mdc-elevated-card.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-card.$prefix,
+        tokens-mdc-outlined-card.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-card.$prefix,
+        tokens-mat-card.get-density-tokens($theme));
     }
   }
 }
@@ -121,22 +106,10 @@
   @include validation.selector-defined(
       'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
-    $elevated-card-tokens: map.get($tokens, tokens-mdc-elevated-card.$prefix);
-    // Work around a bug in MDC where the elevation is not resolved to an actual shadow value.
-    $elevated-card-tokens: token-utils.resolve-elevation(
-        $elevated-card-tokens,
-        container-elevation,
-        container-shadow-color
-    );
-    $outlined-card-tokens: map.get($tokens, tokens-mdc-outlined-card.$prefix);
-    // Work around a bug in MDC where the elevation is not resolved to an actual shadow value.
-    $outlined-card-tokens: token-utils.resolve-elevation(
-        $outlined-card-tokens,
-        container-elevation,
-        container-shadow-color
-    );
-    @include mdc-elevated-card-theme.theme($elevated-card-tokens);
-    @include mdc-outlined-card-theme.theme($outlined-card-tokens);
+    @include token-utils.create-token-values(
+        tokens-mdc-elevated-card.$prefix, map.get($tokens, tokens-mdc-elevated-card.$prefix));
+    @include token-utils.create-token-values(
+        tokens-mdc-outlined-card.$prefix, map.get($tokens, tokens-mdc-outlined-card.$prefix));
     @include token-utils.create-token-values(
         tokens-mat-card.$prefix, map.get($tokens, tokens-mat-card.$prefix));
   }

src/material/card/card.scss

@@ -1,83 +1,123 @@
-@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;
-@use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/card' as tokens-mat-card;
 @use '../core/tokens/m2/mdc/elevated-card' as tokens-mdc-elevated-card;
 @use '../core/tokens/m2/mdc/outlined-card' as tokens-mdc-outlined-card;
 
-// TODO(jelbourn): move header and title-group styles to their own files.
-@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
-  $mdc-elevated-card-token-slots: tokens-mdc-elevated-card.get-token-slots();
-  $mdc-outlined-card-token-slots: tokens-mdc-outlined-card.get-token-slots();
+// Size of the `mat-card-header` region custom to Angular Material.
+$mat-card-header-size: 40px !default;
+
+// Default padding for text content within a card.
+$mat-card-default-padding: 16px !default;
 
-  // Add the MDC card static styles.
-  @include mdc-card.static-styles();
+.mat-mdc-card {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: relative;
+  border-style: solid;
+  border-width: 0;
+
+  @include token-utils.use-tokens(
+    tokens-mdc-elevated-card.$prefix,
+    tokens-mdc-elevated-card.get-token-slots()
+  ) {
+    @include token-utils.create-token-slot(background-color, container-color);
+    @include token-utils.create-token-slot(border-color, container-color);
+    @include token-utils.create-token-slot(border-radius, container-shape);
+    @include token-utils.create-token-slot(box-shadow, container-elevation);
+  }
 
-  .mat-mdc-card {
-    // Add the official slots for the MDC elevated-card.
-    @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,
-    )));
+  // Transparent card border for high-contrast mode.
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: solid 1px transparent;
+    content: '';
+    display: block;
+    pointer-events: none;
+    box-sizing: border-box;
 
-    // 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);
+      tokens-mdc-elevated-card.$prefix,
+      tokens-mdc-elevated-card.get-token-slots()
+    ) {
+      @include token-utils.create-token-slot(border-radius, container-shape);
     }
   }
+}
 
-  .mat-mdc-card-outlined {
-    // Add the official slots for the MDC outlined-card.
-    @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);
-    }
+.mat-mdc-card-outlined {
+  @include token-utils.use-tokens(
+    tokens-mdc-outlined-card.$prefix,
+    tokens-mdc-outlined-card.get-token-slots()
+  ) {
+    @include token-utils.create-token-slot(background-color, container-color);
+    @include token-utils.create-token-slot(border-radius, container-shape);
+    @include token-utils.create-token-slot(border-width, outline-width);
+    @include token-utils.create-token-slot(border-color, outline-color);
+    @include token-utils.create-token-slot(box-shadow, container-elevation);
   }
 
-  // Add slots for custom Angular Material card tokens.
-  @include token-utils.use-tokens(tokens-mat-card.$prefix, tokens-mat-card.get-token-slots()) {
-    .mat-mdc-card-title {
-      @include token-utils.create-token-slot(font-family, title-text-font);
-      @include token-utils.create-token-slot(line-height, title-text-line-height);
-      @include token-utils.create-token-slot(font-size, title-text-size);
-      @include token-utils.create-token-slot(letter-spacing, title-text-tracking);
-      @include token-utils.create-token-slot(font-weight, title-text-weight);
-    }
+  // Outlined card already displays border in high-contrast mode.
+  // Overwriting styles set above to remove a duplicate border.
+  &::after {
+    border: none;
+  }
+}
 
-    .mat-mdc-card-subtitle {
-      @include token-utils.create-token-slot(color, subtitle-text-color);
-      @include token-utils.create-token-slot(font-family, subtitle-text-font);
-      @include token-utils.create-token-slot(line-height, subtitle-text-line-height);
-      @include token-utils.create-token-slot(font-size, subtitle-text-size);
-      @include token-utils.create-token-slot(letter-spacing, subtitle-text-tracking);
-      @include token-utils.create-token-slot(font-weight, subtitle-text-weight);
-    }
+.mdc-card__media {
+  position: relative;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+
+  &::before {
+    display: block;
+    content: '';
+  }
+
+  &:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
   }
 }
 
-// Size of the `mat-card-header` region custom to Angular Material.
-$mat-card-header-size: 40px !default;
+.mat-mdc-card-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 52px;
+  padding: 8px;
+}
 
-// Default padding for text content within a card.
-$mat-card-default-padding: 16px !default;
+// Add slots for custom Angular Material card tokens.
+@include token-utils.use-tokens(tokens-mat-card.$prefix, tokens-mat-card.get-token-slots()) {
+  .mat-mdc-card-title {
+    @include token-utils.create-token-slot(font-family, title-text-font);
+    @include token-utils.create-token-slot(line-height, title-text-line-height);
+    @include token-utils.create-token-slot(font-size, title-text-size);
+    @include token-utils.create-token-slot(letter-spacing, title-text-tracking);
+    @include token-utils.create-token-slot(font-weight, title-text-weight);
+  }
 
-.mat-mdc-card {
-  position: relative;
+  .mat-mdc-card-subtitle {
+    @include token-utils.create-token-slot(color, subtitle-text-color);
+    @include token-utils.create-token-slot(font-family, subtitle-text-font);
+    @include token-utils.create-token-slot(line-height, subtitle-text-line-height);
+    @include token-utils.create-token-slot(font-size, subtitle-text-size);
+    @include token-utils.create-token-slot(letter-spacing, subtitle-text-tracking);
+    @include token-utils.create-token-slot(font-weight, subtitle-text-weight);
+  }
 }
 
 // Title text and subtitles text within a card. MDC doesn't have pre-made title sections for cards.

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

@@ -1,4 +1,4 @@
-@use '../../../style/elevation';
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
@@ -35,6 +35,7 @@ $prefix: (mdc, elevated-card);
     pressed-container-elevation: null,
     pressed-state-layer-color: null,
     pressed-state-layer-opacity: null,
+    container-shadow-color: null,
     // Angular Material does not currently support surface tint.
     container-surface-tint-layer-color: null,
     // MDC does not seem to use these tokens.
@@ -50,12 +51,7 @@ $prefix: (mdc, elevated-card);
   @return (
     // The background color of the card.
     container-color: inspection.get-theme-color($theme, 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),
+    container-elevation: mdc-elevation.elevation-box-shadow(1),
   );
 }
 

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

@@ -1,3 +1,4 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '../../../style/elevation';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
@@ -41,6 +42,7 @@ $prefix: (mdc, outlined-card);
     pressed-outline-color: null,
     pressed-state-layer-color: null,
     pressed-state-layer-opacity: null,
+    container-shadow-color: null,
     // Angular Material does not currently support surface tint.
     container-surface-tint-layer-color: null,
     // MDC does not seem to use these tokens.
@@ -58,12 +60,7 @@ $prefix: (mdc, outlined-card);
     container-color: inspection.get-theme-color($theme, background, card),
     // The border color of the card.
     outline-color: rgba(inspection.get-theme-color($theme, 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),
+    container-elevation: mdc-elevation.elevation-box-shadow(0),
   );
 }
 

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

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -9,7 +11,12 @@ $prefix: (mdc, elevated-card);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of tokens for the MDC elevated-card
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $mdc-tokens: token-utils.get-mdc-tokens('elevated-card', $systems, $exclude-hardcoded);
+  $tokens: token-utils.get-mdc-tokens('elevated-card', $systems, $exclude-hardcoded);
+  $elevation: map.get($tokens, container-elevation);
 
-  @return token-utils.namespace-tokens($prefix, $mdc-tokens, $token-slots);
+  @if ($elevation != null) {
+    $tokens: map.set($tokens, container-elevation, mdc-elevation.elevation-box-shadow($elevation));
+  }
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
 }