feat(material-experimental/theming): add M3 snackbar support (#27824)

angular · Sep 22, 2023 · 6b57edb · 6b57edb
1 parent 1930b1d
commit 6b57edb
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 21 deletions.
diff --git a/src/dev-app/theme-token-api.scss b/src/dev-app/theme-token-api.scss
@@ -40,6 +40,7 @@ html {
   @include mat.card-theme($light-theme);
   @include mat.tooltip-theme($light-theme);
   @include mat.toolbar-theme($light-theme);
+  @include mat.snack-bar-theme($light-theme);
 }
 
 // Emit dark theme styles.
@@ -52,6 +53,7 @@ html {
   @include mat.card-color($dark-theme);
   @include mat.tooltip-color($dark-theme);
   @include mat.toolbar-color($dark-theme);
+  @include mat.snack-bar-color($dark-theme);
 }
 
 // Emit density styles for each scale.
@@ -63,5 +65,6 @@ html {
     @include mat.card-density($scale-theme);
     @include mat.tooltip-density($scale-theme);
     @include mat.toolbar-density($scale-theme);
+    @include mat.snack-bar-density($scale-theme);
   }
 }
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -11,7 +11,7 @@
   $result: ();
   @each $prop in (font, line-height, size, tracking, weight) {
     $result: map.set($result, #{$base-name}-#{$prop},
-        map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop}));
+      map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop}));
   }
   @return $result;
 }
@@ -43,3 +43,13 @@
       )
   );
 }
+
+/// Generates custom tokens for the mat-snack-bar.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-snack-bar
+@function snack-bar($systems, $exclude-hardcoded) {
+  @return (
+    button-color: map.get($systems, md-sys-color, inverse-primary),
+  );
+}
diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss
@@ -188,6 +188,11 @@
           mdc-tokens.md-comp-outlined-card-values($systems, $exclude-hardcoded),
           $token-slots
       ),
+      _namespace-tokens(
+            (mdc, snackbar),
+          mdc-tokens.md-comp-snackbar-values($systems, $exclude-hardcoded),
+          $token-slots,
+      ),
       _namespace-tokens(
             (mdc, plain-tooltip),
           mdc-tokens.md-comp-plain-tooltip-values($systems, $exclude-hardcoded),
@@ -203,8 +208,13 @@
       _namespace-tokens(
             (mat, toolbar),
           custom-tokens.toolbar($systems, $exclude-hardcoded),
-         $token-slots,
-      )
+          $token-slots,
+      ),
+      _namespace-tokens(
+            (mat, snack-bar),
+          custom-tokens.snack-bar($systems, $exclude-hardcoded),
+          $token-slots
+      ),
   );
 
   // Strip out tokens that are systemized by our made up density system.

diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss
@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -8,42 +9,69 @@
 @use '../core/tokens/m2/mat/snack-bar' as tokens-mat-snack-bar;
 
 @mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
     // Add default values for tokens not related to color, typography, or density.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-unthemable-tokens());
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-color-tokens($theme));
-    @include token-utils.create-token-values(
-      tokens-mat-snack-bar.$prefix,
-      tokens-mat-snack-bar.get-color-tokens($theme)
-    );
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+          tokens-mat-snack-bar.$prefix,
+          tokens-mat-snack-bar.get-color-tokens($theme)
+      );
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-typography-tokens($theme));
+    }
   }
 }
 
 @mixin density($theme) {}
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-snack-bar') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
 
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include mdc-snackbar-theme.theme(map.get($tokens, tokens-mdc-snack-bar.$prefix));
+    @include token-utils.create-token-values(
+        tokens-mat-snack-bar.$prefix, map.get($tokens, tokens-mat-snack-bar.$prefix));
+  }
+}