fix(material/checkbox): hardcode token renames (#30752)

Co-authored-by: Andrew Seguin <[email protected]>

Author: andrewseguin

src/material/core/tokens/m3/mdc/_checkbox.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use 'sass:meta';
 @use '../../token-definition';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -17,101 +16,59 @@ $prefix: (mat, checkbox);
     secondary: (
       selected-container-color: map.get($systems, md-sys-color, secondary),
       selected-focus-container-color: map.get($systems, md-sys-color, secondary),
-      selected-focus-icon-color: map.get($systems, md-sys-color, on-secondary),
+      selected-focus-icon-color: map.get($systems, md-sys-color, secondary),
       selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
       selected-hover-container-color: map.get($systems, md-sys-color, secondary),
-      selected-hover-icon-color: map.get($systems, md-sys-color, on-secondary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, secondary),
       selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
-      selected-icon-color: map.get($systems, md-sys-color, on-secondary),
+      selected-icon-color: map.get($systems, md-sys-color, secondary),
       selected-pressed-container-color: map.get($systems, md-sys-color, secondary),
-      selected-pressed-icon-color: map.get($systems, md-sys-color, on-secondary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, secondary),
       unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-checkmark-color: map.get($systems, md-sys-color, on-secondary),
     ),
     tertiary: (
       selected-container-color: map.get($systems, md-sys-color, tertiary),
       selected-focus-container-color: map.get($systems, md-sys-color, tertiary),
-      selected-focus-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-focus-icon-color: map.get($systems, md-sys-color, tertiary),
       selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
       selected-hover-container-color: map.get($systems, md-sys-color, tertiary),
-      selected-hover-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, tertiary),
       selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
-      selected-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-icon-color: map.get($systems, md-sys-color, tertiary),
       selected-pressed-container-color: map.get($systems, md-sys-color, tertiary),
-      selected-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary),
       unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-checkmark-color: map.get($systems, md-sys-color, on-tertiary),
     ),
     error: (
       selected-container-color: map.get($systems, md-sys-color, error),
       selected-focus-container-color: map.get($systems, md-sys-color, error),
-      selected-focus-icon-color: map.get($systems, md-sys-color, on-error),
+      selected-focus-icon-color: map.get($systems, md-sys-color, error),
       selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
       selected-hover-container-color: map.get($systems, md-sys-color, error),
-      selected-hover-icon-color: map.get($systems, md-sys-color, on-error),
+      selected-hover-icon-color: map.get($systems, md-sys-color, error),
       selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
-      selected-icon-color: map.get($systems, md-sys-color, on-error),
+      selected-icon-color: map.get($systems, md-sys-color, error),
       selected-pressed-container-color: map.get($systems, md-sys-color, error),
-      selected-pressed-icon-color: map.get($systems, md-sys-color, on-error),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, error),
       unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-checkmark-color: map.get($systems, md-sys-color, on-error),
     )
   );
 
   @return token-definition.namespace-tokens(
     $prefix,
     (
-      _fix-tokens($mdc-tokens),
-      token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens))
+     $mdc-tokens,
+      $variant-tokens
     ),
     $token-slots
   );
 }
 
