@angular/material 20.1.0-next.0 → 20.1.0-next.2

package/core/tokens/m2/_md-sys-typescale.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'sass:meta';
+
+@function md-sys-typescale-values($config) {
+  // Mapping is according to the old 2014 version of the typography spec.
+  $sys-to-config: (
+    body-large: subheading-1,
+    body-medium: body-1,
+    body-small: caption,
+    display-large: display-4,
+    display-medium: display-4,
+    display-small: display-4,
+    headline-large: display-3,
+    headline-medium: display-2,
+    headline-small: display-1,
+    label-large: subheading-2,
+    label-medium: body-2,
+    label-small: button,
+    title-large: headline,
+    title-medium: headline,
+    title-small: title,
+  );
+
+  // If the config is based on the updated 2018 version of the typography spec, then
+  // use the correct config keys mapping.
+  @if (map.get($config, headline-1) != null) {
+    $sys-to-config: (
+      body-large: body-1,
+      body-medium: body-2,
+      body-small: caption,
+      label-large: subtitle-1,
+      label-medium: subtitle-2,
+      label-small: button,
+      display-large: headline-1,
+      display-medium: headline-1,
+      display-small: headline-1,
+      headline-large: headline-2,
+      headline-medium: headline-3,
+      headline-small: headline-4,
+      title-large: headline-5,
+      title-medium: headline-5,
+      title-small: headline-6,
+    );
+  }
+
+  $typography: ();
+  @each $sys-key, $config-key in $sys-to-config {
+    $font: map.get($config, $config-key, font-family);
+    @if (meta.type-of($font) == 'string') {
+      $font: string.unquote($font);
+    }
+    $line-height: map.get($config, $config-key, line-height);
+    $size: map.get($config, $config-key, font-size);
+    $tracking: map.get($config, $config-key, letter-spacing);
+    $weight: map.get($config, $config-key, font-weight);
+    $typography: map.merge($typography, (
+      #{$sys-key}: $weight $size #{'/'} $line-height $font,
+      #{$sys-key}-font: $font,
+      #{$sys-key}-line-height: $line-height,
+      #{$sys-key}-size: $size,
+      #{$sys-key}-tracking: $tracking,
+      #{$sys-key}-weight: $weight,
+    ));
+  }
+
+  @return $typography;
+}

package/core/tokens/m3/_md-sys-color.scss

@@ -8,7 +8,7 @@
 // Indicates whether alternative tokens should be used
 $_alternate-tokens: false;
 
