Skip to content

Commit

Permalink
fix(checkbox)!: remove "unselected" prefix from tokens
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Rename `--md-checkbox-unselected-<token>` to `--md-checkbox-<token>`

PiperOrigin-RevId: 549977624
  • Loading branch information
@asyncLiz @copybara-github
asyncLiz authored and copybara-github committed Jul 21, 2023
1 parent b5712f3 commit 66d7b8b
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 43 deletions.
40 changes: 20 additions & 20 deletions checkbox/lib/_checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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),
)
);
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion docs/components/checkbox.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
68 changes: 46 additions & 22 deletions tokens/_md-comp-checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -45,41 +64,22 @@ $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
);

$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',
'selected-focus-state-layer-opacity',
'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
);

Expand All @@ -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;
Expand Down

0 comments on commit 66d7b8b

Please sign in to comment.