@angular/material 20.0.0-rc.0 → 20.0.0-rc.2

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

@@ -5,321 +5,122 @@
 
 @use 'sass:map';
 
-@use './md-ref-typeface';
-
 // Indicates whether alternative tokens should be used
 $_alternate-tokens: false;
 
-$_default: (
-  'md-ref-typeface': md-ref-typeface.values(),
-);
+@function md-sys-typescale-values($typography) {
+  $plain: map.get($typography, plain);
+  $brand: map.get($typography, brand);
+  $bold: map.get($typography, bold);
+  $medium: map.get($typography, medium);
+  $regular: map.get($typography, regular);
 
-@function values($deps: $_default, $exclude-hardcoded-values: false) {
   $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.
-    'body-large':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-regular')
-          if($exclude-hardcoded-values, null, 1rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            1.5rem
-          ) map.get($deps, 'md-ref-typeface', 'plain')
-      ),
-    'body-large-font': map.get($deps, 'md-ref-typeface', 'plain'),
-    'body-large-line-height': if($exclude-hardcoded-values, null, 1.5rem),
-    'body-large-size': if($exclude-hardcoded-values, null, 1rem),
-    'body-large-tracking': if($exclude-hardcoded-values, null, 0.031rem),
-    'body-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
-
-    // Warning: risk of reduced fidelity from using this composite typography token.
-    // Tokens md.sys.typescale.body-medium.tracking cannot be represented in the "font"
-    // property shorthand. Consider using the discrete properties instead.
-    'body-medium':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-regular')
-          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            1.25rem
-          ) map.get($deps, 'md-ref-typeface', 'plain')
-      ),
-    'body-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),
-    'body-medium-line-height': if($exclude-hardcoded-values, null, 1.25rem),
-    'body-medium-size': if($exclude-hardcoded-values, null, 0.875rem),
-    'body-medium-tracking': if($exclude-hardcoded-values, null, 0.016rem),
-    'body-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
-    // Warning: risk of reduced fidelity from using this composite typography token.
-    // Tokens md.sys.typescale.body-small.tracking cannot be represented in the "font"
-    // property shorthand. Consider using the discrete properties instead.
-    'body-small':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-regular')
-          if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            1rem
-          ) map.get($deps, 'md-ref-typeface', 'plain')
-      ),
-    'body-small-font': map.get($deps, 'md-ref-typeface', 'plain'),
-    'body-small-line-height': if($exclude-hardcoded-values, null, 1rem),
-    'body-small-size': if($exclude-hardcoded-values, null, 0.75rem),
-    'body-small-tracking': if($exclude-hardcoded-values, null, 0.025rem),
-    'body-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
-    // Warning: risk of reduced fidelity from using this composite typography token.
-    // Tokens md.sys.typescale.display-large.tracking cannot be represented in the "font"
-    // property shorthand. Consider using the discrete properties instead.
-    'display-large':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-regular')
-          if($exclude-hardcoded-values, null, 3.562rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            4rem
-          ) map.get($deps, 'md-ref-typeface', 'brand')
-      ),
-    'display-large-font': map.get($deps, 'md-ref-typeface', 'brand'),
-    'display-large-line-height': if($exclude-hardcoded-values, null, 4rem),
-    'display-large-size': if($exclude-hardcoded-values, null, 3.562rem),
-    'display-large-tracking': if($exclude-hardcoded-values, null, -0.016rem),
-    'display-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
-    // Warning: risk of reduced fidelity from using this composite typography token.
-    // Tokens md.sys.typescale.display-medium.tracking cannot be represented in the "font"
-    // property shorthand. Consider using the discrete properties instead.
-    'display-medium':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-regular')
-          if($exclude-hardcoded-values, null, 2.812rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            3.25rem
-          ) map.get($deps, 'md-ref-typeface', 'brand')
-      ),
-    'display-medium-font': map.get($deps, 'md-ref-typeface', 'brand'),
-    'display-medium-line-height': if($exclude-hardcoded-values, null, 3.25rem),
-    'display-medium-size': if($exclude-hardcoded-values, null, 2.812rem),
-    'display-medium-tracking': if($exclude-hardcoded-values, null, 0),
-    'display-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
-    // Warning: risk of reduced fidelity from using this composite typography token.
-    // Tokens md.sys.typescale.display-small.tracking cannot be represented in the "font"
-    // property shorthand. Consider using the discrete properties instead.
-    'display-small':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-regular')
-          if($exclude-hardcoded-values, null, 2.25rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            2.75rem
-          ) map.get($deps, 'md-ref-typeface', 'brand')
-      ),
-    'display-small-font': map.get($deps, 'md-ref-typeface', 'brand'),
-    'display-small-line-height': if($exclude-hardcoded-values, null, 2.75rem),
-    'display-small-size': if($exclude-hardcoded-values, null, 2.25rem),
-    'display-small-tracking': if($exclude-hardcoded-values, null, 0),
-    'display-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
-    // Warning: risk of reduced fidelity from using this composite typography token.
-    // Tokens md.sys.typescale.headline-large.tracking cannot be represented in the "font"
-    // property shorthand. Consider using the discrete properties instead.
-    'headline-large':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-regular')
-          if($exclude-hardcoded-values, null, 2rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            2.5rem
-          ) map.get($deps, 'md-ref-typeface', 'brand')
-      ),
-    'headline-large-font': map.get($deps, 'md-ref-typeface', 'brand'),
-    'headline-large-line-height': if($exclude-hardcoded-values, null, 2.5rem),
-    'headline-large-size': if($exclude-hardcoded-values, null, 2rem),
-    'headline-large-tracking': if($exclude-hardcoded-values, null, 0),
-    'headline-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
-    // Warning: risk of reduced fidelity from using this composite typography token.
-    // Tokens md.sys.typescale.headline-medium.tracking cannot be represented in the "font"
-    // property shorthand. Consider using the discrete properties instead.
-    'headline-medium':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-regular')
-          if($exclude-hardcoded-values, null, 1.75rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            2.25rem
-          ) map.get($deps, 'md-ref-typeface', 'brand')
-      ),
-    'headline-medium-font': map.get($deps, 'md-ref-typeface', 'brand'),
-    'headline-medium-line-height': if($exclude-hardcoded-values, null, 2.25rem),
-    'headline-medium-size': if($exclude-hardcoded-values, null, 1.75rem),
-    'headline-medium-tracking': if($exclude-hardcoded-values, null, 0),
-    'headline-medium-weight':
-      map.get($deps, 'md-ref-typeface', 'weight-regular'),
-      // Warning: risk of reduced fidelity from using this composite typography token.
-      // Tokens md.sys.typescale.headline-small.tracking cannot be represented in the "font"
-      // property shorthand. Consider using the discrete properties instead.
-    'headline-small':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-regular')
-          if($exclude-hardcoded-values, null, 1.5rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            2rem
-          ) map.get($deps, 'md-ref-typeface', 'brand')
-      ),
-    'headline-small-font': map.get($deps, 'md-ref-typeface', 'brand'),
-    'headline-small-line-height': if($exclude-hardcoded-values, null, 2rem),
-    'headline-small-size': if($exclude-hardcoded-values, null, 1.5rem),
-    'headline-small-tracking': if($exclude-hardcoded-values, null, 0),
-    'headline-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
-    // Warning: risk of reduced fidelity from using this composite typography token.
-    // Tokens md.sys.typescale.label-large.tracking cannot be represented in the "font"
-    // property shorthand. Consider using the discrete properties instead.
-    'label-large':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-medium')
-          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            1.25rem
-          ) map.get($deps, 'md-ref-typeface', 'plain')
-      ),
-    'label-large-font': map.get($deps, 'md-ref-typeface', 'plain'),
-    'label-large-line-height': if($exclude-hardcoded-values, null, 1.25rem),
-    'label-large-size': if($exclude-hardcoded-values, null, 0.875rem),
-    'label-large-tracking': if($exclude-hardcoded-values, null, 0.006rem),
-    'label-large-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),
-    'label-large-weight-prominent':
-      map.get($deps, 'md-ref-typeface', 'weight-bold'),
-    // Warning: risk of reduced fidelity from using this composite typography token.
-    // Tokens md.sys.typescale.label-medium.tracking cannot be represented in the "font"
-    // property shorthand. Consider using the discrete properties instead.
-    'label-medium':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-medium')
-          if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            1rem
-          ) map.get($deps, 'md-ref-typeface', 'plain')
-      ),
-    'label-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),
-    'label-medium-line-height': if($exclude-hardcoded-values, null, 1rem),
-    'label-medium-size': if($exclude-hardcoded-values, null, 0.75rem),
-    'label-medium-tracking': if($exclude-hardcoded-values, null, 0.031rem),
-    'label-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),
-    'label-medium-weight-prominent':
-      map.get($deps, 'md-ref-typeface', 'weight-bold'),
-    // Warning: risk of reduced fidelity from using this composite typography token.
-    // Tokens md.sys.typescale.label-small.tracking cannot be represented in the "font"
-    // property shorthand. Consider using the discrete properties instead.
-    'label-small':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-medium')
-          if($exclude-hardcoded-values, null, 0.688rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            1rem
-          ) map.get($deps, 'md-ref-typeface', 'plain')
-      ),
-    'label-small-font': map.get($deps, 'md-ref-typeface', 'plain'),
-    'label-small-line-height': if($exclude-hardcoded-values, null, 1rem),
-    'label-small-size': if($exclude-hardcoded-values, null, 0.688rem),
-    'label-small-tracking': if($exclude-hardcoded-values, null, 0.031rem),
-    'label-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),
-    // Warning: risk of reduced fidelity from using this composite typography token.
-    // Tokens md.sys.typescale.title-large.tracking cannot be represented in the "font"
-    // property shorthand. Consider using the discrete properties instead.
-    'title-large':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-regular')
-          if($exclude-hardcoded-values, null, 1.375rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            1.75rem
-          ) map.get($deps, 'md-ref-typeface', 'brand')
-      ),
-    'title-large-font': map.get($deps, 'md-ref-typeface', 'brand'),
-    'title-large-line-height': if($exclude-hardcoded-values, null, 1.75rem),
-    'title-large-size': if($exclude-hardcoded-values, null, 1.375rem),
-    'title-large-tracking': if($exclude-hardcoded-values, null, 0),
-    'title-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
-    // Warning: risk of reduced fidelity from using this composite typography token.
-    // Tokens md.sys.typescale.title-medium.tracking cannot be represented in the "font"
-    // property shorthand. Consider using the discrete properties instead.
-    'title-medium':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-medium')
-          if($exclude-hardcoded-values, null, 1rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            1.5rem
-          ) map.get($deps, 'md-ref-typeface', 'plain')
-      ),
-    'title-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),
-    'title-medium-line-height': if($exclude-hardcoded-values, null, 1.5rem),
-    'title-medium-size': if($exclude-hardcoded-values, null, 1rem),
-    'title-medium-tracking': if($exclude-hardcoded-values, null, 0.009rem),
-    'title-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),
-    // Warning: risk of reduced fidelity from using this composite typography token.
-    // Tokens md.sys.typescale.title-small.tracking cannot be represented in the "font"
-    // property shorthand. Consider using the discrete properties instead.
-    'title-small':
-      if(
-        $exclude-hardcoded-values,
-        null,
-          map.get($deps, 'md-ref-typeface', 'weight-medium')
-          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(
-            $exclude-hardcoded-values,
-            null,
-            1.25rem
-          ) map.get($deps, 'md-ref-typeface', 'plain')
-      ),
-    'title-small-font': map.get($deps, 'md-ref-typeface', 'plain'),
-    'title-small-line-height': if($exclude-hardcoded-values, null, 1.25rem),
-    'title-small-size': if($exclude-hardcoded-values, null, 0.875rem),
-    'title-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
-    'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium')
+    body-large: $regular 1rem #{'/'} 1.5rem $plain,
+    body-large-font: $plain,
+    body-large-line-height: 1.5rem,
+    body-large-size: 1rem,
+    body-large-tracking: 0.031rem,
+    body-large-weight: $regular,
+    body-medium: $regular 0.875rem #{'/'} 1.25rem $plain,
+    body-medium-font: $plain,
+    body-medium-line-height: 1.25rem,
+    body-medium-size: 0.875rem,
+    body-medium-tracking: 0.016rem,
+    body-medium-weight: $regular,
+    body-small: $regular 0.75rem #{'/'} 1rem $plain,
+    body-small-font: $plain,
+    body-small-line-height: 1rem,
+    body-small-size: 0.75rem,
+    body-small-tracking: 0.025rem,
+    body-small-weight: $regular,
+    display-large: $regular 3.562rem #{'/'} 4rem $brand,
+    display-large-font: $brand,
+    display-large-line-height: 4rem,
+    display-large-size: 3.562rem,
+    display-large-tracking: -0.016rem,
+    display-large-weight: $regular,
+    display-medium: $regular 2.812rem #{'/'} 3.25rem $brand,
+    display-medium-font: $brand,
+    display-medium-line-height: 3.25rem,
+    display-medium-size: 2.812rem,
+    display-medium-tracking: 0,
+    display-medium-weight: $regular,
+    display-small: $regular 2.25rem #{'/'} 2.75rem $brand,
+    display-small-font: $brand,
+    display-small-line-height: 2.75rem,
+    display-small-size: 2.25rem,
+    display-small-tracking: 0,
+    display-small-weight: $regular,
+    headline-large: $regular 2rem #{'/'} 2.5rem $brand,
+    headline-large-font: $brand,
+    headline-large-line-height: 2.5rem,
+    headline-large-size: 2rem,
+    headline-large-tracking: 0,
+    headline-large-weight: $regular,
+    headline-medium: $regular 1.75rem #{'/'} 2.25rem $brand,
+    headline-medium-font: $brand,
+    headline-medium-line-height: 2.25rem,
+    headline-medium-size: 1.75rem,
+    headline-medium-tracking: 0,
+    headline-medium-weight: $regular,
+    headline-small: $regular 1.5rem #{'/'} 2rem $brand,
+    headline-small-font: $brand,
+    headline-small-line-height: 2rem,
+    headline-small-size: 1.5rem,
+    headline-small-tracking: 0,
+    headline-small-weight: $regular,
+    label-large: $medium 0.875rem #{'/'} 1.25rem $plain,
+    label-large-font: $plain,
+    label-large-line-height: 1.25rem,
+    label-large-size: 0.875rem,
+    label-large-tracking: 0.006rem,
+    label-large-weight: $medium,
+    label-large-weight-prominent: $bold,
+    label-medium: $medium 0.75rem #{'/'} 1rem $plain,
+    label-medium-font: $plain,
+    label-medium-line-height: 1rem,
+    label-medium-size: 0.75rem,
+    label-medium-tracking: 0.031rem,
+    label-medium-weight: $medium,
+    label-medium-weight-prominent: $bold,
+    label-small: $medium 0.688rem #{'/'} 1rem $plain,
+    label-small-font: $plain,
+    label-small-line-height: 1rem,
+    label-small-size: 0.688rem,
+    label-small-tracking: 0.031rem,
+    label-small-weight: $medium,
+    title-large: $regular 1.375rem #{'/'} 1.75rem $brand,
+    title-large-font: $brand,
+    title-large-line-height: 1.75rem,
+    title-large-size: 1.375rem,
+    title-large-tracking: 0,
+    title-large-weight: $regular,
+    title-medium: $medium 1rem #{'/'} 1.5rem $plain,
+    title-medium-font: $plain,
+    title-medium-line-height: 1.5rem,
+    title-medium-size: 1rem,
+    title-medium-tracking: 0.009rem,
+    title-medium-weight: $medium,
+    title-small: $medium 0.875rem #{'/'} 1.25rem $plain,
+    title-small-font: $plain,
+    title-small-line-height: 1.25rem,
+    title-small-size: 0.875rem,
+    title-small-tracking: 0.006rem,
+    title-small-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),
+      body-large-tracking: 0,
+      body-medium-tracking: 0,
+      body-small-tracking: 0.006rem,
+      display-large-tracking: 0,
+      label-large-tracking: 0,
+      label-medium-tracking: 0.006rem,
+      label-small-tracking: 0.006rem,
+      title-medium-tracking: 0,
+      title-small-tracking: 0,
     ));
   }
 

