@angular/material 20.0.2 → 20.1.0-next.0

package/radio/_m2-radio.scss

@@ -1,10 +1,8 @@
 @use 'sass:map';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-@use '../core/m2/palette' as m2-palette;
-@use '../core/m2/theming' as m2-theming;
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -20,26 +18,28 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: accent) {
+@function get-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $palette-color: inspection.get-theme-color($theme, $palette-name, default);
-  $icon-color: m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
 
   @return (
-    radio-checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default),
-    radio-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
-    radio-disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
-    radio-disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
-    radio-label-text-color: inspection.get-theme-color($theme, foreground, text),
-    radio-ripple-color: inspection.get-theme-color($theme, foreground, base),
-    radio-selected-focus-icon-color: $palette-color,
-    radio-selected-hover-icon-color: $palette-color,
-    radio-selected-icon-color: $palette-color,
-    radio-selected-pressed-icon-color: $palette-color,
-    radio-unselected-focus-icon-color: $icon-color,
-    radio-unselected-hover-icon-color: $icon-color,
-    radio-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
-    radio-unselected-pressed-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
+    radio-checked-ripple-color: map.get($system, secondary),
+    radio-disabled-label-color: $disabled,
+    radio-disabled-selected-icon-color: map.get($system, on-surface),
+    radio-disabled-unselected-icon-color: map.get($system, on-surface),
+    radio-label-text-color: map.get($system, on-surface),
+    radio-ripple-color: map.get($system, on-surface),
+    radio-selected-focus-icon-color: map.get($system, secondary),
+    radio-selected-hover-icon-color: map.get($system, secondary),
+    radio-selected-icon-color: map.get($system, secondary),
+    radio-selected-pressed-icon-color: map.get($system, secondary),
+    radio-unselected-focus-icon-color: map.get($system, on-surface),
+    radio-unselected-hover-icon-color: map.get($system, on-surface),
+    radio-unselected-icon-color: map.get($system, on-surface-variant),
+    radio-unselected-pressed-icon-color: map.get($system, on-surface),
   );
 }
 
@@ -69,14 +69,3 @@
     radio-touch-target-display: if($scale < -1, none, block)
   );
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-    get-unthemable-tokens(),
-    get-color-tokens(m2-utils.$placeholder-color-config),
-    get-typography-tokens(m2-utils.$placeholder-typography-config),
-    get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/radio/_radio-theme.scss

@@ -30,15 +30,18 @@
   } @else {
     .mat-mdc-radio-button {
       &.mat-primary {
-        @include token-utils.create-token-values-mixed(m2-radio.get-color-tokens($theme, primary));
+        @include token-utils.create-token-values-mixed(
+            m2-radio.get-color-tokens($theme, primary));
       }
 
       &.mat-accent {
-        @include token-utils.create-token-values-mixed(m2-radio.get-color-tokens($theme));
+        @include token-utils.create-token-values-mixed(
+            m2-radio.get-color-tokens($theme, secondary));
       }
 
       &.mat-warn {
-        @include token-utils.create-token-values-mixed(m2-radio.get-color-tokens($theme, warn));
+        @include token-utils.create-token-values-mixed(
+            m2-radio.get-color-tokens($theme, error));
       }
     }
   }

package/schematics/ng-add/index.js

@@ -19,7 +19,7 @@ const package_config_1 = require("./package-config");
  * Note that the fallback version range does not use caret, but tilde because that is
  * the default for Angular framework dependencies in CLI projects.
  */
