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

package/datepicker/_m2-datepicker.scss

@@ -6,9 +6,6 @@
 @use '../core/style/elevation';
 @use '../core/style/sass-utils';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, datepicker);
-
 $_selected-fade-amount: 0.6;
 $_today-fade-amount: 0.2;
 
@@ -32,10 +29,10 @@ $private-default-overlap-color: #a8dab5;
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    calendar-container-shape: 4px,
-    calendar-container-touch-shape: 4px,
-    calendar-container-elevation-shadow: elevation.get-box-shadow(4),
-    calendar-container-touch-elevation-shadow: elevation.get-box-shadow(24),
+    datepicker-calendar-container-shape: 4px,
+    datepicker-calendar-container-touch-shape: 4px,
+    datepicker-calendar-container-elevation-shadow: elevation.get-box-shadow(4),
+    datepicker-calendar-container-touch-elevation-shadow: elevation.get-box-shadow(24),
   );
 }
 
@@ -72,29 +69,31 @@ $private-default-overlap-color: #a8dab5;
   }
 
   @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
-    toggle-icon-color: $inactive-icon-color,
-    calendar-body-label-text-color: $secondary-text-color,
-    calendar-period-button-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    calendar-period-button-icon-color: $inactive-icon-color,
-    calendar-navigation-button-icon-color: $inactive-icon-color,
-    calendar-header-divider-color: $divider-color,
-    calendar-header-text-color: $secondary-text-color,
+    datepicker-toggle-icon-color: $inactive-icon-color,
+    datepicker-calendar-body-label-text-color: $secondary-text-color,
+    datepicker-calendar-period-button-text-color:
+        inspection.get-theme-color($theme, foreground, text, 1),
+    datepicker-calendar-period-button-icon-color: $inactive-icon-color,
+    datepicker-calendar-navigation-button-icon-color: $inactive-icon-color,
+    datepicker-calendar-header-divider-color: $divider-color,
+    datepicker-calendar-header-text-color: $secondary-text-color,
 
     // Note: though it's not text, the border is a hint about the fact
     // that this is today's date, so we use the hint color.
-    calendar-date-today-outline-color: $hint-text-color,
-    calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
-    calendar-date-text-color: $text-color,
-    calendar-date-outline-color: transparent,
-    calendar-date-disabled-state-text-color: $disabled-text-color,
-    calendar-date-preview-state-outline-color: $preview-outline-color,
-
-    range-input-separator-color: $text-color,
-    range-input-disabled-state-separator-color: $disabled-text-color,
-    range-input-disabled-state-text-color: $disabled-text-color,
-
-    calendar-container-background-color: inspection.get-theme-color($theme, background, card),
-    calendar-container-text-color: $text-color,
+    datepicker-calendar-date-today-outline-color: $hint-text-color,
+    datepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
+    datepicker-calendar-date-text-color: $text-color,
+    datepicker-calendar-date-outline-color: transparent,
+    datepicker-calendar-date-disabled-state-text-color: $disabled-text-color,
+    datepicker-calendar-date-preview-state-outline-color: $preview-outline-color,
+
+    datepicker-range-input-separator-color: $text-color,
+    datepicker-range-input-disabled-state-separator-color: $disabled-text-color,
+    datepicker-range-input-disabled-state-text-color: $disabled-text-color,
+
+    datepicker-calendar-container-background-color:
+        inspection.get-theme-color($theme, background, card),
+    datepicker-calendar-container-text-color: $text-color,
   ));
 }
 
@@ -105,18 +104,22 @@ $private-default-overlap-color: #a8dab5;
     // an element (e.g. size, weight, line height, letter spacing). These tokens only set the values
     // that were set in the previous theming API to reduce the amount of subtle screenshot
     // differences. We should look into introducing the other tokens in a follow-up.
-    calendar-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    calendar-text-size: 13px,
-
-    calendar-body-label-text-size: inspection.get-theme-typography($theme, button, font-size),
-    calendar-body-label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
-
-    calendar-period-button-text-size: inspection.get-theme-typography($theme, button, font-size),
-    calendar-period-button-text-weight: inspection.get-theme-typography(
-        $theme, button, font-weight),
-
-    calendar-header-text-size: 11px,
-    calendar-header-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
+    datepicker-calendar-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    datepicker-calendar-text-size: 13px,
+
+    datepicker-calendar-body-label-text-size:
+        inspection.get-theme-typography($theme, button, font-size),
+    datepicker-calendar-body-label-text-weight:
+        inspection.get-theme-typography($theme, button, font-weight),
+
+    datepicker-calendar-period-button-text-size:
+        inspection.get-theme-typography($theme, button, font-size),
+    datepicker-calendar-period-button-text-weight:
+        inspection.get-theme-typography($theme, button, font-weight),
+
+    datepicker-calendar-header-text-size: 11px,
+    datepicker-calendar-header-text-weight:
+        inspection.get-theme-typography($theme, body-1, font-weight),
   );
 }
 
@@ -128,10 +131,11 @@ $private-default-overlap-color: #a8dab5;
   $overlap-selected-color: private-get-default-overlap-selected-color($overlap-color)) {
 
   @return (
-    calendar-date-in-range-state-background-color: $range-color,
-    calendar-date-in-comparison-range-state-background-color: $comparison-color,
-    calendar-date-in-overlap-range-state-background-color: $overlap-color,
-    calendar-date-in-overlap-range-selected-state-background-color: $overlap-selected-color,
+    datepicker-calendar-date-in-range-state-background-color: $range-color,
+    datepicker-calendar-date-in-comparison-range-state-background-color: $comparison-color,
+    datepicker-calendar-date-in-overlap-range-state-background-color: $overlap-color,
+    datepicker-calendar-date-in-overlap-range-selected-state-background-color:
+        $overlap-selected-color,
   );
 }
 
@@ -149,18 +153,19 @@ $private-default-overlap-color: #a8dab5;
   }
 
   @return (
-    calendar-date-selected-state-text-color: $default-contrast,
-    calendar-date-selected-state-background-color: $palette-color,
-    calendar-date-selected-disabled-state-background-color: $active-disabled-color,
-    calendar-date-today-selected-state-outline-color: $default-contrast,
-    calendar-date-focus-state-background-color: $active-background-color,
-    calendar-date-hover-state-background-color: $active-background-color,
+    datepicker-calendar-date-selected-state-text-color: $default-contrast,
+    datepicker-calendar-date-selected-state-background-color: $palette-color,
+    datepicker-calendar-date-selected-disabled-state-background-color: $active-disabled-color,
+    datepicker-calendar-date-today-selected-state-outline-color: $default-contrast,
+    datepicker-calendar-date-focus-state-background-color: $active-background-color,
+    datepicker-calendar-date-hover-state-background-color: $active-background-color,
   );
 }
 
 @function private-get-toggle-color-palette-color-tokens($theme, $palette-name) {
   @return (
-    toggle-active-state-icon-color: inspection.get-theme-color($theme, $palette-name, text),
+    datepicker-toggle-active-state-icon-color:
+        inspection.get-theme-color($theme, $palette-name, text),
   );
 }
 

package/datepicker/_m3-datepicker.scss

@@ -1,125 +1,77 @@
 @use 'sass:map';
 @use '../core/style/elevation';
