@angular/material 20.0.4 → 20.1.0-next.1

package/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss

@@ -1,6 +1,7 @@
-@use '../../tokens/m2-utils';
 @use '../../theming/inspection';
-@use '../../style/sass-utils';
+@use 'sass:map';
+@use '../../tokens/m2-utils';
+@use '../../tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -9,21 +10,20 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: accent) {
+@function get-color-tokens($theme, $color-variant) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $disabled-color: if($is-dark, #686868, #b0b0b0);
-  $checkmark-color: inspection.get-theme-color($theme, background, background);
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
 
   @return (
-    pseudo-checkbox-full-selected-icon-color: inspection.get-theme-color($theme, $palette-name),
-    pseudo-checkbox-full-selected-checkmark-color: $checkmark-color,
-    pseudo-checkbox-full-unselected-icon-color:
-        inspection.get-theme-color($theme, foreground, secondary-text),
-    pseudo-checkbox-full-disabled-selected-checkmark-color: $checkmark-color,
+    pseudo-checkbox-full-selected-icon-color: map.get($system, secondary),
+    pseudo-checkbox-full-selected-checkmark-color: map.get($system, background),
+    pseudo-checkbox-full-unselected-icon-color: map.get($system, on-surface-variant),
+    pseudo-checkbox-full-disabled-selected-checkmark-color: map.get($system, background),
     pseudo-checkbox-full-disabled-unselected-icon-color: $disabled-color,
     pseudo-checkbox-full-disabled-selected-icon-color: $disabled-color,
-    pseudo-checkbox-minimal-selected-checkmark-color:
-        inspection.get-theme-color($theme, $palette-name),
+    pseudo-checkbox-minimal-selected-checkmark-color: map.get($system, secondary),
     pseudo-checkbox-minimal-disabled-selected-checkmark-color: if($is-dark, #686868, #b0b0b0),
   );
 }
@@ -37,14 +37,3 @@
 @function get-density-tokens($theme) {
   @return ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -48,18 +48,18 @@
     // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
     // in order to allow for the color to be overwritten if the checkbox is inside a parent that
     // has `mat-accent` and is placed inside another parent that has `mat-primary`.
-    @include _palette-styles($theme, accent);
+    @include _palette-styles($theme, secondary);
 
     .mat-primary {
       @include _palette-styles($theme, primary);
     }
 
     .mat-accent {
-      @include _palette-styles($theme, accent);
+      @include _palette-styles($theme, secondary);
     }
 
     .mat-warn {
-      @include _palette-styles($theme, warn);
+      @include _palette-styles($theme, error);
     }
   }
 }

package/core/style/_private.scss

@@ -1,18 +1,15 @@
 @use './elevation';
-@use '../theming/inspection';
+@use '../tokens/m2-utils';
+@use 'sass:map';
 
 @mixin private-theme-elevation($zValue, $theme) {
-  $elevation-color: inspection.get-theme-color($theme, foreground, elevation);
-  $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
-
-  @include elevation.elevation($zValue, $elevation-color-or-default);
+  $system: m2-utils.get-system($theme);
+  @include elevation.elevation($zValue, map.get($system, shadow));
 }
 
 @mixin private-theme-overridable-elevation($zValue, $theme) {
-  $elevation-color: inspection.get-theme-color($theme, foreground, elevation);
-  $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
-
-  @include elevation.overridable-elevation($zValue, $elevation-color-or-default);
+  $system: m2-utils.get-system($theme);
+  @include elevation.overridable-elevation($zValue, map.get($system, shadow));
 }
 
 // If the mat-animation-noop class is present on the components root element,

package/core/style/_sass-utils.scss

@@ -1,4 +1,3 @@
-@use 'sass:color';
 @use 'sass:string';
 @use 'sass:map';
 @use 'sass:meta';
@@ -51,34 +50,6 @@ $use-system-typography-variables: false;
   @return $result;
 }
 
-/// A version of the Sass `color.change` function that is safe ot use with CSS variables.
-@function safe-color-change($color, $args...) {
-  $args: meta.keywords($args);
-  $use-color-mix: $use-system-color-variables or
-      (is-css-var-name($color) and string.index($color, '--mat') == 1);
-  @if (meta.type-of($color) == 'color') {
-    @return color.change($color, $args...);
-  }
-  @else if ($color != null and
-      map.get($args, alpha) != null and $use-color-mix) {
-    $opacity: map.get($args, alpha);
-    @if meta.type-of($opacity) == number {
-      $opacity: ($opacity * 100) + '%';
-    }
-
-    @if (is-css-var-name($opacity)) {
-      $opacity: calc(var($opacity) * 100%);
-    }
-
-    @if (is-css-var-name($color)) {
-      $color: var($color);
-    }
-
-    @return #{color-mix(in srgb, #{$color} #{$opacity}, transparent)};
-  }
-  @return $color;
-}
-
 // Returns whether the $value is a CSS variable name based on whether it's a string prefixed
 // by "--".
 @function is-css-var-name($value) {

package/core/tokens/_m2-utils.scss

@@ -1,52 +1,20 @@
-@use '../m2/palette';
-@use '../m2/theming';
-@use '../m2/typography';
 @use 'sass:color';
 @use 'sass:math';
 @use 'sass:meta';
-
-$_placeholder-color-palette: theming.define-palette(palette.$red-palette);
+@use 'sass:map';
 
 // Indicates whether we're building internally. Used for backwards compatibility.
 $private-is-internal-build: false;
 
-// Placeholder color config that can be passed to token getter functions when generating token
-// slots.
-$placeholder-color-config: (
-  primary: $_placeholder-color-palette,
-  accent: $_placeholder-color-palette,
-  warn: $_placeholder-color-palette,
-  is-dark: false,
-  foreground: palette.$light-theme-foreground-palette,
-  background: palette.$light-theme-background-palette,
-);
-
-$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
-
-// Placeholder typography config that can be passed to token getter functions when generating token
-// slots.
-$placeholder-typography-config: (
-  font-family: 'Roboto, sans-serif',
-  headline-1: $_placeholder-typography-level-config,
-  headline-2: $_placeholder-typography-level-config,
-  headline-3: $_placeholder-typography-level-config,
-  headline-4: $_placeholder-typography-level-config,
-  headline-5: $_placeholder-typography-level-config,
-  headline-6: $_placeholder-typography-level-config,
-  subtitle-1: $_placeholder-typography-level-config,
-  subtitle-2: $_placeholder-typography-level-config,
-  body-1: $_placeholder-typography-level-config,
-  body-2: $_placeholder-typography-level-config,
-  caption: $_placeholder-typography-level-config,
-  button: $_placeholder-typography-level-config,
-  overline: $_placeholder-typography-level-config,
-  subheading-1: $_placeholder-typography-level-config,
-  title: $_placeholder-typography-level-config,
-);
-
-// Placeholder density config that can be passed to token getter functions when generating token
-// slots.
-$placeholder-density-config: 0;
+// Gets the theme's system values as a flat map.
+@function get-system($theme) {
+  $system: map.get($theme, _mat-system);
+  @if $system {
+    @return $system;
+  }
+
+  @return ();
+}
 
 /// Inherited function from MDC that computes which contrast tone to use on top of a color.
 /// This is used only in a narrow set of use cases when generating M2 button tokens to maintain

package/{date-range-input-harness.d-CaEyN8dT.d.ts → date-range-input-harness.d-CJ4r85Uf.d.ts}

@@ -1,8 +1,8 @@
 import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
-import { MatFormFieldControlHarness } from './form-field/testing/control/index.js';
+import { MatFormFieldControlHarnessFilters, MatFormFieldControlHarnessBase } from '@angular/material/form-field/testing/control';
 
 /** A set of criteria that can be used to filter a list of datepicker input instances. */
-interface DatepickerInputHarnessFilters extends BaseHarnessFilters {
+interface DatepickerInputHarnessFilters extends MatFormFieldControlHarnessFilters {
     /** Filters based on the value of the input. */
     value?: string | RegExp;
     /** Filters based on the placeholder text of the input. */
@@ -34,13 +34,13 @@ interface CalendarCellHarnessFilters extends BaseHarnessFilters {
     inPreviewRange?: boolean;
 }
 /** A set of criteria that can be used to filter a list of date range input instances. */
-interface DateRangeInputHarnessFilters extends BaseHarnessFilters {
+interface DateRangeInputHarnessFilters extends MatFormFieldControlHarnessFilters {
     /** Filters based on the value of the input. */
     value?: string | RegExp;
 }
 
 /** Base class for datepicker input harnesses. */
-declare abstract class MatDatepickerInputHarnessBase extends MatFormFieldControlHarness {
+declare abstract class MatDatepickerInputHarnessBase extends MatFormFieldControlHarnessBase {
     /** Whether the input is disabled. */
     isDisabled(): Promise<boolean>;
     /** Whether the input is required. */
@@ -251,6 +251,7 @@ declare class MatEndDateHarness extends MatDatepickerInputHarnessBase {
 /** Harness for interacting with a standard Material date range input in tests. */
 declare class MatDateRangeInputHarness extends DatepickerTriggerHarnessBase {
     static hostSelector: string;
+    private readonly _floatingLabelSelector;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a `MatDateRangeInputHarness`
      * that meets certain criteria.
@@ -264,6 +265,8 @@ declare class MatDateRangeInputHarness extends DatepickerTriggerHarnessBase {
     getStartInput(): Promise<MatStartDateHarness>;
     /** Gets the inner start date input inside the range input. */
     getEndInput(): Promise<MatEndDateHarness>;
+    /** Gets the floating label text for the range input, if it exists. */
+    getLabel(): Promise<string | null>;
     /** Gets the separator text between the values of the two inputs. */
     getSeparator(): Promise<string>;
     /** Gets whether the range input is disabled. */

package/datepicker/_datepicker-theme.scss

@@ -9,26 +9,6 @@
 @use '../core/typography/typography';
 @use '../button/icon-button-theme';
 
-// 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, $palette-name) {
-  $palette-color: inspection.get-theme-color($theme, $palette-name);
-  $range-color: m2-datepicker.private-get-range-background-color($palette-color);
-  $range-tokens: m2-datepicker.get-range-color-tokens($range-color);
-  $calendar-tokens: m2-datepicker.private-get-calendar-color-palette-color-tokens(
-    $theme,
-    $palette-name
-  );
-
-  @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.
@@ -51,28 +31,19 @@ $calendar-weekday-table-font-size: 11px !default;
         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));
+      @include token-utils.create-token-values-mixed(
+          m2-datepicker.get-color-tokens($theme, primary));
     }
 
-    .mat-datepicker-content {
+    .mat-datepicker-content, .mat-datepicker-toggle-active {
       &.mat-accent {
-        @include _calendar-color($theme, accent);
+        @include token-utils.create-token-values-mixed(
+            m2-datepicker.get-color-tokens($theme, secondary));
       }
 
       &.mat-warn {
-        @include _calendar-color($theme, warn);
-      }
-    }
-
-    .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);
-      }
-
-      &.mat-warn {
-        $warn-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
-        @include token-utils.create-token-values-mixed($warn-tokens);
+        @include token-utils.create-token-values-mixed(
+            m2-datepicker.get-color-tokens($theme, error));
       }
     }
   }
@@ -92,21 +63,16 @@ $calendar-weekday-table-font-size: 11px !default;
 
 @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.

package/datepicker/_m2-datepicker.scss

@@ -1,29 +1,9 @@
 @use 'sass:color';
-@use 'sass:meta';
-@use 'sass:math';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
-@use '../core/style/sass-utils';
-
-$_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;
+@use '../core/tokens/m3-utils';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -37,64 +17,50 @@ $private-default-overlap-color: #a8dab5;
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $inactive-icon-color: inspection.get-theme-color($theme, foreground, icon);
-  $text-color: inspection.get-theme-color($theme, foreground, text);
-  $secondary-text-color: inspection.get-theme-color($theme, foreground, secondary-text);
-  $disabled-text-color: inspection.get-theme-color($theme, foreground, disabled-text);
-  $divider-color: inspection.get-theme-color($theme, foreground, divider);
-  $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
-  $preview-outline-color: $divider-color;
-  $today-disabled-outline-color: null;
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  $primary-color: inspection.get-theme-color($theme, 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);
+@function get-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
 
-  // 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-text-color;
-  }
-
-  @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
-    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.
-    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,
+  @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: 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),
+
+    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-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,
-  ));
+    datepicker-calendar-date-disabled-state-text-color: $disabled,
+    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.
@@ -123,65 +89,7 @@ $private-default-overlap-color: #a8dab5;
   );
 }
 
-// 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, $palette-name) {
-  $palette-color: inspection.get-theme-color($theme, $palette-name);
-  $default-contrast: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $active-background-color: sass-utils.safe-color-change($palette-color, $alpha: 0.3);
-  $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: inspection.get-theme-color($theme, foreground, disabled-button);
-  }
-
-  @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 ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/datepicker/testing/index.d.ts

@@ -1,7 +1,7 @@
-import { D as DatepickerTriggerHarnessBase, a as DatepickerToggleHarnessFilters } from '../../date-range-input-harness.d-CaEyN8dT.js';
-export { c as CalendarCellHarnessFilters, C as CalendarHarnessFilters, h as CalendarView, d as DateRangeInputHarnessFilters, b as DatepickerInputHarnessFilters, j as MatCalendarCellHarness, i as MatCalendarHarness, g as MatDateRangeInputHarness, M as MatDatepickerInputHarness, f as MatEndDateHarness, e as MatStartDateHarness } from '../../date-range-input-harness.d-CaEyN8dT.js';
+import { D as DatepickerTriggerHarnessBase, a as DatepickerToggleHarnessFilters } from '../../date-range-input-harness.d-CJ4r85Uf.js';
+export { c as CalendarCellHarnessFilters, C as CalendarHarnessFilters, h as CalendarView, d as DateRangeInputHarnessFilters, b as DatepickerInputHarnessFilters, j as MatCalendarCellHarness, i as MatCalendarHarness, g as MatDateRangeInputHarness, M as MatDatepickerInputHarness, f as MatEndDateHarness, e as MatStartDateHarness } from '../../date-range-input-harness.d-CJ4r85Uf.js';
 import { HarnessPredicate } from '@angular/cdk/testing';
