feat(closebutton)!: migrate to S2 (#2564)

BREAKING CHANGE: migrates Close Button to Spectrum 2

Additionally:
* test: increase chromatic coverage
* fix(closebutton): pass staticColor as arg for SB display
* chore(closebutton): remove themes dir
* docs(closebutton): adds s2 migration notes
* chore(closebutton): specify s2 tokens release for dependency

---------

Co-authored-by: Patrick Fulton <pfulton@adobe.com>

Author: 2 people

components/closebutton/dist/metadata.json

@@ -2,45 +2,16 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-CloseButton",
+    ".spectrum-CloseButton--sizeL",
+    ".spectrum-CloseButton--sizeS",
+    ".spectrum-CloseButton--sizeXL",
     ".spectrum-CloseButton--staticBlack",
-    ".spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled)",
-    ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticBlack:disabled .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticBlack:not(:disabled)",
-    ".spectrum-CloseButton--staticBlack:not(:disabled) .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticBlack:not(:disabled):active",
-    ".spectrum-CloseButton--staticBlack:not(:disabled):active .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticBlack:not(:disabled):focus .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticBlack:not(:disabled):focus-visible",
-    ".spectrum-CloseButton--staticBlack:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticBlack:not(:disabled):hover",
-    ".spectrum-CloseButton--staticBlack:not(:disabled):hover .spectrum-CloseButton-UIIcon",
     ".spectrum-CloseButton--staticWhite",
-    ".spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled)",
-    ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticWhite:disabled .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticWhite:not(:disabled)",
-    ".spectrum-CloseButton--staticWhite:not(:disabled) .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticWhite:not(:disabled):active",
-    ".spectrum-CloseButton--staticWhite:not(:disabled):active .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticWhite:not(:disabled):focus .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticWhite:not(:disabled):focus-visible",
-    ".spectrum-CloseButton--staticWhite:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton--staticWhite:not(:disabled):hover",
-    ".spectrum-CloseButton--staticWhite:not(:disabled):hover .spectrum-CloseButton-UIIcon",
     ".spectrum-CloseButton-UIIcon",
     ".spectrum-CloseButton.is-disabled",
     ".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
     ".spectrum-CloseButton.is-keyboardFocused:not(:disabled)",
     ".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton.spectrum-CloseButton--sizeL",
-    ".spectrum-CloseButton.spectrum-CloseButton--sizeM",
-    ".spectrum-CloseButton.spectrum-CloseButton--sizeS",
-    ".spectrum-CloseButton.spectrum-CloseButton--sizeXL",
-    ".spectrum-CloseButton.spectrum-CloseButton--staticBlack",
-    ".spectrum-CloseButton.spectrum-CloseButton--staticWhite",
     ".spectrum-CloseButton::-moz-focus-inner",
     ".spectrum-CloseButton:after",
     ".spectrum-CloseButton:disabled",
@@ -72,7 +43,6 @@
     "--mod-closebutton-focus-indicator-color",
     "--mod-closebutton-focus-indicator-gap",
     "--mod-closebutton-focus-indicator-thickness",
-    "--mod-closebutton-height",
     "--mod-closebutton-icon-color-default",
     "--mod-closebutton-icon-color-disabled",
     "--mod-closebutton-icon-color-down",
@@ -81,11 +51,6 @@
     "--mod-closebutton-margin-inline",
     "--mod-closebutton-margin-top",
     "--mod-closebutton-size",
-    "--mod-closebutton-static-background-color-default",
-    "--mod-closebutton-static-background-color-down",
-    "--mod-closebutton-static-background-color-focus",
-    "--mod-closebutton-static-background-color-hover",
-    "--mod-closebutton-width",
     "--mod-line-height-100",
     "--mod-sans-font-family-stack"
   ],
@@ -104,27 +69,22 @@
     "--spectrum-closebutton-icon-color-down",
     "--spectrum-closebutton-icon-color-focus",
     "--spectrum-closebutton-icon-color-hover",
-    "--spectrum-closebutton-size",
-    "--spectrum-closebutton-static-background-color-default",
-    "--spectrum-closebutton-static-background-color-down",
-    "--spectrum-closebutton-static-background-color-focus",
-    "--spectrum-closebutton-static-background-color-hover"
+    "--spectrum-closebutton-size"
   ],
   "global": [
     "--spectrum-animation-duration-100",
-    "--spectrum-black",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
+    "--spectrum-corner-radius-full",
     "--spectrum-disabled-content-color",
-    "--spectrum-disabled-static-black-content-color",
-    "--spectrum-disabled-static-white-content-color",
+    "--spectrum-disabled-static-black-background-color",
+    "--spectrum-disabled-static-white-background-color",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
     "--spectrum-gray-100",
-    "--spectrum-gray-200",
     "--spectrum-line-height-100",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
@@ -133,24 +93,14 @@
     "--spectrum-sans-font-family-stack",
     "--spectrum-static-black-focus-indicator-color",
     "--spectrum-static-white-focus-indicator-color",
-    "--spectrum-transparent-black-400",
-    "--spectrum-transparent-black-500",
-    "--spectrum-transparent-white-400",
-    "--spectrum-transparent-white-500",
-    "--spectrum-white"
-  ],
-  "system-theme": [
-    "--system-close-button-background-color-default",
-    "--system-close-button-background-color-down",
-    "--system-close-button-background-color-focus",
-    "--system-close-button-background-color-hover",
-    "--system-close-button-static-black-static-background-color-down",
-    "--system-close-button-static-black-static-background-color-focus",
-    "--system-close-button-static-black-static-background-color-hover",
-    "--system-close-button-static-white-static-background-color-down",
-    "--system-close-button-static-white-static-background-color-focus",
-    "--system-close-button-static-white-static-background-color-hover"
+    "--spectrum-transparent-black-100",
+    "--spectrum-transparent-black-800",
+    "--spectrum-transparent-black-900",
+    "--spectrum-transparent-white-100",
+    "--spectrum-transparent-white-800",
+    "--spectrum-transparent-white-900"
   ],
+  "system-theme": [],
   "passthroughs": [
     "--mod-button-animation-duration",
     "--mod-button-font-family",
@@ -159,11 +109,9 @@
   "high-contrast": [
     "--highcontrast-closebutton-background-color-default",
     "--highcontrast-closebutton-focus-indicator-color",
-    "--highcontrast-closebutton-icon-color-default",
     "--highcontrast-closebutton-icon-color-disabled",
     "--highcontrast-closebutton-icon-color-down",
     "--highcontrast-closebutton-icon-color-focus",
-    "--highcontrast-closebutton-icon-color-hover",
-    "--highcontrast-closebutton-static-background-color-default"
+    "--highcontrast-closebutton-icon-color-hover"
   ]
 }