fix(material/button): FAB emitting invalid elevation tokens (#31028)

The FAB was re-defining its elevation tokens for each variant, however the logic that converts elevation values from numbers to shadows was running only on the top-level tokens. At runtime this leads to no shadow being shown, because we were emitting a number.

These changes remove the elevation overrides for the variants, because they're the same as the base.

Author: crisbeto

src/material/button/_m3-fab.scss

@@ -65,6 +65,10 @@ $prefix: (mat, fab);
   );
 
   $elevation-tokens: (
+    container-elevation-shadow,
+    focus-container-elevation-shadow,
+    hover-container-elevation-shadow,
+    pressed-container-elevation-shadow,
     extended-container-elevation-shadow,
     extended-focus-container-elevation-shadow,
     extended-hover-container-elevation-shadow,
@@ -88,32 +92,24 @@ $prefix: (mat, fab);
     primary: (), // Default, no overrides needed.
     secondary: (
       container-color: map.get($systems, md-sys-color, secondary-container),
-      container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       container-shape: map.get($systems, md-sys-shape, corner-large),
       extended-container-height: if($exclude-hardcoded, null, 56px),
       extended-container-shape: map.get($systems, md-sys-shape, corner-large),
       extended-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
       extended-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
       extended-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
       extended-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-      focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
       foreground-color: map.get($systems, md-sys-color, on-secondary-container),
-      hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
       hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-      pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       ripple-color: sass-utils.safe-color-change(
           map.get($systems, md-sys-color, on-secondary-container),
           $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
       small-container-color: map.get($systems, md-sys-color, secondary-container),
-      small-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       small-container-shape: map.get($systems, md-sys-shape, corner-medium),
-      small-focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       small-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
       small-foreground-color: map.get($systems, md-sys-color, on-secondary-container),
-      small-hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
       small-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-      small-pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       small-pressed-state-layer-opacity:
           map.get($systems, md-sys-state, pressed-state-layer-opacity),
       small-ripple-color: sass-utils.safe-color-change(
@@ -124,32 +120,24 @@ $prefix: (mat, fab);
     ),
     tertiary: (
       container-color: map.get($systems, md-sys-color, tertiary-container),
-      container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       container-shape: map.get($systems, md-sys-shape, corner-large),
       extended-container-height: if($exclude-hardcoded, null, 56px),
       extended-container-shape: map.get($systems, md-sys-shape, corner-large),
       extended-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
       extended-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
       extended-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
       extended-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-      focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
       foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
-      hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
       hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-      pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       ripple-color: sass-utils.safe-color-change(
           map.get($systems, md-sys-color, on-tertiary-container),
           $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
       small-container-color: map.get($systems, md-sys-color, tertiary-container),
-      small-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       small-container-shape: map.get($systems, md-sys-shape, corner-medium),
-      small-focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       small-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
       small-foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
-      small-hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
       small-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-      small-pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       small-ripple-color: sass-utils.safe-color-change(
           map.get($systems, md-sys-color, on-tertiary-container),
           $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
@@ -158,21 +146,6 @@ $prefix: (mat, fab);
     )
   );
 
-  $elevation-tokens: (
-    container-elevation-shadow,
-    focus-container-elevation-shadow,
-    hover-container-elevation-shadow,
-    pressed-container-elevation-shadow,
-  );
-
-  @each $token in $elevation-tokens {
-    $elevation: map.get($tokens, $token);
-
-    @if ($elevation != null) {
-      $tokens: map.set($tokens, $token, elevation.get-box-shadow($elevation));
-    }
-  }
-
   @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }