From ff84786eda3e52f3ff6715616fd185ea172d05e6 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 4 Apr 2025 22:11:31 +0000 Subject: [PATCH 1/2] chore: update dependency @spectrum-css/swatchgroup to v5 --- packages/swatch/package.json | 2 +- packages/swatch/src/spectrum-swatch-group.css | 9 ++++++--- .../swatch/src/swatch-group-overrides.css | 11 ----------- .../styles/tokens-v2/system-theme-bridge.css | 3 --- .../tokens/express/system-theme-bridge.css | 3 --- .../tokens/spectrum/system-theme-bridge.css | 3 --- yarn.lock | 19 ++++++++++++------- 7 files changed, 19 insertions(+), 31 deletions(-) diff --git a/packages/swatch/package.json b/packages/swatch/package.json index fd032d43eee..fba7454b4ec 100644 --- a/packages/swatch/package.json +++ b/packages/swatch/package.json @@ -84,7 +84,7 @@ }, "devDependencies": { "@spectrum-css/swatch": "7.0.0-s2-foundations.17", - "@spectrum-css/swatchgroup": "4.0.0-s2-foundations.15" + "@spectrum-css/swatchgroup": "5.1.0" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/swatch/src/spectrum-swatch-group.css b/packages/swatch/src/spectrum-swatch-group.css index db6e58770e7..d839dc9f8ab 100644 --- a/packages/swatch/src/spectrum-swatch-group.css +++ b/packages/swatch/src/spectrum-swatch-group.css @@ -12,17 +12,20 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-swatchgroup-spacing: var(--spectrum-spacing-75); justify-content: flex-start; align-items: flex-start; - gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing-regular)); + gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing)); flex-flow: wrap; display: inline-flex; } :host([density='compact']) { - gap: var(--mod-swatchgroup-spacing-compact, var(--spectrum-swatchgroup-spacing-compact)); + --mod-swatchgroup-spacing-regular: var(--mod-swatchgroup-spacing-compact); + --spectrum-swatchgroup-spacing: var(--spectrum-spacing-50); } :host([density='spacious']) { - gap: var(--mod-swatchgroup-spacing-spacious, var(--spectrum-swatchgroup-spacing-spacious)); + --mod-swatchgroup-spacing-regular: var(--mod-swatchgroup-spacing-spacious); + --spectrum-swatchgroup-spacing: var(--spectrum-spacing-100); } diff --git a/packages/swatch/src/swatch-group-overrides.css b/packages/swatch/src/swatch-group-overrides.css index de02ecf88db..b1cee0dbcdb 100644 --- a/packages/swatch/src/swatch-group-overrides.css +++ b/packages/swatch/src/swatch-group-overrides.css @@ -11,14 +11,3 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-swatchgroup-spacing-compact: var( - --system-swatch-group-spacing-compact - ); - --spectrum-swatchgroup-spacing-regular: var( - --system-swatch-group-spacing-regular - ); - --spectrum-swatchgroup-spacing-spacious: var( - --system-swatch-group-spacing-spacious - ); -} diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css index 96254b86179..245408e73dc 100644 --- a/tools/styles/tokens-v2/system-theme-bridge.css +++ b/tools/styles/tokens-v2/system-theme-bridge.css @@ -1166,9 +1166,6 @@ --system-swatch-size-l-slash-thickness: var( --spectrum-swatch-slash-thickness-large ); - --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-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 da5ea704da0..5c3ddec19ee 100644 --- a/tools/styles/tokens/express/system-theme-bridge.css +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -1181,9 +1181,6 @@ --system-swatch-size-l-slash-thickness: var( --spectrum-swatch-slash-thickness-large ); - --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-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 6f3341534a8..e1f0d466e2e 100644 --- a/tools/styles/tokens/spectrum/system-theme-bridge.css +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -1181,9 +1181,6 @@ --system-swatch-size-l-slash-thickness: var( --spectrum-swatch-slash-thickness-large ); - --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-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 df64c00d835..721e18912f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8108,13 +8108,18 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/swatchgroup@npm:4.0.0-s2-foundations.15": - version: 4.0.0-s2-foundations.15 - resolution: "@spectrum-css/swatchgroup@npm:4.0.0-s2-foundations.15" +"@spectrum-css/swatchgroup@npm:5.1.0": + version: 5.1.0 + resolution: "@spectrum-css/swatchgroup@npm:5.1.0" peerDependencies: - "@spectrum-css/swatch": ">=6" - "@spectrum-css/tokens": ">=14" - checksum: 10c0/7c5c2416479d8602c009f191e71a046af33ca96e3bb4b847586a568e52a5cb884e75cf02457d0c87aa8b5130c6817a328ea124b47c5a04dabc5918b4d8df5497 + "@spectrum-css/swatch": ">=8.0.0 <9.0.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + peerDependenciesMeta: + "@spectrum-css/swatch": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/2f0b5e818272c948e41a3b2372e1804266a5cbf1c296bfbade8dfd5eabe9b01366e971dc946e72c829641732171513ddfc2131c5348f0ba64a5d7f3d7c22e37b languageName: node linkType: hard @@ -9274,7 +9279,7 @@ __metadata: dependencies: "@lit-labs/observers": "npm:^2.0.2" "@spectrum-css/swatch": "npm:7.0.0-s2-foundations.17" - "@spectrum-css/swatchgroup": "npm:4.0.0-s2-foundations.15" + "@spectrum-css/swatchgroup": "npm:5.1.0" "@spectrum-web-components/base": "npm:1.5.0" "@spectrum-web-components/icon": "npm:1.5.0" "@spectrum-web-components/icons-ui": "npm:1.5.0" From 0bbb7d40c84c5be2ca504fd38297f59d85b76ac6 Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Fri, 4 Apr 2025 19:06:35 -0400 Subject: [PATCH 2/2] fix(swatch,styles): use latest CSS --- .changeset/stale-candies-camp.md | 1 + packages/swatch/package.json | 2 +- packages/swatch/src/spectrum-swatch.css | 56 ++++++++++--- packages/swatch/src/swatch-group.css | 1 - packages/swatch/src/swatch-overrides.css | 81 +------------------ .../styles/tokens-v2/system-theme-bridge.css | 63 +-------------- .../tokens/express/system-theme-bridge.css | 63 +-------------- .../tokens/spectrum/system-theme-bridge.css | 63 +-------------- yarn.lock | 19 +++-- 9 files changed, 66 insertions(+), 283 deletions(-) diff --git a/.changeset/stale-candies-camp.md b/.changeset/stale-candies-camp.md index e413a50f479..e59f7393025 100644 --- a/.changeset/stale-candies-camp.md +++ b/.changeset/stale-candies-camp.md @@ -5,6 +5,7 @@ '@spectrum-web-components/menu': patch '@spectrum-web-components/status-light': patch '@spectrum-web-components/styles': patch +'@spectrum-web-components/swatch': patch '@spectrum-web-components/switch': patch '@spectrum-web-components/table': patch '@spectrum-web-components/tabs': patch diff --git a/packages/swatch/package.json b/packages/swatch/package.json index fba7454b4ec..aa64d4bcd91 100644 --- a/packages/swatch/package.json +++ b/packages/swatch/package.json @@ -83,7 +83,7 @@ "@spectrum-web-components/shared": "1.5.0" }, "devDependencies": { - "@spectrum-css/swatch": "7.0.0-s2-foundations.17", + "@spectrum-css/swatch": "8.1.2", "@spectrum-css/swatchgroup": "5.1.0" }, "types": "./src/index.d.ts", diff --git a/packages/swatch/src/spectrum-swatch.css b/packages/swatch/src/spectrum-swatch.css index e9de6d38d97..42bd3c1df65 100644 --- a/packages/swatch/src/spectrum-swatch.css +++ b/packages/swatch/src/spectrum-swatch.css @@ -31,7 +31,43 @@ governing permissions and limitations under the License. } } +:host, +:host([size='s']) { + --spectrum-swatch-size: var(--spectrum-swatch-size-small); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); +} + +:host([size='xs']) { + --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); +} + +:host { + --spectrum-swatch-size: var(--spectrum-swatch-size-medium); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); +} + +:host([size='l']) { + --spectrum-swatch-size: var(--spectrum-swatch-size-large); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large); +} + :host { + --spectrum-swatch-focus-indicator-border-radius: 8px; + --spectrum-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-disabled-icon-border-opacity)); + --spectrum-swatch-disabled-icon-color: var(--spectrum-white); + --spectrum-swatch-border-thickness: var(--spectrum-border-width-100); + --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); + --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); + --spectrum-swatch-slash-icon-color: var(--spectrum-red-900); + --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); block-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); -webkit-user-select: none; @@ -54,7 +90,7 @@ governing permissions and limitations under the License. } :host([selected]) { - background-color: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected))); + background: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected))); } :host([selected]) .fill { @@ -77,7 +113,7 @@ governing permissions and limitations under the License. } :host .is-image .fill:before { - background-color: initial; + background: none; } :host([mixed-value]) .fill { @@ -91,8 +127,8 @@ governing permissions and limitations under the License. } :host([nothing]) .fill { - background-color: initial; - background-color: var(--spectrum-picked-color, transparent); + background: none; + background: var(--spectrum-picked-color, transparent); background-image: none; } @@ -156,24 +192,22 @@ governing permissions and limitations under the License. .fill:before { content: ''; z-index: 0; + background: none; + background: var(--spectrum-picked-color, transparent); box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--mod-swatch-border-color, var(--spectrum-swatch-border-color))); border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); position: absolute; inset: 0; } -:host([border='none']) .fill:before, -.fill:before { - background-color: initial; - background-color: var(--spectrum-picked-color, transparent); -} - :host([border='none']) .fill:before { box-shadow: none; + background: none; + background: var(--spectrum-picked-color, transparent); } :host([border='light']) .fill:before { - box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color-light, var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light))); + box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light)); } .mixedValueIcon { diff --git a/packages/swatch/src/swatch-group.css b/packages/swatch/src/swatch-group.css index 8a55d2eb977..03e95742a68 100644 --- a/packages/swatch/src/swatch-group.css +++ b/packages/swatch/src/swatch-group.css @@ -11,4 +11,3 @@ governing permissions and limitations under the License. */ @import url('./spectrum-swatch-group.css'); -@import url('./swatch-group-overrides.css'); diff --git a/packages/swatch/src/swatch-overrides.css b/packages/swatch/src/swatch-overrides.css index 24387efc7ca..83ae5674c25 100644 --- a/packages/swatch/src/swatch-overrides.css +++ b/packages/swatch/src/swatch-overrides.css @@ -11,89 +11,10 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host([size='l']) { - --spectrum-swatch-size: var(--system-swatch-size-l-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-size-l-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var( - --system-swatch-size-l-slash-thickness - ); -} - -:host([size='s']) { - --spectrum-swatch-size: var(--system-swatch-size-s-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-size-s-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var( - --system-swatch-size-s-slash-thickness - ); -} - -:host([size='xs']) { - --spectrum-swatch-size: var(--system-swatch-size-xs-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-size-xs-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var( - --system-swatch-size-xs-slash-thickness - ); -} - -:host { - --spectrum-swatch-size: var(--system-swatch-size-m-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-size-m-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var( - --system-swatch-size-m-slash-thickness - ); -} - :host { - --spectrum-swatch-border-radius: var(--system-swatch-border-radius); - --spectrum-swatch-focus-indicator-border-radius: var( - --system-swatch-focus-indicator-border-radius - ); - --spectrum-swatch-border-thickness: var(--system-swatch-border-thickness); - --spectrum-swatch-border-thickness-selected: var( - --system-swatch-border-thickness-selected - ); - --spectrum-swatch-focus-indicator-thickness: var( - --system-swatch-focus-indicator-thickness - ); - --spectrum-swatch-focus-indicator-gap: var( - --system-swatch-focus-indicator-gap - ); - --spectrum-swatch-border-color-opacity: var( - --system-swatch-border-color-opacity - ); - --spectrum-swatch-border-color-light-opacity: var( - --system-swatch-border-color-light-opacity - ); --spectrum-swatch-border-color: var(--system-swatch-border-color); - --spectrum-swatch-icon-border-color: var(--system-swatch-icon-border-color); - --spectrum-swatch-border-color-light: var( - --system-swatch-border-color-light - ); - --spectrum-swatch-border-color-selected: var( - --system-swatch-border-color-selected - ); --spectrum-swatch-inner-border-color-selected: var( --system-swatch-inner-border-color-selected ); - --spectrum-swatch-disabled-icon-color: var( - --system-swatch-disabled-icon-color - ); - --spectrum-swatch-dash-icon-color: var(--system-swatch-dash-icon-color); - --spectrum-swatch-slash-icon-color: var(--system-swatch-slash-icon-color); - --spectrum-swatch-focus-indicator-color: var( - --system-swatch-focus-indicator-color - ); - --spectrum-swatch-size: var(--system-swatch-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var(--system-swatch-slash-thickness); + --spectrum-swatch-border-radius: var(--system-swatch-border-radius); } diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css index 245408e73dc..6af10d1725c 100644 --- a/tools/styles/tokens-v2/system-theme-bridge.css +++ b/tools/styles/tokens-v2/system-theme-bridge.css @@ -1101,71 +1101,12 @@ --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); --system-stepper-quiet-buttons-border-style: none; --system-stepper-quiet-button-edge-to-fill: 0; - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; --system-swatch-border-color: rgba( var(--spectrum-gray-1000-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) + var(--spectrum-swatch-border-color-opacity) ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) - ); - --system-swatch-border-color-selected: var(--spectrum-gray-900); --system-swatch-inner-border-color-selected: var(--spectrum-gray-25); - --system-swatch-disabled-icon-color: var(--spectrum-gray-25); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); + --system-swatch-border-radius: var(--spectrum-corner-radius-75); --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 5c3ddec19ee..4ad23a9e2cb 100644 --- a/tools/styles/tokens/express/system-theme-bridge.css +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -1116,71 +1116,12 @@ ); --system-stepper-quiet-buttons-border-style: none; --system-stepper-quiet-button-edge-to-fill: 0; - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; --system-swatch-border-color: rgba( var(--spectrum-gray-900-rgb), - var(--system-swatch-border-color-opacity) + var(--spectrum-swatch-border-color-opacity) ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) - ); - --system-swatch-border-color-selected: var(--spectrum-gray-900); --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --system-swatch-disabled-icon-color: var(--spectrum-gray-50); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); + --system-swatch-border-radius: var(--spectrum-corner-radius-100); --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 e1f0d466e2e..9659566d989 100644 --- a/tools/styles/tokens/spectrum/system-theme-bridge.css +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -1116,71 +1116,12 @@ ); --system-stepper-quiet-buttons-border-style: none; --system-stepper-quiet-button-edge-to-fill: 0; - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; --system-swatch-border-color: rgba( var(--spectrum-gray-900-rgb), - var(--system-swatch-border-color-opacity) + var(--spectrum-swatch-border-color-opacity) ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) - ); - --system-swatch-border-color-selected: var(--spectrum-gray-900); --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --system-swatch-disabled-icon-color: var(--spectrum-gray-50); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); + --system-swatch-border-radius: var(--spectrum-corner-radius-100); --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 721e18912f8..4f6b25496a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8098,13 +8098,18 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/swatch@npm:7.0.0-s2-foundations.17": - version: 7.0.0-s2-foundations.17 - resolution: "@spectrum-css/swatch@npm:7.0.0-s2-foundations.17" +"@spectrum-css/swatch@npm:8.1.2": + version: 8.1.2 + resolution: "@spectrum-css/swatch@npm:8.1.2" peerDependencies: - "@spectrum-css/opacitycheckerboard": ">=2" - "@spectrum-css/tokens": ">=14.5.0" - checksum: 10c0/80016a4c10276abc6376e854cff1aaa84a3499085f8b5afa80f8af365ce7cd79cf1f46f1fc74d1caf1fbf578621f327210f966b50e9c147156c2f0e0a547d73f + "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + peerDependenciesMeta: + "@spectrum-css/opacitycheckerboard": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/1b9aceb3211bd9b8a60ae55ab982dd1e9f845e5d40c140692824bc3bd98ec1b24b0d809078906f318ccd92c3a79eeccf5b129391d4f89ab2588574fbc5206687 languageName: node linkType: hard @@ -9278,7 +9283,7 @@ __metadata: resolution: "@spectrum-web-components/swatch@workspace:packages/swatch" dependencies: "@lit-labs/observers": "npm:^2.0.2" - "@spectrum-css/swatch": "npm:7.0.0-s2-foundations.17" + "@spectrum-css/swatch": "npm:8.1.2" "@spectrum-css/swatchgroup": "npm:5.1.0" "@spectrum-web-components/base": "npm:1.5.0" "@spectrum-web-components/icon": "npm:1.5.0"