@angular/material 20.0.0-next.4 → 20.0.0-next.6

package/core/tokens/_token-utils.scss

@@ -2,6 +2,7 @@
 @use '../style/sass-utils';
 @use './m3-system';
 @use 'sass:list';
+@use 'sass:meta';
 @use 'sass:map';
 @use 'sass:string';
 
@@ -65,16 +66,13 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
   @return true;
 }
 
-// Emits a slot for the given token, provided that it has a non-null value in the token map passed
-// to `use-tokens`.
+// Returns the token slot value.
 // Accepts an optional fallback parameter to include in the CSS variable.
 // If $fallback is `true`, then use the tokens map to get the fallback.
 // TODO: Remove the use case where we accept "true" and handle any failing client screenshots
-@mixin create-token-slot($property, $token, $fallback: null) {
+@function slot($token, $fallback: null) {
   $_assert: _assert-use-tokens($token);
-  @if map.get($_tokens, $token) != null {
-    #{$property}: #{_get-token-value($token, $fallback)};
-  }
+  @return _get-token-value($token, $fallback);
 }
 
 // Returns the name of a token including the current prefix. Intended to be used in calculations
@@ -84,16 +82,6 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
   @return _create-var-name($_component-prefix, $token);
 }
 
-// Returns a `var()` reference to a specific token. Intended for declarations
-// where the token has to be referenced as a part of a larger expression.
-// Accepts an optional fallback parameter to include in the CSS variable.
-// If $fallback is `true`, then use the tokens map to get the fallback.
-// TODO: Remove the use case where we accept "true" and handle any failing client screenshots
-@function get-token-variable($token, $fallback: null) {
-  $_assert: _assert-use-tokens($token);
-  @return _get-token-value($token, $fallback);
-}
-
 // Gets the token's fallback value. Prefers adding a system-level fallback if one exists, otherwise
 // use the provided fallback.
 @function _get-token-fallback($token, $fallback: null) {
@@ -133,20 +121,25 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
       & {
         @each $key, $value in $tokens {
           @if $value != null {
-            #{_create-var-name($prefix, $key)}: #{$value};
+            @include define-css_var($prefix, $key, $value);
           }
         }
       }
     } @else {
       @each $key, $value in $tokens {
         @if $value != null {
-          #{_create-var-name($prefix, $key)}: #{$value};
+          @include define-css-var($prefix, $key, $value);
         }
       }
     }
   }
 }
 
+@mixin define-css-var($prefix, $key, $value) {
+  $name: _create-var-name($prefix, $key);
+  #{$name}: #{$value};
+}
+
 // MDC doesn't currently handle elevation tokens properly. As a temporary workaround we can combine
 // the elevation and shadow-color tokens into a full box-shadow and use it as the value for the
 // elevation token.
@@ -230,7 +223,6 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
 @mixin batch-create-token-values($overrides: (), $namespace-configs...) {
   @include sass-utils.current-selector-or-root() {
     $prefixed-name-data: ();
-    $unprefixed-name-data: ();
     $all-names: ();
 
     @each $config in $namespace-configs {
@@ -240,29 +232,7 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
       @each $name, $value in $tokens {
         $prefixed-name: $prefix + $name;
         $all-names: list.append($all-names, $prefixed-name, $separator: comma);
-        @if map.has-key($prefixed-name-data, $prefixed-name) {
-          @error #{
-          'Error overriding token: Ambiguous token name `'
-        }#{
-          $prefixed-name
-        }#{
-          '` exists in multiple namespaces: `('
-        }#{
-          list.nth(map.get($prefixed-name-data, $prefixed-name), 1)
-        }#{
-          ')` and `('
-        }#{
-          $namespace
-        }#{
-          ')`'
-        };
-        }
         $prefixed-name-data: map.set($prefixed-name-data, $prefixed-name, ($namespace, $name));
-        $unprefixed-data: map.has-key($unprefixed-name-data, $name) and
-          map.get($unprefixed-name-data, $name) or
-          ();
-        $unprefixed-data: list.append($unprefixed-data, ($namespace, $prefixed-name));
-        $unprefixed-name-data: map.set($unprefixed-name-data, $name, $unprefixed-data);
       }
     }
 
@@ -277,28 +247,6 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
             $name: $value,
           )
         );
