From b05d5edbce06a8bd1c22509e7e8a30390baba143 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Tue, 12 Nov 2024 14:56:14 -0800
Subject: [PATCH] feat(thumbnail-opacity-checkboard): s2 migration

---
 .changeset/afraid-ladybugs-smile.md      | 5 +++++
 components/thumbnail/index.css           | 4 ++++
 components/thumbnail/stories/template.js | 3 ---
 3 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/afraid-ladybugs-smile.md

diff --git a/.changeset/afraid-ladybugs-smile.md b/.changeset/afraid-ladybugs-smile.md
new file mode 100644
index 00000000000..e1d71dcd816
--- /dev/null
+++ b/.changeset/afraid-ladybugs-smile.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/thumbnail": major
+---
+
+Adds thumbnail specific `--spectrum-opacity-checkerboard-size` token. This impacts the display of the `opacity-checkerboard` when used within the `thumbnail` component.
diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css
index 97f5c014719..031685d34b6 100644
--- a/components/thumbnail/index.css
+++ b/components/thumbnail/index.css
@@ -33,6 +33,10 @@ governing permissions and limitations under the License.
 	--spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);
 }
 
+.spectrum-OpacityCheckerboard {
+	--spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size);
+}
+
 .spectrum-Thumbnail--size50 {
 	--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50);
 }
diff --git a/components/thumbnail/stories/template.js b/components/thumbnail/stories/template.js
index 623ff770e2c..4c292705599 100644
--- a/components/thumbnail/stories/template.js
+++ b/components/thumbnail/stories/template.js
@@ -113,9 +113,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] : [],
 			})}
 		</div>