main - 663585a feat(material/card): support filled variant (#29868)

Author: naaajii

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)
   );
 }
 

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),
     ),
   );
 

card/index.d.ts

@@ -3,7 +3,7 @@ import { InjectionToken } from '@angular/core';
 import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
 import '@angular/cdk/bidi';
 
-type MatCardAppearance = 'outlined' | 'raised';
+type MatCardAppearance = 'outlined' | 'raised' | 'filled';
 /** Object that can be used to configure the default options for the card module. */
 interface MatCardConfig {
     /** Default appearance for cards. */

fesm2022/card.mjs

@@ -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)
   );
 }
 

fesm2022/card.mjs.map

@@ -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),
     ),
   );
 

npm_package/card/_m2-card.scss

@@ -3,7 +3,7 @@ import { InjectionToken } from '@angular/core';
 import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
 import '@angular/cdk/bidi';
 
-type MatCardAppearance = 'outlined' | 'raised';
+type MatCardAppearance = 'outlined' | 'raised' | 'filled';
 /** Object that can be used to configure the default options for the card module. */
 interface MatCardConfig {
     /** Default appearance for cards. */