-/// Renames the official checkbox tokens to match the names actually used in MDCs 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 MDCs token implementation.
-@function _fix-tokens($tokens) {
-  // Need to get the hardcoded values, because they include opacities that are used for the disabled
-  // state.
-  $hardcoded-tokens: 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: token-definition.rename-map-keys($tokens, $rename-keys);
-  $remapped-hardcoded-tokens:   token-definition.rename-map-keys($hardcoded-tokens, $rename-keys);
-
-  @return token-definition.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,
-    ),
-  ));
-}
-
 @function values($deps, $exclude-hardcoded-values: false) {
-  @return (
+  $values: (
     container-shape: if($exclude-hardcoded-values, null, 2px),
     container-size: if($exclude-hardcoded-values, null, 18px),
     error-focus-state-layer-color: map.get($deps, md-sys-color, error),
@@ -123,6 +80,7 @@ $prefix: (mat, checkbox);
     icon-size: if($exclude-hardcoded-values, null, 18px),
     selected-container-color: map.get($deps, md-sys-color, primary),
     selected-disabled-container-color: map.get($deps, md-sys-color, on-surface),
+    disabled-selected-icon-opacity: 0.38,
     selected-disabled-container-opacity: if($exclude-hardcoded-values, null, 0.38),
     selected-disabled-container-outline-width: if($exclude-hardcoded-values, null, 0),
     selected-disabled-icon-color: map.get($deps, md-sys-color, surface),
@@ -135,25 +93,26 @@ $prefix: (mat, checkbox);
     selected-error-pressed-container-color: map.get($deps, md-sys-color, error),
     selected-error-pressed-icon-color: map.get($deps, md-sys-color, on-error),
     selected-focus-container-color: map.get($deps, md-sys-color, primary),
-    selected-focus-icon-color: map.get($deps, md-sys-color, on-primary),
+    selected-focus-icon-color: map.get($deps, md-sys-color, primary),
     selected-focus-outline-width: if($exclude-hardcoded-values, null, 0),
     selected-focus-state-layer-color: map.get($deps, md-sys-color, primary),
     selected-focus-state-layer-opacity: map.get($deps, md-sys-state, focus-state-layer-opacity),
     selected-hover-container-color: map.get($deps, md-sys-color, primary),
-    selected-hover-icon-color: map.get($deps, md-sys-color, on-primary),
+    selected-hover-icon-color: map.get($deps, md-sys-color, primary),
     selected-hover-outline-width: if($exclude-hardcoded-values, null, 0),
     selected-hover-state-layer-color: map.get($deps, md-sys-color, primary),
     selected-hover-state-layer-opacity: map.get($deps, md-sys-state, hover-state-layer-opacity),
-    selected-icon-color: map.get($deps, md-sys-color, on-primary),
+    selected-icon-color: map.get($deps, md-sys-color, primary),
     selected-outline-width: if($exclude-hardcoded-values, null, 0),
     selected-pressed-container-color: map.get($deps, md-sys-color, primary),
-    selected-pressed-icon-color: map.get($deps, md-sys-color, on-primary),
+    selected-pressed-icon-color: map.get($deps, md-sys-color, primary),
     selected-pressed-outline-width: if($exclude-hardcoded-values, null, 0),
     selected-pressed-state-layer-color: map.get($deps, md-sys-color, on-surface),
     selected-pressed-state-layer-opacity: map.get($deps, md-sys-state, pressed-state-layer-opacity),
     state-layer-shape: map.get($deps, md-sys-shape, corner-full),
     state-layer-size: if($exclude-hardcoded-values, null, 40px),
     unselected-disabled-container-opacity: if($exclude-hardcoded-values, null, 0.38),
+    disabled-unselected-icon-opacity: 0.38,
     unselected-disabled-outline-color: map.get($deps, md-sys-color, on-surface),
     unselected-disabled-outline-width: if($exclude-hardcoded-values, null, 2px),
     unselected-error-focus-outline-color: map.get($deps, md-sys-color, error),
@@ -174,6 +133,28 @@ $prefix: (mat, checkbox);
     unselected-pressed-outline-width: if($exclude-hardcoded-values, null, 2px),
     unselected-pressed-state-layer-color: map.get($deps, md-sys-color, primary),
     unselected-pressed-state-layer-opacity:
-        map.get($deps, md-sys-state, pressed-state-layer-opacity)
+      map.get($deps, md-sys-state, pressed-state-layer-opacity),
+    selected-checkmark-color: map.get($deps, md-sys-color, on-primary),
+    disabled-selected-checkmark-color: map.get($deps, md-sys-color, surface),
+    disabled-selected-icon-color: map.get($deps, md-sys-color, on-surface),
+    disabled-unselected-icon-color: map.get($deps, md-sys-color, on-surface),
+    unselected-focus-icon-color: map.get($deps, md-sys-color, on-surface),
+    unselected-hover-icon-color: map.get($deps, md-sys-color, on-surface),
+    unselected-icon-color: map.get($deps, md-sys-color, on-surface-variant),
+    unselected-pressed-icon-color: map.get($deps, md-sys-color, on-surface),
   );
+
+  $values: token-definition.combine-color-tokens(
+      $values, $values, (
+      (
+        color: disabled-selected-icon-color,
+        opacity: disabled-selected-icon-opacity,
+      ),
+      (
+        color: disabled-unselected-icon-color,
+        opacity: disabled-unselected-icon-opacity,
+      ),
+    ));
+
+  @return $values;
 }