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

@@ -8,53 +8,22 @@ express or implied. See the License for the specific language governing
 permissions and limitations under the License. */
 
 .spectrum-OpacityCheckerboard {
-	--spectrum-opacity-checkerboard-dark: var(
-		--spectrum-opacity-checkerboard-square-dark
-	);
-	--spectrum-opacity-checkerboard-light: var(
-		--spectrum-opacity-checkerboard-square-light
-	);
-	--spectrum-opacity-checkerboard-size: var(
-		--spectrum-opacity-checkerboard-square-size-medium
-	);
+	--spectrum-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark);
+	--spectrum-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light);
+	--spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size-medium);
 	--spectrum-opacity-checkerboard-position: left top;
 }
 
 .spectrum-OpacityCheckerboard--sizeS {
-	--spectrum-opacity-checkerboard-size: var(
-		--spectrum-opacity-checkerboard-square-size-small
-	);
+	--spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size-small);
 }
 
 .spectrum-OpacityCheckerboard {
-	background: repeating-conic-gradient(
-			var(
-					--mod-opacity-checkerboard-light,
-					var(--spectrum-opacity-checkerboard-light)
-				)
-				0% 25%,
-			var(
-					--mod-opacity-checkerboard-dark,
-					var(--spectrum-opacity-checkerboard-dark)
-				)
-				0% 50%
-		)
-		var(
-			--mod-opacity-checkerboard-position,
-			var(--spectrum-opacity-checkerboard-position)
-		) /
-		calc(
-			var(
-					--mod-opacity-checkerboard-size,
-					var(--spectrum-opacity-checkerboard-size)
-				) * 2
-		)
-		calc(
-			var(
-					--mod-opacity-checkerboard-size,
-					var(--spectrum-opacity-checkerboard-size)
-				) * 2
-		);
+	background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-light)) 0% 25%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-dark)) 0% 50%) var(--mod-opacity-checkerboard-position, var(--spectrum-opacity-checkerboard-position)) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2);
+
+	.spectrum-Thumbnail & {
+		--spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size);
+	}
 }
 
 @media (forced-colors: active) {

components/thumbnail/index.css

@@ -17,7 +17,7 @@ governing permissions and limitations under the License.
 	--spectrum-thumbnail-border-width: var(--spectrum-border-width-100);
 
 	/* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
-	--spectrum-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-color-opacity));
+	--spectrum-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity));
 	--spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400);
 	--spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white);
 	--spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100);

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>