-      } @else if (map.has-key($unprefixed-name-data, $name)) {
-        $datalist: map.get($unprefixed-name-data, $name);
-        $prefixed-names: ();
-        @each $data in $datalist {
-          $namespace: list.nth($data, 1);
-          $prefixed-names: list.append($prefixed-names, list.nth($data, 2), $separator: comma);
-          @include create-token-values(
-            $namespace,
-            (
-              $name: $value,
-            )
-          );
-        }
-        @warn #{
-        'Token `'
-      }#{
-        $name
-      }#{
-        '` is deprecated. Please use one of the following alternatives: '
-      }#{
-        $prefixed-names
-      };
       } @else {
         @error #{'Invalid token name `'}#{$name}#{'`. '}#{'Valid tokens are: '}#{$all-names};
       }
@@ -318,3 +266,37 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
   }
   @return $result;
 }
+
+/// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots.
+/// @param {List} $prefix The token prefix for the given tokens.
+/// @param {Map|(Map, Map)} $values A map of M3 token values for the given prefix.
+///  This param may also be a tuple of maps, the first one representing the default M3 token values,
+//   and the second containing overrides for different color variants.
+//   Single map example:
+//     (token1: green, token2: 2px)
+//   Tuple example:
+//     (
+//       (token1: green, token2: 2px),
+//       (
+//         secondary: (token1: blue),
+//         error: (token1: red),
+//       )
+//     )
+/// @param {Map} $slots A map of token slots, with null value indicating the token is not supported.
+/// @param {String|null} $variant The name of the variant the token values are for.
+/// @return {Map} A map of fully qualified token names to values, for only the supported tokens.
+@function namespace-tokens($prefix, $values, $slots, $variant: null) {
+  $result: ();
+  @if $variant == null and meta.type-of($values) == 'list' and list.length($values == 2) {
+    $variants: list.nth($values, 2);
+    $values: list.nth($values, 1);
+    @each $variant, $overrides in $variants {
+
+      $result: map.merge($result, namespace-tokens($prefix, $overrides, $slots, $variant));
+    }
+  }
+  $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix)));
+  $used-m3-tokens: _pick(_filter-nulls($values), $used-token-names);
+  $prefix: if($variant == null, $prefix, list.append($prefix, $variant));
+  @return map.merge($result, ($prefix: $used-m3-tokens));
+}

package/core/tokens/m3/_index.scss

