feat(checkbox/group): s2 token migration, control spacing, subtle color changes (#3531)

* feat(checkbox): adding new s2 tokens

* chore(checkbox): adding necessary files

* chore(checkbox): adding necessary files and dist files

* chore(checkbox): making tokens more specific

* chore(checkbox): adding checkbox dist files

* chore(checkbox): remove unnecessary dist files

* feat(checkbox): adding checkbox s2 tokens

* chore(checkbox): adding metadata file

* feat(checkbox): restoring new s2 tokens

* chore(checkbox): adding metadata file

* feat(checkbox): adding focused and hovered states in test env

* feat(checkbox): configure WHCM mode and modify css

* chore(checkbox): adding metadata file

* feat(checkbox): updating changeset, removing some conflicting classes

* chore(checkbox): restoring s2 files

* feat(checkbox): fixing emphasized focused state

* chore(checkbox): adding metadata

* feat(checkbox): updating whcm hover states

* feat(checkbox): updating whcm

* feat(checkbox): bring back size M

* feat(checkbox): updating WHCM and metadata

* feat(checkbox): updating checkbox states

* feat(checkbox): adding new s2 tokens

* chore(checkbox): adding necessary files and dist files

* chore(checkbox): making tokens more specific

* chore(checkbox): adding checkbox dist files

* chore(checkbox): remove unnecessary dist files

* feat(checkbox): adding checkbox s2 tokens

* feat(checkbox): restoring new s2 tokens

* feat(checkbox): adding focused and hovered states in test env

* feat(checkbox): configure WHCM mode and modify css

* feat(checkbox): updating changeset, removing some conflicting classes

* feat(checkbox): fixing emphasized focused state

* chore(checkbox): adding metadata

* feat(checkbox): updating whcm hover states

* feat(checkbox): updating whcm

* feat(checkbox): bring back size M

* feat(checkbox): updating WHCM and metadata

* feat(checkbox): updating checkbox states

* chore(checkbox): restoring metadata files

* feat(checkbox): fix emphasized unchecked focus state

* feat(checkbox): update emphasized error state

* chore(checkbox): restore metadata files

* feat(checkbox): removing is-focus-visible and is-disabled class usage

* chore(checkbox): removing metadata files

* feat(checkbox): cleaned house - reorg classes, removed bad selects, cut out some tests

* chore(checkbox): restoring search metadata

* feat(checkbox): adding active to test grid

* feat(checkbox): adding checkbox downstate fix, removing is-active class, and finding indeterminate bug

* feat(checkbox): add back test cases

* feat(checkbox): adding hovered invalid

* feat(checkbox): disable all hover states in disabled state

Author: aramos-adobe

.changeset/six-donuts-march.md

@@ -0,0 +1,36 @@
+---
+"@spectrum-css/checkbox": major
+---
+
+#### Checkbox S2 Migration
+
+Checkbox's control and color tokens have been updated by the latest S2 tokens:
+
+**Updates**
+
+- Checkbox has a background color token: `--spectrum-checkbox-background-color`
+- New typography additions: line-height, font-weight, and font style
+- `spectrum-Checkbox--sizeM` is now the default style settings of the component.
+- Fixed typo in `--mod-focus-indicator-thickness`
+- Removed interactive state selectors in `--emphasized` variant that was overriding other variants
+- Refactored WHCM settings for read-only and disabled states
+- `--mod-checkbox-spacing` has been renamed to `--mod-checkbox-margin-block`
+
+##### New tokens
+
+`--spectrum-component-size-width-ratio-down`
+`--spectrum-checkbox-bottom-to-text`
+`--spectrum-checkbox-top-to-control`
+`--spectrum-accent-content-color-default`
+`--spectrum-accent-content-color-hover`
+`--spectrum-accent-content-color-down`
+`--spectrum-accent-content-color-key-focus`
+
+##### Modified tokens
+
+`--spectrum-checkbox-checkmark-color`
+`--spectrum-checkbox-invalid-color-down`
+`--spectrum-checkbox-control-color-default`
+`--spectrum-checkbox-control-color-hover`
+`--spectrum-checkbox-control-color-down`
+`--spectrum-checkbox-control-color-focus`

components/checkbox/dist/metadata.json

@@ -2,86 +2,64 @@
   "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 .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before",
     ".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 .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--emphasized.is-indeterminate:active .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-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--emphasized.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--sizeL",
-    ".spectrum-Checkbox--sizeS",
-    ".spectrum-Checkbox--sizeXL",
-    ".spectrum-Checkbox-box",
-    ".spectrum-Checkbox-box:after",
-    ".spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox-input",
-    ".spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark",
-    ".spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox-input:disabled",
+    ".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-input:focus-visible + .spectrum-Checkbox-box",
-    ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after",
-    ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label",
-    ".spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox-label",
-    ".spectrum-Checkbox-label:lang(ja)",
-    ".spectrum-Checkbox-label:lang(ko)",
-    ".spectrum-Checkbox-label:lang(zh)",
     ".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.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
+    ".spectrum-Checkbox.is-invalid",
     ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .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 + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label",
-    ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input",
-    ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label",
-    ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label",
+    ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before",
+    ".spectrum-Checkbox.spectrum-Checkbox--emphasized",
+    ".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: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",
@@ -94,38 +72,30 @@
     "--mod-checkbox-control-color-focus",
     "--mod-checkbox-control-color-hover",
     "--mod-checkbox-control-corner-radius",
-    "--mod-checkbox-control-invalid-color-down",
     "--mod-checkbox-control-selected-color-default",
     "--mod-checkbox-control-selected-color-down",
-    "--mod-checkbox-control-selected-color-focus",
     "--mod-checkbox-control-selected-color-hover",
     "--mod-checkbox-control-size",
-    "--mod-checkbox-emphasized-color-default",
-    "--mod-checkbox-emphasized-color-down",
-    "--mod-checkbox-emphasized-color-focus",
-    "--mod-checkbox-emphasized-color-hover",
     "--mod-checkbox-focus-indicator-color",
     "--mod-checkbox-focus-indicator-gap",
-    "--mod-checkbox-focus-indicator-thinkness",
+    "--mod-checkbox-focus-indicator-thickness",
     "--mod-checkbox-font-size",
     "--mod-checkbox-height",
-    "--mod-checkbox-invalid-color-default",
-    "--mod-checkbox-invalid-color-focus",
-    "--mod-checkbox-invalid-color-hover",
     "--mod-checkbox-line-height",
     "--mod-checkbox-line-height-cjk",
+    "--mod-checkbox-margin-block",
     "--mod-checkbox-selected-border-width",
-    "--mod-checkbox-spacing",
     "--mod-checkbox-text-to-control",
     "--mod-checkbox-top-to-text",
     "--mod-focus-indicator-thickness"
   ],
   "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-disabled",
     "--spectrum-checkbox-content-color-down",
     "--spectrum-checkbox-content-color-focus",
     "--spectrum-checkbox-content-color-hover",
