@angular/material 20.0.3 → 20.1.0-next.0

package/core/_m2-app.scss

@@ -1,8 +1,6 @@
 @use 'sass:map';
-@use './tokens/m2-utils';
-@use './theming/inspection';
-@use './style/sass-utils';
 @use './style/elevation';
+@use '../core/tokens/m2-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.
@@ -12,15 +10,15 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   $tokens: (
-    app-background-color: inspection.get-theme-color($theme, background, background),
-    app-text-color: inspection.get-theme-color($theme, foreground, text),
+    app-background-color: map.get($system, background),
+    app-text-color: map.get($system, on-surface),
   );
 
   @for $zValue from 0 through 24 {
-    $elevation-color: inspection.get-theme-color($theme, foreground, elevation);
-    $shadow: elevation.get-box-shadow($zValue,
-      if($elevation-color == null, elevation.$color, $elevation-color));
+    $shadow: elevation.get-box-shadow($zValue, map.get($system, shadow));
     $tokens: map.set($tokens, 'app-elevation-shadow-level-#{$zValue}', $shadow);
   }
 
@@ -36,14 +34,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/m2/_theming.scss

@@ -85,14 +85,16 @@
   // might be inferred as numbers by Sass. Casting them to string fixes the map lookup.
   $color: if(map.has-key($palette, $hue), map.get($palette, $hue), map.get($palette, $hue + ''));
 
-  @if (meta.type-of($color) != color) {
-    // If the $color resolved to something different from a color (e.g. a CSS variable),
-    // we can't apply the opacity anyway so we return the value as is, otherwise Sass can
-    // throw an error or output something invalid.
+  @if ($opacity == null) {
     @return $color;
   }
 
-  @return rgba($color, if($opacity == null, color.opacity($color), $opacity));
+  @if (meta.type-of($color) != color) {
+    $opacity: ($opacity * 100) + '%';
+    @return #{color-mix(in srgb, #{$color} #{$opacity}, transparent)};
+  }
+
+  @return rgba($color, $opacity);
 }
 
 // Validates the specified theme by ensuring that the optional color config defines
@@ -114,26 +116,70 @@
 // Creates a light-themed color configuration from the specified
 // primary, accent and warn palettes.
 @function _mat-create-light-color-config($primary, $accent, $warn: null) {
+  $warn: if($warn != null, $warn, define-palette(palette.$red-palette));
   @return (
     primary: $primary,
     accent: $accent,
-    warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
+    warn: $warn,
     is-dark: false,
     foreground: palette.$light-theme-foreground-palette,
-    background: palette.$light-theme-background-palette
+    background: palette.$light-theme-background-palette,
+    system: (
+      surface: white,
+      surface-variant: #f6f6f6,
+      on-surface: rgba(black, 0.87),
+      on-surface-variant: rgba(black, 0.54),
+      background: map.get(palette.$grey-palette, 50),
+      inverse-surface: map.get(palette.$grey-palette, 800),
+      inverse-on-surface: white,
+      outline: rgba(black, 0.12),
+      outline-variant: rgba(black, 0.38),
+      hover-state-layer-opacity: 0.04,
+      focus-state-layer-opacity: 0.12,
+      pressed-state-layer-opacity: 0.12,
+      shadow: black,
+      primary: map.get($primary, default),
+      on-primary: map.get($primary, default-contrast),
+      secondary: map.get($accent, default),
+      on-secondary: map.get($accent, default-contrast),
+      error: map.get($warn, default),
+      on-error: map.get($warn, default-contrast),
+    ),
   );
 }
 
 // Creates a dark-themed color configuration from the specified
 // primary, accent and warn palettes.
 @function _mat-create-dark-color-config($primary, $accent, $warn: null) {
+  $warn: if($warn != null, $warn, define-palette(palette.$red-palette));
   @return (
     primary: $primary,
     accent: $accent,
-    warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
+    warn: $warn,
     is-dark: true,
     foreground: palette.$dark-theme-foreground-palette,
-    background: palette.$dark-theme-background-palette
+    background: palette.$dark-theme-background-palette,
+    system: (
+      surface: map.get(palette.$grey-palette, 800),
+      surface-variant: #4a4a4a,
+      on-surface: white,
+      on-surface-variant: rgba(white, 0.7),
+      background: #303030,
+      inverse-surface: white,
+      inverse-on-surface: rgba(black, 0.87),
+      outline: rgba(white, 0.12),
+      outline-variant: rgba(white, 0.38),
+      hover-state-layer-opacity: 0.04,
+      focus-state-layer-opacity: 0.12,
+      pressed-state-layer-opacity: 0.12,
+      shadow: black,
+      primary: map.get($primary, default),
+      on-primary: map.get($primary, default-contrast),
+      secondary: map.get($accent, default),
+      on-secondary: map.get($accent, default-contrast),
+      error: map.get($warn, default),
+      on-error: map.get($warn, default-contrast),
+    ),
   );
 }
 

package/core/option/_m2-optgroup.scss

@@ -1,6 +1,4 @@
-@use '../style/sass-utils';
 @use '../theming/inspection';