@@ -1,165 +1,8 @@
-@use 'sass:meta';
-@use 'sass:map';
-@use './mat/app' as tokens-mat-app;
-@use './mat/autocomplete' as tokens-mat-autocomplete;
-@use './mat/badge' as tokens-mat-badge;
-@use './mat/text-button' as tokens-mat-text-button;
-@use './mat/protected-button' as tokens-mat-protected-button;
-@use './mat/filled-button' as tokens-mat-filled-button;
-@use './mat/outlined-button' as tokens-mat-outlined-button;
-@use './mat/dialog' as tokens-mat-dialog;
-@use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
-@use './mat/card' as tokens-mat-card;
-@use './mat/chip' as tokens-mat-chip;
-@use './mat/datepicker' as tokens-mat-datepicker;
-@use './mat/divider' as tokens-mat-divider;
-@use './mat/expansion' as tokens-mat-expansion;
-@use './mat/fab' as tokens-mat-fab;
-@use './mat/fab-small' as tokens-mat-fab-small;
-@use './mat/form-field' as tokens-mat-form-field;
-@use './mat/grid-list' as tokens-mat-grid-list;
-@use './mat/icon' as tokens-mat-icon;
-@use './mat/icon-button' as tokens-mat-icon-button;
-@use './mat/list' as tokens-mat-list;
-@use './mat/menu' as tokens-mat-menu;
-@use './mat/option' as tokens-mat-option;
-@use './mat/optgroup' as tokens-mat-optgroup;
-@use './mat/paginator' as tokens-mat-paginator;
-@use './mat/checkbox' as tokens-mat-checkbox;
-@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
-@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
-@use './mat/radio' as tokens-mat-radio;
-@use './mat/ripple' as tokens-mat-ripple;
-@use './mat/select' as tokens-mat-select;
-@use './mat/sidenav' as tokens-mat-sidenav;
-@use './mat/slider' as tokens-mat-slider;
-@use './mat/switch' as tokens-mat-switch;
-@use './mat/snack-bar' as tokens-mat-snack-bar;
-@use './mat/sort' as tokens-mat-sort;
-@use './mat/standard-button-toggle' as tokens-mat-button-toggle;
-@use './mat/stepper' as tokens-mat-stepper;
-@use './mat/tab-header' as tokens-mat-tab-header;
-@use './mat/table' as tokens-mat-table;
-@use './mat/toolbar' as tokens-mat-toolbar;
-@use './mat/tree' as tokens-mat-tree;
-@use './mat/timepicker' as tokens-mat-timepicker;
-@use './mat/tonal-button' as tokens-mat-tonal-button;
-@use './mdc/checkbox' as tokens-mdc-checkbox;
-@use './mdc/text-button' as tokens-mdc-text-button;
-@use './mdc/protected-button' as tokens-mdc-protected-button;
-@use './mdc/filled-button' as tokens-mdc-filled-button;
-@use './mdc/outlined-button' as tokens-mdc-outlined-button;
-@use './mdc/chip' as tokens-mdc-chip;
-@use './mdc/circular-progress' as tokens-mdc-circular-progress;
-@use './mdc/dialog' as tokens-mdc-dialog;
-@use './mdc/elevated-card' as tokens-mdc-elevated-card;
-@use './mdc/extended-fab' as tokens-mdc-extended-fab;
-@use './mdc/fab' as tokens-mdc-fab;
-@use './mdc/fab-small' as tokens-mdc-fab-small;
-@use './mdc/filled-text-field' as tokens-mdc-filled-text-field;
-@use './mdc/icon-button' as tokens-mdc-icon-button;
-@use './mdc/linear-progress' as tokens-mdc-linear-progress;
-@use './mdc/list' as tokens-mdc-list;
-@use './mdc/outlined-card' as tokens-mdc-outlined-card;
-@use './mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
-@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
-@use './mdc/radio' as tokens-mdc-radio;
-@use './mdc/slider' as tokens-mdc-slider;
-@use './mdc/snack-bar' as tokens-mdc-snack-bar;
-@use './mdc/switch' as tokens-mdc-switch;
-@use './mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab;
-@use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
-
-$_module-names: (
-  // Custom tokens
-  tokens-mat-app,
-  tokens-mat-autocomplete,
-  tokens-mat-badge,
-  tokens-mat-bottom-sheet,
-  tokens-mat-button-toggle,
-  tokens-mat-card,
-  tokens-mat-chip,
-  tokens-mat-datepicker,
-  tokens-mat-dialog,
-  tokens-mat-divider,
-  tokens-mat-expansion,
-  tokens-mat-fab,
-  tokens-mat-fab-small,
-  tokens-mat-filled-button,
-  tokens-mat-tonal-button,
-  tokens-mat-form-field,
-  tokens-mat-grid-list,
-  tokens-mat-icon-button,
-  tokens-mat-icon,
-  tokens-mat-menu,
-  tokens-mat-optgroup,
-  tokens-mat-option,
-  tokens-mat-outlined-button,
-  tokens-mat-paginator,
-  tokens-mat-checkbox,
-  tokens-mat-full-pseudo-checkbox,
-  tokens-mat-list,
-  tokens-mat-minimal-pseudo-checkbox,
-  tokens-mat-protected-button,
-  tokens-mat-radio,
-  tokens-mat-ripple,
-  tokens-mat-select,
-  tokens-mat-sidenav,
-  tokens-mat-slider,
-  tokens-mat-switch,
-  tokens-mat-snack-bar,
-  tokens-mat-sort,
-  tokens-mat-stepper,
-  tokens-mat-tab-header,
-  tokens-mat-table,
-  tokens-mat-text-button,
-  tokens-mat-toolbar,
-  tokens-mat-tree,
-  tokens-mat-timepicker,
-  // MDC tokens
-  tokens-mdc-checkbox,
-  tokens-mdc-chip,
-  tokens-mdc-text-button,
-  tokens-mdc-protected-button,
-  tokens-mdc-filled-button,
-  tokens-mdc-outlined-button,
-  tokens-mdc-chip,
-  tokens-mdc-circular-progress,
-  tokens-mdc-dialog,
-  tokens-mdc-elevated-card,
-  tokens-mdc-extended-fab,
-  tokens-mdc-fab,
-  tokens-mdc-fab-small,
-  tokens-mdc-filled-text-field,
-  tokens-mdc-icon-button,
-  tokens-mdc-linear-progress,
-  tokens-mdc-list,
-  tokens-mdc-outlined-card,
-  tokens-mdc-outlined-text-field,
-  tokens-mdc-plain-tooltip,
-  tokens-mdc-radio,
-  tokens-mdc-slider,
-  tokens-mdc-snack-bar,
-  tokens-mdc-switch,
-  tokens-mdc-secondary-navigation-tab,
-  tokens-mdc-tab-indicator
-);
-
-/// Gets the full set of M3 tokens for the given theme object.
-/// @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} Full set of M3 tokens
-@function get-m3-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: ();
-
-  @each $module-name in $_module-names {
-    $fn: meta.get-function(
-      $name: 'get-tokens',
-      $module: $module-name,
-    );
-    $tokens: map.merge($tokens, meta.call($fn, $systems, $exclude-hardcoded, $token-slots));
-  }
-
-  @return $tokens;
-}
+@forward './md-ref-palette' as md-ref-palette-*;
+@forward './md-ref-typeface' as md-ref-typeface-*;
+@forward './md-sys-color' as md-sys-color-*;
+@forward './md-sys-elevation' as md-sys-elevation-*;
+@forward './md-sys-motion' as md-sys-motion-*;
+@forward './md-sys-shape' as md-sys-shape-*;
+@forward './md-sys-state' as md-sys-state-*;
+@forward './md-sys-typescale' as md-sys-typescale-*;

