feat(switch): s2 migration (#2651)

* feat(switch): s2 migration
* chore: remove themes
* fix: animation
* fix: whcm light mode unchecked handle shows
* docs(storybook): align chromatic setup with new standard
* fix: checked corners for non-retina display
* fix: whcm handle selected color
* fix: namespace mods, use semantic tokens instead of global
* fix: handle state colors

Author: Melissa Thompson

components/switch/dist/metadata.json

@@ -2,22 +2,16 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Switch",
-    ".spectrum-Switch + .spectrum-Switch-switch:after",
-    ".spectrum-Switch + .spectrum-Switch-switch:before",
+    ".spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch",
+    ".spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before",
     ".spectrum-Switch .spectrum-Switch-input:disabled ~ .spectrum-Switch-label",
     ".spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch",
     ".spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before",
-    ".spectrum-Switch .spectrum-Switch-input:disabled:not(:checked) + .spectrum-Switch-switch",
-    ".spectrum-Switch .spectrum-Switch-input:disabled:not(:checked) + .spectrum-Switch-switch:before",
-    ".spectrum-Switch .spectrum-Switch-input:not(:checked) + .spectrum-Switch-switch",
+    ".spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch",
+    ".spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before",
     ".spectrum-Switch .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label",
     ".spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch",
     ".spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before",
-    ".spectrum-Switch .spectrum-Switch-input[disabled]:not(:checked) + .spectrum-Switch-switch",
-    ".spectrum-Switch .spectrum-Switch-input[disabled]:not(:checked) + .spectrum-Switch-switch:before",
-    ".spectrum-Switch .spectrum-Switch-switch",
-    ".spectrum-Switch .spectrum-Switch-switch:before",
-    ".spectrum-Switch ~ .spectrum-Switch-label",
     ".spectrum-Switch--disabled",
     ".spectrum-Switch--emphasized",
     ".spectrum-Switch--sizeL",
@@ -26,90 +20,91 @@
     ".spectrum-Switch-input",
     ".spectrum-Switch-input:checked + .spectrum-Switch-switch",
     ".spectrum-Switch-input:checked + .spectrum-Switch-switch:before",
-    ".spectrum-Switch-input:checked + .spectrum-Switch-switch:dir(rtl):before",
+    ".spectrum-Switch-input:checked + .spectrum-Switch-switch:before:dir(rtl)",
+    ".spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch",
     ".spectrum-Switch-input:disabled",
-    ".spectrum-Switch-input:disabled + .spectrum-Switch-switch",
-    ".spectrum-Switch-input:disabled + .spectrum-Switch-switch:before",
-    ".spectrum-Switch-input:disabled ~ .spectrum-Switch-label",
-    ".spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch",
-    ".spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before",
+    ".spectrum-Switch-input:focus-visible + .spectrum-Switch-switch",
     ".spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after",
+    ".spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before",
+    ".spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label",
     ".spectrum-Switch-input[disabled]",
-    ".spectrum-Switch-input[disabled] + .spectrum-Switch-switch",
-    ".spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before",
-    ".spectrum-Switch-input[disabled] ~ .spectrum-Switch-label",
-    ".spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch",
-    ".spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before",
     ".spectrum-Switch-label",
+    ".spectrum-Switch-label:lang(ja)",
+    ".spectrum-Switch-label:lang(ko)",
+    ".spectrum-Switch-label:lang(zh)",
     ".spectrum-Switch-switch",
     ".spectrum-Switch-switch:after",
     ".spectrum-Switch-switch:before",
-    ".spectrum-Switch:active .spectrum-Switch-input + .spectrum-Switch-switch:before",
-    ".spectrum-Switch:active .spectrum-Switch-input ~ .spectrum-Switch-label",
-    ".spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch",
-    ".spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before",
-    ".spectrum-Switch:checked + .spectrum-Switch-switch",
-    ".spectrum-Switch:checked + .spectrum-Switch-switch:before",
-    ".spectrum-Switch:hover .spectrum-Switch-input + .spectrum-Switch-switch:before",
-    ".spectrum-Switch:hover .spectrum-Switch-input ~ .spectrum-Switch-label",
-    ".spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch",
-    ".spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before",
+    ".spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch",
+    ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before",
+    ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before",
+    ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl)",
+    ".spectrum-Switch:active .spectrum-Switch-switch",
+    ".spectrum-Switch:active .spectrum-Switch-switch:before",
+    ".spectrum-Switch:active ~ .spectrum-Switch-label",
+    ".spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch",
+    ".spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch:before",
     ".spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch",
     ".spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before",
     ".spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label",
     ".spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch",
     ".spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before",
-    ".spectrum-Switch:hover .spectrum-Switch-input:disabled:checked ~ .spectrum-Switch-label",
-    ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after",
-    ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before",
-    ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label",
-    ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch",
-    ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before",
-    ".spectrum-Switch:hover .spectrum-Switch-input:not(:checked) + .spectrum-Switch-switch",
     ".spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch",
     ".spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before",
     ".spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label",
     ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch",
     ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before",
