From 66d7b8b275a51ae3a2f8a3957178583bb2904d5a Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Fri, 21 Jul 2023 10:05:12 -0700 Subject: [PATCH] fix(checkbox)!: remove "unselected" prefix from tokens BREAKING CHANGE: Rename `--md-checkbox-unselected-` to `--md-checkbox-` PiperOrigin-RevId: 549977624 --- checkbox/lib/_checkbox.scss | 40 ++++++++++----------- docs/components/checkbox.md | 2 +- tokens/_md-comp-checkbox.scss | 68 +++++++++++++++++++++++------------ 3 files changed, 67 insertions(+), 43 deletions(-) diff --git a/checkbox/lib/_checkbox.scss b/checkbox/lib/_checkbox.scss index 587cc9df93..c8fd7134a0 100644 --- a/checkbox/lib/_checkbox.scss +++ b/checkbox/lib/_checkbox.scss @@ -129,9 +129,9 @@ $_checkmark-bottom-left: 7px, -14px; } .outline { - border-color: var(--_unselected-outline-color); + border-color: var(--_outline-color); border-style: solid; - border-width: var(--_unselected-outline-width); + border-width: var(--_outline-width); box-sizing: border-box; } @@ -176,10 +176,10 @@ $_checkmark-bottom-left: 7px, -14px; @include ripple.theme( ( - hover-color: var(--_unselected-hover-state-layer-color), - hover-opacity: var(--_unselected-hover-state-layer-opacity), - pressed-color: var(--_unselected-pressed-state-layer-color), - pressed-opacity: var(--_unselected-pressed-state-layer-opacity), + hover-color: var(--_hover-state-layer-color), + hover-opacity: var(--_hover-state-layer-opacity), + pressed-color: var(--_pressed-state-layer-color), + pressed-opacity: var(--_pressed-state-layer-opacity), ) ); } @@ -326,9 +326,9 @@ $_checkmark-bottom-left: 7px, -14px; // States :where(.error) .outline { - border-color: var(--_unselected-error-outline-color); + border-color: var(--_error-outline-color); // TODO(b/262410085): add once token is added - // border-width: var(--_unselected-error-outline-width); + // border-width: var(--_error-outline-width); } :where(.error) .background { @@ -340,8 +340,8 @@ $_checkmark-bottom-left: 7px, -14px; } :where(:hover) .outline { - border-color: var(--_unselected-hover-outline-color); - border-width: var(--_unselected-hover-outline-width); + border-color: var(--_hover-outline-color); + border-width: var(--_hover-outline-width); } :where(:hover) .background { @@ -353,7 +353,7 @@ $_checkmark-bottom-left: 7px, -14px; } :where(.error:hover) .outline { - border-color: var(--_unselected-error-hover-outline-color); + border-color: var(--_error-hover-outline-color); } :where(.error:hover) .background { @@ -365,8 +365,8 @@ $_checkmark-bottom-left: 7px, -14px; } :where(:focus-within) .outline { - border-color: var(--_unselected-focus-outline-color); - border-width: var(--_unselected-focus-outline-width); + border-color: var(--_focus-outline-color); + border-width: var(--_focus-outline-width); } :where(:focus-within) .background { @@ -378,7 +378,7 @@ $_checkmark-bottom-left: 7px, -14px; } :where(.error:focus-within) .outline { - border-color: var(--_unselected-error-focus-outline-color); + border-color: var(--_error-focus-outline-color); } :where(.error:focus-within) .background { @@ -390,8 +390,8 @@ $_checkmark-bottom-left: 7px, -14px; } :where(:active) .outline { - border-color: var(--_unselected-pressed-outline-color); - border-width: var(--_unselected-pressed-outline-width); + border-color: var(--_pressed-outline-color); + border-width: var(--_pressed-outline-width); } :where(:active) .background { @@ -403,7 +403,7 @@ $_checkmark-bottom-left: 7px, -14px; } :where(.error:active) .outline { - border-color: var(--_unselected-error-pressed-outline-color); + border-color: var(--_error-pressed-outline-color); } :where(.error:active) .background { @@ -423,9 +423,9 @@ $_checkmark-bottom-left: 7px, -14px; } :where(.disabled) .outline { - border-color: var(--_unselected-disabled-outline-color); - border-width: var(--_unselected-disabled-outline-width); - opacity: var(--_unselected-disabled-container-opacity); + border-color: var(--_disabled-outline-color); + border-width: var(--_disabled-outline-width); + opacity: var(--_disabled-container-opacity); } :where(.selected.disabled) .outline { diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md index d88aa1c98e..7ed0774008 100644 --- a/docs/components/checkbox.md +++ b/docs/components/checkbox.md @@ -158,7 +158,7 @@ terms of color and shape. Token | Default value ---------------------------------------- | ----------------------------------- -`--md-checkbox-unselected-outline-color` | `--md-sys-color-on-surface-variant` +`--md-checkbox-outline-color` | `--md-sys-color-on-surface-variant` `--md-checkbox-selected-container-color` | `--md-sys-color-primary` `--md-checkbox-selected-icon-color` | `--md-sys-color-on-primary` `--md-checkbox-container-shape` | `2px` diff --git a/tokens/_md-comp-checkbox.scss b/tokens/_md-comp-checkbox.scss index c49603bf72..0ed6955b3e 100644 --- a/tokens/_md-comp-checkbox.scss +++ b/tokens/_md-comp-checkbox.scss @@ -15,11 +15,30 @@ $supported-tokens: ( // go/keep-sorted start 'container-shape', 'container-size', + 'disabled-container-opacity', + 'disabled-outline-color', + 'disabled-outline-width', + 'error-focus-outline-color', + 'error-hover-outline-color', 'error-hover-state-layer-color', 'error-hover-state-layer-opacity', + 'error-outline-color', + 'error-pressed-outline-color', 'error-pressed-state-layer-color', 'error-pressed-state-layer-opacity', + 'focus-outline-color', + 'focus-outline-width', + 'hover-outline-color', + 'hover-outline-width', + 'hover-state-layer-color', + 'hover-state-layer-opacity', 'icon-size', + 'outline-color', + 'outline-width', + 'pressed-outline-color', + 'pressed-outline-width', + 'pressed-state-layer-color', + 'pressed-state-layer-opacity', 'selected-container-color', 'selected-disabled-container-color', 'selected-disabled-container-opacity', @@ -45,25 +64,6 @@ $supported-tokens: ( 'selected-pressed-state-layer-opacity', 'state-layer-shape', 'state-layer-size', - 'unselected-disabled-container-opacity', - 'unselected-disabled-outline-color', - 'unselected-disabled-outline-width', - 'unselected-error-focus-outline-color', - 'unselected-error-hover-outline-color', - 'unselected-error-outline-color', - 'unselected-error-pressed-outline-color', - 'unselected-focus-outline-color', - 'unselected-focus-outline-width', - 'unselected-hover-outline-color', - 'unselected-hover-outline-width', - 'unselected-hover-state-layer-color', - 'unselected-hover-state-layer-opacity', - 'unselected-outline-color', - 'unselected-outline-width', - 'unselected-pressed-outline-color', - 'unselected-pressed-outline-width', - 'unselected-pressed-state-layer-color', - 'unselected-pressed-state-layer-opacity', // go/keep-sorted end ); @@ -71,6 +71,8 @@ $unsupported-tokens: ( // go/keep-sorted start 'error-focus-state-layer-color', 'error-focus-state-layer-opacity', + 'focus-state-layer-color', + 'focus-state-layer-opacity', 'selected-disabled-container-outline-width', 'selected-focus-outline-width', 'selected-focus-state-layer-color', @@ -78,8 +80,6 @@ $unsupported-tokens: ( 'selected-hover-outline-width', 'selected-outline-width', 'selected-pressed-outline-width', - 'unselected-focus-state-layer-color', - 'unselected-focus-state-layer-opacity', // go/keep-sorted end ); @@ -93,7 +93,31 @@ $_default: ( $tokens: values.validate( md-comp-checkbox.values($deps, $exclude-hardcoded-values), $supported-tokens: $supported-tokens, - $unsupported-tokens: $unsupported-tokens + $unsupported-tokens: $unsupported-tokens, + $renamed-tokens: ( + // Remove default "unselected" prefix (b/292244480) + 'unselected-disabled-container-opacity': 'disabled-container-opacity', + 'unselected-disabled-outline-color': 'disabled-outline-color', + 'unselected-disabled-outline-width': 'disabled-outline-width', + 'unselected-error-focus-outline-color': 'error-focus-outline-color', + 'unselected-error-hover-outline-color': 'error-hover-outline-color', + 'unselected-error-outline-color': 'error-outline-color', + 'unselected-error-pressed-outline-color': 'error-pressed-outline-color', + 'unselected-focus-outline-color': 'focus-outline-color', + 'unselected-focus-outline-width': 'focus-outline-width', + 'unselected-hover-outline-color': 'hover-outline-color', + 'unselected-hover-outline-width': 'hover-outline-width', + 'unselected-hover-state-layer-color': 'hover-state-layer-color', + 'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity', + 'unselected-outline-color': 'outline-color', + 'unselected-outline-width': 'outline-width', + 'unselected-pressed-outline-color': 'pressed-outline-color', + 'unselected-pressed-outline-width': 'pressed-outline-width', + 'unselected-pressed-state-layer-color': 'pressed-state-layer-color', + 'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity', + 'unselected-focus-state-layer-color': 'focus-state-layer-color', + 'unselected-focus-state-layer-opacity': 'focus-state-layer-opacity' + ) ); @return $tokens;