@angular/material 18.1.0-next.4 → 18.1.0

package/core/tokens/_token-utils.scss

@@ -1,11 +1,11 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
-@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/theme/keys' as mdc-keys;
 @use '@material/tokens/v0_161' as mdc-tokens;
+@use '../style/elevation';
 @use '../style/sass-utils';
 @use '../m2/palette' as m2-palette;
 @use '../m2/theming' as m2-theming;
@@ -161,7 +161,7 @@ $_component-prefix: null;
   $elevation: map.get($tokens, $elevation-token);
   $shadow-color: map.get($tokens, $shadow-color-token);
   @return map.merge($tokens, (
-    $elevation-token: mdc-elevation-theme.elevation-box-shadow($elevation, $shadow-color),
+    $elevation-token: elevation.get-box-shadow($elevation, $shadow-color),
     $shadow-color-token: null,
   ));
 }

package/core/tokens/m2/mat/_app.scss

@@ -1,4 +1,3 @@
-@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../theming/inspection';
@@ -23,7 +22,7 @@ $prefix: (mat, app);
 
   @for $zValue from 0 through 24 {
     $elevation-color: inspection.get-theme-color($theme, foreground, elevation);
-    $shadow: mdc-elevation.elevation-box-shadow($zValue,
+    $shadow: elevation.get-box-shadow($zValue,
       if($elevation-color == null, elevation.$color, $elevation-color));
     $tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow);
   }

package/core/tokens/m2/mat/_autocomplete.scss

@@ -1,6 +1,6 @@
-@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '../../token-utils';
 @use '../../../theming/inspection';
+@use '../../../style/elevation';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -11,7 +11,7 @@ $prefix: (mat, autocomplete);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
-    container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
+    container-elevation-shadow: elevation.get-box-shadow(8),
   );
 }
 

package/core/tokens/m2/mat/_datepicker.scss

@@ -1,9 +1,9 @@
-@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use 'sass:color';
 @use 'sass:meta';
 @use 'sass:math';
 @use '../../token-utils';
 @use '../../../theming/inspection';
+@use '../../../style/elevation';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -34,8 +34,8 @@ $private-default-overlap-color: #a8dab5;
   @return (
     calendar-container-shape: 4px,
     calendar-container-touch-shape: 4px,
-    calendar-container-elevation-shadow: mdc-elevation.elevation-box-shadow(4),
-    calendar-container-touch-elevation-shadow: mdc-elevation.elevation-box-shadow(24),
+    calendar-container-elevation-shadow: elevation.get-box-shadow(4),
+    calendar-container-touch-elevation-shadow: elevation.get-box-shadow(24),
   );
 }
 

package/core/tokens/m2/mat/_dialog.scss

@@ -1,5 +1,5 @@
-@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '../../token-utils';
+@use '../../../style/elevation';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -9,7 +9,7 @@ $prefix: (mat, dialog);
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    container-elevation-shadow: mdc-elevation.elevation-box-shadow(24),
+    container-elevation-shadow: elevation.get-box-shadow(24),
     container-max-width: 80vw,
     container-small-max-width: 80vw,
     container-min-width: 0,

package/core/tokens/m2/mat/_fab-small.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -19,10 +17,6 @@ $prefix: (mat, fab-small);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of icons and text projected into a FAB.
@@ -38,13 +32,13 @@ $prefix: (mat, fab-small);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
     // Background color of the container when the FAB is disabled.

package/core/tokens/m2/mat/_fab.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -19,10 +17,6 @@ $prefix: (mat, fab);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of icons and text projected into a FAB.
@@ -38,13 +32,13 @@ $prefix: (mat, fab);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
     // Background color of the container when the FAB is disabled.

