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

package/core/tokens/_m3-system.scss

@@ -1,12 +1,29 @@
+@use '../../button-toggle/m3-button-toggle';
+@use '../../button/m3-button';
+@use '../../button/m3-fab';
+@use '../../button/m3-icon-button';
+@use '../../checkbox/m3-checkbox';
+@use '../../chips/m3-chip';
+@use '../../expansion/m3-expansion';
+@use '../../form-field/m3-form-field';
+@use '../../list/m3-list';
+@use '../../paginator/m3-paginator';
+@use '../../radio/m3-radio';
+@use '../../select/m3-select';
+@use '../../stepper/m3-stepper';
+@use '../../table/m3-table';
+@use '../../tabs/m3-tabs';
+@use '../../toolbar/m3-toolbar';
+@use '../../tree/m3-tree';
 @use '../style/elevation';
 @use '../style/sass-utils';
 @use '../theming/config-validation';
 @use '../theming/definition';
-@use './m3/definitions';
+@use './m3';
+@use './m3-tokens';
+@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
-@use 'sass:list';
-@use './m3-tokens';
 
 /// 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.
@@ -71,12 +88,12 @@
       definition.define-density((scale: $density)));
     $scale: map.get($density-config, _mat-theming-internals-do-not-access, density-scale);
     @if ($scale != 0) {
-      $all-tokens: m3-tokens.generate-density-tokens($scale);
-      @each $component-tokens in $all-tokens {
-        $namespace: list.nth($component-tokens, 1);
-        @each $tokens in list.nth($component-tokens, 2) {
-          --#{list.nth($namespace, 1)}-#{list.nth($namespace, 2)}-#{
-              list.nth($tokens, 1)}: #{list.nth($tokens, 2)};
+      // Emit component-level density tokens if the scale is lower than 0. The density tokens
+      // do not fallback to any system-level values and must be defined if the scale is different.
+      $density-tokens: get-density-tokens($scale);
+      @each $prefix, $tokens in $density-tokens {
+        @each $token-name, $token-value in $tokens {
+          --#{list.nth($prefix, 1)}-#{list.nth($prefix, 2)}-#{$token-name}: #{$token-value};
         }
       }
     }
@@ -86,15 +103,38 @@
   @include system-level-state($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
 }
 
+// Gets all density-related tokens from the components.
+@function get-density-tokens($scale) {
+  @return (
+    m3-checkbox.$prefix: m3-checkbox.get-density-tokens($scale),
+    m3-chip.$prefix: m3-chip.get-density-tokens($scale),
+    m3-expansion.$prefix: m3-expansion.get-density-tokens($scale),
+    m3-fab.$prefix: m3-fab.get-density-tokens($scale),
+    m3-button.$prefix: m3-button.get-density-tokens($scale),
+    m3-form-field.$prefix: m3-form-field.get-density-tokens($scale),
+    m3-icon-button.$prefix: m3-icon-button.get-density-tokens($scale),
+    m3-list.$prefix: m3-list.get-density-tokens($scale),
+    m3-paginator.$prefix: m3-paginator.get-density-tokens($scale),
+    m3-radio.$prefix: m3-radio.get-density-tokens($scale),
+    m3-tabs.$prefix: m3-tabs.get-density-tokens($scale),
+    m3-select.$prefix: m3-select.get-density-tokens($scale),
+    m3-button-toggle.$prefix: m3-button-toggle.get-density-tokens($scale),
+    m3-stepper.$prefix: m3-stepper.get-density-tokens($scale),
+    m3-table.$prefix: m3-table.get-density-tokens($scale),
+    m3-toolbar.$prefix: m3-toolbar.get-density-tokens($scale),
+    m3-tree.$prefix: m3-tree.get-density-tokens($scale),
+  );
+}
+
 /// 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());
+      m3.md-sys-color-values-light(),
+      m3.md-sys-typescale-values(),
+      m3.md-sys-elevation-values(),
+      m3.md-sys-shape-values(),
+      m3.md-sys-state-values());
 
   & {
     @each $name, $value in $overrides {
@@ -145,12 +185,12 @@
 }
 
 @function _generate-sys-colors($ref, $type) {
-  $light-sys-colors: definitions.md-sys-color-values-light($ref);
+  $light-sys-colors: m3.md-sys-color-values-light($ref);
   @if ($type == light) {
     @return $light-sys-colors;
   }
 
-  $dark-sys-colors: definitions.md-sys-color-values-dark($ref);
+  $dark-sys-colors: m3.md-sys-color-values-dark($ref);
   @if ($type == dark) {
     @return $dark-sys-colors;
   }
@@ -185,7 +225,7 @@
   }
 
   & {
-    @each $name, $value in definitions.md-sys-typescale-values($ref) {
+    @each $name, $value in m3.md-sys-typescale-values($ref) {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
@@ -193,9 +233,9 @@
 
 @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);
+      $theme, _mat-theming-internals-do-not-access, color-tokens, (mat, theme), shadow);
 
-  @each $name, $value in definitions.md-sys-elevation-values() {
+  @each $name, $value in m3.md-sys-elevation-values() {
     $level: map.get($overrides, $name) or $value;
     $value: elevation.get-box-shadow($level, $shadow-color);
     & {
@@ -206,7 +246,7 @@
 
 @mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
-    @each $name, $value in definitions.md-sys-shape-values() {
+    @each $name, $value in m3.md-sys-shape-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
@@ -214,7 +254,7 @@
 
 @mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
-    @each $name, $value in definitions.md-sys-state-values() {
+    @each $name, $value in m3.md-sys-state-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
@@ -237,15 +277,15 @@
 @function create-system-fallbacks() {
   $app-vars: (
     'md-sys-color':
-        _create-system-app-vars-map(definitions.md-sys-color-values-light()),
+        _create-system-app-vars-map(m3.md-sys-color-values-light()),
     'md-sys-typescale':
-        _create-system-app-vars-map(definitions.md-sys-typescale-values()),
+        _create-system-app-vars-map(m3.md-sys-typescale-values()),
     'md-sys-elevation':
-        _create-system-app-vars-map(definitions.md-sys-elevation-values()),
+        _create-system-app-vars-map(m3.md-sys-elevation-values()),
     'md-sys-state':
-        _create-system-app-vars-map(definitions.md-sys-state-values()),
+        _create-system-app-vars-map(m3.md-sys-state-values()),
     'md-sys-shape':
-        _create-system-app-vars-map(definitions.md-sys-shape-values()),
+        _create-system-app-vars-map(m3.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(
@@ -258,7 +298,7 @@
 
   @return sass-utils.deep-merge-all(
       m3-tokens.generate-tokens($app-vars, true, true),
-      m3-tokens.generate-density-tokens(0)
+      get-density-tokens(0),
   );
 }
 

package/core/tokens/_m3-tokens.scss

@@ -1,11 +1,50 @@
-@use 'sass:map';
-@use '../style/sass-utils';
+@use '../../autocomplete/m3-autocomplete';
+@use '../../badge/m3-badge';
+@use '../../bottom-sheet/m3-bottom-sheet';
+@use '../../button-toggle/m3-button-toggle';
+@use '../../button/m3-button';
+@use '../../button/m3-fab';
+@use '../../button/m3-icon-button';
+@use '../../card/m3-card';
+@use '../../checkbox/m3-checkbox';
+@use '../../chips/m3-chip';
+@use '../../datepicker/m3-datepicker';
+@use '../../dialog/m3-dialog';
+@use '../../divider/m3-divider';
+@use '../../expansion/m3-expansion';
+@use '../../form-field/m3-form-field';
+@use '../../grid-list/m3-grid-list';
+@use '../../icon/m3-icon';
+@use '../../list/m3-list';
+@use '../../menu/m3-menu';
+@use '../../paginator/m3-paginator';
+@use '../../progress-bar/m3-progress-bar';
+@use '../../progress-spinner/m3-progress-spinner';
+@use '../../radio/m3-radio';
+@use '../../select/m3-select';
+@use '../../sidenav/m3-sidenav';
+@use '../../slide-toggle/m3-slide-toggle';
+@use '../../slider/m3-slider';
+@use '../../snack-bar/m3-snack-bar';
+@use '../../sort/m3-sort';
+@use '../../stepper/m3-stepper';
+@use '../../table/m3-table';
+@use '../../tabs/m3-tabs';
+@use '../../timepicker/m3-timepicker';
+@use '../../toolbar/m3-toolbar';
+@use '../../tooltip/m3-tooltip';
+@use '../../tree/m3-tree';
 @use '../m2' as m2-theming;
-@use './m3';
-@use './m3/definitions' as m3-token-definitions;
-@use '../tokens/m2' as m2-tokens;
-@use './density';
+@use '../m3-app';
+@use '../option/m3-optgroup';
+@use '../option/m3-option';
+@use '../ripple/m3-ripple';
+@use '../selection/pseudo-checkbox/m3-pseudo-checkbox';
+@use '../style/sass-utils';
 @use './format-tokens';
+@use './m2-tokens';
+@use './m3';
+@use 'sass:map';
 
 /// Generates tokens for the given palette with the given prefix.
 /// @param {Map} $palette The palette to generate tokens for
@@ -108,22 +147,12 @@ $_cached-token-slots: null;
   $result: sass-utils.deep-merge-all(
     // Add the system color & typography tokens (so we can give users access via an API).
     (
-      (mdc, theme): map.get($systems, md-sys-color),
-      (mdc, typography): map.get($systems, md-sys-typescale),
+      (mat, theme): map.get($systems, md-sys-color),
+      (mat, typography): map.get($systems, md-sys-typescale),
     ),
-    m3.get-m3-tokens($systems, $exclude-hardcoded, $token-slots),
+    get-m3-tokens($systems, $exclude-hardcoded, $token-slots),
   );
 
-  // Strip out tokens that are systemized by our made up density system.
-  @each $namespace, $tokens in $result {
-    @each $token, $value in $tokens {
-      @if density.is-systemized($namespace, $token) and not $include-density {
-        $tokens: map.remove($tokens, $token);
-      }
-    }
-    $result: map.set($result, $namespace, $tokens);
-  }
-
   @return $result;
 }
 
@@ -137,8 +166,8 @@ $_cached-token-slots: null;
 
 @function _get-sys-color($type, $ref, $prefix) {
   $mdc-sys-color: if($type == dark,
-    m3-token-definitions.md-sys-color-values-dark($ref),
-    m3-token-definitions.md-sys-color-values-light($ref));
+    m3.md-sys-color-values-dark($ref),
+    m3.md-sys-color-values-light($ref));
 
   @if (sass-utils.$use-system-color-variables) {
     $keys: (
@@ -298,7 +327,7 @@ $_cached-token-slots: null;
 
     @return create-map($keys, $prefix);
   }
-  @return m3-token-definitions.md-sys-typescale-values($ref);
+  @return m3.md-sys-typescale-values($ref);
 }
 
 /// Generates a set of namespaced color tokens for all components.
@@ -319,12 +348,12 @@ $_cached-token-slots: null;
     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.
-    md-sys-elevation: m3-token-definitions.md-sys-elevation-values(),
+    md-sys-elevation: m3.md-sys-elevation-values(),
     // Because the state values are sometimes combined with color values to create rgba colors,
     // state needs to be part of color dimension.
     // TODO(mmalerba): If at some point we remove the need for these combined values, we can move
     //  state to the base dimension.
-    md-sys-state: m3-token-definitions.md-sys-state-values(),
+    md-sys-state: m3.md-sys-state-values(),
   )));
 }
 
@@ -347,20 +376,71 @@ $system-variables-prefix) {
   ));
 }
 
-/// Generates a set of namespaced density tokens for all components.
-/// @param {String|Number} $scale The regular font-weight
-/// @return {Map} A map of namespaced density tokens
-@function generate-density-tokens($scale) {
-  @return density.get-tokens-for-scale($scale);
-}
-
 /// Generates a set of namespaced tokens not related to color, typography, or density for all
 /// components.
 /// @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((
-    md-sys-motion: m3-token-definitions.md-sys-motion-values(),
-    md-sys-shape: m3-token-definitions.md-sys-shape-values(),
+    md-sys-motion: m3.md-sys-motion-values(),
+    md-sys-shape: m3.md-sys-shape-values(),
   ), $include-non-systemized: true);
 }
