From cda075ca7860422222b8b52afe63be85ea06cdd2 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 4 Apr 2025 22:57:46 +0000 Subject: [PATCH 1/2] chore: update dependency @spectrum-css/toast to v11.1.0 --- packages/toast/package.json | 2 +- yarn.lock | 27 ++++++++++++++++++--------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/toast/package.json b/packages/toast/package.json index 767aff9857c..c6dfa328c04 100644 --- a/packages/toast/package.json +++ b/packages/toast/package.json @@ -71,7 +71,7 @@ "@spectrum-web-components/shared": "1.4.0" }, "devDependencies": { - "@spectrum-css/toast": "11.0.0-s2-foundations.15" + "@spectrum-css/toast": "11.1.0" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/yarn.lock b/yarn.lock index 1f02d254cb3..6281ff9693b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7751,15 +7751,24 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/toast@npm:11.0.0-s2-foundations.15": - version: 11.0.0-s2-foundations.15 - resolution: "@spectrum-css/toast@npm:11.0.0-s2-foundations.15" +"@spectrum-css/toast@npm:11.1.0": + version: 11.1.0 + resolution: "@spectrum-css/toast@npm:11.1.0" peerDependencies: - "@spectrum-css/button": ">=13" - "@spectrum-css/closebutton": ">=5" - "@spectrum-css/icon": ">=7" - "@spectrum-css/tokens": ">=14" - checksum: 10c0/6016515f993d09cc10671a0a73b48c8ca4aeecc09656eea64fa39bcfcc8ac99858b881b4b90db5ef5c64260631fd2c1239dbebf1d25116ddfd70d7b3abd5246c + "@spectrum-css/button": ">=14.0.0 <15.0.0" + "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + peerDependenciesMeta: + "@spectrum-css/button": + optional: true + "@spectrum-css/closebutton": + optional: true + "@spectrum-css/icon": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/57cfbede496256fab633ee07f732555927b0006bcfd3a606b7282a3e483f4d8349e50bc2e09f9bb8f65cfb24fc50b2625ff89ae177b52fd308205cc699ea9815 languageName: node linkType: hard @@ -8866,7 +8875,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-web-components/toast@workspace:packages/toast" dependencies: - "@spectrum-css/toast": "npm:11.0.0-s2-foundations.15" + "@spectrum-css/toast": "npm:11.1.0" "@spectrum-web-components/base": "npm:1.4.0" "@spectrum-web-components/button": "npm:1.4.0" "@spectrum-web-components/icon": "npm:1.4.0" From 9b8dd1704e163d40812dc67c9cb833053106f0f1 Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Fri, 4 Apr 2025 22:41:09 -0400 Subject: [PATCH 2/2] fix(toast,styles): use latest CSS --- .changeset/brave-crews-win.md | 1 + packages/toast/src/spectrum-toast.css | 45 ++++++++++++---- packages/toast/src/toast-overrides.css | 54 ------------------- .../styles/tokens-v2/system-theme-bridge.css | 40 -------------- .../tokens/express/system-theme-bridge.css | 40 -------------- .../tokens/spectrum/system-theme-bridge.css | 40 -------------- 6 files changed, 37 insertions(+), 183 deletions(-) diff --git a/.changeset/brave-crews-win.md b/.changeset/brave-crews-win.md index 53f30ae7b92..16ebc02c527 100644 --- a/.changeset/brave-crews-win.md +++ b/.changeset/brave-crews-win.md @@ -23,6 +23,7 @@ '@spectrum-web-components/split-view': patch '@spectrum-web-components/styles': patch '@spectrum-web-components/tags': patch +'@spectrum-web-components/toast': patch '@spectrum-web-components/tray': patch '@spectrum-web-components/underlay': patch --- diff --git a/packages/toast/src/spectrum-toast.css b/packages/toast/src/spectrum-toast.css index d93c7811b9e..836bd421398 100644 --- a/packages/toast/src/spectrum-toast.css +++ b/packages/toast/src/spectrum-toast.css @@ -11,6 +11,33 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-toast-font-weight: var(--spectrum-regular-font-weight); + --spectrum-toast-font-size: var(--spectrum-font-size-100); + --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-toast-block-size: var(--spectrum-toast-height); + --spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --spectrum-toast-border-width: var(--spectrum-border-width-100); + --spectrum-toast-line-height: var(--spectrum-line-height-100); + --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300); + --spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300); + --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon); + --spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300); + --spectrum-toast-spacing-close-button: var(--spectrum-spacing-100); + --spectrum-toast-spacing-block-start: var(--spectrum-spacing-100); + --spectrum-toast-spacing-block-end: var(--spectrum-spacing-100); + --spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text); + --spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default); + --spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default); + --spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); + --spectrum-toast-text-and-icon-color: var(--spectrum-white); +} + @media (forced-colors: active) { :host { --highcontrast-toast-border-color: ButtonText; @@ -26,8 +53,8 @@ governing permissions and limitations under the License. font-size: var(--mod-toast-font-size, var(--spectrum-toast-font-size)); font-weight: var(--mod-toast-font-weight, var(--spectrum-toast-font-weight)); -webkit-font-smoothing: antialiased; - background-color: var(--highcontrast-toast-background-color-default, var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default))); - color: var(--highcontrast-toast-background-color-default, var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default))); + background-color: var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default)); + color: var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default)); overflow-wrap: anywhere; flex-direction: row; align-items: stretch; @@ -36,30 +63,30 @@ governing permissions and limitations under the License. } :host([variant='negative']) { - background-color: var(--highcontrast-toast-negative-background-color-default, var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default))); + background-color: var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default)); } :host([variant='negative']), :host([variant='negative']) .closeButton:focus-visible:not(:active) { - color: var(--highcontrast-toast-negative-background-color-default, var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default))); + color: var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default)); } :host([variant='info']) { - background-color: var(--highcontrast-toast-informative-background-color-default, var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default))); + background-color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default)); } :host([variant='info']), :host([variant='info']) .closeButton:focus-visible:not(:active) { - color: var(--highcontrast-toast-informative-background-color-default, var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default))); + color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default)); } :host([variant='positive']) { - background-color: var(--highcontrast-toast-positive-background-color-default, var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default))); + background-color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default)); } :host([variant='positive']), :host([variant='positive']) .closeButton:focus-visible:not(:active) { - color: var(--highcontrast-toast-positive-background-color-default, var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default))); + color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default)); } .type { @@ -72,7 +99,7 @@ governing permissions and limitations under the License. .content, .type { - color: var(--highcontrast-toast-text-and-icon-color, var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color))); + color: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color)); } .content { diff --git a/packages/toast/src/toast-overrides.css b/packages/toast/src/toast-overrides.css index 63fde370771..a6931f0c4c2 100644 --- a/packages/toast/src/toast-overrides.css +++ b/packages/toast/src/toast-overrides.css @@ -15,59 +15,5 @@ governing permissions and limitations under the License. --spectrum-toast-background-color-default: var( --system-toast-background-color-default ); - --spectrum-toast-font-weight: var(--system-toast-font-weight); - --spectrum-toast-font-size: var(--system-toast-font-size); - --spectrum-toast-corner-radius: var(--system-toast-corner-radius); - --spectrum-toast-block-size: var(--system-toast-block-size); - --spectrum-toast-max-inline-size: var(--system-toast-max-inline-size); - --spectrum-toast-border-width: var(--system-toast-border-width); - --spectrum-toast-line-height: var(--system-toast-line-height); - --spectrum-toast-line-height-cjk: var(--system-toast-line-height-cjk); - --spectrum-toast-spacing-icon-to-text: var( - --system-toast-spacing-icon-to-text - ); - --spectrum-toast-spacing-start-edge-to-text-and-icon: var( - --system-toast-spacing-start-edge-to-text-and-icon - ); - --spectrum-toast-spacing-text-and-action-button-to-divider: var( - --system-toast-spacing-text-and-action-button-to-divider - ); - --spectrum-toast-spacing-top-edge-to-divider: var( - --system-toast-spacing-top-edge-to-divider - ); - --spectrum-toast-spacing-bottom-edge-to-divider: var( - --system-toast-spacing-bottom-edge-to-divider - ); - --spectrum-toast-spacing-top-edge-to-icon: var( - --system-toast-spacing-top-edge-to-icon - ); - --spectrum-toast-spacing-text-to-action-button-horizontal: var( - --system-toast-spacing-text-to-action-button-horizontal - ); - --spectrum-toast-spacing-close-button: var( - --system-toast-spacing-close-button - ); - --spectrum-toast-spacing-block-start: var( - --system-toast-spacing-block-start - ); - --spectrum-toast-spacing-block-end: var(--system-toast-spacing-block-end); - --spectrum-toast-spacing-top-edge-to-text: var( - --system-toast-spacing-top-edge-to-text - ); - --spectrum-toast-spacing-bottom-edge-to-text: var( - --system-toast-spacing-bottom-edge-to-text - ); - --spectrum-toast-negative-background-color-default: var( - --system-toast-negative-background-color-default - ); - --spectrum-toast-positive-background-color-default: var( - --system-toast-positive-background-color-default - ); - --spectrum-toast-informative-background-color-default: var( - --system-toast-informative-background-color-default - ); - --spectrum-toast-text-and-icon-color: var( - --system-toast-text-and-icon-color - ); --spectrum-toast-divider-color: var(--system-toast-divider-color); } diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css index d03055d7516..1a73f9157c7 100644 --- a/tools/styles/tokens-v2/system-theme-bridge.css +++ b/tools/styles/tokens-v2/system-theme-bridge.css @@ -2363,46 +2363,6 @@ --system-toast-background-color-default: var( --spectrum-neutral-subdued-background-color-default ); - --system-toast-font-weight: var(--spectrum-regular-font-weight); - --system-toast-font-size: var(--spectrum-font-size-100); - --system-toast-corner-radius: var(--spectrum-corner-radius-100); - --system-toast-block-size: var(--spectrum-toast-height); - --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --system-toast-border-width: var(--spectrum-border-width-100); - --system-toast-line-height: var(--spectrum-line-height-100); - --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --system-toast-spacing-start-edge-to-text-and-icon: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-text-and-action-button-to-divider: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-icon: var( - --spectrum-toast-top-to-workflow-icon - ); - --system-toast-spacing-text-to-action-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-close-button: var(--spectrum-spacing-100); - --system-toast-spacing-block-start: var(--spectrum-spacing-100); - --system-toast-spacing-block-end: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --system-toast-spacing-bottom-edge-to-text: var( - --spectrum-toast-bottom-to-text - ); - --system-toast-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-toast-positive-background-color-default: var( - --spectrum-positive-background-color-default - ); - --system-toast-informative-background-color-default: var( - --spectrum-informative-background-color-default - ); - --system-toast-text-and-icon-color: var(--spectrum-white); --system-toast-divider-color: var(--spectrum-transparent-white-400); --system-tooltip-backgound-color-default-neutral: var( --spectrum-neutral-subdued-background-color-default diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css index c876e43d428..2c43fc61bb5 100644 --- a/tools/styles/tokens/express/system-theme-bridge.css +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -2372,46 +2372,6 @@ --system-toast-background-color-default: var( --spectrum-neutral-background-color-default ); - --system-toast-font-weight: var(--spectrum-regular-font-weight); - --system-toast-font-size: var(--spectrum-font-size-100); - --system-toast-corner-radius: var(--spectrum-corner-radius-100); - --system-toast-block-size: var(--spectrum-toast-height); - --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --system-toast-border-width: var(--spectrum-border-width-100); - --system-toast-line-height: var(--spectrum-line-height-100); - --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --system-toast-spacing-start-edge-to-text-and-icon: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-text-and-action-button-to-divider: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-icon: var( - --spectrum-toast-top-to-workflow-icon - ); - --system-toast-spacing-text-to-action-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-close-button: var(--spectrum-spacing-100); - --system-toast-spacing-block-start: var(--spectrum-spacing-100); - --system-toast-spacing-block-end: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --system-toast-spacing-bottom-edge-to-text: var( - --spectrum-toast-bottom-to-text - ); - --system-toast-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-toast-positive-background-color-default: var( - --spectrum-positive-background-color-default - ); - --system-toast-informative-background-color-default: var( - --spectrum-informative-background-color-default - ); - --system-toast-text-and-icon-color: var(--spectrum-white); --system-toast-divider-color: var(--spectrum-transparent-white-300); --system-tooltip-backgound-color-default-neutral: var( --spectrum-neutral-background-color-default diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css index 34903857868..d4fdf0e7a2b 100644 --- a/tools/styles/tokens/spectrum/system-theme-bridge.css +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -2376,46 +2376,6 @@ --system-toast-background-color-default: var( --spectrum-neutral-subdued-background-color-default ); - --system-toast-font-weight: var(--spectrum-regular-font-weight); - --system-toast-font-size: var(--spectrum-font-size-100); - --system-toast-corner-radius: var(--spectrum-corner-radius-100); - --system-toast-block-size: var(--spectrum-toast-height); - --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --system-toast-border-width: var(--spectrum-border-width-100); - --system-toast-line-height: var(--spectrum-line-height-100); - --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --system-toast-spacing-start-edge-to-text-and-icon: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-text-and-action-button-to-divider: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-icon: var( - --spectrum-toast-top-to-workflow-icon - ); - --system-toast-spacing-text-to-action-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-close-button: var(--spectrum-spacing-100); - --system-toast-spacing-block-start: var(--spectrum-spacing-100); - --system-toast-spacing-block-end: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --system-toast-spacing-bottom-edge-to-text: var( - --spectrum-toast-bottom-to-text - ); - --system-toast-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-toast-positive-background-color-default: var( - --spectrum-positive-background-color-default - ); - --system-toast-informative-background-color-default: var( - --spectrum-informative-background-color-default - ); - --system-toast-text-and-icon-color: var(--spectrum-white); --system-toast-divider-color: var(--spectrum-transparent-white-300); --system-tooltip-backgound-color-default-neutral: var( --spectrum-neutral-subdued-background-color-default