-@use '../tokens/m2-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.
@@ -11,7 +9,7 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    optgroup-label-text-color: inspection.get-theme-color($theme, foreground, text),
+    optgroup-label-text-color: inspection.get-theme-color($theme, system, on-surface),
   );
 }
 
@@ -30,14 +28,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/option/_m2-option.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,14 +10,16 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: primary) {
+@function get-color-tokens($theme, $color-variant) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $active-state-layer-color: inspection.get-theme-color($theme, foreground, base,
     if($is-dark, 0.08, 0.04));
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   @return (
-    option-selected-state-label-text-color: inspection.get-theme-color($theme, $palette-name),
-    option-label-text-color: inspection.get-theme-color($theme, foreground, text),
+    option-selected-state-label-text-color: map.get($system, primary),
+    option-label-text-color: inspection.get-theme-color($theme, system, on-surface),
     option-hover-state-layer-color: $active-state-layer-color,
     option-focus-state-layer-color: $active-state-layer-color,
     option-selected-state-layer-color: $active-state-layer-color,
@@ -38,14 +41,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/option/_option-theme.scss

@@ -26,15 +26,15 @@
         map.get(m3-option.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, primary));
     }
 
     .mat-accent {
-      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, accent));
+      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, secondary));
     }
 
     .mat-warn {
-      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, warn));
+      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, error));
     }
   }
 }

package/core/ripple/_m2-ripple.scss

@@ -1,7 +1,5 @@
 @use 'sass:meta';
-@use '../tokens/m2-utils';
 @use '../theming/inspection';
-@use '../style/sass-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.
@@ -33,14 +31,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/_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,21 @@
 }
 
 // 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);
+  $checkmark-color: inspection.get-theme-color($theme, system, 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-icon-color: map.get($system, secondary),
     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-unselected-icon-color: map.get($system, on-surface-variant),
     pseudo-checkbox-full-disabled-selected-checkmark-color: $checkmark-color,
     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 +38,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,30 @@
-@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-theming-internals-do-not-access, m2-config, color, system);
+  @if $system {
+    @return $system;
+  }
+
+  $system: map.get($theme, system);
+  @if $system {
+    @return $system;
+  }
+
+  $system: map.get($theme, color, 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/core/tokens/_m3-system.scss

@@ -19,7 +19,6 @@
 @use '../theming/config-validation';
 @use '../theming/definition';
 @use '../theming/palettes';
-@use '../style/sass-utils';
 @use './m3';
 @use 'sass:map';
 @use 'sass:meta';
@@ -197,7 +196,7 @@
       m3.md-sys-shape-values(),
       m3.md-sys-state-values());
 
-  @include sass-utils.current-selector-or-root {
+  & {
     @each $name, $value in $overrides {
       @if (map.has-key($sys-names, $name)) {
         --#{$prefix}-#{$name}: #{map.get($overrides, $name)};
@@ -223,7 +222,7 @@
   $sys-colors: map.set($sys-colors, neutral-variant20, map.get($palettes, neutral-variant, 20));
   $sys-colors: map.set($sys-colors, neutral10, map.get($palettes, neutral, 10));
 
-  @include sass-utils.current-selector-or-root {
+  & {
     @each $name, $value in $sys-colors {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -262,7 +261,7 @@
         typography-system-variables-prefix) or definition.$system-level-prefix;
   }
 
-  @include sass-utils.current-selector-or-root {
+  & {
     @each $name, $value in m3.md-sys-typescale-values($font-definition) {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -273,18 +272,17 @@
   $shadow-color: map.get(
       $theme, definition.$internals, palettes, neutral, 0);
 
-
-  @include sass-utils.current-selector-or-root {
-    @each $name, $value in m3.md-sys-elevation-values() {
-      $level: map.get($overrides, $name) or $value;
-      $value: elevation.get-box-shadow($level, $shadow-color);
+  @each $name, $value in m3.md-sys-elevation-values() {
+    $level: map.get($overrides, $name) or $value;
+    $value: elevation.get-box-shadow($level, $shadow-color);
+    & {
       --#{$prefix}-#{$name}: #{$value};
     }
   }
 }
 
 @mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
-  @include sass-utils.current-selector-or-root {
+  & {
     @each $name, $value in m3.md-sys-shape-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -292,7 +290,7 @@
 }
 
 @mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
-  @include sass-utils.current-selector-or-root {
+  & {
     @each $name, $value in m3.md-sys-state-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }

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

@@ -8,6 +8,8 @@
 @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;
@@ -17,13 +19,15 @@ $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);
+@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,
-    $palette-name
+    $color-variant
   );
 
   @include token-utils.create-token-values-mixed(map.merge($calendar-tokens, $range-tokens));
@@ -56,11 +60,11 @@ $calendar-weekday-table-font-size: 11px !default;
 
     .mat-datepicker-content {
       &.mat-accent {
-        @include _calendar-color($theme, accent);
+        @include _calendar-color($theme, secondary);
       }
 
       &.mat-warn {
-        @include _calendar-color($theme, warn);
+        @include _calendar-color($theme, error);
       }
     }