-    ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label",
-    "[dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before"
+    ".spectrum-Switch:hover .spectrum-Switch-switch",
+    ".spectrum-Switch:hover .spectrum-Switch-switch:before",
+    ".spectrum-Switch:hover ~ .spectrum-Switch-label",
+    "[dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before",
+    "[dir=\"rtl\"] .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before"
   ],
   "modifiers": [
     "--mod-animation-duration-100",
-    "--mod-animation-duration-200",
-    "--mod-border-width-200",
-    "--mod-focus-indicator-gap",
-    "--mod-focus-indicator-thickness",
-    "--mod-line-height-100",
     "--mod-switch-background-color",
     "--mod-switch-background-color-disabled",
     "--mod-switch-background-color-selected-default",
     "--mod-switch-background-color-selected-disabled",
     "--mod-switch-background-color-selected-down",
     "--mod-switch-background-color-selected-focus",
     "--mod-switch-background-color-selected-hover",
+    "--mod-switch-border-color-default",
+    "--mod-switch-border-color-disabled",
+    "--mod-switch-border-color-down",
+    "--mod-switch-border-color-focus",
+    "--mod-switch-border-color-hover",
+    "--mod-switch-border-color-selected-default",
+    "--mod-switch-border-color-selected-down",
+    "--mod-switch-border-color-selected-focus",
+    "--mod-switch-border-color-selected-hover",
+    "--mod-switch-border-radius",
+    "--mod-switch-border-width",
+    "--mod-switch-cjk-line-height",
     "--mod-switch-control-height",
     "--mod-switch-control-label-spacing",
     "--mod-switch-control-width",
     "--mod-switch-focus-indicator-color",
+    "--mod-switch-focus-indicator-gap",
     "--mod-switch-focus-indicator-thickness",
     "--mod-switch-font-size",
-    "--mod-switch-handle-background-color",
-    "--mod-switch-handle-border-color-default",
-    "--mod-switch-handle-border-color-disabled",
-    "--mod-switch-handle-border-color-down",
-    "--mod-switch-handle-border-color-focus",
-    "--mod-switch-handle-border-color-hover",
-    "--mod-switch-handle-border-color-selected-default",
-    "--mod-switch-handle-border-color-selected-down",
-    "--mod-switch-handle-border-color-selected-focus",
-    "--mod-switch-handle-border-color-selected-hover",
+    "--mod-switch-handle-background-color-default",
+    "--mod-switch-handle-background-color-disabled",
+    "--mod-switch-handle-background-color-down",
+    "--mod-switch-handle-background-color-focus",
+    "--mod-switch-handle-background-color-hover",
+    "--mod-switch-handle-background-color-selected",
+    "--mod-switch-handle-background-color-selected-disabled",
+    "--mod-switch-handle-selected-size",
+    "--mod-switch-handle-size",
     "--mod-switch-height",
-    "--mod-switch-label-color-default",
+    "--mod-switch-label-color",
     "--mod-switch-label-color-disabled",
     "--mod-switch-label-color-down",
     "--mod-switch-label-color-focus",
     "--mod-switch-label-color-hover",
+    "--mod-switch-line-height",
+    "--mod-switch-spacing-bottom-to-label",
     "--mod-switch-spacing-top-to-control",
     "--mod-switch-spacing-top-to-label"
   ],
@@ -121,6 +116,18 @@
     "--spectrum-switch-background-color-selected-down",
     "--spectrum-switch-background-color-selected-focus",
     "--spectrum-switch-background-color-selected-hover",
+    "--spectrum-switch-border-color-default",
+    "--spectrum-switch-border-color-disabled",
+    "--spectrum-switch-border-color-down",
+    "--spectrum-switch-border-color-focus",
+    "--spectrum-switch-border-color-hover",
+    "--spectrum-switch-border-color-selected-default",
+    "--spectrum-switch-border-color-selected-down",
+    "--spectrum-switch-border-color-selected-focus",
+    "--spectrum-switch-border-color-selected-hover",
+    "--spectrum-switch-border-radius",
+    "--spectrum-switch-border-width",
+    "--spectrum-switch-cjk-line-height",
     "--spectrum-switch-control-height",
     "--spectrum-switch-control-height-extra-large",
     "--spectrum-switch-control-height-large",
@@ -133,24 +140,34 @@
     "--spectrum-switch-control-width-medium",
     "--spectrum-switch-control-width-small",
     "--spectrum-switch-focus-indicator-color",
+    "--spectrum-switch-focus-indicator-gap",
     "--spectrum-switch-focus-indicator-thickness",
     "--spectrum-switch-font-size",
