@angular/material-experimental 17.1.0 → 17.2.0-next.0

package/theming/_m3-tokens.scss

@@ -8,6 +8,18 @@
 
 // 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.
@@ -102,11 +114,11 @@
 /// @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, $secondary, $tertiary, $error) {
+@function _generate-ref-palette-tokens($primary, $tertiary, $error) {
   @return mat.private-merge-all(
       (black: #000, white: #fff),
       _generate-palette-tokens($primary, primary),
-      _generate-palette-tokens($secondary, secondary),
+      _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),
@@ -166,8 +178,14 @@
 /// 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,
@@ -184,83 +202,59 @@
     unselected-outline-color: unselected-icon-color,
     unselected-pressed-outline-color: unselected-pressed-icon-color
   );
-  @return _rename-map-keys($tokens, $rename-keys);
-}
 
-/// Fixes inconsistent values in the text field color tokens. Applies to both filled and outlined
-/// variants.
-/// @param {Map} $initial-tokens Map of text field tokens currently being generated.
-/// @param {Map} $all-tokens Map of all 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-text-field-color-tokens($initial-tokens, $all-tokens) {
-  @return _combine-color-tokens($initial-tokens, $all-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'
-    ),
+  $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-leading-icon-color',
-      opacity: 'disabled-leading-icon-opacity'
+      color: disabled-selected-icon-color,
+      opacity: disabled-selected-icon-opacity,
     ),
     (
-      color: 'disabled-supporting-text-color',
-      opacity: 'disabled-supporting-text-opacity'
+      color: disabled-unselected-icon-color,
+      opacity: disabled-unselected-icon-opacity,
     ),
