feat(thumbnail-opacity-checkboard): fix token rule

adobe · Nov 19, 2024 · 1e7042e · 1e7042e
1 parent a11f87f
commit 1e7042e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 44 deletions.
diff --git a/components/opacitycheckerboard/index.css b/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) {

diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css
@@ -33,10 +33,6 @@ 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);
 }
@@ -127,6 +123,10 @@ governing permissions and limitations under the License.
 			overflow: hidden;
 			border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
 		}
+
+		& .spectrum-OpacityCheckerboard {
+			--spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square- size);
+		}
 	}
 	/* stylelint-enable selector-pseudo-class-no-unknown */