-const fallbackMaterialVersionRange = `~20.0.2`;
+const fallbackMaterialVersionRange = `~20.1.0-next.0`;
 /**
  * Schematic factory entry-point for the `ng-add` schematic. The ng-add schematic will be
  * automatically executed if developers run `ng add @angular/material`.
@@ -34,7 +34,7 @@ function default_1(options) {
         // have the same version tag if possible.
         const ngCoreVersionTag = (0, package_config_1.getPackageVersionFromPackageJson)(host, '@angular/core');
         const materialVersionRange = (0, package_config_1.getPackageVersionFromPackageJson)(host, '@angular/material');
-        const angularDependencyVersion = ngCoreVersionTag || `^20.0.0 || ^21.0.0`;
+        const angularDependencyVersion = ngCoreVersionTag || `^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0`;
         // The CLI inserts `@angular/material` into the `package.json` before this schematic runs.
         // This means that we do not need to insert Angular Material into `package.json` files again.
         // In some cases though, it could happen that this schematic runs outside of the CLI `ng add`

package/select/_m2-select.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
 @use '../core/theming/theming';
 @use '../core/style/elevation';
-@use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -15,30 +15,18 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme, $palette-name: primary) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  $on-surface: if($is-dark, #fff, #000);
-  $text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, text, 1));
-  $disabled-text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, disabled-text, 1));
-  $icon-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, divider, 1));
+  $system: m2-utils.get-system($theme);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
 
   @return (
-    select-panel-background-color: inspection.get-theme-color($theme, background, card),
-    select-enabled-trigger-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.87),
-    select-disabled-trigger-text-color:
-      sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
-    select-placeholder-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
-    select-enabled-arrow-color: sass-utils.safe-color-change($icon-color-base, $alpha: 0.54),
-    select-disabled-arrow-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.38),
-    select-focused-arrow-color: sass-utils.safe-color-change(
-      inspection.get-theme-color($theme, $palette-name, default), $alpha: 0.87),
-    select-invalid-arrow-color: sass-utils.safe-color-change(
-      inspection.get-theme-color($theme, warn, default), $alpha: 0.87),
+    select-panel-background-color: map.get($system, surface),
+    select-enabled-trigger-text-color: map.get($system, on-surface),
+    select-disabled-trigger-text-color: $disabled,
+    select-placeholder-text-color: map.get($system, on-surface-variant),
+    select-enabled-arrow-color: map.get($system, on-surface-variant),
+    select-disabled-arrow-color: $disabled,
+    select-focused-arrow-color: inspection.get-theme-color($theme, $palette-name, default, 0.87),
+    select-invalid-arrow-color: inspection.get-theme-color($theme, warn, default, 0.87),
   );
 }
 
@@ -65,14 +53,3 @@
     ), $density-scale),
   );
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/select/testing/index.d.ts

@@ -1,16 +1,15 @@
-import { BaseHarnessFilters, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
-import { O as OptionHarnessFilters, M as MatOptionHarness } from '../../option-harness.d-IqsW95GR.js';
-import { OptgroupHarnessFilters, MatOptgroupHarness } from '../../core/testing/index.js';
-import { MatFormFieldControlHarness } from '../../form-field/testing/control/index.js';
+import { ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
+import { OptionHarnessFilters, MatOptionHarness, OptgroupHarnessFilters, MatOptgroupHarness } from '@angular/material/core/testing';
+import { MatFormFieldControlHarnessFilters, MatFormFieldControlHarnessBase } from '@angular/material/form-field/testing/control';
 
 /** A set of criteria that can be used to filter a list of `MatSelectHarness` instances. */
