@angular/material 18.1.0-next.4 → 18.1.0-rc.0

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);
 
@@ -38,18 +38,22 @@ $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,
+    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),
   );
 }
 

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

@@ -1,25 +1,22 @@
+@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,
 
     // =============================================================================================
     // = 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 +37,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 +52,10 @@ $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,
+    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),
   );
 }
 

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

@@ -1,19 +1,14 @@
+@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);
 
 @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,
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
@@ -21,6 +16,8 @@ $prefix: (mdc, fab);
     container-height: null,
     container-surface-tint-layer-color: null,
     container-width: null,
+    icon-size: null,
+    icon-color: null,
 
     focus-icon-color: null,
     focus-outline-color: null,
@@ -41,7 +38,13 @@ $prefix: (mdc, 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,
   );
 }
 
@@ -50,11 +53,10 @@ $prefix: (mdc, fab);
   @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,
+    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),
   );
 }
 

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

@@ -41,6 +41,7 @@ $prefix: (mdc, outlined-card);
     pressed-outline-color: 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.
@@ -58,12 +59,7 @@ $prefix: (mdc, outlined-card);
     container-color: inspection.get-theme-color($theme, background, card),
     // The border color of the card.
     outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
-    // 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: 0,
-    // The color of the card's shadow.
-    container-shadow-color: if($elevation != null, $elevation, elevation.$color),
+    container-elevation: elevation.get-box-shadow(0),
   );
 }
 

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '@material/elevation' as mdc-elevation;
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -19,7 +19,7 @@ $prefix: (mat, app);
 
   @if ($shadow-color) {
     @for $zValue from 0 through 24 {
-      $shadow: mdc-elevation.elevation-box-shadow($zValue, $shadow-color);
+      $shadow: elevation.get-box-shadow($zValue, $shadow-color);
       $tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow);
     }
   }

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '@material/elevation/elevation-theme' as mdc-elevation;
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -15,7 +15,7 @@ $prefix: (mat, autocomplete);
     background-color: map.get($systems, md-sys-color, surface-container),
     container-shape: map.get($systems, md-sys-shape, corner-extra-small),
     container-elevation-shadow:
-      token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
+      token-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
   );
 
   @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
+@use '../../../style/elevation';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
-@use '@material/elevation' as mdc-elevation;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, datepicker);
@@ -67,10 +67,10 @@ $prefix: (mat, datepicker);
     ),
     calendar-container-background-color: map.get($systems, md-sys-color, surface-container-high),
     calendar-container-text-color: map.get($systems, md-sys-color, on-surface),
-    calendar-container-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(0),
+    calendar-container-elevation-shadow: token-utils.hardcode(elevation.get-box-shadow(0),
       $exclude-hardcoded),
     calendar-container-touch-elevation-shadow:
-      token-utils.hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
+      token-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
     calendar-container-shape: map.get($systems, md-sys-shape, corner-large),
     calendar-container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
     calendar-text-font: map.get($systems, md-sys-typescale, body-large-font),

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../../../style/sass-utils';
+@use '../../../style/elevation';
 @use '../../token-utils';
-@use '@material/elevation' as mdc-elevation;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, select);
@@ -26,7 +26,7 @@ $prefix: (mat, select);
       focused-arrow-color: map.get($systems, md-sys-color, primary),
       invalid-arrow-color: map.get($systems, md-sys-color, error),
       container-elevation-shadow:
-        token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
+        token-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
     )
   ), (
     // Color variants:

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

@@ -16,10 +16,7 @@ $prefix: (mdc, chip);
   $tokens: sass-utils.merge-all(
     token-utils.generate-typography-tokens($systems, label-text, label-large),
     (
-      container-shape: token-utils.hardcode((
-        family: rounded,
-        radius: 8px,
-      ), $exclude-hardcoded),
+      container-shape-radius: token-utils.hardcode(8px, $exclude-hardcoded),
       with-avatar-avatar-size: token-utils.hardcode(24px, $exclude-hardcoded),
       label-text-color: map.get($systems, md-sys-color, on-surface-variant),
       disabled-label-text-color: sass-utils.safe-color-change(

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

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -9,7 +11,12 @@ $prefix: (mdc, elevated-card);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of tokens for the MDC elevated-card
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $mdc-tokens: token-utils.get-mdc-tokens('elevated-card', $systems, $exclude-hardcoded);
+  $tokens: token-utils.get-mdc-tokens('elevated-card', $systems, $exclude-hardcoded);
+  $elevation: map.get($tokens, container-elevation);
 
-  @return token-utils.namespace-tokens($prefix, $mdc-tokens, $token-slots);
+  @if ($elevation != null) {
+    $tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation));
+  }
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
 }

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

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -9,7 +11,22 @@ $prefix: (mdc, extended-fab);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of tokens for the MDC extended-fab
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $mdc-tokens: token-utils.get-mdc-tokens('extended-fab-primary', $systems, $exclude-hardcoded);
+  $tokens: token-utils.get-mdc-tokens('extended-fab-primary', $systems, $exclude-hardcoded);
+  $elevation-tokens: (
+    container-elevation,
+    focus-container-elevation,
+    hover-container-elevation,
+    pressed-container-elevation,
+  );
+
+  @each $token in $elevation-tokens {
+    $elevation: map.get($tokens, $token);
+
+    @if ($elevation != null) {
+      $tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation));
+    }
+  }
+
   $variant-tokens: (
     // Color variants
     primary: (), // Default, no overrides needed.
@@ -17,5 +34,5 @@ $prefix: (mdc, extended-fab);
     tertiary: token-utils.get-mdc-tokens('extended-fab-tertiary', $systems, $exclude-hardcoded)
   );
 
-  @return token-utils.namespace-tokens($prefix, ($mdc-tokens, $variant-tokens), $token-slots);
+  @return token-utils.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots);
 }