-import '../../form-field/testing/control/index.js';
+import '@angular/material/form-field/testing/control';
 
 /** Harness for interacting with a standard Material datepicker toggle in tests. */
 declare class MatDatepickerToggleHarness extends DatepickerTriggerHarnessBase {

package/dialog/_m2-dialog.scss

@@ -1,7 +1,7 @@
-@use '../core/tokens/m2-utils';
 @use '../core/style/elevation';
-@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -25,19 +25,11 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  $text-base: if(m2-utils.$private-is-internal-build,
-    if($is-dark, #fff, #000),
-    inspection.get-theme-color($theme, foreground, text, 1)
-  );
-
+  $system: m2-utils.get-system($theme);
   @return (
-    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),
+    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),
   );
 }
 
@@ -63,14 +55,3 @@
 @function get-density-tokens($theme) {
   @return ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/divider/_m2-divider.scss

@@ -1,6 +1,5 @@
 @use '../core/tokens/m2-utils';
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -12,8 +11,9 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    divider-color: inspection.get-theme-color($theme, foreground, divider)
+    divider-color: map.get($system, outline)
   );
 }
 
@@ -26,14 +26,3 @@
 @function get-density-tokens($theme) {
   @return ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-    get-unthemable-tokens(),
-    get-color-tokens(m2-utils.$placeholder-color-config),
-    get-typography-tokens(m2-utils.$placeholder-typography-config),
-    get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}