fix(material-experimental/theming): align fab with M3 spec

* Fixes that we weren't emitting the height and shape tokens for the extended FAB which in turn prevented the M3 tokens from working. * Fixes that all FAB variants were using the wrong color for the state layer, causing it to blend in with the background.
angular · Jan 22, 2024 · 957bc48 · 957bc48
1 parent a496855
commit 957bc48
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -321,7 +321,7 @@
 @function fab($systems, $exclude-hardcoded) {
   @return ((
     foreground-color: map.get($systems, md-sys-color, on-primary-container),
-    state-layer-color: map.get($systems, md-sys-color, primary-container),
+    state-layer-color: map.get($systems, md-sys-color, on-primary-container),
     ripple-color: mat.private-safe-color-change(
       map.get($systems, md-sys-color, on-primary-container),
       $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
@@ -338,15 +338,15 @@
     primary: (), // Default, no overrides needed.
     secondary: (
       foreground-color: map.get($systems, md-sys-color, on-secondary-container),
-      state-layer-color: map.get($systems, md-sys-color, secondary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
       ripple-color: mat.private-safe-color-change(
           map.get($systems, md-sys-color, on-secondary-container),
         $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
       ),
     ),
     tertiary: (
       foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
-      state-layer-color: map.get($systems, md-sys-color, tertiary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
       ripple-color: mat.private-safe-color-change(
           map.get($systems, md-sys-color, on-tertiary-container),
         $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
@@ -362,7 +362,7 @@
 @function fab-small($systems, $exclude-hardcoded) {
   @return ((
     foreground-color: map.get($systems, md-sys-color, on-primary-container),
-    state-layer-color: map.get($systems, md-sys-color, primary-container),
+    state-layer-color: map.get($systems, md-sys-color, on-primary-container),
     ripple-color: mat.private-safe-color-change(
       map.get($systems, md-sys-color, on-primary-container),
       $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
@@ -379,15 +379,15 @@
     primary: (), // Default, no overrides needed.
     secondary: (
       foreground-color: map.get($systems, md-sys-color, on-secondary-container),
-      state-layer-color: map.get($systems, md-sys-color, secondary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
       ripple-color: mat.private-safe-color-change(
           map.get($systems, md-sys-color, on-secondary-container),
         $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
       ),
     ),
     tertiary: (
       foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
-      state-layer-color: map.get($systems, md-sys-color, tertiary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
       ripple-color: mat.private-safe-color-change(
           map.get($systems, md-sys-color, on-tertiary-container),
         $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)

diff --git a/src/material/core/tokens/m2/mdc/_extended-fab.scss b/src/material/core/tokens/m2/mdc/_extended-fab.scss
@@ -8,12 +8,13 @@ $prefix: (mdc, extended-fab);
 
 @function get-unthemable-tokens() {
   @return (
+    container-height: 48px,
+    container-shape: 24px,
+
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
     container-color: null,
-    container-height: null,
-    container-shape: null,
     container-surface-tint-layer-color: null,
     focus-icon-color: null,
     focus-label-text-color: null,