@angular/material 20.0.0-rc.1 → 20.0.0-rc.2

package/sort/_m3-sort.scss

@@ -1,18 +1,20 @@
 @use 'sass:map';
 @use '../core/tokens/m3-utils';
+@use '../core/tokens/m3';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, sort);
 
 /// Generates custom tokens for the mat-sort.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-sort
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    arrow-color: map.get($systems, md-sys-color, on-surface),
-  );
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
 
-  @return m3-utils.namespace($prefix, $tokens, $token-slots);
+  @return (
+    base: (),
+    color: (
+      sort-arrow-color: map.get($system, on-surface),
+    ),
+    typography: (),
+    density: (),
+  );
 }

package/sort/_sort-theme.scss

@@ -1,48 +1,45 @@
 @use 'sass:map';
 @use './m2-sort';
+@use './m3-sort';
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-sort.get-tokens($theme), base));
   } @else {
   }
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include token-utils.create-token-values(map.get(m3-sort.get-tokens($theme), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-sort.$prefix, m2-sort.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-sort.get-color-tokens($theme));
     }
   }
 }
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(map.get(m3-sort.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-sort.$prefix, m2-sort.get-typography-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-sort.get-typography-tokens($theme));
     }
   }
 }
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    // There are no M3 density tokens for this component
+    @include token-utils.create-token-values(map.get(m3-sort.get-tokens($theme), density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-sort.$prefix, m2-sort.get-density-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-sort.get-density-tokens($theme));
     }
   }
 }
@@ -51,20 +48,23 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-sort.$prefix,
-      tokens: m2-sort.get-token-slots(),
+      namespace: sort,
+      tokens: token-utils.get-overrides(m3-sort.get-tokens(), sort)
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -79,15 +79,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
-  );
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-      m2-sort.$prefix,
-      map.get($tokens, m2-sort.$prefix)
-    );
-  }
-}

package/stepper/_m2-stepper.scss

@@ -4,47 +4,48 @@
 @use '../core/theming/inspection';
 @use '../core/style/sass-utils';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, stepper);
-
 // 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() {
   @return (
-    header-focus-state-layer-shape: 0,
-    header-hover-state-layer-shape: 0,
+    stepper-header-focus-state-layer-shape: 0,
+    stepper-header-hover-state-layer-shape: 0,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return map.merge(private-get-color-palette-color-tokens($theme, primary), (
-    container-color: inspection.get-theme-color($theme, background, card),
-    line-color: inspection.get-theme-color($theme, foreground, divider),
-    header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    header-label-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    header-optional-label-text-color: inspection.get-theme-color(
+    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),
-    header-selected-state-label-text-color: inspection.get-theme-color($theme, foreground, text),
-    header-error-state-label-text-color: inspection.get-theme-color($theme, warn, text),
-    header-icon-background-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    header-error-state-icon-foreground-color: inspection.get-theme-color($theme, warn, text),
-    header-error-state-icon-background-color: transparent,
+    stepper-header-selected-state-label-text-color:
+        inspection.get-theme-color($theme, foreground, text),
+    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-error-state-icon-foreground-color:
+        inspection.get-theme-color($theme, warn, text),
+    stepper-header-error-state-icon-background-color: transparent,
   ));
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    container-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    header-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    header-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    header-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
-    header-error-state-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    header-selected-state-label-text-size: inspection.get-theme-typography(
+    stepper-container-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    stepper-header-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    stepper-header-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    stepper-header-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
+    stepper-header-error-state-label-text-size:
+        inspection.get-theme-typography($theme, body-1, font-size),
+    stepper-header-selected-state-label-text-size: inspection.get-theme-typography(
         $theme, body-1, font-size),
-    header-selected-state-label-text-weight: inspection.get-theme-typography(
+    stepper-header-selected-state-label-text-weight: inspection.get-theme-typography(
         $theme, body-1, font-weight),
   );
 }
@@ -61,7 +62,7 @@ $prefix: (mat, stepper);
   );
 
   @return (
-    header-height: map.get($height-config, $scale),
+    stepper-header-height: map.get($height-config, $scale),
   );
 }
 
