diff --git a/.changeset/free-jokes-attack.md b/.changeset/free-jokes-attack.md new file mode 100644 index 00000000000..e04c1814aa0 --- /dev/null +++ b/.changeset/free-jokes-attack.md @@ -0,0 +1,6 @@ +--- +'@spectrum-web-components/dialog': patch +'@spectrum-web-components/styles': patch +--- + +Remove unnecessary abstraction layer for system theming. diff --git a/packages/dialog/src/dialog.css b/packages/dialog/src/dialog.css index f2379c27a4d..11aee5e3727 100644 --- a/packages/dialog/src/dialog.css +++ b/packages/dialog/src/dialog.css @@ -11,7 +11,6 @@ */ @import url("./spectrum-dialog.css"); -@import url("./dialog-overrides.css"); :host { --swc-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); @@ -39,7 +38,6 @@ height: auto; } -/* We may remove this override when CSS fixes unused `header` and `typeIcon` areas */ .grid { grid-template-areas: "hero hero hero hero hero hero" diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css index 12e8a9d355e..63a4d4266a7 100644 --- a/packages/dialog/src/spectrum-dialog.css +++ b/packages/dialog/src/spectrum-dialog.css @@ -10,10 +10,21 @@ * governing permissions and limitations under the License. */ + :host { + --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); + --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); + --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); + --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); + --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100); + --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); box-sizing: border-box; - inline-size: fit-content; - min-inline-size: var(--mod-dialog-min-inline-size, var(--spectrum-dialog-min-inline-size)); + inline-size: 480px; + inline-size: var(--mod-dialog-width, var(--mod-dialog-confirm-medium-width, 480px)); + min-inline-size: 288px; + min-inline-size: var(--mod-dialog-min-inline-size, 288px); max-inline-size: 100%; max-block-size: inherit; outline: none; @@ -21,15 +32,11 @@ } :host([size="s"]) { - inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width)); -} - -:host([size="m"]) { - inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width)); + --mod-dialog-width: var(--mod-dialog-confirm-small-width, 400px); } :host([size="l"]) { - inline-size: var(--mod-dialog-confirm-large-width, var(--spectrum-dialog-confirm-large-width)); + --mod-dialog-width: var(--mod-dialog-confirm-large-width, 640px); } ::slotted([slot="hero"]) { @@ -59,9 +66,9 @@ ::slotted([slot="heading"]) { font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); - font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-dialog-heading-font-weight)); - line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-dialog-confirm-title-text-line-height)); - color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-dialog-confirm-title-text-color)); + font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight)); + line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-line-height-100)); + color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-gray-900)); outline: none; grid-area: heading; margin: 0; @@ -98,7 +105,7 @@ } :host([no-divider]) ::slotted([slot="heading"]) { - padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-dialog-confirm-divider-height))); + padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-spacing-50))); } .content { @@ -106,10 +113,10 @@ -webkit-overflow-scrolling: touch; font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size)); font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight)); - line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-dialog-confirm-description-text-line-height)); + line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-line-height-100)); color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2); - margin: 0 var(--mod-dialog-confirm-description-margin, var(--spectrum-dialog-confirm-description-margin)); + margin: 0 var(--mod-dialog-confirm-description-margin, calc(var(--spectrum-spacing-50) * -1)); outline: none; grid-area: content; overflow-y: auto; @@ -119,7 +126,7 @@ outline: none; flex-wrap: wrap; grid-area: footer; - padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-dialog-confirm-footer-padding-top)); + padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-spacing-600)); display: flex; } @@ -201,7 +208,7 @@ :host([mode="fullscreen"]) ::slotted([slot="heading"]), :host([mode="fullscreenTakeover"]) ::slotted([slot="heading"]) { - font-size: var(--mod-dialog-fullscreen-header-text-size, var(--spectrum-dialog-fullscreen-header-text-size)); + font-size: var(--mod-dialog-fullscreen-header-text-size, 28px); } :host([mode="fullscreen"]) .content, diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css index 2ab1aa83de3..3ad81bbf9d4 100644 --- a/tools/styles/tokens-v2/system-theme-bridge.css +++ b/tools/styles/tokens-v2/system-theme-bridge.css @@ -293,26 +293,6 @@ --system-combobox-readonly-input-border-color: var(--spectrum-gray-500); --system-combobox-background-color-disabled: var(--spectrum-gray-25); --system-combobox-border-color-disabled: var(--spectrum-disabled-border-color); - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); - --system-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); - --system-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); - --system-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); - --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-close-button-size: var(--spectrum-component-height-100); - --system-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); --system-divider-background-color: var(--spectrum-gray-200); --system-divider-background-color-static-white: var(--spectrum-transparent-white-200); --system-divider-background-color-static-black: var(--spectrum-transparent-black-200); diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css index a5bde1ea167..b80e423b937 100644 --- a/tools/styles/tokens/express/system-theme-bridge.css +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -294,26 +294,6 @@ --system-combobox-readonly-input-border-color: var(--spectrum-gray-400); --system-combobox-background-color-disabled: var(--spectrum-disabled-background-color); --system-combobox-border-color-disabled: transparent; - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); - --system-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); - --system-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); - --system-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); - --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-close-button-size: var(--spectrum-component-height-100); - --system-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); --system-divider-background-color: var(--spectrum-gray-300); --system-divider-background-color-static-white: var(--spectrum-transparent-white-300); --system-divider-background-color-static-black: var(--spectrum-transparent-black-300); diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css index 2a1ab6eb9c9..84ecadffc5f 100644 --- a/tools/styles/tokens/spectrum/system-theme-bridge.css +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -294,26 +294,6 @@ --system-combobox-readonly-input-border-color: var(--spectrum-gray-500); --system-combobox-background-color-disabled: var(--spectrum-disabled-background-color); --system-combobox-border-color-disabled: transparent; - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); - --system-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); - --system-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); - --system-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); - --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-close-button-size: var(--spectrum-component-height-100); - --system-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); --system-divider-background-color: var(--spectrum-gray-300); --system-divider-background-color-static-white: var(--spectrum-transparent-white-300); --system-divider-background-color-static-black: var(--spectrum-transparent-black-300);