@@ -137,7 +107,6 @@
     "--spectrum-checkbox-control-corner-radius",
     "--spectrum-checkbox-control-selected-color-default",
     "--spectrum-checkbox-control-selected-color-down",
-    "--spectrum-checkbox-control-selected-color-focus",
     "--spectrum-checkbox-control-selected-color-hover",
     "--spectrum-checkbox-control-size",
     "--spectrum-checkbox-control-size-extra-large",
@@ -160,17 +129,28 @@
     "--spectrum-checkbox-line-height",
     "--spectrum-checkbox-line-height-cjk",
     "--spectrum-checkbox-selected-border-width",
-    "--spectrum-checkbox-spacing",
+    "--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",
+    "--spectrum-checkbox-top-to-control-large",
+    "--spectrum-checkbox-top-to-control-medium",
+    "--spectrum-checkbox-top-to-control-small",
     "--spectrum-checkbox-top-to-text"
   ],
   "global": [
-    "--spectrum-accent-color-1000",
-    "--spectrum-accent-color-1100",
-    "--spectrum-accent-color-900",
+    "--spectrum-accent-content-color-default",
+    "--spectrum-accent-content-color-down",
+    "--spectrum-accent-content-color-hover",
+    "--spectrum-accent-content-color-key-focus",
     "--spectrum-animation-duration-100",
     "--spectrum-border-width-200",
     "--spectrum-cjk-line-height-100",
+    "--spectrum-component-bottom-to-text-100",
+    "--spectrum-component-bottom-to-text-200",
+    "--spectrum-component-bottom-to-text-300",
+    "--spectrum-component-bottom-to-text-75",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
@@ -183,7 +163,9 @@
     "--spectrum-component-top-to-text-75",
     "--spectrum-corner-radius-small-size-extra-large",
     "--spectrum-corner-radius-small-size-large",
+    "--spectrum-corner-radius-small-size-medium",
     "--spectrum-corner-radius-small-size-small",
+    "--spectrum-default-font-style",
     "--spectrum-disabled-content-color",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
@@ -192,21 +174,15 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
-    "--spectrum-gray-50",
-    "--spectrum-gray-700",
-    "--spectrum-gray-800",
+    "--spectrum-gray-25",
     "--spectrum-line-height-100",
     "--spectrum-negative-color-1000",
-    "--spectrum-negative-color-1100",
     "--spectrum-negative-color-900",
-    "--spectrum-neutral-background-color-selected-default",
-    "--spectrum-neutral-background-color-selected-down",
-    "--spectrum-neutral-background-color-selected-hover",
-    "--spectrum-neutral-background-color-selected-key-focus",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
     "--spectrum-neutral-content-color-hover",
     "--spectrum-neutral-content-color-key-focus",
+    "--spectrum-regular-font-weight",
     "--spectrum-text-to-control-100",
     "--spectrum-text-to-control-200",
     "--spectrum-text-to-control-300",
@@ -217,7 +193,6 @@
     "--highcontrast-checkbox-background-color-default",
     "--highcontrast-checkbox-color-default",
     "--highcontrast-checkbox-color-focus",
-    "--highcontrast-checkbox-color-hover",
     "--highcontrast-checkbox-content-color-default",
     "--highcontrast-checkbox-content-color-down",
     "--highcontrast-checkbox-content-color-focus",
@@ -226,7 +201,6 @@
     "--highcontrast-checkbox-focus-indicator-color",
     "--highcontrast-checkbox-highlight-color-default",
     "--highcontrast-checkbox-highlight-color-down",
-    "--highcontrast-checkbox-highlight-color-focus",
     "--highcontrast-checkbox-highlight-color-hover"
   ]
 }