chore(card): add Sass theming apis

PiperOrigin-RevId: 576653714
material-components · Oct 25, 2023 · 1b39ab7 · 1b39ab7
1 parent dcfd35a
commit 1b39ab7
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 0 deletions.
diff --git a/labs/card/_elevated-card.scss b/labs/card/_elevated-card.scss
@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/elevated-card' show theme;
diff --git a/labs/card/_filled-card.scss b/labs/card/_filled-card.scss
@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/filled-card' show theme;
diff --git a/labs/card/_outlined-card.scss b/labs/card/_outlined-card.scss
@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/outlined-card' show theme;
diff --git a/labs/card/internal/_elevated-card.scss b/labs/card/internal/_elevated-card.scss
@@ -3,10 +3,27 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
 // go/keep-sorted start
 @use '../../../tokens';
 // go/keep-sorted end
 
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-elevated-card-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Elevated card `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-elevated-card-#{$token}: #{$value};
+    }
+  }
+}
+
 @mixin styles() {
   $tokens: tokens.md-comp-elevated-card-values();
 

diff --git a/labs/card/internal/_filled-card.scss b/labs/card/internal/_filled-card.scss
@@ -3,10 +3,27 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
 // go/keep-sorted start
 @use '../../../tokens';
 // go/keep-sorted end
 
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-filled-card-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Filled card `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-filled-card-#{$token}: #{$value};
+    }
+  }
+}
+
 @mixin styles() {
   $tokens: tokens.md-comp-filled-card-values();
 

diff --git a/labs/card/internal/_outlined-card.scss b/labs/card/internal/_outlined-card.scss
@@ -3,10 +3,27 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
 // go/keep-sorted start
 @use '../../../tokens';
 // go/keep-sorted end
 
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-outlined-card-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Outlined card `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-outlined-card-#{$token}: #{$value};
+    }
+  }
+}
+
 @mixin styles() {
   $tokens: tokens.md-comp-outlined-card-values();