feat(material/card): support filled variant

this commit add `filled` variant for material card which provides subtle seperation from background and has less emphasis than elevated or outlined cards

fixes #29840

Author: naaajii

goldens/material/card/index.api.md

@@ -32,7 +32,7 @@ export class MatCardActions {
 }
 
 // @public (undocumented)
-export type MatCardAppearance = 'outlined' | 'raised';
+export type MatCardAppearance = 'outlined' | 'raised' | 'filled';
 
 // @public
 export class MatCardAvatar {

src/material/card/_m2-card.scss

@@ -12,6 +12,7 @@ $prefix: (mat, card);
   @return (
     elevated-container-shape: 4px,
     outlined-container-shape: 4px,
+    filled-container-shape: 4px,
     outlined-outline-width: 1px,
   );
 }
@@ -25,6 +26,8 @@ $prefix: (mat, card);
     outlined-container-elevation: elevation.get-box-shadow(0),
     outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
     subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
+    filled-container-color: inspection.get-theme-color($theme, background, card),
+    filled-container-elevation: elevation.get-box-shadow(0)
   );
 }
 

src/material/card/_m3-card.scss

@@ -25,6 +25,9 @@ $prefix: (mat, card);
       outlined-container-shape: map.get($systems, md-sys-shape, corner-medium),
       outlined-outline-color: map.get($systems, md-sys-color, outline-variant),
       outlined-outline-width: if($exclude-hardcoded, null, 1px),
+      filled-container-color: map.get($systems, md-sys-color, surface-container-highest),
+      filled-container-elevation: map.get($systems, md-sys-elevation, level0),
+      filled-container-shape: map.get($systems, md-sys-shape, corner-medium),
     ),
   );
 

src/material/card/card.scss

@@ -51,6 +51,14 @@ $mat-card-default-padding: 16px !default;
   }
 }
 
+.mat-mdc-card-filled {
+  @include token-utils.use-tokens(m2-card.$prefix, m2-card.get-token-slots()) {
+    background-color: token-utils.slot(filled-container-color);
+    border-radius: token-utils.slot(filled-container-shape);
+    box-shadow: token-utils.slot(filled-container-elevation);
+  }
+}
+
 .mdc-card__media {
   position: relative;
   box-sizing: border-box;

src/material/card/card.ts

@@ -16,7 +16,7 @@ import {
   inject,
 } from '@angular/core';
 
-export type MatCardAppearance = 'outlined' | 'raised';
+export type MatCardAppearance = 'outlined' | 'raised' | 'filled';
 
 /** Object that can be used to configure the default options for the card module. */
 export interface MatCardConfig {
@@ -41,6 +41,8 @@ export const MAT_CARD_CONFIG = new InjectionToken<MatCardConfig>('MAT_CARD_CONFI
     'class': 'mat-mdc-card mdc-card',
     '[class.mat-mdc-card-outlined]': 'appearance === "outlined"',
     '[class.mdc-card--outlined]': 'appearance === "outlined"',
+    '[class.mat-mdc-card-filled]': 'appearance === "filled"',
+    '[class.mdc-card--filled]': 'appearance === "filled"',
   },
   exportAs: 'matCard',
   encapsulation: ViewEncapsulation.None,