From a7c19909d1a8d36064e4869bb3a53b0aa9d5f71f Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Mon, 31 Mar 2025 08:02:35 -0600 Subject: [PATCH] fix(material/checkbox): hardcode token renames --- .../core/tokens/m3/mdc/_checkbox.scss | 113 ++++++++---------- 1 file changed, 47 insertions(+), 66 deletions(-) diff --git a/src/material/core/tokens/m3/mdc/_checkbox.scss b/src/material/core/tokens/m3/mdc/_checkbox.scss index e6045566c5b7..f561bef82363 100644 --- a/src/material/core/tokens/m3/mdc/_checkbox.scss +++ b/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; }