package/{date-range-input-harness.d-549a9f7e.d.ts → date-range-input-harness.d-440b288d.d.ts}

@@ -1,5 +1,5 @@
 import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
-import { M as MatFormFieldControlHarness } from './form-field-control-harness.d-2d91f25a.js';
+import { M as MatFormFieldControlHarness } from './form-field-control-harness.d-e3cf007b.js';
 
 /** A set of criteria that can be used to filter a list of datepicker input instances. */
 interface DatepickerInputHarnessFilters extends BaseHarnessFilters {
@@ -275,4 +275,5 @@ declare class MatDateRangeInputHarness extends DatepickerTriggerHarnessBase {
     protected _openCalendar(): Promise<void>;
 }
 
-export { type CalendarHarnessFilters as C, DatepickerTriggerHarnessBase as D, MatDatepickerInputHarness as M, type DatepickerToggleHarnessFilters as a, type DatepickerInputHarnessFilters as b, type CalendarCellHarnessFilters as c, type DateRangeInputHarnessFilters as d, MatStartDateHarness as e, MatEndDateHarness as f, MatDateRangeInputHarness as g, CalendarView as h, MatCalendarHarness as i, MatCalendarCellHarness as j };
+export { DatepickerTriggerHarnessBase as D, MatDatepickerInputHarness as M, MatStartDateHarness as e, MatEndDateHarness as f, MatDateRangeInputHarness as g, CalendarView as h, MatCalendarHarness as i, MatCalendarCellHarness as j };
+export type { CalendarHarnessFilters as C, DatepickerToggleHarnessFilters as a, DatepickerInputHarnessFilters as b, CalendarCellHarnessFilters as c, DateRangeInputHarnessFilters as d };

package/datepicker/_datepicker-theme.scss

@@ -1,6 +1,6 @@
 @use 'sass:color';
 @use 'sass:map';
-@use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker;
+@use './m2-datepicker';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
@@ -19,17 +19,15 @@ $calendar-weekday-table-font-size: 11px !default;
 
 @mixin _calendar-color($theme, $palette-name) {
   $palette-color: inspection.get-theme-color($theme, $palette-name);
-  $range-color: tokens-mat-datepicker.private-get-range-background-color($palette-color);
-  $range-tokens: tokens-mat-datepicker.get-range-color-tokens($range-color);
-  $calendar-tokens: tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens(
+  $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(
-    tokens-mat-datepicker.$prefix,
-    map.merge($calendar-tokens, $range-tokens)
-  );
+    m2-datepicker.$prefix, map.merge($calendar-tokens, $range-tokens));
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -41,9 +39,7 @@ $calendar-weekday-table-font-size: 11px !default;
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-datepicker.$prefix,
-        tokens-mat-datepicker.get-unthemable-tokens()
-      );
+        m2-datepicker.$prefix, m2-datepicker.get-unthemable-tokens());
     }
   }
 }
@@ -59,9 +55,7 @@ $calendar-weekday-table-font-size: 11px !default;
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-datepicker.$prefix,
-        tokens-mat-datepicker.get-color-tokens($theme)
-      );
+        m2-datepicker.$prefix, m2-datepicker.get-color-tokens($theme));
     }
 
     .mat-datepicker-content {
@@ -76,20 +70,13 @@ $calendar-weekday-table-font-size: 11px !default;
 
     .mat-datepicker-toggle-active {
       &.mat-accent {
-        $accent-tokens: tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens(
-          $theme,
-          accent
-        );
-        @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix,
-          $accent-tokens);
+        $accent-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
+        @include token-utils.create-token-values-mixed(m2-datepicker.$prefix, $accent-tokens);
       }
 
       &.mat-warn {
-        $warn-tokens: tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens(
-          $theme,
-          warn
-        );
-        @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix, $warn-tokens);
+        $warn-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
+        @include token-utils.create-token-values-mixed(m2-datepicker.$prefix, $warn-tokens);
       }
     }
   }