@@ -71,13 +72,13 @@ $prefix: (mat, stepper);
   $active-state-background: inspection.get-theme-color($theme, $palette-name);
 
   @return (
-    header-icon-foreground-color: $active-state-foreground,
-    header-selected-state-icon-background-color: $active-state-background,
-    header-selected-state-icon-foreground-color: $active-state-foreground,
-    header-done-state-icon-background-color: $active-state-background,
-    header-done-state-icon-foreground-color: $active-state-foreground,
-    header-edit-state-icon-background-color: $active-state-background,
-    header-edit-state-icon-foreground-color: $active-state-foreground,
+    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,
   );
 }
 

package/stepper/_m3-stepper.scss

@@ -1,102 +1,67 @@
 @use 'sass:map';
 @use 'sass:list';
-@use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/m3';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, stepper);
 
 /// Generates custom tokens for the mat-stepper.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-stepper
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    container-color: map.get($systems, md-sys-color, surface),
-    line-color: map.get($systems, md-sys-color, outline),
-    header-hover-state-layer-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, inverse-surface),
-      $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
-    ),
-    header-focus-state-layer-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, inverse-surface),
-      $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
-    ),
-    header-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    header-optional-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    header-selected-state-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    header-icon-background-color: map.get($systems, md-sys-color, on-surface-variant),
-    header-icon-foreground-color: map.get($systems, md-sys-color, surface),
-    header-edit-state-icon-background-color: map.get($systems, md-sys-color, primary),
-    header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
-    header-done-state-icon-background-color: map.get($systems, md-sys-color, primary),
-    header-done-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
-    header-error-state-label-text-color: map.get($systems, md-sys-color, error),
-    header-error-state-icon-foreground-color: map.get($systems, md-sys-color, error),
-    header-error-state-icon-background-color:
-      m3-utils.hardcode(transparent, $exclude-hardcoded),
-    container-text-font: map.get($systems, md-sys-typescale, body-medium-font),
-    header-label-text-font: map.get($systems, md-sys-typescale, title-small-font),
-    header-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
-    header-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
-    header-error-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
-    header-focus-state-layer-shape: map.get($systems, md-sys-shape, corner-medium),
-    header-hover-state-layer-shape: map.get($systems, md-sys-shape, corner-medium),
-    header-selected-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
-    header-selected-state-label-text-weight: map.get(
-        $systems, md-sys-typescale, title-small-weight),
-    header-selected-state-icon-background-color: map.get($systems, md-sys-color, primary),
-    header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
-  );
+/// @param {String} $color-variant The color variant to use for the component
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  }
 
-  $variant-tokens: (
-    // Color variants
-    primary: (
-      header-edit-state-icon-background-color: map.get($systems, md-sys-color, primary),
-      header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
-      header-done-state-icon-background-color: map.get($systems, md-sys-color, primary),
-      header-done-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
-      header-selected-state-icon-background-color: map.get($systems, md-sys-color, primary),
-      header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+  @return (
+    base: (
+      stepper-header-error-state-icon-background-color: transparent,
+      stepper-header-focus-state-layer-shape: map.get($system, corner-medium),
+      stepper-header-hover-state-layer-shape: map.get($system, corner-medium),
     ),
-    secondary: (
-      header-edit-state-icon-background-color: map.get($systems, md-sys-color, secondary),
-      header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary),
-      header-done-state-icon-background-color: map.get($systems, md-sys-color, secondary),
-      header-done-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary),
-      header-selected-state-icon-background-color: map.get($systems, md-sys-color, secondary),
-      header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary),
+    color: (
+      stepper-container-color: map.get($system, surface),
+      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),
+      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)),
+      stepper-header-hover-state-layer-color: m3-utils.color-with-opacity(
+          map.get($system, inverse-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),
+      stepper-header-optional-label-text-color: map.get($system, on-surface-variant),
+      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-selected-state-label-text-color: map.get($system, on-surface-variant),
+      stepper-line-color: map.get($system, outline),
     ),
