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

package/slider/_m2-slider.scss

@@ -4,33 +4,30 @@
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, slider);
-
 // 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 (
-    active-track-height: 6px,
-    active-track-shape: 9999px,
-    handle-elevation: elevation.get-box-shadow(1),
-    handle-height: 20px,
-    handle-shape: 50%,
-    handle-width: 20px,
-    inactive-track-height: 4px,
-    inactive-track-shape: 9999px,
-    value-indicator-border-radius: 4px,
-    value-indicator-caret-display: block,
-    value-indicator-container-transform: translateX(-50%),
-    value-indicator-height: 32px,
-    value-indicator-padding: 0 12px,
-    value-indicator-text-transform: none,
-    value-indicator-width: auto,
-    with-overlap-handle-outline-width: 1px,
-    with-tick-marks-active-container-opacity: 0.6,
-    with-tick-marks-container-shape: 50%,
-    with-tick-marks-container-size: 2px,
-    with-tick-marks-inactive-container-opacity: 0.6,
+    slider-active-track-height: 6px,
+    slider-active-track-shape: 9999px,
+    slider-handle-elevation: elevation.get-box-shadow(1),
+    slider-handle-height: 20px,
+    slider-handle-shape: 50%,
+    slider-handle-width: 20px,
+    slider-inactive-track-height: 4px,
+    slider-inactive-track-shape: 9999px,
+    slider-value-indicator-border-radius: 4px,
+    slider-value-indicator-caret-display: block,
+    slider-value-indicator-container-transform: translateX(-50%),
+    slider-value-indicator-height: 32px,
+    slider-value-indicator-padding: 0 12px,
+    slider-value-indicator-text-transform: none,
+    slider-value-indicator-width: auto,
+    slider-with-overlap-handle-outline-width: 1px,
+    slider-with-tick-marks-active-container-opacity: 0.6,
+    slider-with-tick-marks-container-shape: 50%,
+    slider-with-tick-marks-container-size: 2px,
+    slider-with-tick-marks-inactive-container-opacity: 0.6,
   );
 }
 
@@ -44,14 +41,14 @@ $prefix: (mat, slider);
   @return map.merge(
     $theme-color-tokens,
     (
-      disabled-active-track-color: $on-surface,
-      disabled-handle-color: $on-surface,
-      disabled-inactive-track-color: $on-surface,
-      label-container-color: $on-surface,
-      label-label-text-color: if($is-dark, #000, #fff),
-      value-indicator-opacity: if($is-dark, 0.9, 0.6),
-      with-overlap-handle-outline-color: #fff,
-      with-tick-marks-disabled-container-color: $on-surface,
+      slider-disabled-active-track-color: $on-surface,
+      slider-disabled-handle-color: $on-surface,
+      slider-disabled-inactive-track-color: $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,
     ),
   );
 }
@@ -64,27 +61,30 @@ $prefix: (mat, slider);
   $on-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
   @return (
-    active-track-color: $color,
-    focus-handle-color: $color,
-    focus-state-layer-color: $focus-ripple-color,
-    handle-color: $color,
-    hover-handle-color: $color,
-    hover-state-layer-color: $hover-ripple-color,
-    inactive-track-color: $color,
-    ripple-color: $color,
-    with-tick-marks-active-container-color: $on-color,
-    with-tick-marks-inactive-container-color: $color,
+    slider-active-track-color: $color,
+    slider-focus-handle-color: $color,
+    slider-focus-state-layer-color: $focus-ripple-color,
+    slider-handle-color: $color,
+    slider-hover-handle-color: $color,
+    slider-hover-state-layer-color: $hover-ripple-color,
+    slider-inactive-track-color: $color,
+    slider-ripple-color: $color,
+    slider-with-tick-marks-active-container-color: $on-color,
+    slider-with-tick-marks-inactive-container-color: $color,
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    label-label-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
-    label-label-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
-    label-label-text-line-height: inspection.get-theme-typography($theme, subtitle-2, line-height),
-    label-label-text-tracking: inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
-    label-label-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
+    slider-label-label-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
+    slider-label-label-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
+    slider-label-label-text-line-height:
+        inspection.get-theme-typography($theme, subtitle-2, line-height),
+    slider-label-label-text-tracking:
+        inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
+    slider-label-label-text-weight:
+        inspection.get-theme-typography($theme, subtitle-2, font-weight),
   );
 }
 