-interface SelectHarnessFilters extends BaseHarnessFilters {
+interface SelectHarnessFilters extends MatFormFieldControlHarnessFilters {
     /** Only find instances which match the given disabled state. */
     disabled?: boolean;
 }
 
 /** Harness for interacting with a mat-select in tests. */
-declare class MatSelectHarness extends MatFormFieldControlHarness {
+declare class MatSelectHarness extends MatFormFieldControlHarnessBase {
     static hostSelector: string;
     private _prefix;
     private _optionClass;

package/sidenav/_m2-sidenav.scss

@@ -1,9 +1,10 @@
 @use 'sass:color';
+@use 'sass:map';
 @use 'sass:meta';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
-@use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -19,18 +20,18 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) ==  dark;
   $scrim-opacity: 0.6;
-  $scrim-color: sass-utils.safe-color-change(
-      inspection.get-theme-color($theme, background, card), $alpha: $scrim-opacity);
+  $scrim-color: m3-utils.color-with-opacity(map.get($system, surface), 60%);
   $fallback-scrim-color: if($is-dark, rgba(#fff, $scrim-opacity), rgba(#000, $scrim-opacity));
 
   @return (
-    sidenav-container-divider-color: inspection.get-theme-color($theme, foreground, divider),
-    sidenav-container-background-color: inspection.get-theme-color($theme, background, dialog),
-    sidenav-container-text-color: inspection.get-theme-color($theme, foreground, text),
-    sidenav-content-background-color: inspection.get-theme-color($theme, background, background),
-    sidenav-content-text-color: inspection.get-theme-color($theme, foreground, text),
+    sidenav-container-divider-color: map.get($system, outline),
+    sidenav-container-background-color: map.get($system, surface),
+    sidenav-container-text-color: map.get($system, on-surface),
+    sidenav-content-background-color: map.get($system, background),
+    sidenav-content-text-color: map.get($system, on-surface),
 
     // We use invert() here to have the darken the background color expected to be used.
     // If the background is light, we use a dark backdrop. If the background is dark, we
@@ -50,14 +51,3 @@
 @function get-density-tokens($theme) {
   @return ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/slide-toggle/_m2-slide-toggle.scss

@@ -1,13 +1,14 @@
 @use '../core/style/elevation';
-@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
 @use '../core/theming/theming';
-@use '../core/tokens/m2-utils';
 @use 'sass:map';
+@use '../core/tokens/m2-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
+@function get-unthemable-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   // visible-track-opacity and hidden-track-opacity:
   // The hidden and visible track represent whichever track is visible or
   // hidden in the ui. This could be the .mdc-switch__track :before or
@@ -30,13 +31,14 @@
     slide-toggle-hidden-track-opacity: 1,
     slide-toggle-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1),
     slide-toggle-pressed-handle-size: 20px,
-    slide-toggle-selected-focus-state-layer-opacity: 0.12,
+    slide-toggle-selected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     slide-toggle-selected-handle-horizontal-margin: 0,
     slide-toggle-selected-handle-size: 20px,
-    slide-toggle-selected-hover-state-layer-opacity: 0.04,
+    slide-toggle-selected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     slide-toggle-selected-icon-size: 18px,
     slide-toggle-selected-pressed-handle-horizontal-margin: 0,
-    slide-toggle-selected-pressed-state-layer-opacity: 0.1,
+    slide-toggle-selected-pressed-state-layer-opacity:
+        map.get($system, pressed-state-layer-opacity),
     slide-toggle-selected-track-outline-color: transparent,
     slide-toggle-selected-track-outline-width: 1px,
     slide-toggle-selected-with-icon-handle-horizontal-margin: 0,
@@ -45,10 +47,10 @@
     slide-toggle-track-outline-width: 1px,
     slide-toggle-track-shape: 7px,
     slide-toggle-track-width: 36px,
-    slide-toggle-unselected-focus-state-layer-opacity: 0.12,
+    slide-toggle-unselected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     slide-toggle-unselected-handle-horizontal-margin: 0,
     slide-toggle-unselected-handle-size: 20px,
-    slide-toggle-unselected-hover-state-layer-opacity: 0.04,
+    slide-toggle-unselected-hover-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     slide-toggle-unselected-icon-size: 18px,
     slide-toggle-unselected-pressed-handle-horizontal-margin: 0,
     slide-toggle-unselected-pressed-state-layer-opacity: 0.1,
@@ -61,6 +63,8 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   $is-dark: inspection.get-theme-type($theme) == dark;
   $on-surface: if($is-dark, #f5f5f5, #424242);
   $hairline: if($is-dark, #616161, #e0e0e0);
@@ -86,7 +90,7 @@
         slide-toggle-disabled-unselected-track-color: $on-surface,
         slide-toggle-handle-elevation-shadow: elevation.get-box-shadow(1),
         slide-toggle-handle-surface-color: #fff,
-        slide-toggle-label-text-color: inspection.get-theme-color($theme, foreground, text),
+        slide-toggle-label-text-color: map.get($system, on-surface),
         slide-toggle-selected-icon-color: $icon-color,
         slide-toggle-unselected-hover-handle-color: $on-surface-state-content,
         slide-toggle-unselected-focus-handle-color: $on-surface-state-content,
@@ -153,14 +157,3 @@
     ), $scale)
   );
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-    get-unthemable-tokens(),
-    get-color-tokens(m2-utils.$placeholder-color-config),
-    get-typography-tokens(m2-utils.$placeholder-typography-config),
-    get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/slide-toggle/_slide-toggle-theme.scss

@@ -16,10 +16,11 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       // TODO: See if this can be removed
-      @include token-utils.create-token-values-mixed(m2-slide-toggle.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-slide-toggle.get-unthemable-tokens($theme));
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values-mixed(m2-slide-toggle.get-unthemable-tokens());
+        @include token-utils.create-token-values-mixed(
+            m2-slide-toggle.get-unthemable-tokens($theme));
       }
     }
   }

package/slider/_m2-slider.scss

@@ -1,6 +1,4 @@
 @use 'sass:map';
-@use '../core/tokens/m2-utils';
-@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
 
@@ -35,20 +33,20 @@
 @function get-color-tokens($theme) {
   $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary);
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $elevation: inspection.get-theme-color($theme, foreground, elevation);
   $on-surface: if($is-dark, #fff, #000);
 
   @return map.merge(
     $theme-color-tokens,
     (
-      slider-disabled-active-track-color: $on-surface,
-      slider-disabled-handle-color: $on-surface,
-      slider-disabled-inactive-track-color: $on-surface,
+      slider-disabled-active-track-color: inspection.get-theme-color($theme, system, on-surface),
+      slider-disabled-handle-color: inspection.get-theme-color($theme, system, on-surface),
+      slider-disabled-inactive-track-color: inspection.get-theme-color($theme, system, on-surface),
       slider-label-container-color: $on-surface,
       slider-label-label-text-color: if($is-dark, #000, #fff),
       slider-value-indicator-opacity: if($is-dark, 0.9, 0.6),
       slider-with-overlap-handle-outline-color: #fff,
-      slider-with-tick-marks-disabled-container-color: $on-surface,
+      slider-with-tick-marks-disabled-container-color:
+          inspection.get-theme-color($theme, system, on-surface),
     ),
   );
 }
@@ -92,14 +90,3 @@
 @function get-density-tokens($theme) {
   @return ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-    get-unthemable-tokens(),
-    get-color-tokens(m2-utils.$placeholder-color-config),
-    get-typography-tokens(m2-utils.$placeholder-typography-config),
-    get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/snack-bar/_m2-snack-bar.scss

@@ -1,8 +1,6 @@
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-@use 'sass:meta';
-@use 'sass:color';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -15,15 +13,12 @@
 // 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;
-  $surface: inspection.get-theme-color($theme, background, card);
+  $system: m2-utils.get-system($theme);
+  $surface: inspection.get-theme-color($theme, system, surface);
 
   @return (
-    snack-bar-container-color: if(
-        meta.type-of($surface) == color,
-        color.mix(if($is-dark, #fff, #000), $surface, 80%),
-        $surface),
-    snack-bar-supporting-text-color:
-        if(meta.type-of($surface) == color, rgba($surface, 0.87), $surface),
+    snack-bar-container-color: map.get($system, inverse-surface),
+    snack-bar-supporting-text-color: map.get($system, inverse-on-surface),
     snack-bar-button-color:
       if(
         $is-dark,
@@ -48,14 +43,3 @@
 @function get-density-tokens($theme) {
   @return ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/sort/_m2-sort.scss

@@ -1,8 +1,4 @@
-@use 'sass:color';
-@use 'sass:meta';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -12,26 +8,8 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $table-background: inspection.get-theme-color($theme, background, card);
-  $text-color: inspection.get-theme-color($theme, foreground, secondary-text);
-  $arrow-color: null;
-
-  // Because the arrow is made up of multiple elements that are stacked on top of each other,
-  // we can't use the semi-transparent color from the theme directly. If the value is a color
-  // *type*, we convert it into a solid color by taking the opacity from the rgba value and
-  // using the value to determine the percentage of the background to put into foreground
-  // when mixing the colors together. Otherwise, if it resolves to something different
-  // (e.g. it resolves to a CSS variable), we use the color directly.
-  @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) {
-    $text-opacity: color.opacity($text-color);
-    $arrow-color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
-  }
-  @else {
-    $arrow-color: $text-color;
-  }
-
   @return (
-    sort-arrow-color: $arrow-color,
+    sort-arrow-color: inspection.get-theme-color($theme, system, on-surface),
   );
 }
 
@@ -44,14 +22,3 @@
 @function get-density-tokens($theme) {
   @return ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/stepper/_m2-stepper.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -15,19 +15,19 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return map.merge(private-get-color-palette-color-tokens($theme, primary), (
-    stepper-container-color: inspection.get-theme-color($theme, background, card),
-    stepper-line-color: inspection.get-theme-color($theme, foreground, divider),
-    stepper-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    stepper-header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    stepper-header-label-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    stepper-header-optional-label-text-color: inspection.get-theme-color(
-        $theme, foreground, secondary-text),
-    stepper-header-selected-state-label-text-color:
-        inspection.get-theme-color($theme, foreground, text),
+    stepper-container-color: map.get($system, surface),
+    stepper-line-color: map.get($system, outline),
+    stepper-header-hover-state-layer-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+    stepper-header-focus-state-layer-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
+    stepper-header-label-text-color: map.get($system, on-surface-variant),
+    stepper-header-optional-label-text-color: map.get($system, on-surface-variant),
+    stepper-header-selected-state-label-text-color: map.get($system, on-surface),
     stepper-header-error-state-label-text-color: inspection.get-theme-color($theme, warn, text),
-    stepper-header-icon-background-color:
-        inspection.get-theme-color($theme, foreground, secondary-text),
+    stepper-header-icon-background-color: map.get($system, on-surface-variant),
     stepper-header-error-state-icon-foreground-color:
         inspection.get-theme-color($theme, warn, text),
     stepper-header-error-state-icon-background-color: transparent,
@@ -67,28 +67,17 @@
 }
 
 // Generates the tokens used to theme the stepper based on a palette.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $active-state-foreground: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $active-state-background: inspection.get-theme-color($theme, $palette-name);
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   @return (
-    stepper-header-icon-foreground-color: $active-state-foreground,
-    stepper-header-selected-state-icon-background-color: $active-state-background,
-    stepper-header-selected-state-icon-foreground-color: $active-state-foreground,
-    stepper-header-done-state-icon-background-color: $active-state-background,
-    stepper-header-done-state-icon-foreground-color: $active-state-foreground,
-    stepper-header-edit-state-icon-background-color: $active-state-background,
-    stepper-header-edit-state-icon-foreground-color: $active-state-foreground,
-  );
-}
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
+    stepper-header-icon-foreground-color: map.get($system, on-primary),
+    stepper-header-selected-state-icon-background-color: map.get($system, primary),
+    stepper-header-selected-state-icon-foreground-color: map.get($system, on-primary),
+    stepper-header-done-state-icon-background-color: map.get($system, primary),
+    stepper-header-done-state-icon-foreground-color: map.get($system, on-primary),
+    stepper-header-edit-state-icon-background-color: map.get($system, primary),
+    stepper-header-edit-state-icon-foreground-color: map.get($system, on-primary),
   );
 }

package/stepper/_m3-stepper.scss

@@ -31,9 +31,9 @@ $prefix: (mat, stepper);
       stepper-header-error-state-icon-foreground-color: map.get($system, error),
       stepper-header-error-state-label-text-color: map.get($system, error),
       stepper-header-focus-state-layer-color: m3-utils.color-with-opacity(
-          map.get($system, inverse-surface), map.get($system, focus-state-layer-opacity)),
+          map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
       stepper-header-hover-state-layer-color: m3-utils.color-with-opacity(
-          map.get($system, inverse-surface), map.get($system, hover-state-layer-opacity)),
+          map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
       stepper-header-icon-background-color: map.get($system, on-surface-variant),
       stepper-header-icon-foreground-color: map.get($system, surface),
       stepper-header-label-text-color: map.get($system, on-surface-variant),

package/stepper/_stepper-theme.scss

@@ -30,12 +30,12 @@
 
       .mat-step-header.mat-accent {
         @include token-utils.create-token-values-mixed(
-          m2-stepper.private-get-color-palette-color-tokens($theme, accent));
+          m2-stepper.private-get-color-palette-color-tokens($theme, secondary));
       }
 
       .mat-step-header.mat-warn {
         @include token-utils.create-token-values-mixed(
-          m2-stepper.private-get-color-palette-color-tokens($theme, warn));
+          m2-stepper.private-get-color-palette-color-tokens($theme, error));
       }
     }
   }