@angular/material 20.0.0-next.4 → 20.0.0-next.6

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

@@ -2,7 +2,7 @@
 @use '../style/sass-utils';
 @use '../theming/config-validation';
 @use '../theming/definition';
-@use './m3/definitions';
+@use './m3';
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:list';
@@ -90,11 +90,11 @@
 /// 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 +145,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 +185,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 +193,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 +206,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 +214,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 +237,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(

package/core/tokens/_m3-tokens.scss

@@ -1,11 +1,51 @@
-@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 '../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 './density';
 @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,10 +148,10 @@ $_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.
@@ -137,8 +177,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 +338,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 +359,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(),
   )));
 }
 
@@ -360,7 +400,65 @@ $system-variables-prefix) {
 @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;
+}