package/core/tokens/m2/mat/_filled-button.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -29,10 +27,6 @@ $prefix: (mat, filled-button);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -45,13 +39,13 @@ $prefix: (mat, filled-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

package/core/tokens/m2/mat/_form-field.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @use 'sass:map';
 @use '@material/textfield' as mdc-textfield;
-@use '@material/density' as mdc-density;
 @use '../../token-utils';
 @use '../../../style/sass-utils';
 @use '../../../theming/theming';
@@ -105,12 +104,16 @@ $prefix: (mat, form-field);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
-  $height: mdc-density.prop-value(
-    $density-config: mdc-textfield.$density-config,
-    $density-scale: inspection.get-theme-density($theme),
-    $property-name: height,
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -5);
+  $size-scale: (
+    0: 56px,
+    -1: 52px,
+    -2: 48px,
+    -3: 44px,
+    -4: 40px,
+    -5: 36px,
   );
+  $height: map.get($size-scale, $density-scale);
   $hide-label: $height < mdc-textfield.$minimum-height-for-filled-label;
 
   // We computed the desired height of the form-field using the density configuration. The

package/core/tokens/m2/mat/_icon-button.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -18,10 +16,6 @@ $prefix: (mat, icon-button);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -34,13 +28,13 @@ $prefix: (mat, icon-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

package/core/tokens/m2/mat/_outlined-button.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -28,10 +26,6 @@ $prefix: (mat, outlined-button);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -44,13 +38,13 @@ $prefix: (mat, outlined-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

package/core/tokens/m2/mat/_paginator.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @use 'sass:map';
 @use '@material/textfield' as mdc-textfield;
-@use '@material/density' as mdc-density;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -51,12 +50,17 @@ $prefix: (mat, paginator);
     -4: 40px,
     -5: 40px,
   );
-  $form-field-density-scale: if($density-scale > -4, -4, $density-scale);
-  $form-field-height: mdc-density.prop-value(
-    $density-config: mdc-textfield.$density-config,
-    $density-scale: $form-field-density-scale,
-    $property-name: height,
+  $form-field-size-scale: (
+    0: 56px,
+    -1: 52px,
+    -2: 48px,
+    -3: 44px,
+    -4: 40px,
+    -5: 36px,
   );
+  $form-field-density-scale: if($density-scale > -4, -4, $density-scale);
+  $form-field-height: map.get($form-field-size-scale, $form-field-density-scale);
+
   // We computed the desired height of the form-field using the density configuration. The
   // spec only describes vertical spacing/alignment in non-dense mode. This means that we
   // cannot update the spacing to explicit numbers based on the density scale. Instead, we

package/core/tokens/m2/mat/_protected-button.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -29,10 +27,6 @@ $prefix: (mat, protected-button);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -45,13 +39,13 @@ $prefix: (mat, protected-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

package/core/tokens/m2/mat/_select.scss

@@ -2,8 +2,8 @@
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
+@use '../../../style/elevation';
 @use '../../../style/sass-utils';
-@use '@material/elevation/elevation-theme' as mdc-elevation;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, select);
@@ -12,7 +12,7 @@ $prefix: (mat, select);
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
+    container-elevation-shadow: elevation.get-box-shadow(8),
   );
 }
 

package/core/tokens/m2/mat/_sidenav.scss

@@ -1,8 +1,8 @@
-@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use 'sass:color';
 @use 'sass:meta';
 @use '../../token-utils';
 @use '../../../theming/inspection';
+@use '../../../style/elevation';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -15,7 +15,7 @@ $prefix: (mat, sidenav);
     // Currently zero, but it appears to be relevant for M3.
     // See: https://m3.material.io/components/navigation-drawer/overview
     container-shape: 0,
-    container-elevation-shadow: mdc-elevation.elevation-box-shadow(16),
+    container-elevation-shadow: elevation.get-box-shadow(16),
     container-width: auto,
   );
 }

