@angular/material 18.1.0-next.4 → 18.1.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/_button-base.scss

@@ -1,8 +1,5 @@
-@use '@material/touch-target' as mdc-touch-target;
-
 @use '../core/tokens/token-utils';
 @use '../core/style/layout-common';
-@use '../core/mdc-helpers/mdc-helpers';
 
 // Adds styles necessary to provide stateful interactions with the button. This includes providing
 // content for the state container's ::before and ::after so that they can be given a background
@@ -126,9 +123,19 @@
   // the button itself would require us to wrap it in another div. See:
   // https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#making-buttons-accessible
   .mat-mdc-button-touch-target {
-    @include mdc-touch-target.touch-target(
-      $set-width: $is-square,
-      $query: mdc-helpers.$mdc-base-styles-query);
+    position: absolute;
+    top: 50%;
+    height: 48px;
+
+    @if $is-square {
+      left: 50%;
+      width: 48px;
+      transform: translate(-50%, -50%);
+    } @else {
+      left: 0;
+      right: 0;
+      transform: translateY(-50%);
+    }
 
     @include token-utils.use-tokens($prefix, $slots) {
       @include token-utils.create-token-slot(display, touch-target-display);

package/button/_button-theme.scss

@@ -1,8 +1,3 @@
-@use '@material/button/button-text-theme' as mdc-button-text-theme;
-@use '@material/button/button-filled-theme' as mdc-button-filled-theme;
-@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
-@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
-
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
@@ -29,7 +24,7 @@
     tokens-mat-text-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-text-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-tokens);
 }
 
@@ -44,7 +39,7 @@
     tokens-mat-filled-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-filled-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-filled-button.$prefix, $mat-tokens);
 }
 
@@ -59,7 +54,7 @@
     tokens-mat-protected-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-protected-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-protected-button.$prefix, $mat-tokens);
 }
 
@@ -74,7 +69,7 @@
     tokens-mat-outlined-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-outlined-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
 }
 
@@ -97,10 +92,14 @@
       token-utils.get-tokens-for($tokens, tokens-mat-filled-button.$prefix, $options...);
   $mat-outlined-button-tokens:
       token-utils.get-tokens-for($tokens, tokens-mat-outlined-button.$prefix, $options...);
-  @include mdc-button-text-theme.theme($mdc-text-button-tokens);
-  @include mdc-button-protected-theme.theme($mdc-protected-button-tokens);
-  @include mdc-button-filled-theme.theme($mdc-filled-button-tokens);
-  @include mdc-button-outlined-theme.theme($mdc-outlined-button-tokens);
+
+  @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-text-button-tokens);
+  @include token-utils.create-token-values(
+      tokens-mdc-protected-button.$prefix, $mdc-protected-button-tokens);
+  @include token-utils.create-token-values(
+      tokens-mdc-filled-button.$prefix, $mdc-filled-button-tokens);
+  @include token-utils.create-token-values(
+    tokens-mdc-outlined-button.$prefix, $mdc-outlined-button-tokens);
   @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-text-button-tokens);
   @include token-utils.create-token-values(
       tokens-mat-protected-button.$prefix, $mat-protected-button-tokens);
@@ -119,13 +118,13 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-button-text-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
         tokens-mdc-text-button.get-unthemable-tokens());
-      @include mdc-button-filled-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-unthemable-tokens());
-      @include mdc-button-protected-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-unthemable-tokens());
-      @include mdc-button-outlined-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
         tokens-mdc-outlined-button.get-unthemable-tokens());
 
       @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
@@ -223,14 +222,14 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-button-text-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
         tokens-mdc-text-button.get-typography-tokens($theme));
-      @include mdc-button-filled-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-typography-tokens($theme));
-      @include mdc-button-outlined-theme.theme(
-        tokens-mdc-outlined-button.get-typography-tokens($theme));
-      @include mdc-button-protected-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
+        tokens-mdc-outlined-button.get-typography-tokens($theme));
 
       @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-typography-tokens($theme));
@@ -252,14 +251,14 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-button-text-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
         tokens-mdc-text-button.get-density-tokens($theme));
-      @include mdc-button-filled-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-density-tokens($theme));
-      @include mdc-button-outlined-theme.theme(
-        tokens-mdc-outlined-button.get-density-tokens($theme));
-      @include mdc-button-protected-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
+        tokens-mdc-outlined-button.get-density-tokens($theme));
 
       @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-density-tokens($theme));

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.