refactor: merge card tokens

Author: andrewseguin

src/material/card/BUILD.bazel

@@ -14,8 +14,6 @@ sass_library(
     name = "m3",
     srcs = [
         "_m3-card.scss",
-        "_m3-elevated-card.scss",
-        "_m3-outlined-card.scss",
     ],
     deps = [
         "//src/material/core/style:sass_utils",
@@ -27,8 +25,6 @@ sass_library(
     name = "m2",
     srcs = [
         "_m2-card.scss",
-        "_m2-elevated-card.scss",
-        "_m2-outlined-card.scss",
     ],
     deps = [
         "//src/material/core/style:elevation",

src/material/card/_card-theme.scss

@@ -6,22 +6,12 @@
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 @use './m2-card';
-@use './m2-elevated-card';
-@use './m2-outlined-card';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-elevated-card.$prefix,
-        m2-elevated-card.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-card.$prefix,
-        m2-outlined-card.get-unthemable-tokens()
-      );
       @include token-utils.create-token-values-mixed(
         m2-card.$prefix,
         m2-card.get-unthemable-tokens()
@@ -35,14 +25,6 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-elevated-card.$prefix,
-        m2-elevated-card.get-color-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-card.$prefix,
-        m2-outlined-card.get-color-tokens($theme)
-      );
       @include token-utils.create-token-values-mixed(
         m2-card.$prefix,
         m2-card.get-color-tokens($theme)
@@ -56,14 +38,6 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-elevated-card.$prefix,
-        m2-elevated-card.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-card.$prefix,
-        m2-outlined-card.get-typography-tokens($theme)
-      );
       @include token-utils.create-token-values-mixed(
         m2-card.$prefix,
         m2-card.get-typography-tokens($theme)
@@ -77,14 +51,6 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-elevated-card.$prefix,
-        m2-elevated-card.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-card.$prefix,
-        m2-outlined-card.get-density-tokens($theme)
-      );
       @include token-utils.create-token-values-mixed(
         m2-card.$prefix,
         m2-card.get-density-tokens($theme)
@@ -100,16 +66,6 @@
       namespace: m2-card.$prefix,
       tokens: m2-card.get-token-slots(),
     ),
-    (
-      namespace: m2-elevated-card.$prefix,
-      tokens: m2-elevated-card.get-token-slots(),
-      prefix: 'elevated-',
-    ),
-    (
-      namespace: m2-outlined-card.$prefix,
-      tokens: m2-outlined-card.get-token-slots(),
-      prefix: 'outlined-',
-    ),
   );
 }
 
@@ -141,14 +97,6 @@
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
   @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-      m2-elevated-card.$prefix,
-      map.get($tokens, m2-elevated-card.$prefix)
-    );
-    @include token-utils.create-token-values(
-      m2-outlined-card.$prefix,
-      map.get($tokens, m2-outlined-card.$prefix)
-    );
     @include token-utils.create-token-values(
       m2-card.$prefix,
       map.get($tokens, m2-card.$prefix)

src/material/card/_m2-card.scss

@@ -1,19 +1,29 @@
 @use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
 @use '../core/style/sass-utils';
+@use '../core/style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, card);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    elevated-container-shape: 4px,
+    outlined-container-shape: 4px,
+    outlined-outline-width: 1px,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
+    elevated-container-color: inspection.get-theme-color($theme, background, card),
+    elevated-container-elevation: elevation.get-box-shadow(1),
+    outlined-container-color: inspection.get-theme-color($theme, background, 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),
   );
 }

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

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
+@use '../core/style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, card);
@@ -15,10 +16,28 @@ $prefix: (mat, card);
     m3-utils.generate-typography-tokens($systems, title-text, title-large),
     m3-utils.generate-typography-tokens($systems, subtitle-text, title-medium),
     (
-      subtitle-text-color: map.get($systems, md-sys-color, on-surface)
-    )
+      subtitle-text-color: map.get($systems, md-sys-color, on-surface),
+      elevated-container-color: map.get($systems, md-sys-color, surface-container-low),
+      elevated-container-elevation: map.get($systems, md-sys-elevation, level1),
+      elevated-container-shape: map.get($systems, md-sys-shape, corner-medium),
+      outlined-container-color: map.get($systems, md-sys-color, surface),
+      outlined-container-elevation: map.get($systems, md-sys-elevation, level0),
+      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),
+    ),
   );
 
+  $elevated-elevation: map.get($tokens, elevated-container-elevation);
+  @if ($elevated-elevation != null) {
+    $tokens: map.set($tokens, elevated-container-elevation, elevation.get-box-shadow($elevated-elevation));
+  }
+
+  $outlined-elevation: map.get($tokens, outlined-container-elevation);
+  @if ($outlined-elevation != null) {
+    $tokens: map.set($tokens, outlined-container-elevation, elevation.get-box-shadow($outlined-elevation));
+  }
+
   @return m3-utils.namespace($prefix, $tokens, $token-slots);
 }