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,
},
],