fix(dialog,styles): remove unneeded abstraction layer for system theming - abandoned

.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.

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"

packages/dialog/src/spectrum-dialog.css

@@ -10,26 +10,33 @@
  * 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;
     display: flex;
 }
 
 :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,18 +105,18 @@
 }
 
 :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 {
     box-sizing: border-box;
     -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,

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);

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);

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);