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

package/core/tokens/_m3-tokens.scss

@@ -0,0 +1,1252 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/tokens/v0_161' as mdc-tokens;
+@use '../style/sass-utils';
+@use '../m2' as m2-theming;
+@use '../tokens/m2' as m2-tokens;
+@use './density';
+@use './custom-tokens';
+@use './format-tokens';
+
+// TODO(mmalerba): Split up this file into smaller pieces.
+
+/// Maps the values in a map to new values using the given mapping function
+/// @param {Map} $map The maps whose values will be mapped to new values.
+/// @param {Function} $fn The value mapping function.
+/// @param {Map} A new map with its values updated using the mapping function.
+@function _map-values($map, $fn) {
+  $result: ();
+  @each $key, $value in $map {
+    $result: map.set($result, $key, meta.call($fn, $value));
+  }
+  @return $result;
+}
+
+/// 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;
+}
+
+/// Renames the keys in a map
+/// @param {Map} $map The map whose keys should be renamed
+/// @param {Map} $rename-keys A map of original key to renamed key to apply to $map
+/// @return {Map} The result of applying the given key renames to the given map.
+@function _rename-map-keys($map, $rename-keys) {
+  $result: $map;
+  @each $old-key-name, $new-key-name in $rename-keys {
+    @if map.has-key($map, $old-key-name) {
+      $result: map.set($result, $new-key-name, map.get($map, $old-key-name));
+    }
+  }
+  @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));
+}
+
+/// Generates tokens for the given palette with the given prefix.
+/// @param {Map} $palette The palette to generate tokens for
+/// @param {String} $prefix The key prefix used to name the tokens
+/// @return {Map} A set of tokens for the given palette
+@function _generate-palette-tokens($palette, $prefix) {
+  $palette: map.remove($palette, neutral, neutral-variant);
+  $result: ();
+  @each $hue, $value in $palette {
+    $result: map.set($result, '#{$prefix}#{$hue}', $value);
+  }
+  @return $result;
+}
+
+/// Creates a set of `md-ref-palette` tokens from the given palettes. (See
+/// https://github.com/material-components/material-components-web/blob/master/packages/mdc-tokens/v0_161/_md-ref-palette.scss)
+/// @param {Map} $primary The primary palette
+/// @param {Map} $secondary The secondary palette
+/// @param {Map} $tertiary The tertiary palette
+/// @param {Map} $error The error palette
+/// @return {Map} A set of `md-ref-palette` tokens
+@function _generate-ref-palette-tokens($primary, $tertiary, $error) {
+  @return sass-utils.merge-all(
+      (black: #000, white: #fff),
+      _generate-palette-tokens($primary, primary),
+      _generate-palette-tokens(map.get($primary, secondary), secondary),
+      _generate-palette-tokens($tertiary, tertiary),
+      _generate-palette-tokens(map.get($primary, neutral), neutral),
+      _generate-palette-tokens(map.get($primary, neutral-variant), neutral-variant),
+      _generate-palette-tokens($error, error),
+  );
+}
+
+/// Creates a set of `md-ref-typeface` tokens from the given palettes. (See
+/// https://github.com/material-components/material-components-web/blob/master/packages/mdc-tokens/v0_161/_md-ref-typeface.scss)
+/// @param {List|String} $brand The font-family to use for brand text
+/// @param {List|String} $plain The font-family to use for plain text
+/// @param {String} $bold The font-weight to use for bold text
+/// @param {String} $medium The font-weight to use for medium text
+/// @param {String} $regular The font-weight to use for regular text
+/// @return {Map} A set of `md-ref-typeface` tokens
+@function _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular) {
+  @return (
+    brand: $brand,
+    plain: $plain,
+    weight-bold: $bold,
+    weight-medium: $medium,
+    weight-regular: $regular,
+  );
+}
+
+/// At the time of writing, some color tokens (e.g. disabled state) are defined as a solid color
+/// token and a separate opacity token. This function applies the opacity to the color and drops the
+/// opacity key from the map. Can be removed once b/213331407 is resolved.
+/// @param {Map} $tokens The map of tokens currently being generated
+/// @param {Map} $all-tokens A map of all tokens, including hardcoded values
+/// @param {List} $pairs Pairs of color token names and their opacities. Should be in the shape of
+/// `((color: 'color-key', opacity: 'opacity-key'))`.
+/// @return {Map} The initial tokens with the combined color values.
+@function _combine-color-tokens($tokens, $opacity-lookup, $pairs) {
+  $result: $tokens;
+
+  @each $pair in $pairs {
+    $color-key: map.get($pair, color);
+    $opacity-key: map.get($pair, opacity);
+    $color: map.get($tokens, $color-key);
+    $opacity: map.get($opacity-lookup, $opacity-key);
+
+    @if(meta.type-of($color) == 'color') {
+      $result: map.remove($result, $opacity-key);
+      $result: map.set($result, $color-key, rgba($color, $opacity));
+    }
+    @else if($color != null) {
+      $result: map.remove($result, $opacity-key);
+      $combined-color: #{color-mix(in srgb, #{$color} #{($opacity * 100) + '%'}, transparent)};
+      $result: map.set($result, $color-key, $combined-color);
+    }
+  }
+
+  @return $result;
+}
+
+/// Renames the official checkbox tokens to match the names actually used in MDC's code (which are
+/// different). This is a temporary workaround until MDC updates to use the correct names for the
+/// tokens.
+/// @param {Map} $tokens The map of checkbox tokens with the official tokens names
+/// @param {Map} $all-tokens Map of all checkbox tokens, including hardcoded values.
+/// This is necessary in order to do opacity lookups.
+/// @return {Map} The given tokens, renamed to be compatible with MDC's token implementation.
+@function _fix-checkbox-tokens($tokens) {
+  // Need to get the hardcoded values, because they include opacities that are used for the disabled
+  // state.
+  $hardcoded-tokens: mdc-tokens.md-comp-checkbox-values((), false);
+
+  $rename-keys: (
+    selected-icon-color: selected-checkmark-color,
+    selected-disabled-icon-color: disabled-selected-checkmark-color,
+    selected-container-color: selected-icon-color,
+    selected-hover-container-color: selected-hover-icon-color,
+    selected-disabled-container-color: disabled-selected-icon-color,
+    selected-disabled-container-opacity: disabled-selected-icon-opacity,
+    selected-focus-container-color: selected-focus-icon-color,
+    selected-pressed-container-color: selected-pressed-icon-color,
+    unselected-disabled-outline-color: disabled-unselected-icon-color,
+    unselected-disabled-container-opacity: disabled-unselected-icon-opacity,
+    unselected-focus-outline-color: unselected-focus-icon-color,
+    unselected-hover-outline-color: unselected-hover-icon-color,
+    unselected-outline-color: unselected-icon-color,
+    unselected-pressed-outline-color: unselected-pressed-icon-color
+  );
+
+  $remapped-tokens: _rename-map-keys($tokens, $rename-keys);
+  $remapped-hardcoded-tokens: _rename-map-keys($hardcoded-tokens, $rename-keys);
+
+  @return _combine-color-tokens($remapped-tokens, $remapped-hardcoded-tokens, (
+    (
+      color: disabled-selected-icon-color,
+      opacity: disabled-selected-icon-opacity,
+    ),
+    (
+      color: disabled-unselected-icon-color,
+      opacity: disabled-unselected-icon-opacity,
+    ),
+  ));
+}
+
+/// Fixes inconsistent values in the filled text field tokens so that they can produce valid
+/// styles.
+/// @param {Map} $initial-tokens Map of filled text field tokens currently being generated.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-filled-text-field-tokens($initial-tokens) {
+  // Need to get the hardcoded values, because they include opacities that are used for the disabled
+  // state.
+  $hardcoded-tokens: mdc-tokens.md-comp-filled-text-field-values((), false);
+
+  $tokens: _combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+    (
+      color: disabled-active-indicator-color,
+      opacity: disabled-active-indicator-opacity
+    ),
+    (
+      color: disabled-container-color,
+      opacity: disabled-container-opacity
+    ),
+    (
+      color: disabled-input-text-color,
+      opacity: disabled-input-text-opacity
+    ),
+    (
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity
+    ),
+    (
+      color: disabled-leading-icon-color,
+      opacity: disabled-leading-icon-opacity
+    ),
+    (
+      color: disabled-supporting-text-color,
+      opacity: disabled-supporting-text-opacity
+    ),
+    (
+      color: disabled-trailing-icon-color,
+      opacity: disabled-trailing-icon-opacity
+    )
+  ));
+
+  $container-shape: map.get($tokens, container-shape);
+
+  // The M2 token slots define a single `container-shape` slot while the M3 tokens provide a list
+  // of shapes (e.g. top/bottom/left/right). Extract the first value so it matches the expected
+  // token slot in M2.
+  @if meta.type-of($container-shape) == 'list' {
+    $tokens: map.set($tokens, container-shape, list.nth($container-shape, 1));
+  }
+
+  @return $tokens;
+}
+
+
+/// Fixes inconsistent values in the text button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of text button tokens currently being generated.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-text-button-tokens($initial-tokens) {
+  // Need to get the hardcoded values, because they include opacities that are used for the disabled
+  // state.
+  $hardcoded-tokens: mdc-tokens.md-comp-text-button-values((), false);
+
+  @return _combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+    (
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity,
+    ),
+  ));
+}
+
+/// Fixes inconsistent values in the filled button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of filled button tokens currently being generated.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-filled-button-tokens($initial-tokens) {
+  // Need to get the hardcoded values, because they include opacities that are used for the disabled
+  // state.
+  $hardcoded-tokens: mdc-tokens.md-comp-filled-button-values((), false);
+
+  @return _combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+    (
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity,
+    ),
+    (
+      color: disabled-container-color,
+      opacity: disabled-container-opacity,
+    )
+  ));
+}
+
+/// Fixes inconsistent values in the protected button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of protected button tokens currently being generated.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-protected-button-tokens($initial-tokens) {
+  // Need to get the hardcoded values, because they include opacities that are used for the disabled
+  // state.
+  $hardcoded-tokens: mdc-tokens.md-comp-elevated-button-values((), false);
+
+  @return _combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+    (
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity,
+    ),
+    (
+      color: disabled-container-color,
+      opacity: disabled-container-opacity,
+    )
+  ));
+}
+
+/// Fixes inconsistent values in the outlined button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of outlined button tokens currently being generated.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-outlined-button-tokens($initial-tokens) {
+  $hardcoded-tokens: mdc-tokens.md-comp-outlined-button-values((), false);
+
+  @return _combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+    (
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity,
+    ),
+    (
+      color: disabled-outline-color,
+      opacity: disabled-outline-opacity,
+    )
+  ));
+}
+
+/// Fixes inconsistent values in the outlined text field tokens so that they can produce valid
+/// styles.
+/// @param {Map} $initial-tokens Map of outlined text field tokens currently being generated.
+/// @param {Map} $all-tokens Map of all outlined text field tokens, including hardcoded values.
+/// This is necessary in order to do opacity lookups.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-outlined-text-field-tokens($initial-tokens) {
+  // Need to get the hardcoded values, because they include opacities that are used for the disabled
+  // state.
+  $hardcoded-tokens: mdc-tokens.md-comp-outlined-text-field-values((), false);
+
+  @return _combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+    (
+      color: disabled-outline-color,
+      opacity: disabled-outline-opacity
+    ),
+    (
+      color: disabled-active-indicator-color,
+      opacity: disabled-active-indicator-opacity
+    ),
+    (
+      color: disabled-container-color,
+      opacity: disabled-container-opacity
+    ),
+    (
+      color: disabled-input-text-color,
+      opacity: disabled-input-text-opacity
+    ),
+    (
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity
+    ),
+    (
+      color: disabled-leading-icon-color,
+      opacity: disabled-leading-icon-opacity
+    ),
+    (
+      color: disabled-supporting-text-color,
+      opacity: disabled-supporting-text-opacity
+    ),
+    (
+      color: disabled-trailing-icon-color,
+      opacity: disabled-trailing-icon-opacity
+    )
+  ));
+}
+
+/// Gets the token values for the MDC form field.
+/// @param {Map} $systems The MDC system tokens.
+/// @return {Map} The form field tokens.
+@function _get-form-field-tokens($systems) {
+  @return (
+    // TODO: MDC currently doesn't provide tokens for the form field so we need to
+    // define them ourselves. Clean this up once b/246297033 is resolved.
+    label-text-color: map.get($systems, 'md-sys-color', 'on-surface'),
+    label-text-font: map.get($systems, 'md-sys-typescale', 'body-medium-font'),
+    label-text-line-height: map.get($systems, 'md-sys-typescale', 'body-medium-line-height'),
+    label-text-size: map.get($systems, 'md-sys-typescale', 'body-medium-size'),
+    label-text-tracking: map.get($systems, 'md-sys-typescale', 'body-medium-tracking'),
+    label-text-weight: map.get($systems, 'md-sys-typescale', 'body-medium-weight'),
+  );
+}
+
+/// Fixes inconsistent values in the icon button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of icon button tokens currently being generated.
+/// @param {Map} $all-tokens Map of all icon button tokens, including hardcoded values.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-icon-button-tokens($tokens) {
+  // Need to get the hardcoded values, because they include opacities that are used for the disabled
+  // state.
+  $hardcoded-tokens: mdc-tokens.md-comp-icon-button-values((), false);
+
+  $rename-keys: (
+    unselected-icon-color: icon-color,
+  );
+
+  $remapped-tokens: _rename-map-keys($tokens, $rename-keys);
+  $remapped-hardcoded-tokens: _rename-map-keys($hardcoded-tokens, $rename-keys);
+
+  @return _combine-color-tokens($remapped-tokens, $remapped-hardcoded-tokens, (
+    (
+      color: disabled-icon-color,
+      opacity: disabled-icon-opacity,
+    ),
+  ));
+}
+
+/// Fixes inconsistent values in the dialog tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of dialog tokens currently being generated.
+/// @param {Map} $all-tokens Map of all dialog tokens, including hardcoded values.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-dialog-tokens($systems, $tokens) {
+  $tokens: _rename-map-keys($tokens, (
+    headline-color: subhead-color,
+    headline-font: subhead-font,
+    headline-line-height: subhead-line-height,
+    headline-size: subhead-size,
+    headline-tracking: subhead-tracking,
+    headline-weight: subhead-weight,
+  ));
+
+  @if map.get($tokens, container-elevation) != null {
+    $tokens: map.merge($tokens, (
+      // The spec has the dialog at an elevation of 3 which is consistent with the current
+      // version of the tokens (0_161), however both the designs and MDC's implementation
+      // have the elevation set to 0. Set it manually to 0 here since the value in the
+      // exported tokens  is likely outdated.
+      container-elevation: 0,
+
+      // This color needs to be supplied for MDC to produce the shadow. Technically we don't
+      // have to provide it since the elevation is set to 0 above, but we do it in case
+      // the value changes in the future.
+      container-shadow-color: #000,
+    ));
+  }
+
+  @return $tokens;
+}
+
+/// Fixes values in the list tokens that are inconsistent with its usage.
+/// @param {Map} $initial-tokens Map of list tokens currently being generated.
+/// @return {Map} The given tokens, with the inconsistent values replaced with valid ones.
+@function _fix-list-tokens($tokens) {
+  // This does not match the spec, which defines this to be `md.sys.color.surface`.
+  // However, this interferes with the use case of placing a list on other components. For example,
+  // the bottom sheet's container color is `md.sys.color.surface-container-low`. Instead, allow the
+  // list to just display the colors for its background.
+  @if map.get($tokens, list-item-container-color) != null {
+    $tokens: map.set($tokens, list-item-container-color, transparent);
+  }
+
+  // Match spec, which has list-item-leading-icon-size of 24px. Current version of tokens (0_161)
+  // has 18px.
+  @if map.get($tokens, list-item-leading-icon-size) != null {
+    $tokens: map.set($tokens, list-item-leading-icon-size, 24px);
+  }
+
+  @return $tokens;
+}
+
+/// Generates a set of namespaced tokens for all components.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
+/// @return {Map} A map of namespaced tokens
+@function _generate-tokens($systems, $include-non-systemized: false) {
+  $systems: map.merge((
+    md-sys-color: (),
+    md-sys-elevation: (),
+    md-sys-motion: (),
+    md-sys-shape: (),
+    md-sys-state: (),
+    md-sys-typescale: ()
+  ), $systems);
+  $exclude-hardcoded: not $include-non-systemized;
+
+  // DO NOT REMOVE
+  // This function is used internally.
+  $systems: format-tokens.private-format-tokens($systems);
+
+  // TODO(mmalerba): Refactor this to not depend on the legacy theme when moving out of
+  //  material-experimental. This is a hack for now because there is no good way to get the token
+  //  slots in material-experimental without exposing them all from material.
+  $fake-theme: m2-theming.define-light-theme((
+    color: (
+      primary: m2-theming.define-palette(m2-theming.$red-palette),
+      accent: m2-theming.define-palette(m2-theming.$red-palette),
+      warn: m2-theming.define-palette(m2-theming.$red-palette),
+    ),
+    typography: m2-theming.define-typography-config(),
+    density: 0
+  ));
+  $token-slots: m2-tokens.m2-tokens-from-theme($fake-theme);
+
+  // TODO(mmalerba): Fill in remaining tokens.
+  $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),
+    ),
+    // Get the official MDC component tokens
+    _namespace-tokens(
+      (mdc, checkbox),
+      (
+        _fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)),
+        _map-values(
+            custom-tokens.mdc-checkbox-color-variants($systems, $exclude-hardcoded),
+            meta.get-function(_fix-checkbox-tokens)
+        )
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, chip),
+      custom-tokens.mdc-chip($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, circular-progress),
+      (
+        mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),
+        custom-tokens.mdc-circular-progress-color-variants($systems, $exclude-hardcoded),
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, dialog),
+      _fix-dialog-tokens($systems, mdc-tokens.md-comp-dialog-values($systems, $exclude-hardcoded)),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, elevated-card),
+      mdc-tokens.md-comp-elevated-card-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, fab),
+      (
+        mdc-tokens.md-comp-fab-primary-values($systems, $exclude-hardcoded),
+        (
+          // Color variants
+          primary: (), // Default, no overrides needed.
+          secondary: mdc-tokens.md-comp-fab-secondary-values($systems, $exclude-hardcoded),
+          tertiary: mdc-tokens.md-comp-fab-tertiary-values($systems, $exclude-hardcoded)
+        )
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, fab-small),
+      (
+        mdc-tokens.md-comp-fab-primary-small-values($systems, $exclude-hardcoded),
+        (
+          // Color variants
+          primary: (), // Default, no overrides needed.
+          secondary: mdc-tokens.md-comp-fab-secondary-small-values($systems, $exclude-hardcoded),
+          tertiary: mdc-tokens.md-comp-fab-tertiary-small-values($systems, $exclude-hardcoded)
+        )
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, extended-fab),
+      (
+        mdc-tokens.md-comp-extended-fab-primary-values($systems, $exclude-hardcoded),
+        (
+          // Color variants
+          primary: (), // Default, no overrides needed.
+          secondary: mdc-tokens.md-comp-extended-fab-secondary-values($systems, $exclude-hardcoded),
+          tertiary: mdc-tokens.md-comp-extended-fab-tertiary-values($systems, $exclude-hardcoded)
+        ),
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, filled-text-field),
+      (
+        _fix-filled-text-field-tokens(
+          mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded)
+        ),
+        _map-values(
+          custom-tokens.mdc-filled-text-field-color-variants($systems, $exclude-hardcoded),
+          meta.get-function(_fix-filled-text-field-tokens)
+        )
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, form-field),
+      _get-form-field-tokens($systems),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, icon-button),
+      _fix-icon-button-tokens(mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded)),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, text-button),
+      (
+        _fix-text-button-tokens(
+          mdc-tokens.md-comp-text-button-values($systems, $exclude-hardcoded)
+        ),
+        _map-values(
+          custom-tokens.mdc-text-button-color-variants($systems, $exclude-hardcoded),
+          meta.get-function(_fix-text-button-tokens)
+        )
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      // Note: in M3 the "protected" button is called "elevated".
+      (mdc, protected-button),
+      (
+        _fix-protected-button-tokens(
+          mdc-tokens.md-comp-elevated-button-values($systems, $exclude-hardcoded)
+        ),
+        _map-values(
+          custom-tokens.mdc-elevated-button-color-variants($systems, $exclude-hardcoded),
+          meta.get-function(_fix-protected-button-tokens)
+        )
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, filled-button),
+      (
+        _fix-filled-button-tokens(
+          mdc-tokens.md-comp-filled-button-values($systems, $exclude-hardcoded),
+        ),
+        _map-values(
+          custom-tokens.mdc-filled-button-color-variants($systems, $exclude-hardcoded),
+          meta.get-function(_fix-filled-button-tokens)
+        )
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, outlined-button),
+      (
+        _fix-outlined-button-tokens(
+          mdc-tokens.md-comp-outlined-button-values($systems, $exclude-hardcoded),
+        ),
+        _map-values(
+          custom-tokens.mdc-outlined-button-color-variants($systems, $exclude-hardcoded),
+          meta.get-function(_fix-outlined-button-tokens)
+        )
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, linear-progress),
+      (
+        mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
+        custom-tokens.mdc-linear-progress-color-variants($systems, $exclude-hardcoded),
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, list),
+      _fix-list-tokens(
+        mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded)
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, outlined-card),
+      mdc-tokens.md-comp-outlined-card-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, outlined-text-field),
+      (
+        _fix-outlined-text-field-tokens(
+          mdc-tokens.md-comp-outlined-text-field-values($systems, $exclude-hardcoded)
+        ),
+        _map-values(
+          custom-tokens.mdc-outlined-text-field-color-variants($systems, $exclude-hardcoded),
+          meta.get-function(_fix-outlined-text-field-tokens)
+        )
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, plain-tooltip),
+      mdc-tokens.md-comp-plain-tooltip-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, radio),
+      (
+        mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
+        custom-tokens.mdc-radio-color-variants($systems, $exclude-hardcoded)
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, slider),
+      (
+        mdc-tokens.md-comp-slider-values($systems, $exclude-hardcoded),
+        custom-tokens.mdc-slider-color-variants($systems, $exclude-hardcoded)
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, snackbar),
+      mdc-tokens.md-comp-snackbar-values($systems, $exclude-hardcoded),
+      $token-slots,
+    ),
+    _namespace-tokens(
+      (mdc, switch),
+      (
+        mdc-tokens.md-comp-switch-values($systems, $exclude-hardcoded),
+        custom-tokens.mdc-switch-color-variants($systems, $exclude-hardcoded)
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, tab),
+      mdc-tokens.md-comp-secondary-navigation-tab-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+
+    // Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
+    // values.
+    _namespace-tokens(
+      (mat, app),
+      custom-tokens.app($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, tab-indicator),
+      custom-tokens.tab-indicator($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, autocomplete),
+      custom-tokens.autocomplete($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, badge),
+      custom-tokens.badge($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, bottom-sheet),
+      custom-tokens.bottom-sheet($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, card),
+      custom-tokens.card($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, chip),
+      custom-tokens.chip($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, datepicker),
+      custom-tokens.datepicker($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, dialog),
+      custom-tokens.dialog($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, divider),
+      custom-tokens.divider($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, fab),
+      custom-tokens.fab($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, fab-small),
+      custom-tokens.fab-small($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, form-field),
+      custom-tokens.form-field($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, expansion),
+      custom-tokens.expansion($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, grid-list),
+      custom-tokens.grid-list($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, icon),
+      custom-tokens.icon($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, text-button),
+      custom-tokens.text-button($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, filled-button),
+      custom-tokens.filled-button($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, list),
+      custom-tokens.list($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      // Note: in M3 the "protected" button is called "elevated".
+      (mat, protected-button),
+      custom-tokens.elevated-button($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, outlined-button),
+      custom-tokens.outlined-button($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, icon-button),
+      custom-tokens.icon-button($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, menu),
+      custom-tokens.menu($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, optgroup),
+      custom-tokens.optgroup($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, option),
+      custom-tokens.option($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, paginator),
+      custom-tokens.paginator($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, full-pseudo-checkbox),
+      custom-tokens.full-pseudo-checkbox($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, minimal-pseudo-checkbox),
+      custom-tokens.minimal-pseudo-checkbox($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, checkbox),
+      custom-tokens.checkbox($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, radio),
+      custom-tokens.radio($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, ripple),
+      custom-tokens.ripple($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, select),
+      custom-tokens.select($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, sidenav),
+      custom-tokens.sidenav($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, slider),
+      custom-tokens.slider($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, snack-bar),
+      custom-tokens.snack-bar($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, sort),
+      custom-tokens.sort($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, standard-button-toggle),
+      custom-tokens.button-toggle($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, stepper),
+      custom-tokens.stepper($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, switch),
+      custom-tokens.switch($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, tab-header),
+      custom-tokens.tab-header($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, table),
+      custom-tokens.table($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, toolbar),
+      custom-tokens.toolbar($systems, $exclude-hardcoded),
+      $token-slots,
+    ),
+    _namespace-tokens(
+      (mat, tree),
+      custom-tokens.tree($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) {
+        $tokens: map.remove($tokens, $token);
+      }
+    }
+    $result: map.set($result, $namespace, $tokens);
+  }
+  @return $result;
+}
+
+@mixin system-level-colors($theme, $overrides: ()) {
+  $palettes: map.get($theme, _mat-theming-internals-do-not-access, palettes);
+  $base-palettes: (
+    neutral: map.get($palettes, neutral),
+    neutral-variant: map.get($palettes, neutral-variant),
+    secondary: map.get($palettes, secondary),
+    error: map.get($palettes, error),
+  );
+
+  $type: map.get($theme, _mat-theming-internals-do-not-access, theme-type);
+  $primary: map.merge(map.get($palettes, primary), $base-palettes);
+  $tertiary: map.merge(map.get($palettes, tertiary), $base-palettes);
+  $error: map.get($palettes, error);
+
+  $ref: (
+    md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
+  );
+
+  $sys-colors: if($type == dark,
+    mdc-tokens.md-sys-color-values-dark($ref),
+    mdc-tokens.md-sys-color-values-light($ref));
+
+  @each $name, $value in $sys-colors {
+    --sys-#{$name}: #{map.get($overrides, $name) or $value};
+  }
+}
+
+@mixin system-level-typography($theme, $overrides: ()) {
+  $font-definition: map.get($theme, _mat-theming-internals-do-not-access, font-definition);
+  $brand: map.get($font-definition, brand);
+  $plain: map.get($font-definition, plain);
+  $bold: map.get($font-definition, bold);
+  $medium: map.get($font-definition, medium);
+  $regular: map.get($font-definition, regular);
+
+  $ref: (
+    md-ref-typeface: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
+  );
+
+  $sys-typescale: mdc-tokens.md-sys-typescale-values($ref);
+
+  @each $name, $value in $sys-typescale {
+    --sys-#{$name}: #{map.get($overrides, $name) or $value};
+  }
+}
+
+@function _get-sys-color($type, $ref) {
+  @if (sass-utils.$use-system-color-variables) {
+    @return (
+      'background': var(--sys-background),
+      'error': var(--sys-error),
+      'error-container': var(--sys-error-container),
+      'inverse-on-surface': var(--sys-inverse-on-surface),
+      'inverse-primary': var(--sys-inverse-primary),
+      'inverse-surface': var(--sys-inverse-surface),
+      'on-background': var(--sys-on-background),
+      'on-error': var(--sys-on-error),
+      'on-error-container': var(--sys-on-error-container),
+      'on-primary': var(--sys-on-primary),
+      'on-primary-container': var(--sys-on-primary-container),
+      'on-primary-fixed': var(--sys-on-primary-fixed),
+      'on-primary-fixed-variant': var(--sys-on-primary-fixed-variant),
+      'on-secondary': var(--sys-on-secondary),
+      'on-secondary-container': var(--sys-on-secondary-container),
+      'on-secondary-fixed': var(--sys-on-secondary-fixed),
+      'on-secondary-fixed-variant': var(--sys-on-secondary-fixed-variant),
+      'on-surface': var(--sys-on-surface),
+      'on-surface-variant': var(--sys-on-surface-variant),
+      'on-tertiary': var(--sys-on-tertiary),
+      'on-tertiary-container': var(--sys-on-tertiary-container),
+      'on-tertiary-fixed': var(--sys-on-tertiary-fixed),
+      'on-tertiary-fixed-variant': var(--sys-on-tertiary-fixed-variant),
+      'outline': var(--sys-outline),
+      'outline-variant': var(--sys-outline-variant),
+      'primary': var(--sys-primary),
+      'primary-container': var(--sys-primary-container),
+      'primary-fixed': var(--sys-primary-fixed),
+      'primary-fixed-dim': var(--sys-primary-fixed-dim),
+      'scrim': var(--sys-scrim),
+      'secondary': var(--sys-secondary),
+      'secondary-container': var(--sys-secondary-container),
+      'secondary-fixed': var(--sys-secondary-fixed),
+      'secondary-fixed-dim': var(--sys-secondary-fixed-dim),
+      'shadow': var(--sys-shadow),
+      'surface': var(--sys-surface),
+      'surface-bright': var(--sys-surface-bright),
+      'surface-container': var(--sys-surface-container),
+      'surface-container-high': var(--sys-surface-container-high),
+      'surface-container-highest': var(--sys-surface-container-highest),
+      'surface-container-low': var(--sys-surface-container-low),
+      'surface-container-lowest': var(--sys-surface-container-lowest),
+      'surface-dim': var(--sys-surface-dim),
+      'surface-tint': var(--sys-surface-tint),
+      'surface-variant': var(--sys-surface-variant),
+      'tertiary': var(--sys-tertiary),
+      'tertiary-container': var(--sys-tertiary-container),
+      'tertiary-fixed': var(--sys-tertiary-fixed),
+      'tertiary-fixed-dim': var(--sys-tertiary-fixed-dim),
+    );
+  }
+
+  @return if($type == dark,
+    mdc-tokens.md-sys-color-values-dark($ref),
+    mdc-tokens.md-sys-color-values-light($ref));
+}
+
+@function _get-sys-typeface($ref) {
+  @if (sass-utils.$use-system-typography-variables) {
+    @return (
+      'body-large': var(--sys-body-large),
+      'body-large-font': var(--sys-body-large-font),
+      'body-large-line-height': var(--sys-body-large-line-height),
+      'body-large-size': var(--sys-body-large-size),
+      'body-large-tracking': var(--sys-body-large-tracking),
+      'body-large-weight': var(--sys-body-large-weight),
+      'body-medium': var(--sys-body-medium),
+      'body-medium-font': var(--sys-body-medium-font),
+      'body-medium-line-height': var(--sys-body-medium-line-height),
+      'body-medium-size': var(--sys-body-medium-size),
+      'body-medium-tracking': var(--sys-body-medium-tracking),
+      'body-medium-weight': var(--sys-body-medium-weight),
+      'body-small': var(--sys-body-small),
+      'body-small-font': var(--sys-body-small-font),
+      'body-small-line-height': var(--sys-body-small-line-height),
+      'body-small-size': var(--sys-body-small-size),
+      'body-small-tracking': var(--sys-body-small-tracking),
+      'body-small-weight': var(--sys-body-small-weight),
+      'display-large': var(--sys-display-large),
+      'display-large-font': var(--sys-display-large-font),
+      'display-large-line-height': var(--sys-display-large-line-height),
+      'display-large-size': var(--sys-display-large-size),
+      'display-large-tracking': var(--sys-display-large-tracking),
+      'display-large-weight': var(--sys-display-large-weight),
+      'display-medium': var(--sys-display-medium),
+      'display-medium-font': var(--sys-display-medium-font),
+      'display-medium-line-height': var(--sys-display-medium-line-height),
+      'display-medium-size': var(--sys-display-medium-size),
+      'display-medium-tracking': var(--sys-display-medium-tracking),
+      'display-medium-weight': var(--sys-display-medium-weight),
+      'display-small': var(--sys-display-small),
+      'display-small-font': var(--sys-display-small-font),
+      'display-small-line-height': var(--sys-display-small-line-height),
+      'display-small-size': var(--sys-display-small-size),
+      'display-small-tracking': var(--sys-display-small-tracking),
+      'display-small-weight': var(--sys-display-small-weight),
+      'headline-large': var(--sys-headline-large),
+      'headline-large-font': var(--sys-headline-large-font),
+      'headline-large-line-height': var(--sys-headline-large-line-height),
+      'headline-large-size': var(--sys-headline-large-size),
+      'headline-large-tracking': var(--sys-headline-large-tracking),
+      'headline-large-weight': var(--sys-headline-large-weight),
+      'headline-medium': var(--sys-headline-medium),
+      'headline-medium-font': var(--sys-headline-medium-font),
+      'headline-medium-line-height': var(--sys-headline-medium-line-height),
+      'headline-medium-size': var(--sys-headline-medium-size),
+      'headline-medium-tracking': var(--sys-headline-medium-tracking),
+      'headline-medium-weight': var(--sys-headline-medium-weight),
+      'headline-small': var(--sys-headline-small),
+      'headline-small-font': var(--sys-headline-small-font),
+      'headline-small-line-height': var(--sys-headline-small-line-height),
+      'headline-small-size': var(--sys-headline-small-size),
+      'headline-small-tracking': var(--sys-headline-small-tracking),
+      'headline-small-weight': var(--sys-headline-small-weight),
+      'label-large': var(--sys-label-large),
+      'label-large-font': var(--sys-label-large-font),
+      'label-large-line-height': var(--sys-label-large-line-height),
+      'label-large-size': var(--sys-label-large-size),
+      'label-large-tracking': var(--sys-label-large-tracking),
+      'label-large-weight': var(--sys-label-large-weight),
+      'label-large-weight-prominent': var(--sys-label-large-weight-prominent),
+      'label-medium': var(--sys-label-medium),
+      'label-medium-font': var(--sys-label-medium-font),
+      'label-medium-line-height': var(--sys-label-medium-line-height),
+      'label-medium-size': var(--sys-label-medium-size),
+      'label-medium-tracking': var(--sys-label-medium-tracking),
+      'label-medium-weight': var(--sys-label-medium-weight),
+      'label-medium-weight-prominent': var(--sys-label-medium-weight-prominent),
+      'label-small': var(--sys-label-small),
+      'label-small-font': var(--sys-label-small-font),
+      'label-small-line-height': var(--sys-label-small-line-height),
+      'label-small-size': var(--sys-label-small-size),
+      'label-small-tracking': var(--sys-label-small-tracking),
+      'label-small-weight': var(--sys-label-small-weight),
+      'title-large': var(--sys-title-large),
+      'title-large-font': var(--sys-title-large-font),
+      'title-large-line-height': var(--sys-title-large-line-height),
+      'title-large-size': var(--sys-title-large-size),
+      'title-large-tracking': var(--sys-title-large-tracking),
+      'title-large-weight': var(--sys-title-large-weight),
+      'title-medium': var(--sys-title-medium),
+      'title-medium-font': var(--sys-title-medium-font),
+      'title-medium-line-height': var(--sys-title-medium-line-height),
+      'title-medium-size': var(--sys-title-medium-size),
+      'title-medium-tracking': var(--sys-title-medium-tracking),
+      'title-medium-weight': var(--sys-title-medium-weight),
+      'title-small': var(--sys-title-small),
+      'title-small-font': var(--sys-title-small-font),
+      'title-small-line-height': var(--sys-title-small-line-height),
+      'title-small-size': var(--sys-title-small-size),
+      'title-small-tracking': var(--sys-title-small-tracking),
+      'title-small-weight': var(--sys-title-small-weight),
+    );
+  }
+  @return mdc-tokens.md-sys-typescale-values($ref);
+}
+
+/// Generates a set of namespaced color tokens for all components.
+/// @param {String} $type The type of theme system (light or dark)
+/// @param {Map} $primary The primary palette
+/// @param {Map} $tertiary The tertiary palette
+/// @param {Map} $error The error palette
+/// @return {Map} A map of namespaced color tokens
+@function generate-color-tokens($type, $primary, $tertiary, $error) {
+  $ref: (
+    md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
+  );
+
+  $sys-color: _get-sys-color($type, $ref);
+
+  @return _generate-tokens(map.merge($ref, (
+    md-sys-color: $sys-color,
+    // Because the elevation values are always combined with color values to create the box shadow,
+    // elevation needs to be part of the color dimension.
+    md-sys-elevation: mdc-tokens.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: mdc-tokens.md-sys-state-values(),
+  )));
+}
+
+/// Generates a set of namespaced color tokens for all components.
+/// @param {String|List} $brand The brand font-family
+/// @param {String|List} $plain The plain fort-family
+/// @param {String|Number} $bold The bold font-weight
+/// @param {String|Number} $medium The medium font-weight
+/// @param {String|Number} $regular The regular font-weight
+/// @return {Map} A map of namespaced typography tokens
+@function generate-typography-tokens($brand, $plain, $bold, $medium, $regular) {
+  $ref: (
+    md-ref-typeface: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
+  );
+  $sys-typeface: _get-sys-typeface($ref);
+  @return _generate-tokens((
+    md-sys-typescale: $sys-typeface
+  ));
+}
+
+/// 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: mdc-tokens.md-sys-motion-values(),
+    md-sys-shape: mdc-tokens.md-sys-shape-values(),
+  ), $include-non-systemized: true);
+}