-    tertiary: (
-      header-edit-state-icon-background-color: map.get($systems, md-sys-color, tertiary),
-      header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary),
-      header-done-state-icon-background-color: map.get($systems, md-sys-color, tertiary),
-      header-done-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary),
-      header-selected-state-icon-background-color: map.get($systems, md-sys-color, tertiary),
-      header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary),
+    typography: (
+      stepper-container-text-font: map.get($system, body-medium-font),
+      stepper-header-label-text-font: map.get($system, title-small-font),
+      stepper-header-label-text-size: map.get($system, title-small-size),
+      stepper-header-label-text-weight: map.get($system, title-small-weight),
+      stepper-header-error-state-label-text-size: map.get($system, title-small-size),
+      stepper-header-selected-state-label-text-size: map.get($system, title-small-size),
+      stepper-header-selected-state-label-text-weight: map.get($system, title-small-weight),
     ),
-    error: (
-      header-edit-state-icon-background-color: map.get($systems, md-sys-color, error),
-      header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-error),
-      header-done-state-icon-background-color: map.get($systems, md-sys-color, error),
-      header-done-state-icon-foreground-color: map.get($systems, md-sys-color, on-error),
-      header-selected-state-icon-background-color: map.get($systems, md-sys-color, error),
-      header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-error),
-    )
+    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
   );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
+@function get-density-tokens($scale) {
+  $scale: theming.clamp-density(scale, -4);
   $index: ($scale * -1) + 1;
 
   @return (
-    header-height: list.nth((72px, 68px, 64px, 60px, 42px), $index),
+    stepper-header-height: list.nth((72px, 68px, 64px, 60px, 42px), $index),
   );
 }

package/stepper/_stepper-theme.scss

@@ -1,49 +1,41 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use './m2-stepper';
 @use './m3-stepper';
+@use 'sass:map';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for mat-stepper.
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-stepper.get-tokens($theme), base));
   } @else {
   }
 }
 
 /// Outputs color theme styles for mat-stepper.
 /// @param {Map} $theme The theme to generate color styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the stepper: primary, secondary,
-///   tertiary, or error (If not specified, primary color values will be used).
-@mixin color($theme, $options...) {
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin color($theme, $color-variant: null) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
+    @include token-utils.create-token-values(
+        map.get(m3-stepper.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-stepper.$prefix,
-        m2-stepper.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-stepper.get-color-tokens($theme));
 
       .mat-step-header.mat-accent {
         @include token-utils.create-token-values-mixed(
-          m2-stepper.$prefix,
-          m2-stepper.private-get-color-palette-color-tokens($theme, accent)
-        );
+          m2-stepper.private-get-color-palette-color-tokens($theme, accent));
       }
 
       .mat-step-header.mat-warn {
         @include token-utils.create-token-values-mixed(
-          m2-stepper.$prefix,
-          m2-stepper.private-get-color-palette-color-tokens($theme, warn)
-        );
+          m2-stepper.private-get-color-palette-color-tokens($theme, warn));
       }
     }
   }
@@ -53,13 +45,10 @@
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(map.get(m3-stepper.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-stepper.$prefix,
-        m2-stepper.get-typography-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-stepper.get-typography-tokens($theme));
     }
   }
 }
@@ -68,14 +57,10 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        m3-stepper.$prefix, m3-stepper.get-density-tokens($theme));
+    @include token-utils.create-token-values(map.get(m3-stepper.get-tokens($theme), density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-stepper.$prefix,
-        m2-stepper.get-density-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-stepper.get-density-tokens($theme));
     }
   }
 }
@@ -84,8 +69,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-stepper.$prefix,
-      tokens: m2-stepper.get-token-slots(),
+      namespace: stepper,
+      tokens: token-utils.get-overrides(m3-stepper.get-tokens(), stepper)
     ),
   );
 }
@@ -93,18 +78,19 @@
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for mat-stepper.
 /// @param {Map} $theme The theme to generate color styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the stepper: primary, secondary,
