feat(material/card): support filled variant (#29868)

* 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

* docs(material/card): add each appearance example

update the example to contain `elevated`, `outlined` &  `filled` variants

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/components-examples/material/card/card-overview/card-overview-example.html

@@ -16,4 +16,4 @@
     <button matButton>LIKE</button>
     <button matButton>SHARE</button>
   </mat-card-actions>
-</mat-card>
+</mat-card>

src/dev-app/card/BUILD.bazel

@@ -15,7 +15,7 @@ ng_project(
         "//:node_modules/@angular/forms",
         "//src/material/button",
         "//src/material/card",
-        "//src/material/checkbox",
+        "//src/material/radio",
     ],
 )
 

src/dev-app/card/card-demo.html

@@ -1,5 +1,9 @@
 <div class="demo-card-container">
-  <mat-checkbox (change)="toggleAppearance()">Use outlined cards</mat-checkbox>
+  <mat-radio-group (change)="appearance = $event.value">
+    <mat-radio-button value="raised">Raised</mat-radio-button>
+    <mat-radio-button value="outlined">Outlined</mat-radio-button>
+    <mat-radio-button value="filled">Filled</mat-radio-button>
+  </mat-radio-group>
 
 <!-- TODO(jelbourn): re-add dividers and footers with progress bars once the MDC versions exist -->
   <mat-card [appearance]="appearance">

src/dev-app/card/card-demo.scss

@@ -16,3 +16,7 @@
     text-transform: uppercase;
   }
 }
+
+mat-radio-group {
+  margin-bottom: 10px;
+}

src/dev-app/card/card-demo.ts

@@ -10,14 +10,14 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardAppearance, MatCardModule} from '@angular/material/card';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatRadioModule} from '@angular/material/radio';
 
 @Component({
   selector: 'card-demo',
   templateUrl: 'card-demo.html',
   styleUrl: 'card-demo.css',
   encapsulation: ViewEncapsulation.None,
-  imports: [MatCardModule, MatButtonModule, MatCheckboxModule, FormsModule],
+  imports: [MatCardModule, MatButtonModule, MatRadioModule, FormsModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardDemo {
@@ -28,7 +28,4 @@ export class CardDemo {
               As of some one gently rapping, rapping at my chamber door.
               “’Tis some visitor,” I muttered, “tapping at my chamber door—
               Only this and nothing more.”`;
-  toggleAppearance() {
-    this.appearance = this.appearance == 'raised' ? 'outlined' : 'raised';
-  }
 }

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,