+
+/// 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-list: (
+    m3-app.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-autocomplete.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-badge.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-bottom-sheet.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-button-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-card.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-chip.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-datepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-dialog.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-divider.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-expansion.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-fab.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-form-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-grid-list.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-icon-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-icon.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-list.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-menu.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-optgroup.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-option.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-paginator.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-progress-bar.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-progress-spinner.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-radio.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-ripple.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-tabs.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-select.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-sidenav.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-slide-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-slider.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-snack-bar.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-sort.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-stepper.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-table.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-timepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-toolbar.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-tooltip.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-tree.get-tokens($systems, $exclude-hardcoded, $token-slots),
+  );
+
+  $merged-tokens: ();
+  @each $tokens in $tokens-list {
+    $merged-tokens: map.deep-merge($merged-tokens, $tokens);
+  }
+
+  @return $merged-tokens;
+}

package/core/tokens/_m3-utils.scss

@@ -0,0 +1,85 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+
+/// 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($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($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));
+}
+
+/// Hardcode the given value, or null if hardcoded values are excluded.
+@function hardcode($value, $exclude-hardcoded) {
+  @return if($exclude-hardcoded, null, $value);
+}
+
+/// Picks a submap containing only the given keys out the given map.
+/// @param {Map} $map The map to pick from.
+/// @param {List} $keys The map keys to pick.
+/// @return {Map} A submap containing only the given keys.
+@function _pick($map, $keys) {
+  $result: ();
+  @each $key in $keys {
+    @if map.has-key($map, $key) {
+      $result: map.set($result, $key, map.get($map, $key));
+    }
+  }
+  @return $result;
+}
+
+
+/// 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;
+}
+
+/// Sets all of the standard typography tokens for the given token base name to the given typography
+/// level.
+/// @param {Map} $systems The MDC system tokens
+/// @param {String} $base-name The token base name to get the typography tokens for
+/// @param {String} $typography-level The typography level to base the token values on
+/// @return {Map} A map containing the typography tokens for the given base token name
+@function generate-typography-tokens($systems, $base-name, $typography-level) {
+  $result: ();
+  @each $prop in (font, line-height, size, tracking, weight) {
+    $result: map.set($result, #{$base-name}-#{$prop},
+      map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop}));
+  }
+  @return $result;
+}

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));
+}