@@ -103,8 +90,8 @@ $calendar-weekday-table-font-size: 11px !default;
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-datepicker.$prefix,
-        tokens-mat-datepicker.get-typography-tokens($theme)
+        m2-datepicker.$prefix,
+        m2-datepicker.get-typography-tokens($theme)
       );
     }
   }
@@ -112,12 +99,12 @@ $calendar-weekday-table-font-size: 11px !default;
 
 @mixin date-range-colors(
   $range-color,
-  $comparison-color: tokens-mat-datepicker.$private-default-comparison-color,
-  $overlap-color: tokens-mat-datepicker.$private-default-overlap-color,
+  $comparison-color: m2-datepicker.$private-default-comparison-color,
+  $overlap-color: m2-datepicker.$private-default-overlap-color,
   $overlap-selected-color:
-    tokens-mat-datepicker.private-get-default-overlap-selected-color($overlap-color)
+    m2-datepicker.private-get-default-overlap-selected-color($overlap-color)
 ) {
-  $tokens: tokens-mat-datepicker.get-range-color-tokens(
+  $tokens: m2-datepicker.get-range-color-tokens(
     $range-color: $range-color,
     $comparison-color: $comparison-color,
     $overlap-color: $overlap-color,
@@ -125,7 +112,7 @@ $calendar-weekday-table-font-size: 11px !default;
   );
 
   @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix, $tokens);
+    @include token-utils.create-token-values-mixed(m2-datepicker.$prefix, $tokens);
   }
 }
 
@@ -150,8 +137,8 @@ $calendar-weekday-table-font-size: 11px !default;
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mat-datepicker.$prefix,
-      tokens: tokens-mat-datepicker.get-token-slots(),
+      namespace: m2-datepicker.$prefix,
+      tokens: m2-datepicker.get-token-slots(),
     ),
   );
 }
@@ -191,9 +178,6 @@ $calendar-weekday-table-font-size: 11px !default;
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
   $mat-datepicker-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mat-datepicker.$prefix,
-    $options...
-  );
-  @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $mat-datepicker-tokens);
+    $tokens, m2-datepicker.$prefix, $options...);
+  @include token-utils.create-token-values(m2-datepicker.$prefix, $mat-datepicker-tokens);
 }

package/{core/tokens/m2/mat/_datepicker.scss → datepicker/_m2-datepicker.scss}

@@ -1,10 +1,10 @@
 @use 'sass:color';
 @use 'sass:meta';
 @use 'sass:math';
-@use '../../token-definition';
-@use '../../../theming/inspection';
-@use '../../../style/elevation';
-@use '../../../style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/theming/inspection';
+@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);
@@ -175,8 +175,8 @@ $private-default-overlap-color: #a8dab5;
 @function get-token-slots() {
   @return sass-utils.deep-merge-all(
       get-unthemable-tokens(),
-      get-color-tokens(token-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
+      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/tokens/m3/mat/_datepicker.scss → datepicker/_m3-datepicker.scss}

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use '../../../style/elevation';
-@use '../../../style/sass-utils';
-@use '../../token-definition';
+@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);
@@ -12,7 +12,7 @@ $prefix: (mat, datepicker);
 /// @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: ((
+  $tokens: (
     calendar-date-in-range-state-background-color:
       map.get($systems, md-sys-color, primary-container),
     calendar-date-in-comparison-range-state-background-color:
@@ -42,7 +42,7 @@ $prefix: (mat, datepicker);
     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: token-definition.hardcode(transparent, $exclude-hardcoded),
+    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(
@@ -50,7 +50,7 @@ $prefix: (mat, datepicker);
       $alpha: 0.38
     ),
     calendar-date-text-color: map.get($systems, md-sys-color, on-surface),
-    calendar-date-outline-color: token-definition.hardcode(transparent, $exclude-hardcoded),
+    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
@@ -68,9 +68,9 @@ $prefix: (mat, datepicker);
     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:
-        token-definition.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
+        m3-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
     calendar-container-touch-elevation-shadow:
-      token-definition.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
+      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),
@@ -81,7 +81,9 @@ $prefix: (mat, datepicker);
     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),
-  ), (
+  );
+
+  $variant-tokens: (
     // Color variants:
     primary: (), // Default, no overrides needed.
     secondary: (
@@ -117,7 +119,7 @@ $prefix: (mat, datepicker);
       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),
     )
-  ));
+  );
 
-  @return token-definition.namespace-tokens($prefix, $tokens, $token-slots);
+  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }