From c5ee677597ce6affaafd155346fd34c6efab72cd Mon Sep 17 00:00:00 2001 From: Ruben Carvalho Date: Tue, 21 Jan 2025 21:41:23 +0100 Subject: [PATCH] feat(opacity-checkerboard): bump CSS version --- tools/opacity-checkerboard/package.json | 2 +- .../src/spectrum-is-opacity-checkerboard.css | 46 +++++++++++++++---- .../src/spectrum-opacity-checkerboard.css | 46 +++++++++++++++---- .../styles/tokens-v2/system-theme-bridge.css | 10 ---- .../tokens/express/system-theme-bridge.css | 10 ---- .../tokens/spectrum/system-theme-bridge.css | 10 ---- yarn.lock | 12 ++--- 7 files changed, 83 insertions(+), 53 deletions(-) diff --git a/tools/opacity-checkerboard/package.json b/tools/opacity-checkerboard/package.json index 7943843711..e18137406d 100644 --- 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 index 844adb9d69..12e9222e01 100644 --- 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 index 0f55fda1b4..970f827f9b 100644 --- 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 index c894586955..6e3b447361 100644 --- 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 index f968128044..9cde926482 100644 --- 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 index 97a0203922..355569bf7f 100644 --- 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 index d80a2aa7ff..ed41359d94 100644 --- 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