feat(opacity-checkerboard): bump CSS version (#5040)

adobe · Jan 24, 2025 · e3bf6d3 · e3bf6d3
1 parent cdf6890
commit e3bf6d3
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 53 deletions.
diff --git a/tools/opacity-checkerboard/package.json b/tools/opacity-checkerboard/package.json
@@ -48,7 +48,7 @@
         "@spectrum-web-components/base": "^1.0.1"
     },
     "devDependencies": {
-        "@spectrum-css/opacitycheckerboard": "3.0.0-s2-foundations.15"
+        "@spectrum-css/opacitycheckerboard": "3.0.0-s2-foundations.17"
     },
     "types": "./src/opacity-checkerboard.d.ts",
     "sideEffects": [

diff --git a/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css b/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css
@@ -15,33 +15,63 @@ governing permissions and limitations under the License.
     background: repeating-conic-gradient(
             var(
                     --mod-opacity-checkerboard-light,
-                    var(--spectrum-opacity-checkerboard-light)
+                    var(--spectrum-opacity-checkerboard-square-light)
                 )
                 0 25%,
             var(
                     --mod-opacity-checkerboard-dark,
-                    var(--spectrum-opacity-checkerboard-dark)
+                    var(--spectrum-opacity-checkerboard-square-dark)
                 )
                 0 50%
         )
-        var(
-            --mod-opacity-checkerboard-position,
-            var(--spectrum-opacity-checkerboard-position)
-        ) /
+        0 0 /
         calc(
             var(
                     --mod-opacity-checkerboard-size,
-                    var(--spectrum-opacity-checkerboard-size)
+                    var(--spectrum-opacity-checkerboard-square-size)
                 ) * 2
         )
         calc(
             var(
                     --mod-opacity-checkerboard-size,
-                    var(--spectrum-opacity-checkerboard-size)
+                    var(--spectrum-opacity-checkerboard-square-size)
                 ) * 2
         );
 }
 
+@supports (
+    background:
+        repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg)
+) {
+    :host {
+        background: repeating-conic-gradient(
+                var(
+                        --mod-opacity-checkerboard-light,
+                        var(--spectrum-opacity-checkerboard-square-light)
+                    )
+                    0 25%,
+                var(
+                        --mod-opacity-checkerboard-dark,
+                        var(--spectrum-opacity-checkerboard-square-dark)
+                    )
+                    0 50%
+            )
+            var(--mod-opacity-checkerboard-position, left top) /
+            calc(
+                var(
+                        --mod-opacity-checkerboard-size,
+                        var(--spectrum-opacity-checkerboard-square-size)
+                    ) * 2
+            )
+            calc(
+                var(
+                        --mod-opacity-checkerboard-size,
+                        var(--spectrum-opacity-checkerboard-square-size)
+                    ) * 2
+            );
+    }
+}
+
 @media (forced-colors: active) {
     :host {
         forced-color-adjust: none;

diff --git a/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css b/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css
@@ -15,33 +15,63 @@ governing permissions and limitations under the License.
     background: repeating-conic-gradient(
             var(
                     --mod-opacity-checkerboard-light,
-                    var(--spectrum-opacity-checkerboard-light)
+                    var(--spectrum-opacity-checkerboard-square-light)
                 )
                 0 25%,
             var(
                     --mod-opacity-checkerboard-dark,
-                    var(--spectrum-opacity-checkerboard-dark)
+                    var(--spectrum-opacity-checkerboard-square-dark)
                 )
                 0 50%
         )
-        var(
-            --mod-opacity-checkerboard-position,
-            var(--spectrum-opacity-checkerboard-position)
-        ) /
+        0 0 /
         calc(
             var(
                     --mod-opacity-checkerboard-size,
-                    var(--spectrum-opacity-checkerboard-size)
+                    var(--spectrum-opacity-checkerboard-square-size)
                 ) * 2
         )
         calc(
             var(
                     --mod-opacity-checkerboard-size,
-                    var(--spectrum-opacity-checkerboard-size)
+                    var(--spectrum-opacity-checkerboard-square-size)
                 ) * 2
         );
 }
 
+@supports (
+    background:
+        repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg)
+) {
+    .opacity-checkerboard {
+        background: repeating-conic-gradient(
+                var(
+                        --mod-opacity-checkerboard-light,
+                        var(--spectrum-opacity-checkerboard-square-light)
+                    )
+                    0 25%,
+                var(
+                        --mod-opacity-checkerboard-dark,
+                        var(--spectrum-opacity-checkerboard-square-dark)
+                    )
+                    0 50%
+            )
+            var(--mod-opacity-checkerboard-position, left top) /
+            calc(
+                var(
+                        --mod-opacity-checkerboard-size,
+                        var(--spectrum-opacity-checkerboard-square-size)
+                    ) * 2
+            )
+            calc(
+                var(
+                        --mod-opacity-checkerboard-size,
+                        var(--spectrum-opacity-checkerboard-square-size)
+                    ) * 2
+            );
+    }
+}
+
 @media (forced-colors: active) {
     .opacity-checkerboard {
         forced-color-adjust: none;

diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css
@@ -5306,16 +5306,6 @@
     --system-swatch-group-spacing-compact: var(--spectrum-spacing-50);
     --system-swatch-group-spacing-regular: var(--spectrum-spacing-75);
     --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100);
-    --system-opacity-checkerboard-dark: var(
-        --spectrum-opacity-checkerboard-square-dark
-    );
-    --system-opacity-checkerboard-light: var(
-        --spectrum-opacity-checkerboard-square-light
-    );
-    --system-opacity-checkerboard-size: var(
-        --spectrum-opacity-checkerboard-square-size
-    );
-    --system-opacity-checkerboard-position: left top;
     --system-switch-handle-border-color-default: var(--spectrum-gray-600);
     --system-switch-handle-border-color-hover: var(--spectrum-gray-700);
     --system-switch-handle-border-color-down: var(--spectrum-gray-800);

diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css
@@ -5304,16 +5304,6 @@
     --system-swatch-group-spacing-compact: var(--spectrum-spacing-50);
     --system-swatch-group-spacing-regular: var(--spectrum-spacing-75);
     --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100);