package/slider/_m3-slider.scss

@@ -1,121 +1,66 @@
 @use 'sass:map';
-@use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
 @use '../core/style/elevation';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, slider);
+@use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-slider.
-/// @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-slider
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    ripple-color: map.get($systems, md-sys-color, primary),
-    hover-state-layer-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, primary), $alpha: 0.05),
-    focus-state-layer-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, primary), $alpha: 0.2),
-    value-indicator-opacity: m3-utils.hardcode(1, $exclude-hardcoded),
-    value-indicator-padding: m3-utils.hardcode(0, $exclude-hardcoded),
-    value-indicator-width: m3-utils.hardcode(28px, $exclude-hardcoded),
-    value-indicator-height: m3-utils.hardcode(28px, $exclude-hardcoded),
-    value-indicator-caret-display: m3-utils.hardcode(none, $exclude-hardcoded),
-    value-indicator-border-radius:
-    m3-utils.hardcode(50% 50% 50% 0, $exclude-hardcoded),
-    value-indicator-text-transform:
-    m3-utils.hardcode(rotate(45deg), $exclude-hardcoded),
-    value-indicator-container-transform:
-    m3-utils.hardcode(translateX(-50%) rotate(-45deg), $exclude-hardcoded),
-    active-track-color: map.get($systems, md-sys-color, primary),
-    active-track-height: if($exclude-hardcoded, null, 4px),
-    active-track-shape: map.get($systems, md-sys-shape, corner-full),
-    disabled-active-track-color: map.get($systems, md-sys-color, on-surface),
-    disabled-handle-color: map.get($systems, md-sys-color, on-surface),
-    disabled-inactive-track-color: map.get($systems, md-sys-color, on-surface),
-    focus-handle-color: map.get($systems, md-sys-color, primary),
-    handle-color: map.get($systems, md-sys-color, primary),
-    handle-elevation: map.get($systems, md-sys-elevation, level1),
-    handle-height: if($exclude-hardcoded, null, 20px),
-    handle-shape: map.get($systems, md-sys-shape, corner-full),
-    handle-width: if($exclude-hardcoded, null, 20px),
-    hover-handle-color: map.get($systems, md-sys-color, primary),
-    inactive-track-color: map.get($systems, md-sys-color, surface-variant),
-    inactive-track-height: if($exclude-hardcoded, null, 4px),
-    inactive-track-shape: map.get($systems, md-sys-shape, corner-full),
-    label-container-color: map.get($systems, md-sys-color, primary),
-    label-label-text-color: map.get($systems, md-sys-color, on-primary),
-    label-label-text-font: map.get($systems, md-sys-typescale, label-medium-font),
-    label-label-text-line-height: map.get($systems, md-sys-typescale, label-medium-line-height),
-    label-label-text-size: map.get($systems, md-sys-typescale, label-medium-size),
-    label-label-text-tracking: map.get($systems, md-sys-typescale, label-medium-tracking),
-    label-label-text-weight: map.get($systems, md-sys-typescale, label-medium-weight),
-    with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-primary),
-    with-overlap-handle-outline-width: if($exclude-hardcoded, null, 1px),
-    with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-primary),
-    with-tick-marks-active-container-opacity: if($exclude-hardcoded, null, 0.38),
-    with-tick-marks-container-shape: map.get($systems, md-sys-shape, corner-full),
-    with-tick-marks-container-size: if($exclude-hardcoded, null, 2px),
-    with-tick-marks-disabled-container-color: map.get($systems, md-sys-color, on-surface),
-    with-tick-marks-inactive-container-color: map.get($systems, md-sys-color, on-surface-variant),
-    with-tick-marks-inactive-container-opacity: if($exclude-hardcoded, null, 0.38)
-  );
-  $handle-elevation: map.get($tokens, handle-elevation);
-
-  @if ($handle-elevation != null) {
-    $tokens: map.set($tokens, handle-elevation, elevation.get-box-shadow($handle-elevation));
+/// @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: (
-    primary: (), // Default, no overrides needed
-    secondary: (
-      ripple-color: map.get($systems, md-sys-color, secondary),
-      hover-state-layer-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, secondary), $alpha: 0.05),
-      focus-state-layer-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, secondary), $alpha: 0.2),
-      active-track-color: map.get($systems, md-sys-color, secondary),
-      focus-handle-color: map.get($systems, md-sys-color, secondary),
-      handle-color: map.get($systems, md-sys-color, secondary),
-      hover-handle-color: map.get($systems, md-sys-color, secondary),
-      label-container-color: map.get($systems, md-sys-color, secondary),
-      label-label-text-color: map.get($systems, md-sys-color, on-secondary),
-      with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-secondary),
-      with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-secondary),
+  @return (
+    base: (
+      slider-value-indicator-opacity: 1,
+      slider-value-indicator-padding: 0,
+      slider-value-indicator-width: 28px,
+      slider-value-indicator-height: 28px,
+      slider-value-indicator-caret-display: none,
+      slider-value-indicator-border-radius: 50% 50% 50% 0,
+      slider-value-indicator-text-transform: rotate(45deg),
+      slider-value-indicator-container-transform: translateX(-50%) rotate(-45deg),
+      slider-active-track-height: 4px,
+      slider-handle-height: 20px,
+      slider-handle-width: 20px,
+      slider-inactive-track-height: 4px,
+      slider-with-overlap-handle-outline-width: 1px,
+      slider-with-tick-marks-active-container-opacity: 0.38,
+      slider-with-tick-marks-container-size: 2px,
+      slider-with-tick-marks-inactive-container-opacity: 0.38,
     ),
-    tertiary: (
-      ripple-color: map.get($systems, md-sys-color, tertiary),
-      hover-state-layer-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, tertiary), $alpha: 0.05),
-      focus-state-layer-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, tertiary), $alpha: 0.2),
-      active-track-color: map.get($systems, md-sys-color, tertiary),
-      focus-handle-color: map.get($systems, md-sys-color, tertiary),
-      handle-color: map.get($systems, md-sys-color, tertiary),
-      hover-handle-color: map.get($systems, md-sys-color, tertiary),
-      label-container-color: map.get($systems, md-sys-color, tertiary),
-      label-label-text-color: map.get($systems, md-sys-color, on-tertiary),
-      with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-tertiary),
-      with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-tertiary),
+    color: (
+      slider-active-track-color: map.get($system, primary),
+      slider-active-track-shape: map.get($system, corner-full),
+      slider-disabled-active-track-color: map.get($system, on-surface),
+      slider-disabled-handle-color: map.get($system, on-surface),
+      slider-disabled-inactive-track-color: map.get($system, on-surface),
+      slider-focus-handle-color: map.get($system, primary),
+      slider-focus-state-layer-color: m3-utils.color-with-opacity(map.get($system, primary), 20%),
+      slider-handle-color: map.get($system, primary),
+      slider-handle-elevation: elevation.get-box-shadow(map.get($system, level1)),
+      slider-handle-shape: map.get($system, corner-full),
+      slider-hover-handle-color: map.get($system, primary),
+      slider-hover-state-layer-color: m3-utils.color-with-opacity(map.get($system, primary), 5%),
+      slider-inactive-track-color: map.get($system, surface-variant),
+      slider-inactive-track-shape: map.get($system, corner-full),
+      slider-label-container-color: map.get($system, primary),
+      slider-label-label-text-color: map.get($system, on-primary),
+      slider-ripple-color: map.get($system, primary),
+      slider-with-overlap-handle-outline-color: map.get($system, on-primary),
+      slider-with-tick-marks-active-container-color: map.get($system, on-primary),
+      slider-with-tick-marks-container-shape: map.get($system, corner-full),
+      slider-with-tick-marks-disabled-container-color: map.get($system, on-surface),
+      slider-with-tick-marks-inactive-container-color: map.get($system, on-surface-variant),
     ),