-@function md-sys-color-values-dark($palettes) {
+@function md-sys-color-values-dark($palettes: ()) {
   $values: (
     background: map.get($palettes, neutral, 6),
     error: map.get($palettes, error, 80),
@@ -80,7 +80,7 @@ $_alternate-tokens: false;
   @return $values;
 }
 
-@function md-sys-color-values-light($palettes) {
+@function md-sys-color-values-light($palettes: ()) {
   $values: (
     background: map.get($palettes, neutral, 98),
     error: map.get($palettes, error, 40),

package/core/tokens/m3/_md-sys-typescale.scss

@@ -8,7 +8,7 @@
 // Indicates whether alternative tokens should be used
 $_alternate-tokens: false;
 
-@function md-sys-typescale-values($typography) {
+@function md-sys-typescale-values($typography: ()) {
   $plain: map.get($typography, plain);
   $brand: map.get($typography, brand);
   $bold: map.get($typography, bold);

package/core/tokens/m3/_theme.scss

@@ -1,4 +1,3 @@
-@use '../../theming/palettes';
 @use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
@@ -17,31 +16,20 @@
   @return $new-map;
 }
 
-/// Map key used to store internals of theme config.
-$internals: _mat-theming-internals-do-not-access;
-
-$placeholder-palettes: md-sys-color.md-sys-color-values-light(palettes.$blue-palette);
-$placeholder-palettes: map.set($placeholder-palettes, primary, palettes.$blue-palette);
-$app-vars: (
-  'md-sys-color': _create-system-app-vars-map(
-      md-sys-color.md-sys-color-values-light($placeholder-palettes)),
-  'md-sys-typescale': _create-system-app-vars-map(md-sys-typescale.md-sys-typescale-values((
-    brand: (Roboto),
-    plain: (Roboto),
-    bold: 700,
-    medium: 500,
-    regular: 400
-  ))),
-  'md-sys-elevation': _create-system-app-vars-map(md-sys-elevation.md-sys-elevation-values()),
-  'md-sys-state': _create-system-app-vars-map(md-sys-state.md-sys-state-values()),
-  'md-sys-shape': _create-system-app-vars-map(md-sys-shape.md-sys-shape-values()),
-  // Add a subset of palette-specific colors used by components instead of system values
-  'md-ref-palette': _create-system-app-vars-map(
-      (
-        neutral10: '', // Form field native select option text color
-        neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
-      )
+$_sys-maps: (
+  md-sys-color.md-sys-color-values-light(),
+  md-sys-typescale.md-sys-typescale-values(),
+  md-sys-elevation.md-sys-elevation-values(),
+  md-sys-state.md-sys-state-values(),
+  md-sys-shape.md-sys-shape-values(),
+  (
+    neutral10: '', // Form field native select option text color
+    neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
   ),
 );
 
-$sys-theme: ($internals: $app-vars);
+$_system: ();
+@each $sys-map in $_sys-maps {
+  $_system: map.merge($_system, _create-system-app-vars-map($sys-map));
+}
+$sys-theme: (_mat-system: $_system);

package/datepicker/_datepicker-theme.scss

@@ -2,81 +2,44 @@
 @use 'sass:map';
 @use './m2-datepicker';
 @use './m3-datepicker';
-@use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/token-utils';
-@use '../core/style/sass-utils';
 @use '../core/typography/typography';
 @use '../button/icon-button-theme';
-@use '../core/tokens/m2-utils';
-@use '../core/tokens/m3-utils';
-
-// TODO(crisbeto): these variables aren't used anymore and should be removed.
-$selected-today-box-shadow-width: 1px;
-$selected-fade-amount: 0.6;
-$range-fade-amount: 0.2;
-$today-fade-amount: 0.2;
-$calendar-body-font-size: 13px !default;
-$calendar-weekday-table-font-size: 11px !default;
-
-@mixin _calendar-color($theme, $color-variant) {
-  $system: m2-utils.get-system($theme);
-  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
-
-  $range-color: m2-datepicker.private-get-range-background-color(map.get($system, primary));
-  $range-tokens: m2-datepicker.get-range-color-tokens($range-color);
-  $calendar-tokens: m2-datepicker.private-get-calendar-color-palette-color-tokens(
-    $theme,
-    $color-variant
-  );
-
-  @include token-utils.create-token-values-mixed(map.merge($calendar-tokens, $range-tokens));
-}
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-datepicker.
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
+  $tokens: m2-datepicker.get-unthemable-tokens();
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-datepicker.get-tokens($theme), base));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-datepicker.get-unthemable-tokens());
-    }
+    $tokens: map.get(m3-datepicker.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Outputs color theme styles for the mat-datepicker.
 /// @param {Map} $theme The theme to generate color styles for.
 /// @param {String} $color-variant The color variant to use for the component (M3 only)
 @mixin color($theme, $color-variant: null) {
+  $tokens: m2-datepicker.get-color-tokens($theme, primary);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        map.get(m3-datepicker.get-tokens($theme, $color-variant), color));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-datepicker.get-color-tokens($theme));
-    }
-
-    .mat-datepicker-content {
-      &.mat-accent {
-        @include _calendar-color($theme, secondary);
-      }
+    $tokens: map.get(m3-datepicker.get-tokens($theme, $color-variant), color);
+  }
 
-      &.mat-warn {
-        @include _calendar-color($theme, error);
-      }
-    }
+  @include token-utils.values($tokens);
 
-    .mat-datepicker-toggle-active {
+  @if inspection.get-theme-version($theme) != 1 {
+    .mat-datepicker-content, .mat-datepicker-toggle-active {
       &.mat-accent {
-        $accent-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
-        @include token-utils.create-token-values-mixed($accent-tokens);
+        $tokens: m2-datepicker.get-color-tokens($theme, secondary);
+        @include token-utils.values($tokens);
       }
 
       &.mat-warn {
-        $warn-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
-        @include token-utils.create-token-values-mixed($warn-tokens);
+        $tokens: m2-datepicker.get-color-tokens($theme, error);
+        @include token-utils.values($tokens);
       }
     }
   }
@@ -85,40 +48,39 @@ $calendar-weekday-table-font-size: 11px !default;
 /// Outputs typography theme styles for the mat-datepicker.
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
+  $tokens: m2-datepicker.get-typography-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-datepicker.get-tokens($theme), typography));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-datepicker.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-datepicker.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin date-range-colors(
   $range-color,
-  $comparison-color: m2-datepicker.$private-default-comparison-color,
-  $overlap-color: m2-datepicker.$private-default-overlap-color,
-  $overlap-selected-color:
-    m2-datepicker.private-get-default-overlap-selected-color($overlap-color)
+  $comparison-color: rgba(#f9ab00, 0.2),
+  $overlap-color: #a8dab5,
+  $overlap-selected-color: color.adjust($overlap-color, $lightness: -30%)
 ) {
-  $tokens: m2-datepicker.get-range-color-tokens(
-    $range-color: $range-color,
-    $comparison-color: $comparison-color,
-    $overlap-color: $overlap-color,
-    $overlap-selected-color: $overlap-selected-color,
-  );
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values-mixed($tokens);
-  }
+  @include overrides((
+    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,
+  ));
 }
 
 /// Outputs density theme styles for the mat-datepicker.
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
+  $tokens: m2-datepicker.get-density-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-datepicker.get-tokens($theme), density));
-  } @else {
+    $tokens: map.get(m3-datepicker.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+
+  @if inspection.get-theme-version($theme) != 1 {
     // TODO(crisbeto): move this into the structural styles
     // once the icon button density is switched to tokens.
 
@@ -150,23 +112,21 @@ $calendar-weekday-table-font-size: 11px !default;
 /// @param {Map} $theme The theme to generate styles for.
 /// @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-datepicker') {
-    @if inspection.get-theme-version($theme) == 1 {
-      @include base($theme);
-      @include color($theme, $color-variant);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme, $color-variant);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
       @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
       @include typography($theme);
-    } @else {
-      @include base($theme);
-      @if inspection.theme-has($theme, color) {
-        @include color($theme);
-      }
-      @if inspection.theme-has($theme, density) {
-        @include density($theme);
-      }
-      @if inspection.theme-has($theme, typography) {
-        @include typography($theme);
-      }
     }
   }
 }

