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/stories/switch.stories.js

@@ -62,6 +62,31 @@ WithForcedColors.parameters = {
 		forcedColors: "active",
 		modes: disableDefaultModes
 	},
+	decorators: [
+		(Story, context) => html`
+			<style>
+				.spectrum-Detail { display: inline-block; }
+				.spectrum-Typography > div {
+					border: 1px solid var(--spectrum-gray-200);
+					border-radius: 4px;
+					padding: 0 1em 1em;
+					/* Why seafoam? Because it separates it from the component styles. */
+					--mod-detail-font-color: var(--spectrum-seafoam-900);
+				}
+			</style>
+			<div
+				style=${styleMap({
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "flex-start",
+					gap: "1rem",
+					"--mod-detail-margin-end": ".3rem",
+				})}
+			>
+				${Story(context)}
+			</div>
+		`,
+	],
 };
 
 // ********* DOCS ONLY ********* //