-    --system-opacity-checkerboard-dark: var(
-        --spectrum-opacity-checkerboard-square-dark
-    );
-    --system-opacity-checkerboard-light: var(
-        --spectrum-opacity-checkerboard-square-light
-    );
-    --system-opacity-checkerboard-size: var(
-        --spectrum-opacity-checkerboard-square-size
-    );
-    --system-opacity-checkerboard-position: left top;
     --system-switch-handle-border-color-default: var(--spectrum-gray-800);
     --system-switch-handle-border-color-hover: var(--spectrum-gray-900);
     --system-switch-handle-border-color-down: var(--spectrum-gray-900);

diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css
@@ -5308,16 +5308,6 @@
     --system-swatch-group-spacing-compact: var(--spectrum-spacing-50);
     --system-swatch-group-spacing-regular: var(--spectrum-spacing-75);
     --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100);
-    --system-opacity-checkerboard-dark: var(
-        --spectrum-opacity-checkerboard-square-dark
-    );
-    --system-opacity-checkerboard-light: var(
-        --spectrum-opacity-checkerboard-square-light
-    );
-    --system-opacity-checkerboard-size: var(
-        --spectrum-opacity-checkerboard-square-size
-    );
-    --system-opacity-checkerboard-position: left top;
     --system-switch-handle-border-color-default: var(--spectrum-gray-600);
     --system-switch-handle-border-color-hover: var(--spectrum-gray-700);
     --system-switch-handle-border-color-down: var(--spectrum-gray-800);

diff --git a/yarn.lock b/yarn.lock
@@ -7854,12 +7854,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@spectrum-css/opacitycheckerboard@npm:3.0.0-s2-foundations.15":
-  version: 3.0.0-s2-foundations.15
-  resolution: "@spectrum-css/opacitycheckerboard@npm:3.0.0-s2-foundations.15"
+"@spectrum-css/opacitycheckerboard@npm:3.0.0-s2-foundations.17":
+  version: 3.0.0-s2-foundations.17
+  resolution: "@spectrum-css/opacitycheckerboard@npm:3.0.0-s2-foundations.17"
   peerDependencies:
-    "@spectrum-css/tokens": ">=14"
-  checksum: 10c0/e623fb7528aea1a77166fecc1427bb5643a9e34ad4db4b2b9a06f84abc9056bee7121adac1584047e51e3a9ac8b5b5772690ee5c4a51529d629eb8fa63d69561
+    "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
+  checksum: 10c0/ebed9bb7f7ca248fdd35f91debc513bc6e885f3c06d86f0759500b72182467c28a165dbb2980265ecdd926a8e259d785f3cddc98c0d487d212d37cc749ae001c
   languageName: node
   linkType: hard
 
@@ -8925,7 +8925,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-web-components/opacity-checkerboard@workspace:tools/opacity-checkerboard"
   dependencies:
-    "@spectrum-css/opacitycheckerboard": "npm:3.0.0-s2-foundations.15"
+    "@spectrum-css/opacitycheckerboard": "npm:3.0.0-s2-foundations.17"
     "@spectrum-web-components/base": "npm:^1.0.1"
   languageName: unknown
   linkType: soft