@angular/material 18.0.0-next.6 → 18.0.0-rc.1

package/core/tokens/_m3-tokens.scss

@@ -1,102 +1,12 @@
-@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 './m3';
 @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
@@ -147,346 +57,30 @@
   );
 }
 
-/// 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);
+$_cached-token-slots: null;
 
-  // 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));
+/// Determines the token slots for all components.
+@function _get-token-slots() {
+  // Cache the slots since they're constant and calculating
+  // them appears to be expensive (see #29009).
+  @if ($_cached-token-slots) {
+    @return $_cached-token-slots;
   }
 
-  @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,
+  // 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
   ));
-}
-
-/// 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;
+  $_cached-token-slots: m2-tokens.m2-tokens-from-theme($fake-theme) !global;
+  @return $_cached-token-slots;
 }
 
 /// Generates a set of namespaced tokens for all components.
@@ -507,20 +101,7 @@
   // 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);
+  $token-slots: _get-token-slots();
 
   // TODO(mmalerba): Fill in remaining tokens.
   $result: sass-utils.deep-merge-all(
@@ -529,447 +110,7 @@
       (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
-    ),
+    m3.get-m3-tokens($systems, $exclude-hardcoded, $token-slots),
   );
 
   // Strip out tokens that are systemized by our made up density system.
@@ -1031,6 +172,10 @@
 }
 
 @function _get-sys-color($type, $ref) {
+  $mdc-sys-color: if($type == dark,
+    mdc-tokens.md-sys-color-values-dark($ref),
+    mdc-tokens.md-sys-color-values-light($ref));
+
   @if (sass-utils.$use-system-color-variables) {
     @return (
       'background': var(--sys-background),
@@ -1067,7 +212,7 @@
       'secondary-container': var(--sys-secondary-container),
       'secondary-fixed': var(--sys-secondary-fixed),
       'secondary-fixed-dim': var(--sys-secondary-fixed-dim),
-      'shadow': var(--sys-shadow),
+      'shadow': map.get($mdc-sys-color, shadow),
       'surface': var(--sys-surface),
       'surface-bright': var(--sys-surface-bright),
       'surface-container': var(--sys-surface-container),
@@ -1085,9 +230,7 @@
     );
   }
 
-  @return if($type == dark,
-    mdc-tokens.md-sys-color-values-dark($ref),
-    mdc-tokens.md-sys-color-values-light($ref));
+  @return $mdc-sys-color;
 }
 
 @function _get-sys-typeface($ref) {