@angular/material 20.0.0-next.5 → 20.0.0-next.7

package/core/tokens/_m2-tokens.scss

@@ -0,0 +1,131 @@
+@use '../../autocomplete/m2-autocomplete';
+@use '../../badge/m2-badge';
+@use '../../bottom-sheet/m2-bottom-sheet';
+@use '../../button-toggle/m2-button-toggle';
+@use '../../button/m2-button';
+@use '../../button/m2-fab';
+@use '../../button/m2-icon-button';
+@use '../../card/m2-card';
+@use '../../checkbox/m2-checkbox';
+@use '../../chips/m2-chip';
+@use '../../datepicker/m2-datepicker';
+@use '../../dialog/m2-dialog';
+@use '../../divider/m2-divider';
+@use '../../expansion/m2-expansion';
+@use '../../form-field/m2-form-field';
+@use '../../grid-list/m2-grid-list';
+@use '../../icon/m2-icon';
+@use '../../list/m2-list';
+@use '../../menu/m2-menu';
+@use '../../paginator/m2-paginator';
+@use '../../progress-bar/m2-progress-bar';
+@use '../../progress-spinner/m2-progress-spinner';
+@use '../../radio/m2-radio';
+@use '../../select/m2-select';
+@use '../../sidenav/m2-sidenav';
+@use '../../slide-toggle/m2-slide-toggle';
+@use '../../slider/m2-slider';
+@use '../../snack-bar/m2-snack-bar';
+@use '../../sort/m2-sort';
+@use '../../stepper/m2-stepper';
+@use '../../table/m2-table';
+@use '../../tabs/m2-tabs';
+@use '../../timepicker/m2-timepicker';
+@use '../../toolbar/m2-toolbar';
+@use '../../tooltip/m2-tooltip';
+@use '../../tree/m2-tree';
+@use '../m2-app';
+@use '../option/m2-optgroup';
+@use '../option/m2-option';
+@use '../ripple/m2-ripple';
+@use '../selection/pseudo-checkbox/m2-pseudo-checkbox';
+@use '../style/sass-utils';
+@use '../theming/inspection';
+@use 'sass:map';
+@use 'sass:meta';
+
+/// Gets the tokens for the given theme, m2 tokens module, and theming system.
+/// @param {Map} $theme The Angular Material theme object to generate token values from.
+/// @param {String} $module The Sass module containing the token getter functions.
+/// @param {String} $system The theming system to get tokens for. Valid values are: unthemable,
+///     color, typography, density.
+/// @return {Map} The token map by calling the token getter for the given system in the given module
+///    with the given Angular Material theme. Token names are not fully-qualified.
+@function _get-tokens-for-module-and-system($theme, $module, $system) {
+  @if $system == unthemable {
+    @return meta.call(meta.get-function(get-#{$system}-tokens, $module: $module));
+  }
+  @if not inspection.theme-has($theme, $system) {
+    @return ();
+  }
+  @return meta.call(meta.get-function(get-#{$system}-tokens, $module: $module), $theme);
+}
+
+/// Gets the fully qualified tokens map for the given theme and m2 tokens module.
+/// @param {Map} $theme The Angular Material theme object to generate token values from.
+/// @param {String} $module The Sass module containing the token getter functions.
+/// @return {Map} The token map by calling the token getters in the given module with the given
+///     Angular Material theme. Token names are fully-qualified.
+@function _get-tokens-for-module($theme, $module) {
+  $tokens: sass-utils.deep-merge-all(
+    _get-tokens-for-module-and-system($theme, $module, unthemable),
+    _get-tokens-for-module-and-system($theme, $module, color),
+    _get-tokens-for-module-and-system($theme, $module, typography),
+    _get-tokens-for-module-and-system($theme, $module, density)
+  );
+  @return map.set((), map.get(meta.module-variables($module), prefix), $tokens);
+}
+
+/// Gets the full set of M2 tokens for the given theme object.
+/// @param {Map} $theme The Angular Material theme object to generate token values from.
+/// @return {Map} The token map for the given Angular Material theme. Returned format:
+///     (
+///       (fully, qualified, namespace): (
+///         token: value
+///       )
+///     )
+@function m2-tokens-from-theme($theme) {
+  @return sass-utils.deep-merge-all(
+    _get-tokens-for-module($theme, m2-app),
+    _get-tokens-for-module($theme, m2-autocomplete),
+    _get-tokens-for-module($theme, m2-badge),
+    _get-tokens-for-module($theme, m2-bottom-sheet),
+    _get-tokens-for-module($theme, m2-button),
+    _get-tokens-for-module($theme, m2-button-toggle),
+    _get-tokens-for-module($theme, m2-card),
+    _get-tokens-for-module($theme, m2-checkbox),
+    _get-tokens-for-module($theme, m2-chip),
+    _get-tokens-for-module($theme, m2-datepicker),
+    _get-tokens-for-module($theme, m2-dialog),
+    _get-tokens-for-module($theme, m2-divider),
+    _get-tokens-for-module($theme, m2-expansion),
+    _get-tokens-for-module($theme, m2-fab),
+    _get-tokens-for-module($theme, m2-form-field),
+    _get-tokens-for-module($theme, m2-grid-list),
+    _get-tokens-for-module($theme, m2-icon),
+    _get-tokens-for-module($theme, m2-icon-button),
+    _get-tokens-for-module($theme, m2-list),
+    _get-tokens-for-module($theme, m2-menu),
+    _get-tokens-for-module($theme, m2-optgroup),
+    _get-tokens-for-module($theme, m2-option),
+    _get-tokens-for-module($theme, m2-paginator),
+    _get-tokens-for-module($theme, m2-progress-bar),
+    _get-tokens-for-module($theme, m2-progress-spinner),
+    _get-tokens-for-module($theme, m2-pseudo-checkbox),
+    _get-tokens-for-module($theme, m2-radio),
+    _get-tokens-for-module($theme, m2-ripple),
+    _get-tokens-for-module($theme, m2-select),
+    _get-tokens-for-module($theme, m2-sidenav),
+    _get-tokens-for-module($theme, m2-slide-toggle),
+    _get-tokens-for-module($theme, m2-slider),
+    _get-tokens-for-module($theme, m2-snack-bar),
+    _get-tokens-for-module($theme, m2-sort),
+    _get-tokens-for-module($theme, m2-stepper),
+    _get-tokens-for-module($theme, m2-tabs),
+    _get-tokens-for-module($theme, m2-table),
+    _get-tokens-for-module($theme, m2-timepicker),
+    _get-tokens-for-module($theme, m2-toolbar),
+    _get-tokens-for-module($theme, m2-tooltip),
+    _get-tokens-for-module($theme, m2-tree),
+  );
+}

package/core/tokens/_m2-utils.scss

@@ -0,0 +1,109 @@
+@use '../m2/palette';
+@use '../m2/theming';
+@use '../m2/typography';
+@use 'sass:color';
+@use 'sass:math';
+@use 'sass:meta';
+
+$_placeholder-color-palette: theming.define-palette(palette.$red-palette);
+
+// Indicates whether we're building internally. Used for backwards compatibility.
+$private-is-internal-build: false;
+
+// Placeholder color config that can be passed to token getter functions when generating token
+// slots.
+$placeholder-color-config: (
+  primary: $_placeholder-color-palette,
+  accent: $_placeholder-color-palette,
+  warn: $_placeholder-color-palette,
+  is-dark: false,
+  foreground: palette.$light-theme-foreground-palette,
+  background: palette.$light-theme-background-palette,
+);
+
+$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
+
+// Placeholder typography config that can be passed to token getter functions when generating token
+// slots.
+$placeholder-typography-config: (
+  font-family: 'Roboto, sans-serif',
+  headline-1: $_placeholder-typography-level-config,
+  headline-2: $_placeholder-typography-level-config,
+  headline-3: $_placeholder-typography-level-config,
+  headline-4: $_placeholder-typography-level-config,
+  headline-5: $_placeholder-typography-level-config,
+  headline-6: $_placeholder-typography-level-config,
+  subtitle-1: $_placeholder-typography-level-config,
+  subtitle-2: $_placeholder-typography-level-config,
+  body-1: $_placeholder-typography-level-config,
+  body-2: $_placeholder-typography-level-config,
+  caption: $_placeholder-typography-level-config,
+  button: $_placeholder-typography-level-config,
+  overline: $_placeholder-typography-level-config,
+  subheading-1: $_placeholder-typography-level-config,
+  title: $_placeholder-typography-level-config,
+);
+
+// Placeholder density config that can be passed to token getter functions when generating token
+// slots.
+$placeholder-density-config: 0;
+
+/// Inherited function from MDC that computes which contrast tone to use on top of a color.
+/// This is used only in a narrow set of use cases when generating M2 button tokens to maintain
+/// backwards compatibility.
+/// @param {Color} $value Color for which we're calculating the contrast tone.
+/// @param {Boolean} $is-dark Whether the current theme is dark.
+/// @return {Map} Either `dark` or `light`.
+@function contrast-tone($value, $is-dark) {
+  @if ($value == 'dark') {
+    @return 'light';
+  }
+
+  @if ($value == 'light') {
+    @return 'dark';
+  }
+
+  // Fallback if the app is using a non-color palette (e.g. CSS variable based).
+  @if (meta.type-of($value) != 'color') {
+    @return if($is-dark, 'light', 'dark');
+  }
+
+  $minimum-contrast: 3.1;
+  $light-contrast: _contrast($value, #fff);
+  $dark-contrast: _contrast($value, rgba(0, 0, 0, 0.87));
+
+  @if ($light-contrast < $minimum-contrast) and ($dark-contrast > $light-contrast) {
+    @return 'dark';
+  }
+
+  @return 'light';
+}
+
+@function _linear-channel-value($channel-value) {
+  $normalized-channel-value: math.div($channel-value, 255);
+
+  @if ($normalized-channel-value < 0.03928) {
+    @return math.div($normalized-channel-value, 12.92);
+  }
+
+  @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4);
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _luminance($color) {
+  $red: _linear-channel-value(color.red($color));
+  $green: _linear-channel-value(color.green($color));
+  $blue: _linear-channel-value(color.blue($color));
+
+  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _contrast($back, $front) {
+  $back-lum: _luminance($back) + 0.05;
+  $fore-lum: _luminance($front) + 0.05;
+
+  @return math.div(math.max($back-lum, $fore-lum), math.min($back-lum, $fore-lum));
+}

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};
     }
   }
@@ -195,7 +235,7 @@
   $shadow-color: map.get(
       $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
@@ -111,19 +150,9 @@ $_cached-token-slots: null;
       (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;
+}