-///   tertiary, or error (If not specified, primary color values will be used).
-@mixin theme($theme, $options...) {
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin theme($theme, $color-variant: null) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @include base($theme);
+      @include color($theme, $color-variant);
+      @include density($theme);
+      @include typography($theme);
       @if inspection.theme-has($theme, density) {
         @include density($theme);
       }
@@ -122,17 +108,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens, $options...) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
-  );
-  @if ($tokens != ()) {
-    $mat-stepper-tokens: token-utils.get-tokens-for(
-      $tokens,
-      m2-stepper.$prefix,
-      $options...
-    );
-    @include token-utils.create-token-values(m2-stepper.$prefix, $mat-stepper-tokens);
-  }
-}

package/table/_m2-table.scss

@@ -4,25 +4,22 @@
 @use '../core/tokens/m2-utils';
 @use '../core/style/sass-utils';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, table);
-
 // 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() {
   @return (
-    row-item-outline-width: 1px,
+    table-row-item-outline-width: 1px,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    background-color: inspection.get-theme-color($theme, background, 'card'),
+    table-background-color: inspection.get-theme-color($theme, background, 'card'),
 
-    header-headline-color: inspection.get-theme-color($theme, foreground, text),
-    row-item-label-text-color: inspection.get-theme-color($theme, foreground, text),
-    row-item-outline-color: inspection.get-theme-color($theme, foreground, divider),
+    table-header-headline-color: inspection.get-theme-color($theme, foreground, text),
+    table-row-item-label-text-color: inspection.get-theme-color($theme, foreground, text),
+    table-row-item-outline-color: inspection.get-theme-color($theme, foreground, divider),
   );
 }
 
@@ -35,24 +32,26 @@ $prefix: (mat, table);
   $cell-letter-spacing: inspection.get-theme-typography($theme, body-2, letter-spacing);
 
   @return (
-    header-headline-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
-    header-headline-line-height: inspection.get-theme-typography($theme, subtitle-2, line-height),
-    header-headline-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
-    header-headline-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
-    header-headline-tracking: inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
+    table-header-headline-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
+    table-header-headline-line-height:
+        inspection.get-theme-typography($theme, subtitle-2, line-height),
+    table-header-headline-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
+    table-header-headline-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
+    table-header-headline-tracking:
+        inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
 
     // Plain cells and footer cells have the same typography.
-    row-item-label-text-font: $cell-font-family,
-    row-item-label-text-line-height: $cell-line-height,
-    row-item-label-text-size: $cell-font-size,
-    row-item-label-text-weight: $cell-font-weight,
-    row-item-label-text-tracking: $cell-letter-spacing,
+    table-row-item-label-text-font: $cell-font-family,
+    table-row-item-label-text-line-height: $cell-line-height,
+    table-row-item-label-text-size: $cell-font-size,
+    table-row-item-label-text-weight: $cell-font-weight,
+    table-row-item-label-text-tracking: $cell-letter-spacing,
 
-    footer-supporting-text-font: $cell-font-family,
-    footer-supporting-text-line-height: $cell-line-height,
-    footer-supporting-text-size: $cell-font-size,
-    footer-supporting-text-weight: $cell-font-weight,
-    footer-supporting-text-tracking: $cell-letter-spacing,
+    table-footer-supporting-text-font: $cell-font-family,
+    table-footer-supporting-text-line-height: $cell-line-height,
+    table-footer-supporting-text-size: $cell-font-size,
+    table-footer-supporting-text-weight: $cell-font-weight,
+    table-footer-supporting-text-tracking: $cell-letter-spacing,
   );
 }
 
@@ -75,9 +74,9 @@ $prefix: (mat, table);
   );
 
   @return (
-    header-container-height: map.get($header-scale, $scale),
-    footer-container-height: map.get($cell-scale, $scale),
-    row-item-container-height: map.get($cell-scale, $scale),
+    table-header-container-height: map.get($header-scale, $scale),
+    table-footer-container-height: map.get($cell-scale, $scale),
+    table-row-item-container-height: map.get($cell-scale, $scale),
   );
 }