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

package/badge/index.d.ts

@@ -26,8 +26,11 @@ export declare class MatBadge implements OnInit, OnDestroy {
     private _renderer;
     private _animationMode?;
     /**
-     * The color of the badge. Can be `primary`, `accent`, or `warn`.
-     * Not recommended in M3, for more information see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.
+     * Theme color of the badge. This API is supported in M2 themes only, it
+     * has no effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants.
      */
     get color(): ThemePalette;
     set color(value: ThemePalette);

package/button/_fab-theme.scss

@@ -1,6 +1,3 @@
-@use '@material/fab/fab-theme' as mdc-fab-theme;
-@use '@material/fab/fab-small-theme' as mdc-fab-small-theme;
-@use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -21,13 +18,13 @@
     @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-fab-theme.theme(tokens-mdc-fab.get-unthemable-tokens());
-      @include mdc-fab-small-theme.theme(tokens-mdc-fab-small.get-unthemable-tokens());
-      @include mdc-extended-fab-theme.theme(
-          tokens-mdc-extended-fab.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values(
+        tokens-mdc-fab.$prefix, tokens-mdc-fab.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mdc-fab-small.$prefix, tokens-mdc-fab-small.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mdc-extended-fab.$prefix, tokens-mdc-extended-fab.get-unthemable-tokens());
     }
   }
 }
@@ -43,7 +40,7 @@
     tokens-mat-fab.get-color-tokens($theme)
   );
 
-  @include mdc-fab-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-fab.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-tokens);
 }
 
@@ -58,7 +55,7 @@
     tokens-mat-fab-small.get-color-tokens($theme)
   );
 
-  @include mdc-fab-small-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-fab-small.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-tokens);
 }
 
@@ -75,7 +72,8 @@
     @include sass-utils.current-selector-or-root() {
       @include _fab-variant($theme, null);
       @include _fab-small-variant($theme, null);
-      @include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-extended-fab.$prefix, tokens-mdc-extended-fab.get-color-tokens($theme));
 
       .mat-mdc-fab {
         &.mat-primary {
@@ -116,7 +114,8 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-extended-fab.$prefix,
+        tokens-mdc-extended-fab.get-typography-tokens($theme));
       @include token-utils.create-token-values(tokens-mat-fab.$prefix,
         tokens-mat-fab.get-typography-tokens($theme));
       @include token-utils.create-token-values(tokens-mat-fab-small.$prefix,
@@ -190,9 +189,10 @@
   $mat-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab.$prefix, $options...);
   $mat-fab-small-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab-small.$prefix,
     $options...);
-  @include mdc-extended-fab-theme.theme($mdc-extended-fab-tokens);
-  @include mdc-fab-theme.theme($mdc-fab-tokens);
-  @include mdc-fab-small-theme.theme($mdc-fab-small-tokens);
+    @include token-utils.create-token-values(tokens-mdc-extended-fab.$prefix,
+      $mdc-extended-fab-tokens);
+  @include token-utils.create-token-values(tokens-mdc-fab.$prefix, $mdc-fab-tokens);
+  @include token-utils.create-token-values(tokens-mdc-fab-small.$prefix, $mdc-fab-small-tokens);
   @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-fab-tokens);
   @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-fab-small-tokens);
 }

package/button/_icon-button-theme.scss

@@ -1,7 +1,5 @@
 @use 'sass:map';
 @use 'sass:math';
-@use '@material/density/functions' as mdc-density-functions;
-@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
 @use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
 @use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
 @use '../core/style/sass-utils';
@@ -18,7 +16,8 @@
   @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-icon-button-theme.theme(tokens-mdc-icon-button.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix,
+        tokens-mdc-icon-button.get-unthemable-tokens());
     }
   }
 }
@@ -34,7 +33,7 @@
     tokens-mat-icon-button.get-color-tokens($theme)
   );
 
-  @include mdc-icon-button-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens);
 }
 
