refactor(material/card): switch to new theming API (#25454)

Reworks the card component to use the new CSS-variable-based theming API from MDC.

Author: crisbeto

src/material/card/_card-theme.scss

@@ -1,7 +1,8 @@
 @use '../core/theming/theming';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/typography/typography';
-@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/typography' as mdc-typography;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use 'sass:color';
@@ -10,36 +11,31 @@
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   $foreground: map.get($config, foreground);
-  $is-dark-theme: map.get($config, is-dark);
-
-  $orig-mdc-card-action-icon-color: mdc-card.$action-icon-color;
-  $orig-mdc-card-outline-color: mdc-card.$outline-color;
 
   @include mdc-helpers.using-mdc-theme($config) {
-    mdc-card.$action-icon-color: rgba(mdc-theme-color.prop-value(on-surface),
-      mdc-theme-color.text-emphasis(medium));
-    mdc-card.$outline-color: color.mix(mdc-theme-color.prop-value(on-surface),
-      mdc-theme-color.prop-value(surface), 12%);
+    .mat-mdc-card {
+      @include mdc-elevated-card-theme.theme((
+        container-color: mdc-theme-color.prop-value(surface),
+      ));
 
-    @include mdc-card.without-ripple($query: mdc-helpers.$mdc-theme-styles-query);
+      @include mdc-outlined-card-theme.theme((
+        outline-color: color.mix(mdc-theme-color.prop-value(on-surface),
+          mdc-theme-color.prop-value(surface), 12%)
+      ));
+    }
 
     // Card subtitles are an Angular Material construct (not MDC), so we explicitly set their
     // color to secondary text here.
     .mat-mdc-card-subtitle {
       color: theming.get-color-from-palette($foreground, secondary-text);
     }
   }
-
-  mdc-card.$action-icon-color: $orig-mdc-card-action-icon-color;
-  mdc-card.$outline-color: $orig-mdc-card-outline-color;
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
   @include mdc-helpers.using-mdc-typography($config) {
-    @include mdc-card.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
-
     // Card subtitles and titles are an Angular Material construct (not MDC), so we explicitly
     // set their typographic styles here.
     .mat-mdc-card-title {

src/material/card/card.scss

@@ -1,5 +1,9 @@
-@use '../core/mdc-helpers/mdc-helpers';
 @use '@material/card' as mdc-card;
+@use '@material/card/variables' as mdc-card-variables;
+@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.
 
@@ -11,7 +15,33 @@ $mat-card-default-padding: 16px !default;
 
 @include mdc-helpers.disable-mdc-fallback-declarations {
   // Include all MDC card styles except for color and typography.
-  @include mdc-card.without-ripple($query: mdc-helpers.$mdc-base-styles-query);
+  @include mdc-card.static-styles($query: mdc-helpers.$mdc-base-styles-query);
+}
+
+.mat-mdc-card {
+  position: relative;
+
+  @include mdc-helpers.disable-mdc-fallback-declarations {
+    // 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 elevation.elevation(1);
+    @include mdc-elevated-card-theme.theme-styles((
+      container-color: transparent,
+      container-shape: mdc-card-variables.$shape-radius,
+    ));
+  }
+}
+
+.mat-mdc-card-outlined {
+  @include mdc-helpers.disable-mdc-fallback-declarations {
+    @include elevation.elevation(0);
+    @include mdc-outlined-card-theme.theme-styles((
+      outline-color: transparent,
+      outline-width: 1px,
+    ));
+  }
 }
 
 // Title text and subtitles text within a card. MDC doesn't have pre-made title sections for cards.

src/material/card/card.ts

@@ -40,7 +40,8 @@ export const MAT_CARD_CONFIG = new InjectionToken<MatCardConfig>('MAT_CARD_CONFI
   styleUrls: ['card.css'],
   host: {
     'class': 'mat-mdc-card mdc-card',
-    '[class.mdc-card--outlined]': 'appearance == "outlined"',
+    '[class.mat-mdc-card-outlined]': 'appearance === "outlined"',
+    '[class.mdc-card--outlined]': 'appearance === "outlined"',
   },
   exportAs: 'matCard',
   encapsulation: ViewEncapsulation.None,