feat(thumbnail-opacity-checkboard): s2 migration

adobe · Nov 12, 2024 · 87bbb9c · 87bbb9c
1 parent 2c62239
commit 87bbb9c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/.changeset/afraid-ladybugs-smile.md 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
@@ -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
@@ -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>