@@ -82,19 +81,15 @@
   @else {
     $icon-size: 24px;
     $density-scale: inspection.get-theme-density($theme);
-    // Manually apply the expected density theming, and include the padding
-    // as it was applied before
-    $calculated-size: mdc-density-functions.prop-value(
-      $density-config: (
-        size: (
-          default: 48px,
-          maximum: 48px,
-          minimum: 28px,
-        ),
-      ),
-      $density-scale: $density-scale,
-      $property-name: size,
+    $size-map: (
+      0: 48px,
+      -1: 44px,
+      -2: 40px,
+      -3: 36px,
+      -4: 32px,
+      -5: 28px,
     );
+    $calculated-size: map.get($size-map, $density-scale);
 
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mat-icon-button.$prefix,
@@ -105,9 +100,7 @@
     .mat-mdc-icon-button.mat-mdc-button-base {
       // Match the styles that used to be present. This is necessary for backwards
       // compat to match the previous implementations selector count (two classes).
-      @include mdc-icon-button-theme.theme((
-        state-layer-size: $calculated-size,
-      ));
+      --mdc-icon-button-state-layer-size: #{$calculated-size};
 
       // TODO: Switch calculated-size to "var(--mdc-icon-button-state-layer-size)"
       // Currently fails validation because the variable is "undefined"
@@ -153,7 +146,8 @@
   @include validation.selector-defined(
       'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
-    @include mdc-icon-button-theme.theme(map.get($tokens, tokens-mdc-icon-button.$prefix));
+    @include token-utils.create-token-values(
+        tokens-mdc-icon-button.$prefix, map.get($tokens, tokens-mdc-icon-button.$prefix));
     @include token-utils.create-token-values(
         tokens-mat-icon-button.$prefix, map.get($tokens, tokens-mat-icon-button.$prefix));
   }

package/button/index.d.ts

@@ -210,6 +210,13 @@ export declare class MatFabButton extends MatButtonBase {
 
 /** Default FAB options that can be overridden. */
 export declare interface MatFabDefaultOptions {
+    /**
+     * Default theme color of the button. This API is supported in M2 themes
+     * only, it has no effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants
+     */
     color?: ThemePalette;
 }
 

package/card/_card-theme.scss

@@ -8,8 +8,6 @@
 @use '../core/tokens/m2/mat/card' as tokens-mat-card;
 @use '../core/tokens/m2/mdc/elevated-card' as tokens-mdc-elevated-card;
 @use '../core/tokens/m2/mdc/outlined-card' as tokens-mdc-outlined-card;
-@use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
-@use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
@@ -17,8 +15,10 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-elevated-card-theme.theme(tokens-mdc-elevated-card.get-unthemable-tokens());
-      @include mdc-outlined-card-theme.theme(tokens-mdc-outlined-card.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+          tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+          tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-unthemable-tokens());
       @include token-utils.create-token-values(
           tokens-mat-card.$prefix, tokens-mat-card.get-unthemable-tokens());
     }
@@ -30,23 +30,13 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
-    $mdc-elevated-card-color-tokens: token-utils.resolve-elevation(
-        tokens-mdc-elevated-card.get-color-tokens($theme),
-        container-elevation,
-        container-shadow-color
-    );
-    $mdc-outlined-card-color-tokens: token-utils.resolve-elevation(
-        tokens-mdc-outlined-card.get-color-tokens($theme),
-        container-elevation,
-        container-shadow-color,
-    );
-    $mat-card-color-tokens: tokens-mat-card.get-color-tokens($theme);
-
-    // Add values for card tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-elevated-card-theme.theme($mdc-elevated-card-color-tokens);
-      @include mdc-outlined-card-theme.theme($mdc-outlined-card-color-tokens);
-      @include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-color-tokens);
+      @include token-utils.create-token-values(tokens-mdc-elevated-card.$prefix,
+        tokens-mdc-elevated-card.get-color-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-card.$prefix,
+        tokens-mdc-outlined-card.get-color-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-card.$prefix,
+        tokens-mat-card.get-color-tokens($theme));
     }
   }
 }
@@ -56,16 +46,13 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
-    $mdc-elevated-card-typography-tokens: tokens-mdc-elevated-card.get-typography-tokens($theme);
-    $mdc-outlined-card-typography-tokens: tokens-mdc-outlined-card.get-typography-tokens($theme);
-    $mat-card-typography-tokens: tokens-mat-card.get-typography-tokens($theme);
-
-    // Add values for card tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-elevated-card-theme.theme($mdc-elevated-card-typography-tokens);
-      @include mdc-outlined-card-theme.theme($mdc-outlined-card-typography-tokens);
       @include token-utils.create-token-values(
-          tokens-mat-card.$prefix, $mat-card-typography-tokens);
+        tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-card.$prefix, tokens-mat-card.get-typography-tokens($theme));
     }
   }
 }