-    (
-      color: 'disabled-trailing-icon-color',
-      opacity: 'disabled-trailing-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.
-/// @param {Map} $all-tokens Map of all filled text field tokens, including hardcoded values.
 /// @return {Map} The given tokens, with the invalid values replaced with valid ones.
-@function _fix-filled-text-field-tokens($initial-tokens, $all-tokens) {
-  $tokens: _combine-color-tokens($initial-tokens, $all-tokens, (
+@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-active-indicator-color,
+      opacity: disabled-active-indicator-opacity
     ),
     (
-      color: 'disabled-container-color',
-      opacity: 'disabled-container-opacity'
+      color: disabled-container-color,
+      opacity: disabled-container-opacity
     ),
     (
-      color: 'disabled-input-text-color',
-      opacity: 'disabled-input-text-opacity'
+      color: disabled-input-text-color,
+      opacity: disabled-input-text-opacity
     ),
     (
-      color: 'disabled-label-text-color',
-      opacity: 'disabled-label-text-opacity'
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity
     ),
     (
-      color: 'disabled-leading-icon-color',
-      opacity: 'disabled-leading-icon-opacity'
+      color: disabled-leading-icon-color,
+      opacity: disabled-leading-icon-opacity
     ),
     (
-      color: 'disabled-supporting-text-color',
-      opacity: 'disabled-supporting-text-opacity'
+      color: disabled-supporting-text-color,
+      opacity: disabled-supporting-text-opacity
     ),
     (
-      color: 'disabled-trailing-icon-color',
-      opacity: 'disabled-trailing-icon-opacity'
+      color: disabled-trailing-icon-color,
+      opacity: disabled-trailing-icon-opacity
     )
   ));
 
@@ -279,64 +273,74 @@
 
 /// 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.
-/// @param {Map} $all-tokens Map of all text button tokens, including hardcoded values.
 /// @return {Map} The given tokens, with the invalid values replaced with valid ones.
-@function _fix-text-button-tokens($initial-tokens, $all-tokens) {
-  @return _combine-color-tokens($initial-tokens, $all-tokens, (
+@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',
+      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.
-/// @param {Map} $all-tokens Map of all filled button tokens, including hardcoded values.
 /// @return {Map} The given tokens, with the invalid values replaced with valid ones.
-@function _fix-filled-button-tokens($initial-tokens, $all-tokens) {
-  @return _combine-color-tokens($initial-tokens, $all-tokens, (
+@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-label-text-color,
+      opacity: disabled-label-text-opacity,
     ),
     (
-      color: 'disabled-container-color',
-      opacity: 'disabled-container-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.
-/// @param {Map} $all-tokens Map of all protected button tokens, including hardcoded values.
 /// @return {Map} The given tokens, with the invalid values replaced with valid ones.
-@function _fix-protected-button-tokens($initial-tokens, $all-tokens) {
-  @return _combine-color-tokens($initial-tokens, $all-tokens, (
+@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-label-text-color,
+      opacity: disabled-label-text-opacity,
     ),
     (
-      color: 'disabled-container-color',
-      opacity: 'disabled-container-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.
-/// @param {Map} $all-tokens Map of all outlined button tokens, including hardcoded values.
 /// @return {Map} The given tokens, with the invalid values replaced with valid ones.
-@function _fix-outlined-button-tokens($initial-tokens, $all-tokens) {
-  @return _combine-color-tokens($initial-tokens, $all-tokens, (
+@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-label-text-color,
+      opacity: disabled-label-text-opacity,
     ),
     (
-      color: 'disabled-outline-color',
-      opacity: 'disabled-outline-opacity',
+      color: disabled-outline-color,
+      opacity: disabled-outline-opacity,
     )
   ));
 }
@@ -347,43 +351,119 @@
 /// @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, $all-tokens) {
-  @return _combine-color-tokens($initial-tokens, $all-tokens, (
+@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-outline-color,
+      opacity: disabled-outline-opacity
     ),
     (
-      color: 'disabled-active-indicator-color',
-      opacity: 'disabled-active-indicator-opacity'
+      color: disabled-active-indicator-color,
+      opacity: disabled-active-indicator-opacity
     ),
     (
-      color: 'disabled-container-color',
-      opacity: 'disabled-container-opacity'
+      color: disabled-container-color,
+      opacity: disabled-container-opacity
     ),
     (
-      color: 'disabled-input-text-color',
-      opacity: 'disabled-input-text-opacity'
+      color: disabled-input-text-color,
+      opacity: disabled-input-text-opacity
     ),
     (
-      color: 'disabled-label-text-color',
-      opacity: 'disabled-label-text-opacity'
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity
     ),
     (
-      color: 'disabled-leading-icon-color',
-      opacity: 'disabled-leading-icon-opacity'
+      color: disabled-leading-icon-color,
+      opacity: disabled-leading-icon-opacity
     ),
     (
-      color: 'disabled-supporting-text-color',
-      opacity: 'disabled-supporting-text-opacity'
+      color: disabled-supporting-text-color,
+      opacity: disabled-supporting-text-opacity
     ),
     (
-      color: 'disabled-trailing-icon-color',
-      opacity: 'disabled-trailing-icon-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.has-key($tokens, container-elevation)) {
+    $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;
+}
+
 /// 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
@@ -423,7 +503,13 @@
     // Get the official MDC component tokens
     _namespace-tokens(
       (mdc, checkbox),
-      _fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)),
+      (
+        _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(
@@ -433,12 +519,15 @@
     ),
     _namespace-tokens(
       (mdc, circular-progress),
-      mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),
+      (
+        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),
-      mdc-tokens.md-comp-dialog-values($systems, $exclude-hardcoded),
+      _fix-dialog-tokens($systems, mdc-tokens.md-comp-dialog-values($systems, $exclude-hardcoded)),
       $token-slots
     ),
     _namespace-tokens(
@@ -448,73 +537,125 @@
     ),
     _namespace-tokens(
       (mdc, fab),
-      mdc-tokens.md-comp-fab-primary-values($systems, $exclude-hardcoded),
+      (
+        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),
+      (
+        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),
-        // Need to pass in the hardcoded values, because they
-        // include opacities that are used for the disabled state.
-        mdc-tokens.md-comp-filled-text-field-values($systems, false)
+      (
+        _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),
-      mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded),
+      _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),
-        // Need to pass in the hardcoded values, because they
-        // include opacities that are used for the disabled state.
-        mdc-tokens.md-comp-text-button-values($systems, false),
+      (
+        _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),
-        // Need to pass in the hardcoded values, because they
-        // include opacities that are used for the disabled state.
-        mdc-tokens.md-comp-elevated-button-values($systems, false),
+      (
+        _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),
-        // Need to pass in the hardcoded values, because they
-        // include opacities that are used for the disabled state.
-        mdc-tokens.md-comp-filled-button-values($systems, false),
+      (
+        _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),
-        // Need to pass in the hardcoded values, because they
-        // include opacities that are used for the disabled state.
-        mdc-tokens.md-comp-outlined-button-values($systems, false),
+      (
+        _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),
+      (
+        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(
@@ -529,11 +670,14 @@
     ),
     _namespace-tokens(
       (mdc, outlined-text-field),
-      _fix-outlined-text-field-tokens(
-        mdc-tokens.md-comp-outlined-text-field-values($systems, $exclude-hardcoded),
-        // Need to pass in the hardcoded values, because they
-        // include opacities that are used for the disabled state.
-        mdc-tokens.md-comp-outlined-text-field-values($systems, false),
+      (
+        _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
     ),
@@ -544,12 +688,18 @@
     ),
     _namespace-tokens(
       (mdc, radio),
-      mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
+      (
+        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),
+      (
+        mdc-tokens.md-comp-slider-values($systems, $exclude-hardcoded),
+        custom-tokens.mdc-slider-color-variants($systems, $exclude-hardcoded)
+      ),
       $token-slots
     ),
     _namespace-tokens(
@@ -559,7 +709,10 @@
     ),
     _namespace-tokens(
       (mdc, switch),
-      mdc-tokens.md-comp-switch-values($systems, $exclude-hardcoded),
+      (
+        mdc-tokens.md-comp-switch-values($systems, $exclude-hardcoded),
+        custom-tokens.mdc-switch-color-variants($systems, $exclude-hardcoded)
+      ),
       $token-slots
     ),
     _namespace-tokens(
@@ -570,6 +723,11 @@
 
     // 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),
@@ -600,6 +758,11 @@
       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),
@@ -610,6 +773,11 @@
       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),
@@ -676,6 +844,21 @@
       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),
@@ -696,11 +879,6 @@
       custom-tokens.sidenav($systems, $exclude-hardcoded),
       $token-slots
     ),
-    _namespace-tokens(
-      (mat, slide-toggle),
-      custom-tokens.slide-toggle($systems, $exclude-hardcoded),
-      $token-slots
-    ),
     _namespace-tokens(
       (mat, slider),
       custom-tokens.slider($systems, $exclude-hardcoded),
@@ -763,13 +941,12 @@
 /// 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} $secondary The secondary 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, $secondary, $tertiary, $error) {
+@function generate-color-tokens($type, $primary, $tertiary, $error) {
   $ref: (
-    md-ref-palette: _generate-ref-palette-tokens($primary, $secondary, $tertiary, $error)
+    md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
   );
   $sys-color: if($type == dark,
     mdc-tokens.md-sys-color-values-dark($ref),