@angular/material 19.0.0-next.0 → 19.0.0-next.10

package/core/tokens/_m3-tokens.scss

@@ -4,17 +4,9 @@
 @use './m3';
 @use './m3/definitions' as m3-token-definitions;
 @use '../tokens/m2' as m2-tokens;
-@use '../style/elevation';
 @use './density';
 @use './format-tokens';
 
-// Default system level prefix to use when directly calling the `system-level-*` mixins
-$_system-level-prefix: sys;
-
-// Prefix used for component token fallback variables, e.g.
-// `color: var(--mdc-text-button-label-text-color, var(--mat-app-primary));`
-$_system-fallback-prefix: mat-app;
-
 /// Generates tokens for the given palette with the given prefix.
 /// @param {Map} $palette The palette to generate tokens for
 /// @param {String} $prefix The key prefix used to name the tokens
@@ -35,7 +27,7 @@ $_system-fallback-prefix: mat-app;
 /// @param {Map} $tertiary The tertiary palette
 /// @param {Map} $error The error palette
 /// @return {Map} A set of `md-ref-palette` tokens
-@function _generate-ref-palette-tokens($primary, $tertiary, $error) {
+@function generate-ref-palette-tokens($primary, $tertiary, $error) {
   @return sass-utils.merge-all(
       (black: #000, white: #fff),
       _generate-palette-tokens($primary, primary),
@@ -55,7 +47,7 @@ $_system-fallback-prefix: mat-app;
 /// @param {String} $medium The font-weight to use for medium text
 /// @param {String} $regular The font-weight to use for regular text
 /// @return {Map} A set of `md-ref-typeface` tokens
-@function _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular) {
+@function generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular) {
   @return (
     brand: $brand,
     plain: $plain,
@@ -96,7 +88,7 @@ $_cached-token-slots: null;
 /// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
 /// @param {Boolean} $include-density Whether to include density tokens
 /// @return {Map} A map of namespaced tokens
-@function _generate-tokens($systems, $include-non-systemized: false, $include-density: false) {
+@function generate-tokens($systems, $include-non-systemized: false, $include-density: false) {
   $systems: map.merge((
     md-sys-color: (),
     md-sys-elevation: (),
@@ -135,105 +127,6 @@ $_cached-token-slots: null;
   @return $result;
 }
 
-// Return a new map where the values are the same as the provided map's
-// keys, prefixed with "--mat-app-". For example:
-// (key1: '', key2: '') --> (key1: --mat-app-key1, key2: --mat-app-key2)
-@function _create-system-app-vars-map($map) {
-  $new-map: ();
-  @each $key, $value in $map {
-    $new-map: map.set($new-map, $key, --#{$_system-fallback-prefix}-#{$key});
-  }
-  @return $new-map;
-}
-
-// Create a components tokens map where values are based on
-// system fallback variables referencing Material's system keys.
-// Includes density token fallbacks where density is 0.
-@function create-system-fallbacks() {
-  $app-vars: (
-    'md-sys-color':
-        _create-system-app-vars-map(m3-token-definitions.md-sys-color-values-light()),
-    'md-sys-typescale':
-        _create-system-app-vars-map(m3-token-definitions.md-sys-typescale-values()),
-    'md-sys-elevation':
-        _create-system-app-vars-map(m3-token-definitions.md-sys-elevation-values()),
-    'md-sys-state':
-        _create-system-app-vars-map(m3-token-definitions.md-sys-state-values()),
-    'md-sys-shape':
-        _create-system-app-vars-map(m3-token-definitions.md-sys-shape-values()),
-  );
-
-  @return sass-utils.deep-merge-all(
-    _generate-tokens($app-vars, true, true),
-    generate-density-tokens(0)
-  );
-}
-
-// Emits CSS variables for Material's system level values. Uses the
-// namespace prefix in $_system-fallback-prefix.
-// e.g. --mat-app-surface: #E5E5E5
-@mixin theme($theme, $overrides: ()) {
-  @include system-level-colors($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-typography($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-elevation($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-shape($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-motion($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-state($theme, $overrides, $_system-fallback-prefix);
-}
-
-@mixin system-level-colors($theme, $overrides: (), $prefix: null) {
-  $palettes: map.get($theme, _mat-theming-internals-do-not-access, palettes);
-  $base-palettes: (
-    neutral: map.get($palettes, neutral),
-    neutral-variant: map.get($palettes, neutral-variant),
-    secondary: map.get($palettes, secondary),
-    error: map.get($palettes, error),
-  );
-
-  $type: map.get($theme, _mat-theming-internals-do-not-access, theme-type);
-  $primary: map.merge(map.get($palettes, primary), $base-palettes);
-  $tertiary: map.merge(map.get($palettes, tertiary), $base-palettes);
-  $error: map.get($palettes, error);
-
-  @if (not $prefix) {
-    $prefix: map.get($theme, _mat-theming-internals-do-not-access,
-        color-system-variables-prefix) or $_system-level-prefix;
-  }
-
-  $ref: (
-    md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
-  );
-
-  $sys-colors: if($type == dark,
-    m3-token-definitions.md-sys-color-values-dark($ref),
-    m3-token-definitions.md-sys-color-values-light($ref));
-
-  @each $name, $value in $sys-colors {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
-  }
-}
-
-@mixin system-level-typography($theme, $overrides: (), $prefix: null) {
-  $font-definition: map.get($theme, _mat-theming-internals-do-not-access, font-definition);
-  $brand: map.get($font-definition, brand);
-  $plain: map.get($font-definition, plain);
-  $bold: map.get($font-definition, bold);
-  $medium: map.get($font-definition, medium);
-  $regular: map.get($font-definition, regular);
-  $ref: (
-    md-ref-typeface: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
-  );
-
-  @if (not $prefix) {
-    $prefix: map.get($theme, _mat-theming-internals-do-not-access,
-        typography-system-variables-prefix) or $_system-level-prefix;
-  }
-
-  @each $name, $value in m3-token-definitions.md-sys-typescale-values($ref) {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
-  }
-}
-
 @function create-map($keys, $prefix) {
   $result: ();
   @each $key in $keys {
@@ -242,40 +135,6 @@ $_cached-token-slots: null;
   @return $result;
 }
 
-@mixin system-level-elevation($theme, $overrides: (), $prefix: $_system-level-prefix) {
-  $shadow-color: map.get(
-      $theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);
-
-  @for $level from 0 through 24 {
-    $value: elevation.get-box-shadow($level, $shadow-color);
-    --#{$prefix}-elevation-shadow-level-#{$level}: #{$value};
-  }
-
-  @each $name, $value in m3-token-definitions.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: $_system-level-prefix) {
-  @each $name, $value in m3-token-definitions.md-sys-shape-values() {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
-  }
-}
-
-@mixin system-level-state($theme, $overrides: (), $prefix: $_system-level-prefix) {
-  @each $name, $value in m3-token-definitions.md-sys-state-values() {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
-  }
-}
-
-@mixin system-level-motion($theme, $overrides: (), $prefix: $_system-level-prefix) {
-  @each $name, $value in m3-token-definitions.md-sys-motion-values() {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
-  }
-}
-
 @function _get-sys-color($type, $ref, $prefix) {
   $mdc-sys-color: if($type == dark,
     m3-token-definitions.md-sys-color-values-dark($ref),
@@ -451,12 +310,12 @@ $_cached-token-slots: null;
 /// @return {Map} A map of namespaced color tokens
 @function generate-color-tokens($type, $primary, $tertiary, $error, $system-variables-prefix) {
   $ref: (
-    md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
+    md-ref-palette: generate-ref-palette-tokens($primary, $tertiary, $error)
   );
 
   $sys-color: _get-sys-color($type, $ref, $system-variables-prefix);
 
-  @return _generate-tokens(map.merge($ref, (
+  @return generate-tokens(map.merge($ref, (
     md-sys-color: $sys-color,
     // Because the elevation values are always combined with color values to create the box shadow,
     // elevation needs to be part of the color dimension.
@@ -480,10 +339,10 @@ $_cached-token-slots: null;
 @function generate-typography-tokens($brand, $plain, $bold, $medium, $regular,
 $system-variables-prefix) {
   $ref: (
-    md-ref-typeface: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
+    md-ref-typeface: generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
   );
   $sys-typeface: _get-sys-typeface($ref, $system-variables-prefix);
-  @return _generate-tokens((
+  @return generate-tokens((
     md-sys-typescale: $sys-typeface
   ));
 }
@@ -500,7 +359,7 @@ $system-variables-prefix) {
 /// @return {Map} A map of namespaced tokens not related to color, typography, or density
 @function generate-base-tokens() {
   // TODO(mmalerba): Exclude density tokens once implemented.
-  @return _generate-tokens((
+  @return generate-tokens((
     md-sys-motion: m3-token-definitions.md-sys-motion-values(),
     md-sys-shape: m3-token-definitions.md-sys-shape-values(),
   ), $include-non-systemized: true);

package/core/tokens/_token-utils.scss

@@ -1,13 +1,13 @@
+@use '../style/elevation';
+@use '../style/sass-utils';
+@use './m3-system';
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:string';
-@use '../style/elevation';
-@use '../style/sass-utils';
-@use './m3-tokens';
 
 $_tokens: null;
 $_component-prefix: null;
-$_system-fallbacks: m3-tokens.create-system-fallbacks();
+$_system-fallbacks: m3-system.create-system-fallbacks();
 
 // Sets the token prefix and map to use when creating token slots.
 @mixin use-tokens($prefix, $tokens) {
@@ -113,19 +113,20 @@ $_system-fallbacks: m3-tokens.create-system-fallbacks();
     @return _create-var($sys-fallback, $fallback);
   }
 
-  // TODO(mat-app-theme): Return the system-level fallback.
-  // Changing this will affect clients that do not properly call theme mixins since the tokens
-  // will be undefined and now default to M3 system values, causing a number of screenshot failures.
-  // @return $sys-fallback;
-  @return $fallback;
+  @return $sys-fallback;
 }
 
 // Outputs a map of tokens under a specific prefix.
 @mixin create-token-values($prefix, $tokens) {
   @if $tokens != null {
-    @each $key, $value in $tokens {
-      @if $value != null {
-        #{_create-var-name($prefix, $key)}: #{$value};
+    // 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.
+    & {
+      @each $key, $value in $tokens {
+        @if $value != null {
+          #{_create-var-name($prefix, $key)}: #{$value};
+        }
       }
     }
   }
@@ -137,10 +138,13 @@ $_system-fallbacks: m3-tokens.create-system-fallbacks();
 @function resolve-elevation($tokens, $elevation-token, $shadow-color-token) {
   $elevation: map.get($tokens, $elevation-token);
   $shadow-color: map.get($tokens, $shadow-color-token);
-  @return map.merge($tokens, (
-    $elevation-token: elevation.get-box-shadow($elevation, $shadow-color),
-    $shadow-color-token: null,
-  ));
+  @return map.merge(
+    $tokens,
+    (
+      $elevation-token: elevation.get-box-shadow($elevation, $shadow-color),
+      $shadow-color-token: null,
+    )
+  );
 }
 
 /// Checks whether a list starts wih a given prefix
@@ -194,7 +198,8 @@ $_system-fallbacks: m3-tokens.create-system-fallbacks();
   $overrides: map.get($tokens, list.append($prefix, $color-variant));
   @if $overrides == null {
     $variants: _supported-color-variants($tokens, $prefix);
-    $secondary-message: if($variants == (),
+    $secondary-message: if(
+      $variants == (),
       'Mixin does not support color variants',
       'Supported color variants are: #{$variants}'
     );
@@ -207,41 +212,94 @@ $_system-fallbacks: m3-tokens.create-system-fallbacks();
 /// Emits new token values for the given token overrides.
 /// Verifies that the overrides passed in are valid tokens.
 /// New token values are emitted under the current selector or root.
-@mixin batch-create-token-values($overrides: (), $token-maps...) {
-  @include _validate-token-overrides($overrides, $token-maps);
-
-  @each $token-map in $token-maps {
-    $prefix: map.get($token-map, prefix);
-    $tokens: map.get($token-map, tokens);
-
-    @each $name, $value in $tokens {
-      $tokens: map.set($tokens, $name, map.get($overrides, $name));
-    }
-
-    @include sass-utils.current-selector-or-root() {
-      @include create-token-values($prefix, $tokens);
+@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 {
+      $namespace: map.get($config, namespace);
+      $prefix: if(map.has-key($config, prefix), map.get($config, prefix), '');
+      $tokens: _filter-nulls(map.get($config, tokens));
+      @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);
+      }
     }
-  }
-}
-
-/// Verifies that the token overrides exist and are used in one of the given token maps.
-@mixin _validate-token-overrides($overrides: (), $token-maps) {
-  $valid-token-names: ();
 
-  @each $token-map in $token-maps {
-    @each $name, $value in map.get($token-map, tokens) {
-      @if ($value != null and list.index($valid-token-names, $name) == null) {
-        $valid-token-names: list.append($valid-token-names, $name);
+    @each $name, $value in $overrides {
+      @if map.has-key($prefixed-name-data, $name) {
+        $data: map.get($prefixed-name-data, $name);
+        $namespace: list.nth($data, 1);
+        $name: list.nth($data, 2);
+        @include create-token-values(
+          $namespace,
+          (
+            $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};
       }
     }
   }
+}
 
-  @each $name in map.keys($overrides) {
-    @if (list.index($valid-token-names, $name) == null) {
-      @error (
-        'Invalid token: "' + $name + '"'
-        'Valid tokens include: ' $valid-token-names
-      );
+/// Filters keys with a null value out of the map.
+/// @param {Map} $map The map to filter.
+/// @return {Map} The given map with all of the null keys filtered out.
+@function _filter-nulls($map) {
+  $result: ();
+  @each $key, $val in $map {
+    @if $val != null {
+      $result: map.set($result, $key, $val);
     }
   }
+  @return $result;
 }

package/core/tokens/m2/_index.scss

@@ -44,6 +44,7 @@
 @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;
@@ -156,6 +157,7 @@
     _get-tokens-for-module($theme, tokens-mat-text-button),
     _get-tokens-for-module($theme, tokens-mat-toolbar),
     _get-tokens-for-module($theme, tokens-mat-tree),
+    _get-tokens-for-module($theme, tokens-mat-timepicker),
     _get-tokens-for-module($theme, tokens-mdc-checkbox),
     _get-tokens-for-module($theme, tokens-mdc-chip),
     _get-tokens-for-module($theme, tokens-mdc-circular-progress),

package/core/tokens/m2/mat/_badge.scss

@@ -6,15 +6,19 @@
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
+$_default-size: 22px;
+$_small-size: $_default-size - 6px;
+$_large-size: $_default-size + 6px;
+
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, badge);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  $default-size: 22px;
-  $small-size: $default-size - 6;
-  $large-size: $default-size + 6;
+  $default-size: $_default-size;
+  $small-size: $_small-size;
+  $large-size: $_large-size;
 
   @return (
     container-shape: 50%,
@@ -77,10 +81,15 @@ $prefix: (mat, badge);
 
   @return (
     text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    line-height: $_default-size,
     text-size: $base-size,
     text-weight: 600,
+
     small-size-text-size: $base-size * 0.75,
+    small-size-line-height: $_small-size,
+
     large-size-text-size: $base-size * 2,
+    large-size-line-height: $_large-size,
   );
 }
 

package/core/tokens/m2/mat/_datepicker.scss

@@ -106,7 +106,7 @@ $private-default-overlap-color: #a8dab5;
     // that were set in the previous theming API to reduce the amount of subtle screenshot
     // differences. We should look into introducing the other tokens in a follow-up.
     calendar-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    calendar-text-size: 13px, // TODO(crisbeto): this doesn't appear to affect anything
+    calendar-text-size: 13px,
 
     calendar-body-label-text-size: inspection.get-theme-typography($theme, button, font-size),
     calendar-body-label-text-weight: inspection.get-theme-typography($theme, button, font-weight),

package/core/tokens/m2/mat/_timepicker.scss

@@ -0,0 +1,44 @@
+@use '../../token-definition';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../../style/elevation';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, timepicker);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return (
+    container-shape: 4px,
+    container-elevation-shadow: elevation.get-box-shadow(8),
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return (
+    container-background-color: inspection.get-theme-color($theme, background, card)
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-definition.$placeholder-color-config),
+      get-typography-tokens(token-definition.$placeholder-typography-config),
+      get-density-tokens(token-definition.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mdc/_radio.scss

@@ -32,7 +32,6 @@ $prefix: (mdc, radio);
     selected-hover-state-layer-opacity: null,
     selected-pressed-state-layer-color: null,
     selected-pressed-state-layer-opacity: null,
-    unselected-focus-icon-color: null,
     unselected-focus-state-layer-color: null,
     unselected-focus-state-layer-opacity: null,
     unselected-hover-state-layer-color: null,
@@ -52,6 +51,7 @@ $prefix: (mdc, radio);
     disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
     disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
     unselected-hover-icon-color: $icon-color,
+    unselected-focus-icon-color: $icon-color,
     unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
     unselected-pressed-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
     selected-focus-icon-color: $palette-color,

package/core/tokens/m3/_index.scss

@@ -42,6 +42,7 @@
 @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;
@@ -112,6 +113,7 @@ $_module-names: (
   tokens-mat-text-button,
   tokens-mat-toolbar,
   tokens-mat-tree,
+  tokens-mat-timepicker,
   // MDC tokens
   tokens-mdc-checkbox,
   tokens-mdc-chip,

package/core/tokens/m3/definitions/_md-comp-elevated-card.scss

@@ -22,7 +22,7 @@ $_default: (
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   @return (
-    'container-color': map.get($deps, 'md-sys-color', 'surface'),
+    'container-color': map.get($deps, 'md-sys-color', 'surface-container-low'),
     'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),
     'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
     'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),

package/core/tokens/m3/definitions/_md-sys-color.scss

@@ -13,7 +13,7 @@ $_default-dark: (
 
 @function values-dark($deps: $_default-dark) {
   @return (
-    'background': map.get($deps, 'md-ref-palette', 'neutral10'),
+    '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'),
     'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral20'),
@@ -32,7 +32,7 @@ $_default-dark: (
     'on-secondary-fixed-variant':
       map.get($deps, 'md-ref-palette', 'secondary30'),
     'on-surface': map.get($deps, 'md-ref-palette', 'neutral90'),
-    'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),
+    'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant90'),
     'on-tertiary': map.get($deps, 'md-ref-palette', 'tertiary20'),
     'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary90'),
     'on-tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary10'),
@@ -49,11 +49,11 @@ $_default-dark: (
     'secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary90'),
     'secondary-fixed-dim': map.get($deps, 'md-ref-palette', 'secondary80'),
     'shadow': map.get($deps, 'md-ref-palette', 'neutral0'),
-    'surface': map.get($deps, 'md-ref-palette', 'neutral10'),
+    'surface': map.get($deps, 'md-ref-palette', 'neutral6'),
     'surface-bright': map.get($deps, 'md-ref-palette', 'neutral24'),
     'surface-container': map.get($deps, 'md-ref-palette', 'neutral12'),
     'surface-container-high': map.get($deps, 'md-ref-palette', 'neutral17'),
-    'surface-container-highest': map.get($deps, 'md-ref-palette', 'neutral22'),
+    'surface-container-highest': map.get($deps, 'md-ref-palette', 'neutral24'),
     'surface-container-low': map.get($deps, 'md-ref-palette', 'neutral10'),
     'surface-container-lowest': map.get($deps, 'md-ref-palette', 'neutral4'),
     'surface-dim': map.get($deps, 'md-ref-palette', 'neutral6'),
@@ -72,7 +72,7 @@ $_default-light: (
 
 @function values-light($deps: $_default-light) {
   @return (
-    'background': map.get($deps, 'md-ref-palette', 'neutral99'),
+    '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'),
     'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral95'),
@@ -108,7 +108,7 @@ $_default-light: (
     'secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary90'),
     'secondary-fixed-dim': map.get($deps, 'md-ref-palette', 'secondary80'),
     'shadow': map.get($deps, 'md-ref-palette', 'neutral0'),
-    'surface': map.get($deps, 'md-ref-palette', 'neutral99'),
+    'surface': map.get($deps, 'md-ref-palette', 'neutral98'),
     'surface-bright': map.get($deps, 'md-ref-palette', 'neutral98'),
     'surface-container': map.get($deps, 'md-ref-palette', 'neutral94'),
     'surface-container-high': map.get($deps, 'md-ref-palette', 'neutral92'),

package/core/tokens/m3/mat/_badge.scss

@@ -25,9 +25,11 @@ $prefix: (mat, badge);
     small-size-text-size: token-definition.hardcode(0, $exclude-hardcoded),
     container-shape: map.get($systems, md-sys-shape, corner-full),
     container-size: token-definition.hardcode(16px, $exclude-hardcoded),
+    line-height: token-definition.hardcode(16px, $exclude-hardcoded),
     legacy-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
     legacy-small-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
     small-size-container-size: token-definition.hardcode(6px, $exclude-hardcoded),
+    small-size-line-height: token-definition.hardcode(6px, $exclude-hardcoded),
     container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
     small-size-container-padding: token-definition.hardcode(0, $exclude-hardcoded),
     container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded),
@@ -37,6 +39,7 @@ $prefix: (mat, badge);
 
     // This size isn't in the M3 spec so we emit the same values as for `medium`.
     large-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
+    large-size-line-height: token-definition.hardcode(16px, $exclude-hardcoded),
     large-size-container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded),
     large-size-container-overlap-offset: token-definition.hardcode(-12px, $exclude-hardcoded),
     large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),

package/core/tokens/m3/mat/_datepicker.scss

@@ -73,8 +73,8 @@ $prefix: (mat, datepicker);
       token-definition.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-large-font),
-    calendar-text-size: map.get($systems, md-sys-typescale, body-large-size),
+    calendar-text-font: map.get($systems, md-sys-typescale, body-medium-font),
+    calendar-text-size: map.get($systems, md-sys-typescale, body-medium-size),
     calendar-body-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
     calendar-body-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
     calendar-period-button-text-size: map.get($systems, md-sys-typescale, title-small-size),