@@ -75,15 +62,13 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    $mdc-elevated-card-density-tokens: tokens-mdc-elevated-card.get-density-tokens($theme);
-    $mdc-outlined-card-density-tokens: tokens-mdc-outlined-card.get-density-tokens($theme);
-    $mat-card-density-tokens: tokens-mat-card.get-density-tokens($theme);
-
-    // Add values for card tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-elevated-card-theme.theme($mdc-elevated-card-density-tokens);
-      @include mdc-outlined-card-theme.theme($mdc-outlined-card-density-tokens);
-      @include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-density-tokens);
+      @include token-utils.create-token-values(tokens-mdc-elevated-card.$prefix,
+        tokens-mdc-elevated-card.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-card.$prefix,
+        tokens-mdc-outlined-card.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-card.$prefix,
+        tokens-mat-card.get-density-tokens($theme));
     }
   }
 }
@@ -121,22 +106,10 @@
   @include validation.selector-defined(
       'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
-    $elevated-card-tokens: map.get($tokens, tokens-mdc-elevated-card.$prefix);
-    // Work around a bug in MDC where the elevation is not resolved to an actual shadow value.
-    $elevated-card-tokens: token-utils.resolve-elevation(
-        $elevated-card-tokens,
-        container-elevation,
-        container-shadow-color
-    );
-    $outlined-card-tokens: map.get($tokens, tokens-mdc-outlined-card.$prefix);
-    // Work around a bug in MDC where the elevation is not resolved to an actual shadow value.
-    $outlined-card-tokens: token-utils.resolve-elevation(
-        $outlined-card-tokens,
-        container-elevation,
-        container-shadow-color
-    );
-    @include mdc-elevated-card-theme.theme($elevated-card-tokens);
-    @include mdc-outlined-card-theme.theme($outlined-card-tokens);
+    @include token-utils.create-token-values(
+        tokens-mdc-elevated-card.$prefix, map.get($tokens, tokens-mdc-elevated-card.$prefix));
+    @include token-utils.create-token-values(
+        tokens-mdc-outlined-card.$prefix, map.get($tokens, tokens-mdc-outlined-card.$prefix));
     @include token-utils.create-token-values(
         tokens-mat-card.$prefix, map.get($tokens, tokens-mat-card.$prefix));
   }

package/checkbox/index.d.ts

@@ -218,8 +218,10 @@ export declare type MatCheckboxClickAction = 'noop' | 'check' | 'check-indetermi
 /** Default `mat-checkbox` options that can be overridden. */
 export declare interface MatCheckboxDefaultOptions {
     /**
-     * Default theme color palette to be used for checkboxes. This API is supported in M2 themes
-     * only, it has no effect in M3 themes. For information on applying color variants in M3, see
+     * Default theme color of the checkbox. This API is supported in M2 themes
+     * only, it has no effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
      * https://material.angular.io/guide/theming#using-component-color-variants
      */
     color?: ThemePalette;

package/chips/_chips-theme.scss

@@ -1,5 +1,4 @@
 @use 'sass:color';
-@use '@material/chips/chip-theme' as mdc-chip-theme;
 @use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
 @use '../core/tokens/m2/mat/chip' as tokens-mat-chip;
 @use '../core/tokens/token-utils';
@@ -17,9 +16,10 @@
   }
   @else {
     .mat-mdc-standard-chip {
-      @include mdc-chip-theme.theme(tokens-mdc-chip.get-unthemable-tokens());
       @include token-utils.create-token-values(
-          tokens-mat-chip.$prefix, tokens-mat-chip.get-unthemable-tokens());
+        tokens-mdc-chip.$prefix, tokens-mdc-chip.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-chip.$prefix, tokens-mat-chip.get-unthemable-tokens());
     }
   }
 }
@@ -35,32 +35,32 @@
   }
   @else {
     .mat-mdc-standard-chip {
-      $default-color-tokens: tokens-mdc-chip.get-color-tokens($theme);
-      @include mdc-chip-theme.theme($default-color-tokens);
       @include token-utils.create-token-values(
-          tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme));
+        tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme));
 
       &.mat-mdc-chip-selected,
       &.mat-mdc-chip-highlighted {
         &.mat-primary {
-          $primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary);
-          @include mdc-chip-theme.theme($primary-color-tokens);
           @include token-utils.create-token-values(
-              tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, primary));
+            tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme, primary));
+          @include token-utils.create-token-values(
+            tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, primary));
         }
 
         &.mat-accent {
-          $accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent);
-          @include mdc-chip-theme.theme($accent-color-tokens);
           @include token-utils.create-token-values(
-              tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, accent));
+            tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme, accent));
+          @include token-utils.create-token-values(
+            tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, accent));
         }
 
         &.mat-warn {
-          $warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn);
-          @include mdc-chip-theme.theme($warn-color-tokens);
           @include token-utils.create-token-values(
-              tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, warn));
+            tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme, warn));
+          @include token-utils.create-token-values(
+            tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, warn));
         }
       }
     }
