From 68bb42581e8d45367df95357513a92c14519b1c9 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Wed, 22 Oct 2025 17:17:39 -0400 Subject: [PATCH] feat(checkbox): remove modifiers from the API [SWC-1264] --- .changeset/weak-colts-divide.md | 1 + components/accordion/stories/template.js | 2 +- components/card/stories/template.js | 2 +- components/checkbox/dist/metadata.json | 148 ++---- components/checkbox/index.css | 530 ++++++++----------- components/checkbox/stories/checkbox.test.js | 1 + components/checkbox/stories/template.js | 27 +- postcss.config.js | 3 +- 8 files changed, 278 insertions(+), 436 deletions(-) diff --git a/.changeset/weak-colts-divide.md b/.changeset/weak-colts-divide.md index 42b45064764..8779ac50698 100644 --- a/.changeset/weak-colts-divide.md +++ b/.changeset/weak-colts-divide.md @@ -6,6 +6,7 @@ "@spectrum-css/avatar": major "@spectrum-css/badge": major "@spectrum-css/breadcrumb": major +"@spectrum-css/checkbox": major "@spectrum-css/divider": major "@spectrum-css/miller": major "@spectrum-css/page": major diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index e12314a460f..80e3e17dffb 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -156,7 +156,7 @@ export const Template = ({ hasActionButton: item.hasActionButton || hasActionButtons, actionButtonIconName: item.actionButtonIconName || actionButtonIconName, hasSwitch: item.hasSwitch || hasSwitches, - iconSize: `${size}`, + iconSize: size, isDisabled: item.isDisabled || disableAll, isOpen: collapseAll === true ? false : item.isOpen, onclick: function() { diff --git a/components/card/stories/template.js b/components/card/stories/template.js index 0911e3a78d7..d902b21affe 100644 --- a/components/card/stories/template.js +++ b/components/card/stories/template.js @@ -81,7 +81,7 @@ export const Template = ({ () => Icon( { - size: "xxl", + size: "xl", iconName: showAsset === "folder" ? "Folder" : "Document", setName: "workflow", }, diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index daf35c48fa3..90c29a56e36 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -2,110 +2,50 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Checkbox", - ".spectrum-Checkbox .spectrum-Checkbox-box", - ".spectrum-Checkbox .spectrum-Checkbox-box:after", - ".spectrum-Checkbox .spectrum-Checkbox-box:before", - ".spectrum-Checkbox .spectrum-Checkbox-checkmark", - ".spectrum-Checkbox .spectrum-Checkbox-input", - ".spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", - ".spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label", - ".spectrum-Checkbox .spectrum-Checkbox-input:checked:hover:disabled + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox .spectrum-Checkbox-input:disabled", - ".spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label", - ".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after", - ".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label", - ".spectrum-Checkbox .spectrum-Checkbox-input:hover:disabled + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox .spectrum-Checkbox-label", - ".spectrum-Checkbox .spectrum-Checkbox-partialCheckmark", - ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-indeterminate:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox-box", + ".spectrum-Checkbox-box .spectrum-Icon", + ".spectrum-Checkbox-box:before", + ".spectrum-Checkbox-input", + ".spectrum-Checkbox-input:disabled", ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box", - ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", - ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark", - ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", - ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark", - ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox-label", + ".spectrum-Checkbox.is-indeterminate", + ".spectrum-Checkbox.is-indeterminate.is-invalid", + ".spectrum-Checkbox.is-indeterminate.is-invalid:has(.spectrum-Checkbox-input:focus-visible)", + ".spectrum-Checkbox.is-indeterminate.is-invalid:hover", ".spectrum-Checkbox.is-invalid", - ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid:active", + ".spectrum-Checkbox.is-invalid:hover", ".spectrum-Checkbox.spectrum-Checkbox--emphasized", + ".spectrum-Checkbox.spectrum-Checkbox--emphasized.is-indeterminate", + ".spectrum-Checkbox.spectrum-Checkbox--emphasized.is-indeterminate:hover", + ".spectrum-Checkbox.spectrum-Checkbox--emphasized.is-indeterminate:not(.is-invalid):has(.spectrum-Checkbox-input:focus-visible)", + ".spectrum-Checkbox.spectrum-Checkbox--emphasized:not(.is-invalid):has(.spectrum-Checkbox-input:focus-visible:checked)", ".spectrum-Checkbox.spectrum-Checkbox--sizeL", ".spectrum-Checkbox.spectrum-Checkbox--sizeS", ".spectrum-Checkbox.spectrum-Checkbox--sizeXL", - ".spectrum-Checkbox:active .spectrum-Checkbox-box:before", - ".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox:active .spectrum-Checkbox-label", - ".spectrum-Checkbox:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox:hover .spectrum-Checkbox-label", + ".spectrum-Checkbox:active", + ".spectrum-Checkbox:active:has(.spectrum-Checkbox-input:checked)", + ".spectrum-Checkbox:has(.spectrum-Checkbox-input:checked)", + ".spectrum-Checkbox:has(.spectrum-Checkbox-input:disabled)", + ".spectrum-Checkbox:has(.spectrum-Checkbox-input:focus-visible)", + ".spectrum-Checkbox:has(.spectrum-Checkbox-input:focus-visible) .spectrum-Checkbox-box:after", + ".spectrum-Checkbox:hover", + ".spectrum-Checkbox:hover:has(.spectrum-Checkbox-input:checked)", ".spectrum-Checkbox:lang(ja)", ".spectrum-Checkbox:lang(ko)", ".spectrum-Checkbox:lang(zh)", ".spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box", ".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box" ], - "modifiers": [ - "--mod-checkbox-animation-duration", - "--mod-checkbox-border-width", - "--mod-checkbox-bottom-to-text", - "--mod-checkbox-checkmark-color", - "--mod-checkbox-content-color-default", - "--mod-checkbox-content-color-disabled", - "--mod-checkbox-content-color-down", - "--mod-checkbox-content-color-focus", - "--mod-checkbox-content-color-hover", - "--mod-checkbox-control-color-default", - "--mod-checkbox-control-color-disabled", - "--mod-checkbox-control-color-down", - "--mod-checkbox-control-color-focus", - "--mod-checkbox-control-color-hover", - "--mod-checkbox-control-corner-radius", - "--mod-checkbox-control-selected-color-default", - "--mod-checkbox-control-selected-color-down", - "--mod-checkbox-control-selected-color-hover", - "--mod-checkbox-control-size", - "--mod-checkbox-focus-indicator-color", - "--mod-checkbox-focus-indicator-gap", - "--mod-checkbox-focus-indicator-thickness", - "--mod-checkbox-font-size", - "--mod-checkbox-height", - "--mod-checkbox-line-height", - "--mod-checkbox-line-height-cjk", - "--mod-checkbox-margin-block", - "--mod-checkbox-selected-border-width", - "--mod-checkbox-text-to-control", - "--mod-checkbox-top-to-text", - "--mod-focus-indicator-thickness" - ], + "modifiers": [], "component": [ - "--spectrum-checkbox-animation-duration", - "--spectrum-checkbox-background-color", - "--spectrum-checkbox-border-width", "--spectrum-checkbox-bottom-to-text", - "--spectrum-checkbox-checkmark-color", - "--spectrum-checkbox-content-color-default", - "--spectrum-checkbox-content-color-down", - "--spectrum-checkbox-content-color-focus", - "--spectrum-checkbox-content-color-hover", - "--spectrum-checkbox-control-color-default", - "--spectrum-checkbox-control-color-disabled", - "--spectrum-checkbox-control-color-down", + "--spectrum-checkbox-control-border-width", + "--spectrum-checkbox-control-color", "--spectrum-checkbox-control-color-focus", - "--spectrum-checkbox-control-color-hover", "--spectrum-checkbox-control-corner-radius", - "--spectrum-checkbox-control-selected-color-default", + "--spectrum-checkbox-control-selected-color", "--spectrum-checkbox-control-selected-color-down", "--spectrum-checkbox-control-selected-color-hover", "--spectrum-checkbox-control-size", @@ -113,24 +53,11 @@ "--spectrum-checkbox-control-size-large", "--spectrum-checkbox-control-size-medium", "--spectrum-checkbox-control-size-small", - "--spectrum-checkbox-emphasized-color-default", - "--spectrum-checkbox-emphasized-color-down", - "--spectrum-checkbox-emphasized-color-focus", - "--spectrum-checkbox-emphasized-color-hover", - "--spectrum-checkbox-focus-indicator-color", - "--spectrum-checkbox-focus-indicator-gap", - "--spectrum-checkbox-focus-indicator-thickness", + "--spectrum-checkbox-control-surface-color", "--spectrum-checkbox-font-size", "--spectrum-checkbox-height", - "--spectrum-checkbox-invalid-color-default", - "--spectrum-checkbox-invalid-color-down", - "--spectrum-checkbox-invalid-color-focus", - "--spectrum-checkbox-invalid-color-hover", + "--spectrum-checkbox-label-color", "--spectrum-checkbox-line-height", - "--spectrum-checkbox-line-height-cjk", - "--spectrum-checkbox-selected-border-width", - "--spectrum-checkbox-text-font-style", - "--spectrum-checkbox-text-font-weight", "--spectrum-checkbox-text-to-control", "--spectrum-checkbox-top-to-control", "--spectrum-checkbox-top-to-control-extra-large", @@ -189,18 +116,5 @@ "--spectrum-text-to-control-75" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-checkbox-background-color-default", - "--highcontrast-checkbox-color-default", - "--highcontrast-checkbox-color-focus", - "--highcontrast-checkbox-content-color-default", - "--highcontrast-checkbox-content-color-down", - "--highcontrast-checkbox-content-color-focus", - "--highcontrast-checkbox-content-color-hover", - "--highcontrast-checkbox-disabled-color-default", - "--highcontrast-checkbox-focus-indicator-color", - "--highcontrast-checkbox-highlight-color-default", - "--highcontrast-checkbox-highlight-color-down", - "--highcontrast-checkbox-highlight-color-hover" - ] + "high-contrast": [] } diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 140581616e8..7dabda4f1ca 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -17,66 +17,46 @@ */ .spectrum-Checkbox { - /* Color */ - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-25); - --spectrum-checkbox-background-color: var(--spectrum-gray-25); - --spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-checkbox-control-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-checkbox-control-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-checkbox-control-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-checkbox-label-color: var(--spectrum-neutral-content-color-default); + --spectrum-checkbox-control-surface-color: var(--spectrum-gray-25); + --spectrum-checkbox-control-color: var(--spectrum-neutral-content-color-default); --spectrum-checkbox-control-color-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1000); - --spectrum-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - - --spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-content-color-default); - --spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-content-color-hover); - --spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-content-color-down); - --spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-content-color-key-focus); - - --spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-checkbox-control-selected-color: var(--spectrum-neutral-content-color-default); --spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-content-color-down); - /* Font */ - --spectrum-checkbox-font-size: var(--spectrum-font-size-100); --spectrum-checkbox-line-height: var(--spectrum-line-height-100); - --spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-checkbox-text-font-weight: var(--spectrum-regular-font-weight); - --spectrum-checkbox-text-font-style: var(--spectrum-default-font-style); + --spectrum-checkbox-control-border-width: var(--spectrum-border-width-200); - /* Size */ + /* These values are altered by the size variants */ + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-medium); + --spectrum-checkbox-font-size: var(--spectrum-font-size-100); --spectrum-checkbox-height: var(--spectrum-component-height-100); --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); - --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-medium); - --spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - - --spectrum-checkbox-border-width: var(--spectrum-border-width-200); - - --spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); --spectrum-checkbox-bottom-to-text: var(--spectrum-component-bottom-to-text-100); --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); --spectrum-checkbox-top-to-control: var(--spectrum-checkbox-top-to-control-medium); - --spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2); + display: inline-flex; + align-items: flex-start; + position: relative; + min-block-size: var(--spectrum-checkbox-height); + max-inline-size: 100%; + + /* Label inherits this color */ + color: var(--spectrum-checkbox-label-color); + + @media (forced-colors: active) { + --spectrum-checkbox-label-color: CanvasText; + } /* CJK (Chinese, Japanese, and Korean) language support */ &:lang(ja), &:lang(zh), &:lang(ko) { - --mod-checkbox-line-height: var(--mod-checkbox-line-height-cjk, var(--spectrum-checkbox-line-height-cjk)); + --spectrum-checkbox-line-height: var(--spectrum-cjk-line-height-100); } &.spectrum-Checkbox--sizeS { @@ -113,346 +93,284 @@ } &.spectrum-Checkbox--emphasized { - --spectrum-checkbox-control-selected-color-default: var(--spectrum-checkbox-emphasized-color-default); - --spectrum-checkbox-control-selected-color-hover: var(--spectrum-checkbox-emphasized-color-hover); - --spectrum-checkbox-control-selected-color-down: var(--spectrum-checkbox-emphasized-color-down); + --spectrum-checkbox-control-selected-color: var(--spectrum-accent-content-color-default); + --spectrum-checkbox-control-selected-color-hover: var(--spectrum-accent-content-color-hover); + --spectrum-checkbox-control-selected-color-down: var(--spectrum-accent-content-color-down); } &.is-invalid { - --spectrum-checkbox-control-color-default: var(--spectrum-checkbox-invalid-color-default); - --spectrum-checkbox-control-color-hover: var(--spectrum-checkbox-invalid-color-hover); - --spectrum-checkbox-control-color-down: var(--spectrum-checkbox-invalid-color-down); - --spectrum-checkbox-control-color-focus: var(--spectrum-checkbox-invalid-color-focus); - - --spectrum-checkbox-control-selected-color-default: var(--spectrum-checkbox-invalid-color-default); - --spectrum-checkbox-control-selected-color-hover: var(--spectrum-checkbox-invalid-color-hover); - --spectrum-checkbox-control-selected-color-down: var(--spectrum-checkbox-invalid-color-down); - } -} + --spectrum-checkbox-control-color: var(--spectrum-negative-color-900); + --spectrum-checkbox-control-color-focus: var(--spectrum-negative-color-1000); -.spectrum-Checkbox { - color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); - display: inline-flex; - align-items: flex-start; - position: relative; - min-block-size: var(--mod-checkbox-height, var(--spectrum-checkbox-height)); - max-inline-size: 100%; - vertical-align: top; + --spectrum-checkbox-control-selected-color: var(--spectrum-negative-color-900); + --spectrum-checkbox-control-selected-color-hover: var(--spectrum-negative-color-1000); + --spectrum-checkbox-control-selected-color-down: var(--spectrum-negative-color-1000); - &:hover { - .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-color-hover, var(--spectrum-checkbox-control-color-hover))); + &:hover, + &:active { + --spectrum-checkbox-control-color: var(--spectrum-negative-color-1000); } + } - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover))); + &:hover { + --spectrum-checkbox-label-color: var(--spectrum-neutral-content-color-hover); + --spectrum-checkbox-control-color: var(--spectrum-neutral-content-color-hover); + + @media (forced-colors: active) { + --spectrum-checkbox-label-color: CanvasText; + --spectrum-checkbox-control-color: Highlight; } - .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))); + &:has(.spectrum-Checkbox-input:checked) { + --spectrum-checkbox-control-color: var(--spectrum-checkbox-control-selected-color-hover); + + @media (forced-colors: active) { + --spectrum-checkbox-control-color: Highlight; + } } } &:active { - .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-color-down, var(--spectrum-checkbox-control-color-down))); - } + --spectrum-checkbox-label-color: var(--spectrum-neutral-content-color-down); + --spectrum-checkbox-control-color: var(--spectrum-neutral-content-color-down); - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down))); + @media (forced-colors: active) { + --spectrum-checkbox-label-color: CanvasText; + --spectrum-checkbox-control-color: Highlight; } - .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-down, var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down))); - } - } + &:has(.spectrum-Checkbox-input:checked) { + --spectrum-checkbox-control-color: var(--spectrum-checkbox-control-selected-color-down); - &:not(.is-readOnly) { - .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box, - &:active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box { - transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); + @media (forced-colors: active) { + --spectrum-checkbox-control-color: Highlight; + } } } - .spectrum-Checkbox-checkmark, - .spectrum-Checkbox-partialCheckmark { - color: var(--highcontrast-checkbox-background-color-default, var(--spectrum-checkbox-checkmark-color)); - opacity: 0; - transform: scale(0); + /* Focus */ + &:has(.spectrum-Checkbox-input:focus-visible) { + --spectrum-checkbox-label-color: var(--spectrum-neutral-content-color-key-focus); - transition: - opacity var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, - transform var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; + @media (forced-colors: active) { + --spectrum-checkbox-label-color: CanvasText; + --spectrum-focus-indicator-color: CanvasText; + --spectrum-checkbox-control-color-focus: Highlight; + } } - .spectrum-Checkbox-partialCheckmark { - display: none; + /* Focus */ + &:has(.spectrum-Checkbox-input:focus-visible) { + --spectrum-checkbox-control-color: var(--spectrum-checkbox-control-color-focus); } - .spectrum-Checkbox-label { - text-align: start; - margin-inline-start: var(--mod-checkbox-text-to-control, var(--spectrum-checkbox-text-to-control)); - margin-block-start: var(--mod-checkbox-top-to-text, var(--spectrum-checkbox-top-to-text)); - margin-block-end: var(--mod-checkbox-bottom-to-text, var(--spectrum-checkbox-bottom-to-text)); - - font-size: var(--mod-checkbox-font-size, var(--spectrum-checkbox-font-size)); - font-weight: var(--spectrum-checkbox-text-font-weight); - font-style: var(--spectrum-checkbox-text-font-style); - - transition: color var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; + /* Selected */ + &:has(.spectrum-Checkbox-input:checked) { + --spectrum-checkbox-control-border-width: calc(var(--spectrum-checkbox-control-size) / 2); + --spectrum-checkbox-control-color: var(--spectrum-checkbox-control-selected-color); + --spectrum-checkbox-control-surface-color: var(--spectrum-checkbox-control-surface-color); - line-height: var(--mod-checkbox-line-height, var(--spectrum-checkbox-line-height)); + @media (forced-colors: active) { + --spectrum-checkbox-control-surface-color: Canvas; + --spectrum-checkbox-control-color: Highlight; + } } - /** - * The input is visually hidden (with opacity), and remains accessible using assistive tech. - * It is still sized and positioned where it would naturally be present so that touch users can find it with haptics. - */ - .spectrum-Checkbox-input { - color: var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default)); + &:not(.is-readOnly) { + .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box, + &:active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box { + transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); + } + } - /* Remove the margin for input in Firefox and Safari. */ - margin: 0; + /* Indeterminate */ + &.is-indeterminate { + --spectrum-checkbox-control-border-width: calc(var(--spectrum-checkbox-control-size) / 2); - /* Show the overflow for input in Edge. */ - overflow: visible; + @media (forced-colors: active) { + --spectrum-checkbox-control-color: Highlight; + } - /* Add the correct box sizing for [type="checkbox"] in IE 10-. */ - box-sizing: border-box; + /* Invalid state indeterminate override */ + &.is-invalid { + --spectrum-checkbox-control-color: var(--spectrum-checkbox-control-selected-color); - /* Remove the padding for [type="checkbox"] in IE 10-. */ - padding: 0; + @media (forced-colors: active) { + --spectrum-checkbox-control-color: Highlight; + } - position: absolute; - inline-size: 100%; - block-size: 100%; + &:hover { + --spectrum-checkbox-control-color: var(--spectrum-checkbox-control-selected-color-hover); - opacity: 0; - z-index: 1; + @media (forced-colors: active) { + --spectrum-checkbox-control-color: Highlight; + } + } - cursor: pointer; + &:has(.spectrum-Checkbox-input:focus-visible) { + --spectrum-checkbox-control-color: var(--spectrum-checkbox-control-color-focus); - &:disabled { - cursor: default; + @media (forced-colors: active) { + --spectrum-checkbox-control-color: Highlight; + } + } } + } - /* Selected */ - &:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); - border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); - } + /* Emphasized state overrides - all configurations at the top apply except for the ones below: indeterminate, indeterminate focused, focused + checked */ + &.spectrum-Checkbox--emphasized { + &.is-indeterminate { + --spectrum-checkbox-control-color: var(--spectrum-checkbox-control-selected-color); - .spectrum-Checkbox-checkmark { - transform: scale(1); - opacity: 1; + @media (forced-colors: active) { + --spectrum-checkbox-control-color: Highlight; } - } - /* Focus */ - &:focus-visible + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))); + &:not(.is-invalid):has(.spectrum-Checkbox-input:focus-visible) { + --spectrum-checkbox-control-color: var(--spectrum-accent-content-color-key-focus); } - &::after { - box-shadow: 0 0 0 var(--mod-checkbox-focus-indicator-thickness, var(--spectrum-checkbox-focus-indicator-thickness)) var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); - margin: calc(var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)) * -1); + &:hover { + --spectrum-checkbox-control-color: var(--spectrum-checkbox-control-selected-color-hover); } } - &:focus-visible + .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-focus, var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))); + &:not(.is-invalid):has(.spectrum-Checkbox-input:focus-visible:checked) { + --spectrum-checkbox-control-color-focus: var(--spectrum-accent-content-color-key-focus); } } - .spectrum-Checkbox-box { - display: flex; - align-items: center; - justify-content: center; - - position: relative; - box-sizing: border-box; - inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - - /* Fix vertical alignment when not wrapping since we're flex-start */ - margin: var(--mod-checkbox-margin-block, var(--spectrum-checkbox-top-to-control)) 0; - flex-grow: 0; - flex-shrink: 0; - - &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))); - background-color: var(--highcontrast-checkbox-background-color-default, var(--spectrum-checkbox-background-color)); - display: block; - z-index: 0; - content: ""; - box-sizing: border-box; - position: absolute; - - inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - - border-radius: var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)); - border-width: var(--mod-checkbox-border-width, var(--spectrum-checkbox-border-width)); - border-style: solid; - - transition: - border var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, - box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; - } + &:has(.spectrum-Checkbox-input:disabled) { + --spectrum-checkbox-label-color: var(--spectrum-disabled-content-color); + --spectrum-checkbox-control-color: var(--spectrum-disabled-content-color); - &::after { - border-radius: calc(var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)) + var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap))); - content: ""; - display: block; - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-end: 0; - inset-block-start: 0; - margin: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)); - - transition: - box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out, - margin var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out; - - /* force ff to render on the pixel grid */ - transform: translate(0, 0); + @media (forced-colors: active) { + --spectrum-disabled-content-color: GrayText; } } +} - /* Indeterminate */ - &.is-indeterminate { - .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default); - border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); - } +.spectrum-Checkbox-label { + text-align: start; + margin-inline-start: var(--spectrum-checkbox-text-to-control); + margin-block-start: var(--spectrum-checkbox-top-to-text); + margin-block-end: var(--spectrum-checkbox-bottom-to-text); + font-size: var(--spectrum-checkbox-font-size); + font-weight: var(--spectrum-regular-font-weight); + font-style: var(--spectrum-default-font-style); + line-height: var(--spectrum-checkbox-line-height); + color: currentColor; +} - .spectrum-Checkbox-checkmark { - display: none; - } +/** + * The input is visually hidden (with opacity), and remains accessible using assistive tech. + * It is still sized and positioned where it would naturally be present so that touch users can find it with haptics. + */ +.spectrum-Checkbox-input { + color: var(--spectrum-checkbox-control-color); - .spectrum-Checkbox-partialCheckmark { - display: block; - transform: scale(1); - opacity: 1; - } - } - } -} + /* Remove the margin for input in Firefox and Safari. */ + margin: 0; -/* Invalid state indeterminate override - for default state */ -.spectrum-Checkbox.is-invalid.is-indeterminate { - .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--spectrum-checkbox-control-selected-color-default)); - } - } + /* Show the overflow for input in Edge. */ + overflow: visible; - .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-focus, var(--spectrum-checkbox-control-color-focus)); - } - } + /* Add the correct box sizing for [type="checkbox"] in IE 10-. */ + box-sizing: border-box; - &:hover { - .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--spectrum-checkbox-control-selected-color-hover)); - } - } - } -} + position: absolute; + inline-size: 100%; + block-size: 100%; -/* Emphasized state overrides - all configurations at the top apply except for the ones below: indeterminate, indeterminate focused, focused + checked */ -.spectrum-Checkbox--emphasized.is-indeterminate { - .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--spectrum-checkbox-control-selected-color-default)); - } - } + opacity: 0; + z-index: 1; - &:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-focus, var(--spectrum-checkbox-emphasized-color-focus)); - } - } + cursor: pointer; - &:hover { - .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--spectrum-checkbox-control-selected-color-hover)); - } - } + /* Disabled state for all variants - default, invalid, emphasized */ + &:disabled { + cursor: default; } } -.spectrum-Checkbox--emphasized { - &:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box { - &::before { - --mod-checkbox-control-color-focus: var(--highcontrast-checkbox-color-focus, var(--spectrum-checkbox-emphasized-color-focus)); - } +.spectrum-Checkbox-box { + display: flex; + align-items: center; + justify-content: center; + + position: relative; + box-sizing: border-box; + inline-size: var(--spectrum-checkbox-control-size); + block-size: var(--spectrum-checkbox-control-size); + + /* Fix vertical alignment when not wrapping since we're flex-start */ + margin: var(--spectrum-checkbox-top-to-control) 0; + flex-grow: 0; + flex-shrink: 0; + + /* Icon inherits this color */ + color: var(--spectrum-gray-25); + + @media (forced-colors: active) { + color: Canvas; } -} -/* Disabled state for all variants - default, invalid, emphasized */ -.spectrum-Checkbox .spectrum-Checkbox-input, -.spectrum-Checkbox .spectrum-Checkbox-input:checked { - &:disabled + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled))); - background-color: var(--highcontrast-checkbox-background-color-default, var(--spectrum-checkbox-background-color)); + &::before { + background-color: var(--spectrum-checkbox-control-surface-color); + display: block; + z-index: 0; + content: ""; + box-sizing: border-box; + position: absolute; + + inline-size: var(--spectrum-checkbox-control-size); + block-size: var(--spectrum-checkbox-control-size); + + border-radius: var(--spectrum-checkbox-control-corner-radius); + border-width: var(--spectrum-checkbox-control-border-width); + border-style: solid; + border-color: var(--spectrum-checkbox-control-color); + + transition: + border var(--spectrum-animation-duration-100) ease-in-out, + box-shadow var(--spectrum-animation-duration-100) ease-in-out; + + @media (forced-colors: active) { + --spectrum-checkbox-control-color: ButtonText; + --spectrum-checkbox-control-surface-color: Canvas; } } - &:hover:disabled + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled))); - } + .spectrum-Icon { + z-index: 1; } +} - &:disabled ~ .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-control-color-disabled))); +/* Focus indicator */ +.spectrum-Checkbox:has(.spectrum-Checkbox-input:focus-visible) { + .spectrum-Checkbox-box::after { + box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--spectrum-focus-indicator-color); + border-radius: calc(var(--spectrum-checkbox-control-corner-radius) + var(--spectrum-focus-indicator-gap)); + content: ""; + display: block; + position: absolute; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; + inset-block-start: 0; + margin: calc(var(--spectrum-focus-indicator-gap) * -1); + + /* force ff to render on the pixel grid */ + transform: translate(0, 0); } } /* Windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Checkbox-input { - &:focus-visible + .spectrum-Checkbox-box { - forced-color-adjust: none; - outline-color: var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); - outline-offset: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)); - outline-width: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); - } - } - - .spectrum-Checkbox { - /* Label Text */ - --highcontrast-checkbox-content-color-default: CanvasText; - --highcontrast-checkbox-content-color-hover: CanvasText; - --highcontrast-checkbox-content-color-down: CanvasText; - --highcontrast-checkbox-content-color-focus: CanvasText; - - /* Checkbox box */ - --highcontrast-checkbox-background-color-default: Canvas; - - --highcontrast-checkbox-color-default: ButtonText; - --highcontrast-checkbox-color-focus: Highlight; - - --highcontrast-checkbox-highlight-color-default: Highlight; - --highcontrast-checkbox-highlight-color-hover: Highlight; - --highcontrast-checkbox-highlight-color-down: Highlight; - - --highcontrast-checkbox-disabled-color-default: GrayText; - --highcontrast-checkbox-focus-indicator-color: CanvasText; + .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { + forced-color-adjust: none; + outline-color: CanvasText; + outline-offset: var(--spectrum-focus-indicator-gap); + outline-width: var(--spectrum-focus-indicator-thickness); } } diff --git a/components/checkbox/stories/checkbox.test.js b/components/checkbox/stories/checkbox.test.js index 8d199e18cb0..ef64e655c6b 100644 --- a/components/checkbox/stories/checkbox.test.js +++ b/components/checkbox/stories/checkbox.test.js @@ -18,6 +18,7 @@ export const CheckboxGroup = Variants({ { testHeading: "Indeterminate", isIndeterminate: true, + isChecked: true, not: ["Checked"], }, { diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js index 0c7c42b6272..10322d2d467 100644 --- a/components/checkbox/stories/template.js +++ b/components/checkbox/stories/template.js @@ -30,6 +30,15 @@ export const Template = ({ } = {}, context = {}) => { const { updateArgs } = context; + /* Only way to set the indeterminate state consistently across browsers is with JavaScript */ + document.addEventListener("DOMContentLoaded", () => { + const checkboxes = document.querySelectorAll(".is-indeterminate input"); + if (!checkboxes) return; + checkboxes.forEach(checkbox => { + checkbox.indeterminate = true; + }); + }); + let iconSize = "75"; switch (size) { case "s": @@ -43,6 +52,7 @@ export const Template = ({ break; default: iconSize = "75"; + break; } return html` @@ -56,6 +66,7 @@ export const Template = ({ ["is-disabled"]: isDisabled, ["is-invalid"]: isInvalid, ["is-hover"]: isHovered && !isDisabled, + ["is-focus-visible"]: isFocused && !isDisabled, ["is-readOnly"]: isReadOnly, ["is-active"]: isActive, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), @@ -71,8 +82,9 @@ export const Template = ({ [`${rootClass}-input`]: true })} aria-labelledby=${ifDefined(ariaLabelledby)} aria-disabled=${ifDefined(isReadOnly ? "true" : undefined)} - ?checked=${isChecked} + ?checked=${isChecked && !isIndeterminate} ?disabled=${isDisabled} + ?indeterminate=${isIndeterminate} title=${ifDefined(title)} value=${ifDefined(value)} @change=${(e) => { @@ -87,19 +99,16 @@ export const Template = ({ id=${ifDefined(id ? `${id}-input` : undefined)} /> - ${Icon({ - size, + ${when(isChecked && !isIndeterminate, () => Icon({ iconName: `Checkmark${iconSize}`, setName: "ui", - customClasses: [`${rootClass}-checkmark`], - }, context)} - ${Icon({ - size, + }, context))} + ${when(isChecked && isIndeterminate, () => Icon({ iconName: `Dash${iconSize}`, setName: "ui", - customClasses: [`${rootClass}-partialCheckmark`], - }, context)} + }, context))} + ${when( label, () => html`${label}` diff --git a/postcss.config.js b/postcss.config.js index 763daa470eb..b7c33b573a0 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -114,8 +114,7 @@ module.exports = ({ discardComments: { remove: (comment) => !comment.includes("stylelint-"), }, - // @todo yarn add -DW css-declaration-sorter - cssDeclarationSorter: false, // @todo { order: "smacss" } + cssDeclarationSorter: false, normalizeWhitespace: minify || isProduction, }, ],