package/datepicker/_m2-datepicker.scss

@@ -1,32 +1,9 @@
 @use 'sass:color';
-@use 'sass:meta';
-@use 'sass:math';
-@use '../core/theming/inspection';
 @use '../core/style/elevation';
-@use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
 @use '../core/tokens/m2-utils';
 @use 'sass:map';
 
-$_selected-fade-amount: 0.6;
-$_today-fade-amount: 0.2;
-
-// Utility that produces a range background color from a specific color.
-@function private-get-range-background-color($color) {
-  @return rgba($color, 0.2);
-}
-
-// Utility that produces the overlap selected color from an overlap color.
-@function private-get-default-overlap-selected-color($overlap-color) {
-  @return color.adjust($overlap-color, $lightness: -30%);
-}
-
-// Default range comparison color.
-$private-default-comparison-color: private-get-range-background-color(#f9ab00);
-
-// Default range overlap color.
-$private-default-overlap-color: #a8dab5;
-
 // 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() {
@@ -39,139 +16,72 @@ $private-default-overlap-color: #a8dab5;
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
+@function get-color-tokens($theme, $color-variant) {
   $system: m2-utils.get-system($theme);
-
-  $inactive-icon-color: inspection.get-theme-color($theme, foreground, icon);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
-  $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
-  $preview-outline-color: map.get($system, outline);
-  $today-disabled-outline-color: null;
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $system: m2-utils.get-system($theme);
 
-  $primary-color: map.get($system, primary);
-  $range-tokens: get-range-color-tokens(private-get-range-background-color($primary-color));
-  $calendar-tokens: private-get-calendar-color-palette-color-tokens($theme, primary);
-  $toggle-tokens: private-get-toggle-color-palette-color-tokens($theme, primary);
-
-  // The divider color is set under the assumption that it'll be used
-  // for a solid border, but because we're using a dashed border for the
-  // preview range, we need to bump its opacity to ensure that it's visible.
-  @if meta.type-of($preview-outline-color) == color {
-    $preview-outline-opacity: math.min(color.opacity($preview-outline-color) * 2, 1);
-    $preview-outline-color: rgba($preview-outline-color, $preview-outline-opacity);
-  }
-
-  @if (meta.type-of($hint-text-color) == color) {
-    $today-disabled-outline-color: color.adjust($hint-text-color, $alpha: -$_today-fade-amount);
-  }
-  @else {
-    $today-disabled-outline-color: $disabled;
-  }
-
-  @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
+  @return (
+    datepicker-calendar-date-in-range-state-background-color:
+        m3-utils.color-with-opacity(map.get($system, primary), 20%),
+    datepicker-calendar-date-in-comparison-range-state-background-color:
+        m3-utils.color-with-opacity(map.get($system, secondary), 20%),
+    datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5,
+    datepicker-calendar-date-in-overlap-range-selected-state-background-color:
+        color.adjust(#a8dab5, $lightness: -30%),
+    datepicker-calendar-date-selected-state-text-color: map.get($system, on-primary),
+    datepicker-calendar-date-selected-state-background-color: map.get($system, primary),
+    datepicker-calendar-date-selected-disabled-state-background-color:
+        m3-utils.color-with-opacity(map.get($system, primary), 38%),
+    datepicker-calendar-date-today-selected-state-outline-color: map.get($system, on-primary),
+    datepicker-calendar-date-focus-state-background-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, focus-state-layer-opacity)),
+    datepicker-calendar-date-hover-state-background-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, hover-state-layer-opacity)),
+
+    datepicker-toggle-active-state-icon-color: map.get($system, primary),
     datepicker-toggle-icon-color: map.get($system, on-surface-variant),
     datepicker-calendar-body-label-text-color: map.get($system, on-surface-variant),