-    error: (
-      ripple-color: map.get($systems, md-sys-color, error),
-      hover-state-layer-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, error), $alpha: 0.05),
-      focus-state-layer-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, error), $alpha: 0.2),
-      active-track-color: map.get($systems, md-sys-color, error),
-      focus-handle-color: map.get($systems, md-sys-color, error),
-      handle-color: map.get($systems, md-sys-color, error),
-      hover-handle-color: map.get($systems, md-sys-color, error),
-      label-container-color: map.get($systems, md-sys-color, error),
-      label-label-text-color: map.get($systems, md-sys-color, on-error),
-      with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-error),
-      with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-error),
+    typography: (
+      slider-label-label-text-font: map.get($system, label-medium-font),
+      slider-label-label-text-line-height: map.get($system, label-medium-line-height),
+      slider-label-label-text-size: map.get($system, label-medium-size),
+      slider-label-label-text-tracking: map.get($system, label-medium-tracking),
+      slider-label-label-text-weight: map.get($system, label-medium-weight),
     ),
+    density: (),
   );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }

package/slider/_slider-theme.scss

@@ -1,46 +1,44 @@
 @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-slider';
+@use './m3-slider';
+@use 'sass:map';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-slider.
 /// @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-slider.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-slider.$prefix, m2-slider.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-slider.get-unthemable-tokens());
     }
   }
 }
 
 /// Outputs color theme styles for the mat-slider.
 /// @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 slider: primary, secondary, tertiary,