-    "--spectrum-switch-handle-background-color",
-    "--spectrum-switch-handle-border-color-default",
-    "--spectrum-switch-handle-border-color-disabled",
-    "--spectrum-switch-handle-border-color-down",
-    "--spectrum-switch-handle-border-color-focus",
-    "--spectrum-switch-handle-border-color-hover",
-    "--spectrum-switch-handle-border-color-selected-default",
-    "--spectrum-switch-handle-border-color-selected-down",
-    "--spectrum-switch-handle-border-color-selected-focus",
-    "--spectrum-switch-handle-border-color-selected-hover",
+    "--spectrum-switch-handle-background-color-default",
+    "--spectrum-switch-handle-background-color-disabled",
+    "--spectrum-switch-handle-background-color-down",
+    "--spectrum-switch-handle-background-color-focus",
+    "--spectrum-switch-handle-background-color-hover",
+    "--spectrum-switch-handle-background-color-selected",
+    "--spectrum-switch-handle-background-color-selected-disabled",
+    "--spectrum-switch-handle-selected-size",
+    "--spectrum-switch-handle-selected-size-extra-large",
+    "--spectrum-switch-handle-selected-size-large",
+    "--spectrum-switch-handle-selected-size-medium",
+    "--spectrum-switch-handle-selected-size-small",
+    "--spectrum-switch-handle-size",
+    "--spectrum-switch-handle-size-extra-large",
+    "--spectrum-switch-handle-size-large",
+    "--spectrum-switch-handle-size-medium",
+    "--spectrum-switch-handle-size-small",
     "--spectrum-switch-label-color-default",
     "--spectrum-switch-label-color-disabled",
     "--spectrum-switch-label-color-down",
     "--spectrum-switch-label-color-focus",
     "--spectrum-switch-label-color-hover",
+    "--spectrum-switch-line-height",
     "--spectrum-switch-min-height",
+    "--spectrum-switch-spacing-bottom-to-label",
     "--spectrum-switch-spacing-top-to-control",
     "--spectrum-switch-spacing-top-to-label",
     "--spectrum-switch-top-to-control-extra-large",
@@ -159,20 +176,29 @@
     "--spectrum-switch-top-to-control-small"
   ],
   "global": [
-    "--spectrum-accent-color-1000",
-    "--spectrum-accent-color-1100",
-    "--spectrum-accent-color-900",
+    "--spectrum-accent-background-color-default",
+    "--spectrum-accent-background-color-down",
+    "--spectrum-accent-background-color-hover",
+    "--spectrum-accent-background-color-key-focus",
     "--spectrum-animation-duration-100",
     "--spectrum-animation-duration-200",
     "--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",
     "--spectrum-component-height-75",
+    "--spectrum-component-size-difference-down",
+    "--spectrum-component-size-minimum-perspective-down",
     "--spectrum-component-top-to-text-100",
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-300",
     "--spectrum-component-top-to-text-75",
+    "--spectrum-corner-radius-full",
     "--spectrum-disabled-content-color",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
@@ -181,13 +207,12 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
-    "--spectrum-gray-200",
-    "--spectrum-gray-50",
+    "--spectrum-gray-25",
     "--spectrum-line-height-100",
-    "--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-background-color-default",
+    "--spectrum-neutral-background-color-down",
+    "--spectrum-neutral-background-color-hover",
+    "--spectrum-neutral-background-color-key-focus",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
     "--spectrum-neutral-content-color-hover",
@@ -201,22 +226,30 @@
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-switch-background-color",
+    "--highcontrast-switch-background-color-disabled",
     "--highcontrast-switch-background-color-selected-default",
     "--highcontrast-switch-background-color-selected-disabled",
     "--highcontrast-switch-background-color-selected-down",
     "--highcontrast-switch-background-color-selected-focus",
     "--highcontrast-switch-background-color-selected-hover",
+    "--highcontrast-switch-border-color-default",
+    "--highcontrast-switch-border-color-disabled",
+    "--highcontrast-switch-border-color-down",
+    "--highcontrast-switch-border-color-focus",
+    "--highcontrast-switch-border-color-hover",
+    "--highcontrast-switch-border-color-selected-default",
+    "--highcontrast-switch-border-color-selected-down",
+    "--highcontrast-switch-border-color-selected-focus",
+    "--highcontrast-switch-border-color-selected-hover",
     "--highcontrast-switch-focus-indicator-color",
     "--highcontrast-switch-handle-background-color",
-    "--highcontrast-switch-handle-border-color-default",
-    "--highcontrast-switch-handle-border-color-disabled",
-    "--highcontrast-switch-handle-border-color-down",
-    "--highcontrast-switch-handle-border-color-focus",
-    "--highcontrast-switch-handle-border-color-hover",
-    "--highcontrast-switch-handle-border-color-selected-default",
-    "--highcontrast-switch-handle-border-color-selected-down",
-    "--highcontrast-switch-handle-border-color-selected-focus",
-    "--highcontrast-switch-handle-border-color-selected-hover",
+    "--highcontrast-switch-handle-background-color-default",
+    "--highcontrast-switch-handle-background-color-disabled",
+    "--highcontrast-switch-handle-background-color-down",
+    "--highcontrast-switch-handle-background-color-focus",
+    "--highcontrast-switch-handle-background-color-hover",
+    "--highcontrast-switch-handle-background-color-selected",
+    "--highcontrast-switch-handle-background-color-selected-disabled",
     "--highcontrast-switch-label-color-default",
     "--highcontrast-switch-label-color-disabled",
     "--highcontrast-switch-label-color-down",