package/core/tokens/m3/_theme.scss

@@ -0,0 +1,47 @@
+@use '../../theming/palettes';
+@use './md-sys-color';
+@use './md-sys-elevation';
+@use './md-sys-shape';
+@use './md-sys-state';
+@use './md-sys-typescale';
+@use 'sass:map';
+
+// Return a new map where the values are the same as the provided map's
+// keys, prefixed with "--mat-sys-". For example:
+// (key1: '', key2: '') --> (key1: --mat-sys-key1, key2: --mat-sys-key2)
+@function _create-system-app-vars-map($map) {
+  $new-map: ();
+  @each $key, $value in $map {
+    $new-map: map.set($new-map, $key, --mat-sys-#{$key});
+  }
+  @return $new-map;
+}
+
+/// Map key used to store internals of theme config.
+$internals: _mat-theming-internals-do-not-access;
+
+$placeholder-palettes: md-sys-color.md-sys-color-values-light(palettes.$blue-palette);
+$placeholder-palettes: map.set($placeholder-palettes, primary, palettes.$blue-palette);
+$app-vars: (
+  'md-sys-color': _create-system-app-vars-map(
+      md-sys-color.md-sys-color-values-light($placeholder-palettes)),
+  'md-sys-typescale': _create-system-app-vars-map(md-sys-typescale.md-sys-typescale-values((
+    brand: (Roboto),
+    plain: (Roboto),
+    bold: 700,
+    medium: 500,
+    regular: 400
+  ))),
+  'md-sys-elevation': _create-system-app-vars-map(md-sys-elevation.md-sys-elevation-values()),
+  'md-sys-state': _create-system-app-vars-map(md-sys-state.md-sys-state-values()),
+  'md-sys-shape': _create-system-app-vars-map(md-sys-shape.md-sys-shape-values()),
+  // Add a subset of palette-specific colors used by components instead of system values
+  'md-ref-palette': _create-system-app-vars-map(
+      (
+        neutral10: '', // Form field native select option text color
+        neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
+      )
+  ),
+);
+
+$sys-theme: ($internals: $app-vars);

package/datepicker/_datepicker-theme.scss

@@ -1,9 +1,9 @@
 @use 'sass:color';
 @use 'sass:map';
 @use './m2-datepicker';
+@use './m3-datepicker';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
@@ -26,8 +26,7 @@ $calendar-weekday-table-font-size: 11px !default;
     $palette-name
   );
 