-///     or error (If not specified, default primary color 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-slider.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-slider.$prefix, m2-slider.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-slider.get-color-tokens($theme));
 
       .mat-accent {
         @include token-utils.create-token-values-mixed(
-          m2-slider.$prefix, m2-slider.private-get-color-palette-color-tokens($theme, accent));
+          m2-slider.private-get-color-palette-color-tokens($theme, accent));
       }
 
       .mat-warn {
         @include token-utils.create-token-values-mixed(
-          m2-slider.$prefix, m2-slider.private-get-color-palette-color-tokens($theme, warn));
+          m2-slider.private-get-color-palette-color-tokens($theme, warn));
       }
     }
   }
@@ -50,11 +48,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-slider.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-slider.$prefix, m2-slider.get-typography-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-slider.get-typography-tokens($theme));
     }
   }
 }
@@ -66,8 +63,7 @@
     // There are no M3 density tokens for this component
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-slider.$prefix, m2-slider.get-density-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-slider.get-density-tokens($theme));
     }
   }
 }
@@ -76,8 +72,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-slider.$prefix,
-      tokens: m2-slider.get-token-slots(),
+      namespace: slider,
+      tokens: token-utils.get-overrides(m3-slider.get-tokens(), slider)
     ),
   );
 }
@@ -85,18 +81,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 the mat-option.
 /// @param {Map} $theme The theme to generate styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the slider: primary, secondary, tertiary,
-///     or error (If not specified, default primary color 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-slider') {
     @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);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -111,11 +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'
-  );
-  $mat-slider-tokens: token-utils.get-tokens-for($tokens, m2-slider.$prefix, $options...);
-  @include token-utils.create-token-values(m2-slider.$prefix, $mat-slider-tokens);
-}

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

@@ -4,14 +4,11 @@
 @use 'sass:meta';
 @use 'sass:color';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, snack-bar);
-
 // 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 (
-    container-shape: 4px,
+    snack-bar-container-shape: 4px,
   );
 }
 
