feat(thumbnail-opacity-checkboard): S2 migration (#3394)

* feat(thumbnail-opacity-checkboard): s2 migration
* feat(thumbnail-opacity-checkboard): fix token rule
* feat(thumbnail-opacity-checkboard): fix typo, update changeset, move rule
* feat(thumbnail-opacity-checkboard): drop unnecessary styles
* feat(thumbnail-opacity-checkboard): update token
* feat(thumbnail-opacity-checkboard): update changeset

Author: cdransf

.changeset/twenty-tables-know.md

@@ -0,0 +1,10 @@
+---
+"@spectrum-css/opacitycheckerboard": major
+"@spectrum-css/thumbnail": minor
+---
+
+# thumbnail-opacity-checkerboard S2 migration
+
+Adds thumbnail specific `thumbnail-opacity-checkerboard-square-size` token aliased to `--spectrum-opacity-checkerboard-size`. This impacts the display of the `opacity-checkerboard` when used within the `thumbnail` component.
+
+This also corrects an issue with a token name in the `thumbnail` component by renaming `--spectrum-thumbnail-border-color-opacity` to `--spectrum-thumbnail-border-opacity`.

components/opacitycheckerboard/index.css

@@ -24,11 +24,7 @@
 }
 
 .spectrum-OpacityCheckerboard {
-	background:
-		repeating-conic-gradient(var(--spectrum-opacity-checkerboard-light) 0% 25%, var(--spectrum-opacity-checkerboard-dark) 0% 50%)
-		var(--spectrum-opacity-checkerboard-position) /
-		calc(var(--spectrum-opacity-checkerboard-size) * 2)
-		calc(var(--spectrum-opacity-checkerboard-size) * 2);
+	background: repeating-conic-gradient(var(--spectrum-opacity-checkerboard-light) 0% 25%, var(--spectrum-opacity-checkerboard-dark) 0% 50%) var(--spectrum-opacity-checkerboard-position) / calc(var(--spectrum-opacity-checkerboard-size) * 2) calc(var(--spectrum-opacity-checkerboard-size) * 2);
 }
 
 @media (forced-colors: active) {

components/thumbnail/dist/metadata.json

@@ -60,6 +60,7 @@
     "--spectrum-thumbnail-layer-border-color-outer",
     "--spectrum-thumbnail-layer-border-width-inner",
     "--spectrum-thumbnail-layer-border-width-outer",
+    "--spectrum-thumbnail-opacity-checkerboard-square-size",
     "--spectrum-thumbnail-opacity-disabled",
     "--spectrum-thumbnail-size",
     "--spectrum-thumbnail-size-100",
@@ -88,7 +89,7 @@
     "--spectrum-white"
   ],
   "system-theme": [],
-  "passthroughs": [],
+  "passthroughs": ["--mod-opacity-checkerboard-size"],
   "high-contrast": [
     "--highcontrast-thumbnail-border-color",
     "--highcontrast-thumbnail-border-color-selected",

components/thumbnail/index.css

@@ -32,6 +32,9 @@
 	--spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color);
 
 	--spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);
+
+	/* @passthrough -- custom sizing for opacity checkerboard */
+	--mod-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size);
 }
 
 .spectrum-Thumbnail--size50 {

components/thumbnail/stories/template.js

@@ -121,9 +121,6 @@ export const Template = ({
 			${OpacityCheckerboard({
 				rootClass: backgroundColor ? `${rootClass}-image-wrapper` : undefined,
 				customClasses: isLayer ? [`${rootClass}-layer-inner`] : !backgroundColor ? [`${rootClass}-image-wrapper`] : [],
-				customStyles: {
-					"--spectrum-opacity-checkerboard-size": "var(--spectrum-thumbnail-opacity-checkerboard-square-size)"
-				},
 				content: image ? [image] : [],
 			}, context)}
 		</div>