@angular/material 19.0.0-next.8 → 19.0.0-rc.0

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -8,44 +8,72 @@
 
 @mixin _palette-styles($theme, $palette-name) {
   @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix,
-      tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name));
-    @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix,
-      tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name));
+    @include token-utils.create-token-values(
+      tokens-mat-full-pseudo-checkbox.$prefix,
+      tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name)
+    );
+    @include token-utils.create-token-values(
+      tokens-mat-minimal-pseudo-checkbox.$prefix,
+      tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name)
+    );
   }
 }
 
 @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-full-pseudo-checkbox-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mat-full-pseudo-checkbox.$prefix, $options...);
-  $mat-minimal-pseudo-checkbox-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mat-minimal-pseudo-checkbox.$prefix, $options...);
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
+  $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-full-pseudo-checkbox.$prefix,
+    $options...
+  );
+  $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-minimal-pseudo-checkbox.$prefix,
+    $options...
+  );
   @include token-utils.create-token-values(
-      tokens-mat-full-pseudo-checkbox.$prefix, $mat-full-pseudo-checkbox-tokens);
+    tokens-mat-full-pseudo-checkbox.$prefix,
+    $mat-full-pseudo-checkbox-tokens
+  );
   @include token-utils.create-token-values(
-      tokens-mat-minimal-pseudo-checkbox.$prefix, $mat-minimal-pseudo-checkbox-tokens);
+    tokens-mat-minimal-pseudo-checkbox.$prefix,
+    $mat-minimal-pseudo-checkbox-tokens
+  );
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-pseudo-checkbox.
 /// @param {Map} $theme The theme to generate base styles for.
-@mixin base($theme) {}
+@mixin base($theme) {
+}
 
-/// Outputs the CSS variable values for the given tokens.
-/// @param {Map} $tokens The token values to emit.
-@mixin overrides($tokens: ()) {
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
   $full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots();
   $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots();
 
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens),
-    (prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens),
+  @return (
+    (
+      namespace: tokens-mat-full-pseudo-checkbox.$prefix,
+      tokens: $full-pseudo-checkbox-tokens,
+      prefix: 'full-',
+    ),
+    (
+      namespace: tokens-mat-minimal-pseudo-checkbox.$prefix,
+      tokens: $minimal-pseudo-checkbox-tokens,
+      prefix: 'minimal-',
+    ),
   );
 }
 
+/// 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()...);
+}
+
 /// Outputs color theme styles for the mat-pseudo-checkbox.
 /// @param {Map} $theme The theme to generate color styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
@@ -54,8 +82,7 @@
 @mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
-  }
-  @else {
+  } @else {
     // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
     // theme from their parent, rather than implementing their own theming, which is why we
     // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
@@ -96,8 +123,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);

package/core/theming/_config-validation.scss

@@ -29,7 +29,7 @@
 /// Validates that the given object is an M3 palette.
 /// @param {*} $palette The object to test
 /// @return {Boolean|null} null if it is a valid M3 palette, else true.
-@function _validate-palette($palette) {
+@function validate-palette($palette) {
   @if not meta.type-of($palette) == 'map' {
     @return true;
   }
@@ -100,15 +100,15 @@
     );
   }
   @if $config and map.has-key($config, theme-type) and
