diff --git a/.changeset/stale-candies-camp.md b/.changeset/stale-candies-camp.md index e6dd368fa61..44612d6a587 100644 --- a/.changeset/stale-candies-camp.md +++ b/.changeset/stale-candies-camp.md @@ -1,5 +1,6 @@ --- '@spectrum-web-components/tooltip': patch +'@spectrum-web-components/toast': patch --- Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer. diff --git a/packages/toast/package.json b/packages/toast/package.json index d795e02ff09..aac1af40b05 100644 --- a/packages/toast/package.json +++ b/packages/toast/package.json @@ -71,7 +71,7 @@ "@spectrum-web-components/shared": "1.5.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/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 4132cb3765f..f235c25a47c 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 8912472ce65..724b1bd1103 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 03bc779e2cd..455051b9e3c 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 diff --git a/yarn.lock b/yarn.lock index 6d42b188868..c201e313488 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 @@ -8871,7 +8880,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.5.0" "@spectrum-web-components/button": "npm:1.5.0" "@spectrum-web-components/icon": "npm:1.5.0"