package/core/tokens/m2/mat/_text-button.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -31,10 +29,6 @@ $prefix: (mat, text-button);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -47,13 +41,13 @@ $prefix: (mat, text-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

package/core/tokens/m2/mdc/_chip.scss

@@ -19,21 +19,9 @@ $prefix: (mdc, chip);
 @function get-unthemable-tokens() {
   @return (
     // The shape & radius of the chip.
-    container-shape:
-      (
-        family: 'rounded',
-        radius: (
-          16px 16px 16px 16px,
-        )
-      ),
+    container-shape-radius: 16px,
     // The shape & radius of the avatar.
-    with-avatar-avatar-shape:
-      (
-        family: 'rounded',
-        radius: (
-          14px 14px 14px 14px,
-        )
-      ),
+    with-avatar-avatar-shape-radius: 14px,
     // The width & height of the chip avatar.
     with-avatar-avatar-size: 28px,
     // The width & height of the chip icon.

package/core/tokens/m2/mdc/_elevated-card.scss

@@ -1,5 +1,5 @@
-@use '../../../style/elevation';
 @use '../../../theming/inspection';
+@use '../../../style/elevation';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 
@@ -35,6 +35,7 @@ $prefix: (mdc, elevated-card);
     pressed-container-elevation: null,
     pressed-state-layer-color: null,
     pressed-state-layer-opacity: null,
+    container-shadow-color: null,
     // Angular Material does not currently support surface tint.
     container-surface-tint-layer-color: null,
     // MDC does not seem to use these tokens.
@@ -50,12 +51,7 @@ $prefix: (mdc, elevated-card);
   @return (
     // The background color of the card.
     container-color: inspection.get-theme-color($theme, background, card),
-    // The elevation level of the card.
-    // (Part of the color tokens because it needs to be combined with the shadow color to generate
-    // the final box-shadow).
-    container-elevation: 1,
-    // The color of the card's shadow.
-    container-shadow-color: if($elevation != null, $elevation, elevation.$color),
+    container-elevation: elevation.get-box-shadow(1),
   );
 }
 

package/core/tokens/m2/mdc/_extended-fab.scss

@@ -1,8 +1,8 @@
+@use 'sass:map';
 @use '../../token-utils';
+@use '../../../style/elevation';
 @use '../../../theming/inspection';
 
-@use 'sass:map';
-
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, extended-fab);
 
@@ -10,6 +10,10 @@ $prefix: (mdc, extended-fab);
   @return (
     container-height: 48px,
     container-shape: 24px,
+    container-elevation-shadow: elevation.get-box-shadow(6),
+    focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
@@ -38,19 +42,18 @@ $prefix: (mdc, extended-fab);
     pressed-ripple-color: null,
     pressed-ripple-opacity: null,
     pressed-state-layer-color: null,
-    pressed-state-layer-opacity: null
+    pressed-state-layer-opacity: null,
+    container-elevation: null,
+    focus-container-elevation: null,
+    hover-container-elevation: null,
+    pressed-container-elevation: null,
+    container-shadow-color: null,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  @return (
-    container-elevation: 6,
-    focus-container-elevation: 8,
-    hover-container-elevation: 8,
-    pressed-container-elevation: 12,
-    container-shadow-color: #000,
-  );
+  @return ();
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.

package/core/tokens/m2/mdc/_fab-small.scss

@@ -1,25 +1,26 @@
+@use 'sass:map';
 @use '../../../theming/inspection';
+@use '../../../style/elevation';
 @use '../../token-utils';
 
-@use 'sass:map';
-
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, fab-small);
 
 @function get-unthemable-tokens() {
   @return (
     container-shape: 50%,
-    icon-size: 24px,
-
-    // We don't use this token, because it doesn't set the color of any text inside the FAB.
-    // We create a custom token for it instead.
-    icon-color: null,
+    container-elevation-shadow: elevation.get-box-shadow(6),
+    focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
     container-height: null,
     container-width: null,
+    icon-size: null,
+    icon-color: null,
 
     focus-icon-color: null,
     focus-outline-color: null,
@@ -40,7 +41,13 @@ $prefix: (mdc, fab-small);
     pressed-ripple-color: null,
     pressed-ripple-opacity: null,
     pressed-state-layer-color: null,
-    pressed-state-layer-opacity: null
+    pressed-state-layer-opacity: null,
+
+    container-elevation: null,
+    focus-container-elevation: null,
+    hover-container-elevation: null,
+    pressed-container-elevation: null,
+    container-shadow-color: null,
   );
 }
 
@@ -49,11 +56,6 @@ $prefix: (mdc, fab-small);
   @return (
     // Background color of the FAB.
     container-color: inspection.get-theme-color($theme, background, card),
-    container-elevation: 6,
-    focus-container-elevation: 8,
-    hover-container-elevation: 8,
-    pressed-container-elevation: 12,
-    container-shadow-color: #000,
   );
 }