-      not list.index((light, dark), map.get($config, theme-type)) {
+      not list.index((light, dark, color-scheme), map.get($config, theme-type)) {
     @return (
-      #{'Expected $config.theme-type to be one of: light, dark. Got:'}
+      #{'Expected $config.theme-type to be one of: light, dark, color-scheme. Got:'}
       map.get($config, theme-type)
     );
   }
   @each $palette in (primary, secondary, tertiary) {
     @if $config and map.has-key($config, $palette) {
-      $err: _validate-palette(map.get($config, $palette));
+      $err: validate-palette(map.get($config, $palette));
       @if $err {
         @return (
           #{'Expected $config.#{$palette} to be a valid M3 palette. Got:'}

package/core/theming/_definition.scss

@@ -6,6 +6,16 @@
 @use '../tokens/m3-tokens';
 @use './config-validation';
 
+// Prefix used for component token fallback variables, e.g.
+// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
+$system-fallback-prefix: mat-sys;
+
+// Default system level prefix to use when directly calling the `system-level-*` mixins.
+// Prefix used for component token fallback variables, e.g.
+// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
+// TODO: Remove this variable after internal clients are migrated from "sys"
+$system-level-prefix: mat-sys;
+
 /// Map key used to store internals of theme config.
 $internals: _mat-theming-internals-do-not-access;
 /// The theme version of generated themes.
@@ -40,7 +50,7 @@ $theme-version: 1;
   $type: map.get($config, theme-type) or light;
   $primary: map.get($config, primary) or palettes.$violet-palette;
   $tertiary: map.get($config, tertiary) or $primary;
-  $system-variables-prefix: map.get($config, system-variables-prefix) or sys;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
   sass-utils.$use-system-color-variables: map.get($config, use-system-variables) or false;
 
   @return (
@@ -76,7 +86,7 @@ $theme-version: 1;
   $bold: map.get($config, bold-weight) or 700;
   $medium: map.get($config, medium-weight) or 500;
   $regular: map.get($config, regular-weight) or 400;
-  $system-variables-prefix: map.get($config, system-variables-prefix) or sys;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
   sass-utils.$use-system-typography-variables: map.get($config, use-system-variables) or false;
 
   @return (

package/core/tokens/_m3-system.scss

@@ -1,5 +1,6 @@
 @use '../style/elevation';
 @use '../style/sass-utils';
+@use '../theming/config-validation';
 @use '../theming/definition';
 @use './m3/definitions';
 @use 'sass:map';
@@ -7,22 +8,15 @@
 @use 'sass:list';
 @use './m3-tokens';
 
-// 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;
-
-// Default system level prefix to use when directly calling the `system-level-*` mixins
-$_system-level-prefix: sys;
-
 /// Emits necessary CSS variables for Material's system level values for the values defined in the
 /// config map. The config map can have values color, typography, and/or density.
 ///
 /// If the config map's color value is an Angular Material color palette, it will be used as the
-/// primary and tertiary colors with a light theme type. Otherwise if the color value is a map,
-/// it must have a `primary` value containing an Angular Material color palette, and optionally
-/// a different `tertiary` palette (defaults to primary palette) and `theme-type` that is either
-/// `light` or `dark` (defaults to light). Color variable definitions will not be emitted if there
-/// are no color values in the config.
+/// primary and tertiary colors with a `color-scheme` theme type. Otherwise if the color value is a
+/// map, it must have a `primary` value containing an Angular Material color palette, and
+/// optionally a different `tertiary` palette (defaults to primary palette) and `theme-type` that
+/// is either `light`, `dark`, or 'color-scheme` (defaults to `color-scheme`). Color variable
+/// definitions will not be emitted if there are no color values in the config.
 ///
 /// If the config map's typography value is a font family string, it will be used as the
 /// plain and brand font family with default bold, medium, and regular weights of 700, 500, and 400,
@@ -36,19 +30,27 @@ $_system-level-prefix: sys;
 /// if the density value is a map, it must have a `scale` value. Density variable definitions will
 /// not be emitted if there are no density values in the config.
 ///
-/// The application variables emitted use the namespace prefix "--mat-app".
-/// e.g. --mat-app-surface: #E5E5E5
+/// The application variables emitted use the namespace prefix "--mat-sys".
+/// e.g. --mat-sys-surface: #E5E5E5
 ///
 /// @param {Map} $config The color configuration with optional keys color, typography, or density.
 @mixin theme($config, $overrides: ()) {
   $color: map.get($config, color);
   $color-config: null;
   @if ($color) {
-    $color-config: if(meta.type-of($color) == 'map',
-      definition.define-colors($color),
-      definition.define-colors((primary: $color)));
-    @include system-level-colors($color-config, $overrides, $_system-fallback-prefix);
-    @include system-level-elevation($color-config, $overrides, $_system-fallback-prefix);
+    // validate-palette returns null if it is a valid M3 palette
+    $is-palette: config-validation.validate-palette($color) == null;
+
+    // Default to "color-scheme" theme type if the config's color does not provide one.
+    @if (not $is-palette and not map.has-key($color, theme-type)) {
+      $color: map.set($color, theme-type, color-scheme);
+    }
+
+    $color-config: if($is-palette,
+            definition.define-colors((primary: $color, theme-type: color-scheme)),
+            definition.define-colors($color));
+    @include system-level-colors($color-config, $overrides, definition.$system-fallback-prefix);
+    @include system-level-elevation($color-config, $overrides, definition.$system-fallback-prefix);
   }
 
   $typography: map.get($config, typography);
@@ -57,7 +59,8 @@ $_system-level-prefix: sys;
     $typography-config: if(meta.type-of($typography) == 'map',
       definition.define-typography($typography),
       definition.define-typography((plain-family: $typography)));
-    @include system-level-typography($typography-config, $overrides, $_system-fallback-prefix);
+    @include system-level-typography(
+        $typography-config, $overrides, definition.$system-fallback-prefix);
   }
 
   $density: map.get($config, density);
@@ -79,9 +82,27 @@ $_system-level-prefix: sys;
     }
   }
 
-  @include system-level-shape($overrides: $overrides, $prefix: $_system-fallback-prefix);
-  @include system-level-motion($overrides:$overrides, $prefix: $_system-fallback-prefix);
-  @include system-level-state($overrides: $overrides, $prefix: $_system-fallback-prefix);
+  @include system-level-shape($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
+  @include system-level-state($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
+}
+
+/// Emits the system-level CSS variables for each of the provided override values. E.g. to
+/// change the primary color to red, use `mat.theme-overrides((primary: red));`
+@mixin theme-overrides($overrides, $prefix: definition.$system-fallback-prefix) {
+  $sys-names: map-merge-all(
+      definitions.md-sys-color-values-light(),
+      definitions.md-sys-typescale-values(),
+      definitions.md-sys-elevation-values(),
+      definitions.md-sys-shape-values(),
+      definitions.md-sys-state-values());
+
+  & {
+    @each $name, $value in $overrides {
+      @if (map.has-key($sys-names, $name)) {
+        --#{$prefix}-#{$name}: #{map.get($overrides, $name)};
+      }
+    }
+  }
 }
 
 @mixin system-level-colors($theme, $overrides: (), $prefix: null) {
@@ -100,16 +121,14 @@ $_system-level-prefix: sys;
 
   @if (not $prefix) {
     $prefix: map.get($theme, _mat-theming-internals-do-not-access,
-        color-system-variables-prefix) or $_system-level-prefix;
+        color-system-variables-prefix) or definition.$system-level-prefix;
   }
 
   $ref: (
     md-ref-palette: m3-tokens.generate-ref-palette-tokens($primary, $tertiary, $error)
   );
 
-  $sys-colors: if($type == dark,
-    definitions.md-sys-color-values-dark($ref),
-    definitions.md-sys-color-values-light($ref));
+  $sys-colors: _generate-sys-colors($ref, $type);
 
   // Manually insert a subset of palette values that are used directly by components
   // instead of system variables.
@@ -125,6 +144,30 @@ $_system-level-prefix: sys;
   }
 }
 
+@function _generate-sys-colors($ref, $type) {
+  $light-sys-colors: definitions.md-sys-color-values-light($ref);
+  @if ($type == light) {
+    @return $light-sys-colors;
+  }
+
+  $dark-sys-colors: definitions.md-sys-color-values-dark($ref);
+  @if ($type == dark) {
+    @return $dark-sys-colors;
+  }
+
+  @if ($type == color-scheme) {
+    $light-dark-sys-colors: ();
+    @each $name, $light-value in $light-sys-colors {
+      $dark-value: map.get($dark-sys-colors, $name);
+      $light-dark-sys-colors:
+          map.set($light-dark-sys-colors, $name, light-dark($light-value, $dark-value));
+    }
+    @return $light-dark-sys-colors;
+  }
+
+  @error 'Unknown theme-type provided: #{$type}';
+}
+
 @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);
@@ -138,7 +181,7 @@ $_system-level-prefix: sys;
 
   @if (not $prefix) {
     $prefix: map.get($theme, _mat-theming-internals-do-not-access,
-        typography-system-variables-prefix) or $_system-level-prefix;
+        typography-system-variables-prefix) or definition.$system-level-prefix;
   }
 
   & {
@@ -148,7 +191,7 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-elevation($theme, $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-elevation($theme, $overrides: (), $prefix: definition.$system-level-prefix) {
   $shadow-color: map.get(
       $theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);
 
@@ -161,7 +204,7 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-shape($theme: (), $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
     @each $name, $value in definitions.md-sys-shape-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
@@ -169,7 +212,7 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-state($theme: (), $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
     @each $name, $value in definitions.md-sys-state-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
@@ -177,21 +220,13 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-motion($theme: (), $overrides: (), $prefix: $_system-level-prefix) {
-  & {
-    @each $name, $value in definitions.md-sys-motion-values() {
-      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
-    }
-  }
-}
-
 // 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)
+// 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, --#{$_system-fallback-prefix}-#{$key});
+    $new-map: map.set($new-map, $key, --#{definition.$system-fallback-prefix}-#{$key});
   }
   @return $new-map;
 }
@@ -226,3 +261,12 @@ $_system-level-prefix: sys;
       m3-tokens.generate-density-tokens(0)
   );
 }
+
+/// Creates a single merged map from the provided variable-length map arguments
+@function map-merge-all($maps...) {
+  $result: ();
+  @each $map in $maps {
+    $result: map.merge($result, $map);
+  }
+  @return $result;
+}

package/core/tokens/_token-utils.scss

@@ -138,10 +138,13 @@ $_system-fallbacks: m3-system.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
@@ -195,7 +198,8 @@ $_system-fallbacks: m3-system.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}'
     );
@@ -208,41 +212,94 @@ $_system-fallbacks: m3-system.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));
+@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);
+      }
     }
 
-    @include sass-utils.current-selector-or-root() {
-      @include create-token-values($prefix, $tokens);
-    }
-  }
-}
-
-/// 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/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/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/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/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),
-    legacy-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
-    legacy-small-size-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,11 +39,12 @@ $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),
     large-size-container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
-    legacy-large-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
+    legacy-large-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
   ), (
     primary: (
       background-color: map.get($systems, md-sys-color, primary),