@@ -74,12 +74,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
-    $typography-tokens: tokens-mdc-chip.get-typography-tokens($theme);
-
     .mat-mdc-standard-chip {
-      @include mdc-chip-theme.theme($typography-tokens);
       @include token-utils.create-token-values(
-          tokens-mat-chip.$prefix, tokens-mat-chip.get-typography-tokens($theme));
+        tokens-mdc-chip.$prefix, tokens-mdc-chip.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-chip.$prefix, tokens-mat-chip.get-typography-tokens($theme));
     }
   }
 }
@@ -91,12 +90,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    $density-tokens: tokens-mdc-chip.get-density-tokens($theme);
-
     .mat-mdc-chip.mat-mdc-standard-chip {
-      @include mdc-chip-theme.theme($density-tokens);
       @include token-utils.create-token-values(
-          tokens-mat-chip.$prefix, tokens-mat-chip.get-density-tokens($theme));
+        tokens-mdc-chip.$prefix, tokens-mdc-chip.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-chip.$prefix, tokens-mat-chip.get-density-tokens($theme));
     }
   }
 }
@@ -141,6 +139,6 @@
       'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mdc-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-chip.$prefix, $options...);
   $mat-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mat-chip.$prefix, $options...);
-  @include mdc-chip-theme.theme($mdc-chip-tokens);
+  @include token-utils.create-token-values(tokens-mdc-chip.$prefix, $mdc-chip-tokens);
   @include token-utils.create-token-values(tokens-mat-chip.$prefix, $mat-chip-tokens);
 }

package/core/m2/_typography.scss

@@ -1,8 +1,11 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use 'sass:string';
 @use '@material/typography' as mdc-typography;
 
+$_default-font-family: string.unquote('Roboto, sans-serif');
+
 /// Defines a typography level from the Material Design spec.
 /// @param {String} $font-size The font-size for this level.
 /// @param {String | Number} $line-height The line-height for this level.
@@ -123,7 +126,7 @@
 @function define-typography-config(
   // TODO(mmalerba): rename this function to define-typography-config,
   //  and create a predefined px based config for people that need it.
-  $font-family: mdc-typography.$font-family,
+  $font-family: $_default-font-family,
   $headline-1: null,
   $headline-2: null,
   $headline-3: null,
@@ -180,7 +183,7 @@
 @function define-rem-typography-config(
   // TODO(mmalerba): rename this function to define-typography-config,
   //  and create a predefined px based config for people that need it.
-  $font-family: mdc-typography.$font-family,
+  $font-family: $_default-font-family,
   $headline-1: null,
   $headline-2: null,
   $headline-3: null,

package/core/mdc-helpers/_mdc-helpers.scss

@@ -1,8 +1,8 @@
 // TODO(mmalerba): this file should be split into separate cohesive partials for things like
 //  "theming", "typography", "core".
+@use 'sass:string';
 @use '../typography/typography';
 @use '@material/feature-targeting' as mdc-feature-targeting;
-@use '@material/typography' as mdc-typography;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/css' as mdc-theme-css;
 
@@ -32,7 +32,7 @@ $mdc-typography-styles-query: typography;
 @function private-fallback-typography-from-mdc() {
   // This is very close to what we have in `define-typography-config`, but we can't use it here,
   // because it would cause a circular import and moving it here doesn't make sense.
-  $font-family: mdc-typography.$font-family;
+  $font-family: string.unquote('Roboto, sans-serif');
   @return (
     font-family: $font-family,
     headline-1: typography.typography-config-level-from-mdc(headline1, $font-family),

package/core/style/_elevation.scss

@@ -70,6 +70,11 @@ $prefix: 'mat-elevation-z';
   }
 }
 
+// Gets the box shadow value for a specific elevation.
+@function get-box-shadow($z-value, $shadow-color: black) {
+  @return mdc-elevation.elevation-box-shadow($z-value, $shadow-color);
+}
+
 // Returns a string that can be used as the value for a transition property for elevation.
 // Calling this function directly is useful in situations where a component needs to transition
 // more than one property.

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.