@angular/material 20.0.0-next.1 → 20.0.0-next.10

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) {
@@ -118,20 +106,40 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
 
 // Outputs a map of tokens under a specific prefix.
 @mixin create-token-values($prefix, $tokens) {
-  @if $tokens != null {
-    // TODO: The `&` adds to the file size of theme, but it's necessary for compatibility
-    // with https://sass-lang.com/documentation/breaking-changes/mixed-decls/. We should
-    // figure out a better way to do this or move all the concrete styles out of the theme.
-    & {
+  @include _create-token-values-internal($prefix, $tokens, false);
+}
+
+// Outputs a map of tokens under a specific prefix in scenarios where tokens may be mixed with
+// other declarations (e.g. M2 themes). Used to avoid https://sass-lang.com/documentation/breaking-changes/mixed-decls/
+@mixin create-token-values-mixed($prefix, $tokens) {
+  @include _create-token-values-internal($prefix, $tokens, true);
+}
+
+@mixin _create-token-values-internal($prefix, $tokens, $in-place) {
+  @if ($tokens != null) {
+    @if ($in-place) {
+      & {
+        @each $key, $value in $tokens {
+          @if $value != null {
+            @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.
@@ -190,6 +198,10 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
     @return ();
   }
   $values: map.get($tokens, $prefix);
+  @if ($values == null) {
+    @return ();
+  }
+
   $color-variant: map.get($options, color-variant);
   $emit-overrides-only: map.get($options, emit-overrides-only);
   @if $color-variant == null {
@@ -206,6 +218,7 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
 
     @error 'Invalid color variant: #{$color-variant}. #{$secondary-message}.';
   }
+
   @return if($emit-overrides-only, $overrides, map.merge($values, $overrides));
 }
 
@@ -215,7 +228,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 {
@@ -225,29 +237,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);
       }
     }
 
@@ -262,28 +252,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};
       }
@@ -303,3 +271,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,163 +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 './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-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/core/tokens/m3/{definitions/_md-sys-color.scss → _md-sys-color.scss}

@@ -7,12 +7,15 @@
 
 @use './md-ref-palette';
 
+// Indicates whether alternative tokens should be used
+$_alternate-tokens: false;
+
 $_default-dark: (
   'md-ref-palette': md-ref-palette.values(),
 );
 
 @function values-dark($deps: $_default-dark) {
-  @return (
+  $values: (
     'background': map.get($deps, 'md-ref-palette', 'neutral6'),
     'error': map.get($deps, 'md-ref-palette', 'error80'),
     'error-container': map.get($deps, 'md-ref-palette', 'error30'),
@@ -64,6 +67,24 @@ $_default-dark: (
     'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
     'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'background': map.get($deps, 'md-ref-palette', 'neutral10'),
+      'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),
+      'surface': map.get($deps, 'md-ref-palette', 'neutral10'),
+      'surface-bright': #37393b,
+      'surface-container': #1e1f20,
+      'surface-container-high': #282a2c,
+      'surface-container-highest': #333537,
+      'surface-container-low': #1b1b1b,
+      'surface-container-lowest': #0e0e0e,
+      'surface-dim': #131313,
+      'surface-tint': #d1e1ff,
+    ));
+  }
+
+  @return $values;
 }
 
 $_default-light: (
@@ -71,7 +92,7 @@ $_default-light: (
 );
 
 @function values-light($deps: $_default-light) {
-  @return (
+  $values: (
     'background': map.get($deps, 'md-ref-palette', 'neutral98'),
     'error': map.get($deps, 'md-ref-palette', 'error40'),
     'error-container': map.get($deps, 'md-ref-palette', 'error90'),
@@ -123,4 +144,25 @@ $_default-light: (
     'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
     'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'background': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'on-error-container': map.get($deps, 'md-ref-palette', 'error10'),
+      'on-primary-container': map.get($deps, 'md-ref-palette', 'primary10'),
+      'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary10'),
+      'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary10'),
+      'surface': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'surface-bright': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'surface-container': #f0f4f9,
+      'surface-container-high': #e9eef6,
+      'surface-container-highest': #dde3ea,
+      'surface-container-low': #f8fafd,
+      'surface-container-lowest': map.get($deps, 'md-ref-palette', 'primary100'),
+      'surface-dim': #d3dbe5,
+      'surface-tint': #6991d6,
+    ));
+  }
+
+  @return $values;
 }

package/core/tokens/m3/{definitions/_md-sys-typescale.scss → _md-sys-typescale.scss}

@@ -7,12 +7,15 @@
 
 @use './md-ref-typeface';
 
+// Indicates whether alternative tokens should be used
+$_alternate-tokens: false;
+
 $_default: (
   'md-ref-typeface': md-ref-typeface.values(),
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return (
+  $values: (
     // Warning: risk of reduced fidelity from using this composite typography token.
     // Tokens md.sys.typescale.body-large.tracking cannot be represented in the "font"
     // property shorthand. Consider using the discrete properties instead.
@@ -305,4 +308,20 @@ $_default: (
     'title-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
     'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'body-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'body-medium-tracking': if($exclude-hardcoded-values, null, 0),
+      'body-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'display-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'label-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'label-medium-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'label-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'title-medium-tracking': if($exclude-hardcoded-values, null, 0),
+      'title-small-tracking': if($exclude-hardcoded-values, null, 0),
+    ));
+  }
+
+  @return $values;
 }

package/{date-range-input-harness.d-549a9f7e.d.ts → date-range-input-harness.d-CaEyN8dT.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 { MatFormFieldControlHarness } from './form-field/testing/control/index.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(
-    tokens-mat-datepicker.$prefix,
-    map.merge($calendar-tokens, $range-tokens)
-  );
+  @include token-utils.create-token-values-mixed(
+    m2-datepicker.$prefix, map.merge($calendar-tokens, $range-tokens));
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -40,10 +38,8 @@ $calendar-weekday-table-font-size: 11px !default;
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mat-datepicker.$prefix,
-        tokens-mat-datepicker.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-datepicker.$prefix, m2-datepicker.get-unthemable-tokens());
     }
   }
 }
@@ -58,10 +54,8 @@ $calendar-weekday-table-font-size: 11px !default;
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mat-datepicker.$prefix,
-        tokens-mat-datepicker.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-datepicker.$prefix, m2-datepicker.get-color-tokens($theme));
     }
 
     .mat-datepicker-content {
@@ -76,19 +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(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(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);
       }
     }
   }
@@ -101,9 +89,9 @@ $calendar-weekday-table-font-size: 11px !default;
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mat-datepicker.$prefix,
-        tokens-mat-datepicker.get-typography-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-datepicker.$prefix,
+        m2-datepicker.get-typography-tokens($theme)
       );
     }
   }
@@ -111,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,
@@ -124,7 +112,7 @@ $calendar-weekday-table-font-size: 11px !default;
   );
 
   @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $tokens);
+    @include token-utils.create-token-values-mixed(m2-datepicker.$prefix, $tokens);
   }
 }
 
@@ -132,7 +120,7 @@ $calendar-weekday-table-font-size: 11px !default;
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
     // TODO(crisbeto): move this into the structural styles
     // once the icon button density is switched to tokens.
@@ -149,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(),
     ),
   );
 }
@@ -190,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);
 }