-    datepicker-calendar-period-button-text-color:
-        inspection.get-theme-color($theme, foreground, base),
+    datepicker-calendar-period-button-text-color: map.get($system, on-surface),
     datepicker-calendar-period-button-icon-color: map.get($system, on-surface-variant),
     datepicker-calendar-navigation-button-icon-color: map.get($system, on-surface-variant),
     datepicker-calendar-header-divider-color: map.get($system, outline),
     datepicker-calendar-header-text-color: map.get($system, on-surface-variant),
 
-    // 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.
-    datepicker-calendar-date-today-outline-color: $hint-text-color,
-    datepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
+    datepicker-calendar-date-today-outline-color: map.get($system, on-surface-variant),
+    datepicker-calendar-date-today-disabled-state-outline-color: $disabled,
     datepicker-calendar-date-text-color: map.get($system, on-surface),
     datepicker-calendar-date-outline-color: transparent,
     datepicker-calendar-date-disabled-state-text-color: $disabled,
-    datepicker-calendar-date-preview-state-outline-color: $preview-outline-color,
+    datepicker-calendar-date-preview-state-outline-color: map.get($system, on-surface-variant),
     datepicker-range-input-separator-color: map.get($system, on-surface),
     datepicker-range-input-disabled-state-separator-color: $disabled,
     datepicker-range-input-disabled-state-text-color: $disabled,
     datepicker-calendar-container-background-color: map.get($system, surface),
     datepicker-calendar-container-text-color: map.get($system, on-surface),
