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,

src/material/core/tokens/_density.scss

@@ -0,0 +1,171 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '../theming/theming';
+
+/// Maps namespaced tokens to per-density-scale values.
+/// This is used as a temporary solution for density, since Material Design currently does not have
+/// systemized density.
+/// Format:
+/// (
+///   (mat, comp): (
+///     token: (<scale 0 value>, <scale -1 value>, <scale -2 value>, ...),
+///     ...
+///   ),
+///   ...
+/// )
+// TODO(mmalerba): Add density tokens for remaining components.
+$_density-tokens: (
+    (mat, autocomplete): (),
+    (mat, badge): (),
+    (mat, bottom-sheet): (),
+    (mat, card): (),
+    (mat, checkbox): (
+      state-layer-size: (40px, 36px, 32px, 28px),
+      touch-target-display: (block, block, none, none),
+    ),
+    (mat, chip): (
+      container-height: (32px, 28px, 24px),
+    ),
+    (mat, circular-progress): (),
+    (mat, datepicker): (),
+    (mat, dialog): (),
+    (mat, divider): (),
+    (mat, elevated-card): (),
+    (mat, expansion): (
+      header-collapsed-state-height: (48px, 44px, 40px, 36px),
+      header-expanded-state-height: (64px, 60px, 56px, 48px),
+    ),
+    (mat, extended-fab): (),
+    (mat, fab): (
+      touch-target-display: (block, block, none, none),
+    ),
+    (mat, fab-small): (),
+    (mat, filled-button): (
+      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),
+      filled-label-display: (block, block, none, none, none, none),
+      container-vertical-padding: (16px, 14px, 12px, 10px, 8px, 6px),
+      filled-with-label-container-padding-top: (24px, 22px, 12px, 10px, 8px, 6px),
+      filled-with-label-container-padding-bottom: (8px, 6px, 12px, 10px, 8px, 6px),
+    ),
+    (mat, full-pseudo-checkbox): (),
+    (mat, grid-list): (),
+    (mat, icon): (),
+    (mat, icon-button): (
+      touch-target-display: (block, block, none, none),
+      // The size caps out at 24px, because anything lower will be smaller than the icon.
+      state-layer-size: (40px, 36px, 32px, 28px, 24px, 24px),
+    ),
+    (mat, linear-progress): (),
+    (mat, list): (
+      list-item-leading-icon-start-space: (16px, 12px, 8px, 4px),
+      list-item-leading-icon-end-space: (16px, 12px, 8px, 4px),
+      list-item-one-line-container-height: (48px, 44px, 40px, 36px, 32px, 24px),
+      list-item-two-line-container-height: (64px, 60px, 56px, 52px, 48px, 48px),
+      list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
+    ),
+    (mat, menu): (),
+    (mat, minimal-pseudo-checkbox): (),
+    (mat, optgroup): (),
+    (mat, option): (),
+    (mat, outlined-button): (
+      container-height: (40px, 36px, 32px, 28px),
+      touch-target-display: (block, block, none, none),
+    ),
+    (mat, outlined-card): (),
+    (mat, outlined-text-field): (),
+    (mat, paginator): (
+      container-size: (56px, 52px, 48px, 40px),
+      form-field-container-height: (40px, 40px, 40px, 40px, 40px, 36px),
+      form-field-container-vertical-padding: (8px, 8px, 8px, 8px, 8px, 6px),
+      touch-target-display: (block, block, none, none),
+    ),
+    (mat, plain-tooltip): (),
+    (mat, protected-button): (
+      touch-target-display: (block, block, none, none),
+      container-height: (40px, 36px, 32px, 28px),
+    ),
+    (mat, radio): (
+      touch-target-display: (block, block, none, none),
+      state-layer-size: (40px, 36px, 32px, 28px),
+    ),
+    (mat, ripple): (),
+    (mat, secondary-navigation-tab): (
+      container-height: (48px, 44px, 40px, 36px, 32px),
+    ),
+    (mat, select): (
+      arrow-transform: (translateY(-8px), translateY(-8px), none),
+    ),
+    (mat, sidenav): (),
+    (mat, slide-toggle): (),
+    (mat, slider): (),
+    (mat, snack-bar): (),
+    (mat, sort): (),
+    (mat, standard-button-toggle): (
+      height: (40px, 40px, 40px, 36px, 24px),
+    ),
+    (mat, stepper): (
+      header-height: (72px, 68px, 64px, 60px, 42px),
+    ),
+    (mat, switch): (),
+    (mat, tab-header): (),
+    (mat, tab-indicator): (),
+    (mat, table): (
+      header-container-height: (56px, 52px, 48px, 44px, 40px),
+      footer-container-height: (52px, 48px, 44px, 40px, 36px),
+      row-item-container-height: (52px, 48px, 44px, 40px, 36px),
+    ),
+    (mat, text-button): (
+      touch-target-display: (block, block, none, none),
+      container-height: (40px, 36px, 32px, 28px),
+    ),
+    (mat, timepicker): (),
+    (mat, tonal-button): (
+      container-height: (40px, 36px, 32px, 28px),
+      touch-target-display: (block, block, none, none),
+    ),
+    (mat, toolbar): (
+      standard-height: (64px, 60px, 56px, 52px),
+      mobile-height: (56px, 52px, 48px, 44px),
+    ),
+    (mat, tree): (
+      node-min-height: (48px, 44px, 40px, 36px, 28px),
+    ),
+);
+
+/// Gets the value for the given density scale from the given set of density values.
+/// @param {List} $density-values The list of values for each density scale.
+/// @param {Number} $scale The density scale to get the value for.
+/// @return {*} The value for the given scale.
+@function _get-value-for-scale($density-values, $scale) {
+  $scale: theming.clamp-density($scale, -1 * list.length($density-values) + 1);
+  $index: -$scale + 1;
+  @return list.nth($density-values, $index);
+}
+
+/// Gets a map of all density tokens for the given scale
+/// @param {Number} $scale The density scale
+/// @return {Map} Map of all fully qualified density tokens for the given scale.
+@function get-tokens-for-scale($scale) {
+  $result: ();
+  @each $namespace, $tokens in $_density-tokens {
+    @each $token, $density-values in $tokens {
+      $tokens: map.set($tokens, $token, _get-value-for-scale($density-values, $scale));
+    }
+    $result: map.set($result, $namespace, $tokens);
+  }
+  @return $result;
+}
+
+/// Checks whether the given token is systemized by Angular Material's made up density system.
+/// @param {List} $namespace The namespace of the token
+/// @param {String} $token The name of the token
+/// @return {Boolean} Whether the token is systemized by the density system
+@function is-systemized($namespace, $token) {
+  @return map.get($_density-tokens, $namespace, $token) != null;
+}