-  @include token-utils.create-token-values-mixed(
-    m2-datepicker.$prefix, map.merge($calendar-tokens, $range-tokens));
+  @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)
@@ -35,27 +34,24 @@ $calendar-weekday-table-font-size: 11px !default;
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-datepicker.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-datepicker.$prefix, m2-datepicker.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-datepicker.get-unthemable-tokens());
     }
   }
 }
 
 /// Outputs color theme styles for the mat-datepicker.
 /// @param {Map} $theme The theme to generate color styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the main selection: primary, secondary, tertiary,
-///      or error (If not specified, default primary color will be used).
-@mixin color($theme, $options...) {
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin color($theme, $color-variant: null) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
+    @include token-utils.create-token-values(
+        map.get(m3-datepicker.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-datepicker.$prefix, m2-datepicker.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-datepicker.get-color-tokens($theme));
     }
 
     .mat-datepicker-content {
@@ -71,12 +67,12 @@ $calendar-weekday-table-font-size: 11px !default;
     .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(m2-datepicker.$prefix, $accent-tokens);
+        @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(m2-datepicker.$prefix, $warn-tokens);
+        @include token-utils.create-token-values-mixed($warn-tokens);
       }
     }
   }
@@ -86,13 +82,10 @@ $calendar-weekday-table-font-size: 11px !default;
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(map.get(m3-datepicker.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-datepicker.$prefix,
-        m2-datepicker.get-typography-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-datepicker.get-typography-tokens($theme));
     }
   }
 }