-  ));
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
     // TODO(crisbeto): the typography tokens for other components set every typography dimension of
     // 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.
-    datepicker-calendar-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    datepicker-calendar-text-font: map.get($system, body-large-font),
     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-body-label-text-size: map.get($system, label-small-size),
+    datepicker-calendar-body-label-text-weight: map.get($system, label-small-weight),
+    datepicker-calendar-period-button-text-size: map.get($system, label-small-size),
+    datepicker-calendar-period-button-text-weight: map.get($system, label-small-weight),
     datepicker-calendar-header-text-size: 11px,
     datepicker-calendar-header-text-weight:
-        inspection.get-theme-typography($theme, body-1, font-weight),
+        map.get($system, body-large-weight),
   );
 }
 
-// Gets the tokens map that can be used to override the range colors.
-@function get-range-color-tokens(
-  $range-color,
-  $comparison-color: $private-default-comparison-color,
-  $overlap-color: $private-default-overlap-color,
-  $overlap-selected-color: private-get-default-overlap-selected-color($overlap-color)) {
-
-  @return (
-    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,
-  );
-}
-
-@function private-get-calendar-color-palette-color-tokens($theme, $color-variant) {
-  $system: m2-utils.get-system($theme);
-  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
-
-  $palette-color: map.get($system, primary);
-  $default-contrast: map.get($system, on-primary);
-  $active-background-color: m3-utils.color-with-opacity(map.get($system, primary), 30%);
-  $active-disabled-color: null;
-
-  @if (meta.type-of($palette-color) == color) {
-    $active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount);
-  }
-  @else {
-    $active-disabled-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
-  }
-
-  @return (
-    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 (
-    datepicker-toggle-active-state-icon-color:
-        inspection.get-theme-color($theme, $palette-name, text),
-  );
-}
-
-
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
   @return ();

package/datepicker/index.d.ts

@@ -1127,7 +1127,7 @@ interface MatDatepickerControl<D> {
     getOverlayLabelId(): string | null;
     stateChanges: Observable<void>;
 }
-/** A datepicker that can be attached to a {@link MatDatepickerControl}. */
+/** A datepicker that can be attached to a `MatDatepickerControl`. */
 interface MatDatepickerPanel<C extends MatDatepickerControl<D>, S, D = ExtractDateTypeFromSelection<S>> {
     /** Stream that emits whenever the date picker is closed. */
     closedStream: EventEmitter<void>;

package/dialog/_dialog-theme.scss

@@ -1,48 +1,44 @@
 @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/typography/typography';
 
 @mixin base($theme) {
+  $tokens: m2-dialog.get-unthemable-tokens();
   @if inspection.get-theme-version($theme) == 1 {
-    @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.get-unthemable-tokens());
-    }
+    $tokens: map.get(m3-dialog.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin color($theme) {
+  $tokens: m2-dialog.get-color-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @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.get-color-tokens($theme));
-    }
+    $tokens: map.get(m3-dialog.get-tokens($theme), color);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin typography($theme) {
+  $tokens: m2-dialog.get-typography-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @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.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-dialog.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin density($theme) {
+  $tokens: m2-dialog.get-density-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-dialog.get-tokens($theme), density));
-  } @else {
+    $tokens: map.get(m3-dialog.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -60,23 +56,21 @@
 }
 
 @mixin theme($theme) {
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') {
-    @if inspection.get-theme-version($theme) == 1 {
-      @include base($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
       @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
       @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
       @include typography($theme);
-    } @else {
-      @include base($theme);
-      @if inspection.theme-has($theme, color) {
-        @include color($theme);
-      }
-      @if inspection.theme-has($theme, density) {
-        @include density($theme);
-      }
-      @if inspection.theme-has($theme, typography) {
-        @include typography($theme);
-      }
     }
   }
 }