@@ -21,12 +18,13 @@ $prefix: (mat, snack-bar);
   $surface: inspection.get-theme-color($theme, background, card);
 
   @return (
-    container-color: if(
+    snack-bar-container-color: if(
         meta.type-of($surface) == color,
         color.mix(if($is-dark, #fff, #000), $surface, 80%),
         $surface),
-    supporting-text-color: if(meta.type-of($surface) == color, rgba($surface, 0.87), $surface),
-    button-color:
+    snack-bar-supporting-text-color:
+        if(meta.type-of($surface) == color, rgba($surface, 0.87), $surface),
+    snack-bar-button-color:
       if(
         $is-dark,
         inspection.get-theme-color($theme, primary, 500),
@@ -38,10 +36,11 @@ $prefix: (mat, snack-bar);
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    supporting-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    supporting-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
-    supporting-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    supporting-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
+    snack-bar-supporting-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    snack-bar-supporting-text-line-height:
+        inspection.get-theme-typography($theme, body-2, line-height),
+    snack-bar-supporting-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    snack-bar-supporting-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
   );
 }
 

package/snack-bar/_m3-snack-bar.scss

@@ -1,25 +1,26 @@
 @use 'sass:map';
 @use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, snack-bar);
+@use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-snack-bar.
-/// @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-snack-bar
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    button-color: map.get($systems, md-sys-color, inverse-primary),
-    container-color: map.get($systems, md-sys-color, inverse-surface),
-    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
-    supporting-text-color: map.get($systems, md-sys-color, inverse-on-surface),
-    supporting-text-font: map.get($systems, md-sys-typescale, body-medium-font),
-    supporting-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height),
-    supporting-text-size: map.get($systems, md-sys-typescale, body-medium-size),
-    supporting-text-weight: map.get($systems, md-sys-typescale, body-medium-weight),
-  );
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
 
-  @return m3-utils.namespace($prefix, $tokens, $token-slots);
+  @return (
+    base: (
+      snack-bar-container-shape: map.get($system, corner-extra-small),
+    ),
+    color: (
+      snack-bar-button-color: map.get($system, inverse-primary),
+      snack-bar-container-color: map.get($system, inverse-surface),
+      snack-bar-supporting-text-color: map.get($system, inverse-on-surface),
+    ),
+    typography: (
+      snack-bar-supporting-text-font: map.get($system, body-medium-font),
+      snack-bar-supporting-text-line-height: map.get($system, body-medium-line-height),
+      snack-bar-supporting-text-size: map.get($system, body-medium-size),
+      snack-bar-supporting-text-weight: map.get($system, body-medium-weight),
+    ),
+    density: (),
+  );
 }

package/snack-bar/_snack-bar-theme.scss

@@ -1,42 +1,39 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 @use './m2-snack-bar';
+@use './m3-snack-bar';
 
 @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-snack-bar.get-tokens($theme), base));
   } @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-snack-bar.$prefix, m2-snack-bar.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-snack-bar.get-unthemable-tokens());
     }
   }
 }
 
 @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-snack-bar.get-tokens($theme), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-snack-bar.$prefix, m2-snack-bar.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-snack-bar.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-snack-bar.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-snack-bar.$prefix, m2-snack-bar.get-typography-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-snack-bar.get-typography-tokens($theme));
     }
   }
 }
@@ -48,8 +45,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-snack-bar.$prefix,
-      tokens: m2-snack-bar.get-token-slots(),
+      namespace: snack-bar,
+      tokens: token-utils.get-overrides(m3-snack-bar.get-tokens(), snack-bar)
     ),
   );
 }
@@ -57,13 +54,16 @@
 /// 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());
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-snack-bar') {
     @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) {
@@ -78,15 +78,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-snack-bar.$prefix,
-      map.get($tokens, m2-snack-bar.$prefix)
-    );
-  }
-}

package/sort/_m2-sort.scss

@@ -4,9 +4,6 @@
 @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, sort);
-
 // 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() {
@@ -34,7 +31,7 @@ $prefix: (mat, sort);
   }
 
   @return (
-    arrow-color: $arrow-color,
+    sort-arrow-color: $arrow-color,
   );
 }