feat(checkbox): remove modifiers from the API [SWC-1264]

Author: castastrophe

.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

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() {

components/card/stories/template.js

@@ -81,7 +81,7 @@ export const Template = ({
                 () =>
                   Icon(
                     {
-                      size: "xxl",
+                      size: "xl",
                       iconName: showAsset === "folder" ? "Folder" : "Document",
                       setName: "workflow",
                     },

components/checkbox/dist/metadata.json

@@ -2,135 +2,62 @@
   "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",
     "--spectrum-checkbox-control-size-extra-large",
     "--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": []
 }