@@ -112,7 +105,7 @@ $calendar-weekday-table-font-size: 11px !default;
   );
 
   @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values-mixed(m2-datepicker.$prefix, $tokens);
+    @include token-utils.create-token-values-mixed($tokens);
   }
 }
 
@@ -120,7 +113,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 {
-    // There are no M3 density tokens for this component
+    @include token-utils.create-token-values(map.get(m3-datepicker.get-tokens($theme), density));
   } @else {
     // TODO(crisbeto): move this into the structural styles
     // once the icon button density is switched to tokens.
@@ -137,8 +130,8 @@ $calendar-weekday-table-font-size: 11px !default;
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-datepicker.$prefix,
-      tokens: m2-datepicker.get-token-slots(),
+      namespace: datepicker,
+      tokens: token-utils.get-overrides(m3-datepicker.get-tokens(), datepicker)
     ),
   );
 }
@@ -146,18 +139,19 @@ $calendar-weekday-table-font-size: 11px !default;
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-datepicker.
 /// @param {Map} $theme The theme to generate styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the main selection: primary, secondary, tertiary,
-///      or error (If not specified, default primary color will be used).
-@mixin theme($theme, $options...) {
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin theme($theme, $color-variant: null) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @include base($theme);
+      @include color($theme, $color-variant);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -172,12 +166,3 @@ $calendar-weekday-table-font-size: 11px !default;
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens, $options...) {
-  @include validation.selector-defined(
-    '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, m2-datepicker.$prefix, $options...);
-  @include token-utils.create-token-values(m2-datepicker.$prefix, $mat-datepicker-tokens);
-}