-@use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, datepicker);
+@use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-datepicker.
-/// @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-datepicker
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    calendar-date-in-range-state-background-color:
-      map.get($systems, md-sys-color, primary-container),
-    calendar-date-in-comparison-range-state-background-color:
-      map.get($systems, md-sys-color, tertiary-container),
-    calendar-date-in-overlap-range-state-background-color:
-      map.get($systems, md-sys-color, secondary-container),
-    calendar-date-in-overlap-range-selected-state-background-color:
-      map.get($systems, md-sys-color, secondary),
-    calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-primary),
-    calendar-date-selected-state-background-color: map.get($systems, md-sys-color, primary),
-    calendar-date-selected-disabled-state-background-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: 0.38
-    ),
-    calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, primary),
-    calendar-date-focus-state-background-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
-    ),
-    calendar-date-hover-state-background-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
-    ),
-    toggle-active-state-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-    toggle-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-    calendar-body-label-text-color: map.get($systems, md-sys-color, on-surface),
-    calendar-period-button-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    calendar-period-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-    calendar-navigation-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-    calendar-header-divider-color: m3-utils.hardcode(transparent, $exclude-hardcoded),
-    calendar-header-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    calendar-date-today-outline-color: map.get($systems, md-sys-color, primary),
-    calendar-date-today-disabled-state-outline-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: 0.38
-    ),
-    calendar-date-text-color: map.get($systems, md-sys-color, on-surface),
-    calendar-date-outline-color: m3-utils.hardcode(transparent, $exclude-hardcoded),
-    calendar-date-disabled-state-text-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: 0.38
+/// @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);
+  }
+
+  @return (
+    base: (
+      datepicker-calendar-container-elevation-shadow:elevation.get-box-shadow(0),
+      datepicker-calendar-container-shape: map.get($system, corner-large),
+      datepicker-calendar-container-touch-elevation-shadow:elevation.get-box-shadow(0),
+      datepicker-calendar-container-touch-shape: map.get($system, corner-extra-large),
     ),
-    calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, primary),
-    range-input-separator-color: map.get($systems, md-sys-color, on-surface),
-    range-input-disabled-state-separator-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: 0.38
+    color: (
+      datepicker-calendar-body-label-text-color: map.get($system, on-surface),
+      datepicker-calendar-container-background-color: map.get($system, surface-container-high),
+      datepicker-calendar-container-text-color: map.get($system, on-surface),
+      datepicker-calendar-date-disabled-state-text-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      datepicker-calendar-date-focus-state-background-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
+      datepicker-calendar-date-hover-state-background-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+      datepicker-calendar-date-in-comparison-range-state-background-color:
+          map.get($system, tertiary-container),
+      datepicker-calendar-date-in-overlap-range-selected-state-background-color:
+          map.get($system, secondary),
+      datepicker-calendar-date-in-overlap-range-state-background-color:
+          map.get($system, secondary-container),
+      datepicker-calendar-date-in-range-state-background-color:map.get($system, primary-container),
+      datepicker-calendar-date-outline-color: transparent,
+      datepicker-calendar-date-preview-state-outline-color: map.get($system, primary),
+      datepicker-calendar-date-selected-disabled-state-background-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      datepicker-calendar-date-selected-state-background-color: map.get($system, primary),
+      datepicker-calendar-date-selected-state-text-color: map.get($system, on-primary),
+      datepicker-calendar-date-text-color: map.get($system, on-surface),
+      datepicker-calendar-date-today-disabled-state-outline-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      datepicker-calendar-date-today-outline-color: map.get($system, primary),
+      datepicker-calendar-date-today-selected-state-outline-color: map.get($system, primary),
+      datepicker-calendar-header-divider-color: transparent,
+      datepicker-calendar-header-text-color: map.get($system, on-surface-variant),
+      datepicker-calendar-navigation-button-icon-color: map.get($system, on-surface-variant),
+      datepicker-calendar-period-button-icon-color: map.get($system, on-surface-variant),
+      datepicker-calendar-period-button-text-color: map.get($system, on-surface-variant),
+      datepicker-range-input-disabled-state-separator-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      datepicker-range-input-disabled-state-text-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      datepicker-range-input-separator-color: map.get($system, on-surface),
+      datepicker-toggle-active-state-icon-color: map.get($system, on-surface-variant),
+      datepicker-toggle-icon-color: map.get($system, on-surface-variant),
     ),
-    range-input-disabled-state-text-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: 0.38
+    typography: (
+      datepicker-calendar-body-label-text-size: map.get($system, title-small-size),
+      datepicker-calendar-body-label-text-weight: map.get($system, title-small-weight),
+      datepicker-calendar-header-text-size: map.get($system, title-small-size),
+      datepicker-calendar-header-text-weight: map.get($system, title-small-weight),
+      datepicker-calendar-period-button-text-size: map.get($system, title-small-size),
+      datepicker-calendar-period-button-text-weight: map.get($system, title-small-weight),
+      datepicker-calendar-text-font: map.get($system, body-medium-font),
+      datepicker-calendar-text-size: map.get($system, body-medium-size),
     ),
-    calendar-container-background-color: map.get($systems, md-sys-color, surface-container-high),
-    calendar-container-text-color: map.get($systems, md-sys-color, on-surface),
-    calendar-container-elevation-shadow:
-        m3-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
-    calendar-container-touch-elevation-shadow:
-      m3-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
-    calendar-container-shape: map.get($systems, md-sys-shape, corner-large),
-    calendar-container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
-    calendar-text-font: map.get($systems, md-sys-typescale, body-medium-font),
-    calendar-text-size: map.get($systems, md-sys-typescale, body-medium-size),
-    calendar-body-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
-    calendar-body-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
-    calendar-period-button-text-size: map.get($systems, md-sys-typescale, title-small-size),
-    calendar-period-button-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
-    calendar-header-text-size: map.get($systems, md-sys-typescale, title-small-size),
-    calendar-header-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+    density: (),
   );
 
-  $variant-tokens: (
-    // Color variants:
-    primary: (), // Default, no overrides needed.
-    secondary: (
-      calendar-date-in-range-state-background-color:
-          map.get($systems, md-sys-color, secondary-container),
-      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-secondary),
-      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, secondary),
-      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, secondary),
-      calendar-date-today-outline-color: map.get($systems, md-sys-color, secondary),
-      calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, secondary),
-      calendar-date-in-overlap-range-state-background-color:
-          map.get($systems, md-sys-color, primary-container),
-      calendar-date-in-overlap-range-selected-state-background-color:
-          map.get($systems, md-sys-color, primary),
-    ),
-    tertiary: (
-      calendar-date-in-range-state-background-color:
-          map.get($systems, md-sys-color, tertiary-container),
-      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-tertiary),
-      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, tertiary),
-      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, tertiary),
-      calendar-date-today-outline-color: map.get($systems, md-sys-color, tertiary),
-      calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, tertiary),
-      calendar-date-in-comparison-range-state-background-color:
-          map.get($systems, md-sys-color, primary-container),
-    ),
-    error: (
-      calendar-date-in-range-state-background-color:
-          map.get($systems, md-sys-color, error-container),
-      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-error),
-      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, error),
-      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, error),
-      calendar-date-today-outline-color: map.get($systems, md-sys-color, error),
-      calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, error),
-    )
+  $tokens: (
   );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }

package/datepicker/index.d.ts

@@ -774,6 +774,7 @@ declare class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDe
     private _dateAdapter;
     private _dateFormats;
     private _changeDetectorRef;
+    private _elementRef;
     /** An input indicating the type of the header component, if set. */
     headerComponent: ComponentType<any>;
     /** A portal containing the header component type for this calendar. */

package/dialog/_dialog-theme.scss

@@ -1,49 +1,46 @@
 @use 'sass:map';
 @use '../core/style/sass-utils';
 @use './m2-dialog';
+@use './m3-dialog';
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/typography/typography';
 
 @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-dialog.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-dialog.$prefix, m2-dialog.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-dialog.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-dialog.get-tokens($theme), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-dialog.$prefix, m2-dialog.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-dialog.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-dialog.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-dialog.$prefix, m2-dialog.get-typography-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-dialog.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-dialog.get-tokens($theme), density));
   } @else {
   }
 }
@@ -52,20 +49,23 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-dialog.$prefix,
-      tokens: m2-dialog.get-token-slots(),
+      namespace: dialog,
+      tokens: token-utils.get-overrides(m3-dialog.get-tokens(), dialog)
     ),
   );
 }
 
 @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-dialog') {
     @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) {
@@ -80,15 +80,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-dialog.$prefix,
-      map.get($tokens, m2-dialog.$prefix)
-    );
-  }
-}

package/dialog/_m2-dialog.scss

@@ -3,26 +3,23 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/inspection';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, dialog);
-
 // 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,
-    container-elevation-shadow: elevation.get-box-shadow(24),
-    container-max-width: 80vw,
-    container-small-max-width: 80vw,
-    container-min-width: 0,
-    actions-alignment: start,
-    actions-padding: 8px,
-    content-padding: 20px 24px,
-    with-actions-content-padding: 20px 24px,
+    dialog-container-shape: 4px,
+    dialog-container-elevation-shadow: elevation.get-box-shadow(24),
+    dialog-container-max-width: 80vw,
+    dialog-container-small-max-width: 80vw,
+    dialog-container-min-width: 0,
+    dialog-actions-alignment: start,
+    dialog-actions-padding: 8px,
+    dialog-content-padding: 20px 24px,
+    dialog-with-actions-content-padding: 20px 24px,
 
     // Note: the CSS class is `title` while the M2 tokens call it `subhead`.
     // M3 calls it `headline` which is what we're aligning with.
-    headline-padding: 0 24px 9px,
+    dialog-headline-padding: 0 24px 9px,
   );
 }
 
@@ -38,25 +35,27 @@ $prefix: (mat, dialog);
   );
 
   @return (
-    container-color: inspection.get-theme-color($theme, background, dialog),
-    subhead-color: sass-utils.safe-color-change($text-base, $alpha: 0.87),
-    supporting-text-color: sass-utils.safe-color-change($text-base, $alpha: 0.6),
+    dialog-container-color: inspection.get-theme-color($theme, background, dialog),
+    dialog-subhead-color: sass-utils.safe-color-change($text-base, $alpha: 0.87),
+    dialog-supporting-text-color: sass-utils.safe-color-change($text-base, $alpha: 0.6),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    subhead-font: inspection.get-theme-typography($theme, headline-6, font-family),
-    subhead-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
-    subhead-size: inspection.get-theme-typography($theme, headline-6, font-size),
-    subhead-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
-    subhead-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
-    supporting-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    supporting-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    supporting-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    supporting-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
-    supporting-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    dialog-subhead-font: inspection.get-theme-typography($theme, headline-6, font-family),
+    dialog-subhead-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
+    dialog-subhead-size: inspection.get-theme-typography($theme, headline-6, font-size),
+    dialog-subhead-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
+    dialog-subhead-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
+    dialog-supporting-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    dialog-supporting-text-line-height:
+        inspection.get-theme-typography($theme, body-1, line-height),
+    dialog-supporting-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    dialog-supporting-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
+    dialog-supporting-text-tracking:
+        inspection.get-theme-typography($theme, body-1, letter-spacing),
   );
 }
 

package/dialog/_m3-dialog.scss

@@ -1,47 +1,47 @@
 @use '../core/tokens/m3-utils';
 @use 'sass:map';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, dialog);
+@use '../core/tokens/m3';
 
 /// Generates custom tokens for the dialog.
-/// @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 dialog
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
   // headline-padding:
   // The vertical padding values are a bit weird, because MDC uses a `::before` pseudo
   // element to size the title which in turn means that we can't set a specific padding
   // and get the exact same space out of it. These values were determined through
   // trial and error so that the first line of text is 24px from the top and the bottom
   // of the text is 16px from the content under it.
-  $tokens: (
-    actions-alignment: m3-utils.hardcode(flex-end, $exclude-hardcoded),
-    actions-padding: m3-utils.hardcode(16px 24px, $exclude-hardcoded),
-    container-color: map.get($systems, md-sys-color, surface),
-    container-elevation-shadow: m3-utils.hardcode(none, $exclude-hardcoded),
-    container-max-width: m3-utils.hardcode(560px, $exclude-hardcoded),
-    container-min-width: m3-utils.hardcode(280px, $exclude-hardcoded),
-    container-shape: map.get($systems, md-sys-shape, corner-extra-large),
-    container-small-max-width:
-    m3-utils.hardcode(calc(100vw - 32px), $exclude-hardcoded),
-    content-padding: m3-utils.hardcode(20px 24px, $exclude-hardcoded),
-    headline-padding: m3-utils.hardcode(6px 24px 13px, $exclude-hardcoded),
-    subhead-color: map.get($systems, md-sys-color, on-surface),
-    subhead-font: map.get($systems, md-sys-typescale, headline-small-font),
-    subhead-line-height: map.get($systems, md-sys-typescale, headline-small-line-height),
-    subhead-size: map.get($systems, md-sys-typescale, headline-small-size),
-    subhead-tracking: map.get($systems, md-sys-typescale, headline-small-tracking),
-    subhead-weight: map.get($systems, md-sys-typescale, headline-small-weight),
-    supporting-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    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-tracking: map.get($systems, md-sys-typescale, body-medium-tracking),
-    supporting-text-weight: map.get($systems, md-sys-typescale, body-medium-weight),
-    with-actions-content-padding: m3-utils.hardcode(20px 24px 0, $exclude-hardcoded),
+  @return (
+    base: (
+      dialog-actions-alignment: flex-end,
+      dialog-actions-padding: 16px 24px,
+      dialog-container-elevation-shadow: none,
+      dialog-container-max-width: 560px,
+      dialog-container-min-width: 280px,
+      dialog-container-shape: map.get($system, corner-extra-large),
+      dialog-container-small-max-width: calc(100vw - 32px),
+      dialog-content-padding: 20px 24px,
+      dialog-headline-padding: 6px 24px 13px,
+      dialog-with-actions-content-padding: 20px 24px 0,
+    ),
+    color: (
+      dialog-container-color: map.get($system, surface),
+      dialog-subhead-color: map.get($system, on-surface),
+      dialog-supporting-text-color: map.get($system, on-surface-variant),
+    ),
+    typography: (
+      dialog-subhead-font: map.get($system, headline-small-font),
+      dialog-subhead-line-height: map.get($system, headline-small-line-height),
+      dialog-subhead-size: map.get($system, headline-small-size),
+      dialog-subhead-tracking: map.get($system, headline-small-tracking),
+      dialog-subhead-weight: map.get($system, headline-small-weight),
+      dialog-supporting-text-font: map.get($system, body-medium-font),
+      dialog-supporting-text-line-height: map.get($system, body-medium-line-height),
+      dialog-supporting-text-size: map.get($system, body-medium-size),
+      dialog-supporting-text-tracking: map.get($system, body-medium-tracking),
+      dialog-supporting-text-weight: map.get($system, body-medium-weight),
+    ),
+    density: (),
   );
-
-  @return m3-utils.namespace($prefix, $tokens, $token-slots);
 }