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/BUILD.bazel

@@ -15,6 +15,7 @@ sass_library(
     srcs = [
         "_m3-card.scss",
         "_m3-elevated-card.scss",
+        "_m3-filled-card.scss",
         "_m3-outlined-card.scss",
     ],
     deps = [
@@ -28,6 +29,7 @@ sass_library(
     srcs = [
         "_m2-card.scss",
         "_m2-elevated-card.scss",
+        "_m2-filled-card.scss",
         "_m2-outlined-card.scss",
     ],
     deps = [

src/material/card/_card-theme.scss

@@ -8,6 +8,7 @@
 @use './m2-card';
 @use './m2-elevated-card';
 @use './m2-outlined-card';
+@use './m2-filled-card';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
@@ -22,6 +23,10 @@
         m2-outlined-card.$prefix,
         m2-outlined-card.get-unthemable-tokens()
       );
+      @include token-utils.create-token-values-mixed(
+        m2-filled-card.$prefix,
+        m2-filled-card.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values-mixed(
         m2-card.$prefix,
         m2-card.get-unthemable-tokens()
@@ -43,6 +48,10 @@
         m2-outlined-card.$prefix,
         m2-outlined-card.get-color-tokens($theme)
       );
+      @include token-utils.create-token-values-mixed(
+        m2-filled-card.$prefix,
+        m2-filled-card.get-color-tokens($theme)
+      );
       @include token-utils.create-token-values-mixed(
         m2-card.$prefix,
         m2-card.get-color-tokens($theme)
@@ -64,6 +73,10 @@
         m2-outlined-card.$prefix,
         m2-outlined-card.get-typography-tokens($theme)
       );
+      @include token-utils.create-token-values-mixed(
+        m2-filled-card.$prefix,
+        m2-filled-card.get-typography-tokens($theme)
+      );
       @include token-utils.create-token-values-mixed(
         m2-card.$prefix,
         m2-card.get-typography-tokens($theme)
@@ -85,6 +98,10 @@
         m2-outlined-card.$prefix,
         m2-outlined-card.get-density-tokens($theme)
       );
+      @include token-utils.create-token-values-mixed(
+        m2-filled-card.$prefix,
+        m2-filled-card.get-density-tokens($theme)
+      );
       @include token-utils.create-token-values-mixed(
         m2-card.$prefix,
         m2-card.get-density-tokens($theme)
@@ -110,6 +127,11 @@
       tokens: m2-outlined-card.get-token-slots(),
       prefix: 'outlined-',
     ),
+    (
+      namespace: m2-filled-card.$prefix,
+      tokens: m2-filled-card.get-token-slots(),
+      prefix: 'filled-',
+    )
   );
 }
 
@@ -149,6 +171,10 @@
       m2-outlined-card.$prefix,
       map.get($tokens, m2-outlined-card.$prefix)
     );
+    @include token-utils.create-token-values(
+      m2-filled-card.$prefix,
+      map.get($tokens, m2-filled-card.$prefix)
+    );
     @include token-utils.create-token-values(
       m2-card.$prefix,
       map.get($tokens, m2-card.$prefix)

src/material/card/_m2-filled-card.scss

@@ -0,0 +1,50 @@
+@use '../core/theming/inspection';
+@use '../core/style/elevation';
+@use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, card-filled);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    container-shape: 4px,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $elevation: inspection.get-theme-color($theme, foreground, elevation);
+
+  @return (
+    container-color: inspection.get-theme-color($theme, background, card),
+    container-elevation: elevation.get-box-shadow(0),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+    get-unthemable-tokens(),
+    get-color-tokens(m2-utils.$placeholder-color-config),
+    get-typography-tokens(m2-utils.$placeholder-typography-config),
+    get-density-tokens(m2-utils.$placeholder-density-config)
+);
+}

src/material/card/_m3-filled-card.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use '../core/style/elevation';
+@use '../core/tokens/m3-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, card-filled);
+
+/// Generates the tokens for MDC filled-card
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of tokens for the MDC filled-card
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    container-color: map.get($systems, md-sys-color, surface-container-highest),
+    container-elevation: map.get($systems, md-sys-elevation, level0),
+    container-shape: map.get($systems, md-sys-shape, corner-medium),
+  );
+
+  $elevation: map.get($tokens, container-elevation);
+
+  @if ($elevation != null) {
+    $tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation));
+  }
+
+  @return m3-utils.namespace($prefix, $tokens, $token-slots);
+}

src/material/card/card.scss

@@ -2,6 +2,7 @@
 @use './m2-card';
 @use './m2-elevated-card';
 @use './m2-outlined-card';
+@use './m2-filled-card';
 
 // Size of the `mat-card-header` region custom to Angular Material.
 $mat-card-header-size: 40px !default;
@@ -62,6 +63,16 @@ $mat-card-default-padding: 16px !default;
   }
 }
 
+.mat-mdc-card-filled {
+  @include token-utils.use-tokens(
+    m2-filled-card.$prefix, m2-filled-card.get-token-slots()
+  ) {
+    background-color: token-utils.slot(container-color);
+    border-radius: token-utils.slot(container-shape);
+    box-shadow: token-utils.slot(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,

src/material/core/tokens/_density.scss

@@ -44,6 +44,7 @@ $_density-tokens: (
       touch-target-display: (block, block, none, none),
       container-height: (40px, 36px, 32px, 28px),
     ),
+    (mat, filled-card): (),
     (mat, filled-text-field): (),
     (mat, form-field): (
       container-height: (56px, 52px, 48px, 44px, 40px, 36px),

src/material/core/tokens/_m2-tokens.scss

@@ -15,6 +15,7 @@
 @use '../../button/m2-tonal-button';
 @use '../../card/m2-card';
 @use '../../card/m2-elevated-card';
+@use '../../card/m2-filled-card';
 @use '../../card/m2-outlined-card';
 @use '../../checkbox/m2-checkbox';
 @use '../../chips/m2-chip';
@@ -116,6 +117,7 @@
     _get-tokens-for-module($theme, m2-fab),
     _get-tokens-for-module($theme, m2-fab-small),
     _get-tokens-for-module($theme, m2-filled-button),
+    _get-tokens-for-module($theme, m2-filled-card),
     _get-tokens-for-module($theme, m2-filled-text-field),
     _get-tokens-for-module($theme, m2-form-field),
     _get-tokens-for-module($theme, m2-full-pseudo-checkbox),

src/material/core/tokens/_m3-tokens.scss

@@ -6,6 +6,7 @@
 @use '../../button/m3-fab';
 @use '../../button/m3-fab-small';
 @use '../../button/m3-filled-button';
+@use '../../card/m3-filled-card';
 @use '../../button/m3-icon-button';
 @use '../../button/m3-outlined-button';
 @use '../../button/m3-protected-button';
@@ -441,6 +442,7 @@ $system-variables-prefix) {
     m3-fab-small.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-fab.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-filled-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-filled-card.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-filled-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-form-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-full-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),