fix(dialog,styles): use latest CSS

Author: castastrophe

packages/dialog/package.json

@@ -91,7 +91,7 @@
         "@spectrum-web-components/underlay": "1.5.0"
     },
     "devDependencies": {
-        "@spectrum-css/dialog": "11.0.1"
+        "@spectrum-css/dialog": "12.1.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/dialog/src/dialog.css

@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 
 @import url('./spectrum-dialog.css');
-@import url('./dialog-overrides.css');
 
 :host {
     --swc-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color);

packages/dialog/src/spectrum-dialog.css

@@ -12,47 +12,31 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
-    --spectrum-dialog-fullscreen-header-text-size: 28px;
-    --spectrum-dialog-min-inline-size: 288px;
-    --spectrum-dialog-confirm-small-width: 400px;
-    --spectrum-dialog-confirm-medium-width: 480px;
-    --spectrum-dialog-confirm-large-width: 640px;
     --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-title-text-color: var(--spectrum-gray-900);
-    --spectrum-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100);
-    --spectrum-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100);
-    --spectrum-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
     --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50);
-    --spectrum-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1);
-    --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
     --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));
-    --spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50);
-}
-
-:host,
-:host([size='m']) {
     box-sizing: border-box;
-    inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width));
-    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;
 }
 
-.spectrum-Dialog--sizeS,
-:host([size='s']) {
-    inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width));
+.spectrum-Dialog--sizeS {
+    --mod-dialog-width: var(--mod-dialog-confirm-small-width, 400px);
 }
 
-:host([size='l']),
 .spectrum-Dialog--sizeL {
-    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']) {
@@ -67,8 +51,6 @@ governing permissions and limitations under the License.
 
 .grid {
     grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-    grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-    inline-size: 100%;
     grid-template-areas:
         'hero hero hero hero hero hero'
         '. . . . . .'
@@ -77,14 +59,16 @@ governing permissions and limitations under the License.
         '. content content content content .'
         '. footer footer buttonGroup buttonGroup .'
         '. . . . . .';
+    grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
+    inline-size: 100%;
     display: grid;
 }
 
 ::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;
@@ -121,18 +105,18 @@ governing permissions and limitations under the License.
 }
 
 :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;
@@ -142,7 +126,7 @@ governing permissions and limitations under the License.
     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;
 }
 
@@ -165,7 +149,6 @@ governing permissions and limitations under the License.
 
 :host([dismissable]) .grid {
     grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-    grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
     grid-template-areas:
         'hero hero hero hero hero hero hero'
         '. . . . . closeButton closeButton'
@@ -174,6 +157,7 @@ governing permissions and limitations under the License.
         '. content content content content content .'
         '. footer footer buttonGroup buttonGroup buttonGroup .'
         '. . . . . . .';
+    grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
 }
 
 :host([dismissable]) .grid .button-group {
@@ -224,7 +208,8 @@ governing permissions and limitations under the License.
 
 :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: 28px;
+    font-size: var(--mod-dialog-fullscreen-header-text-size, 28px);
 }
 
 :host([mode='fullscreen']) .content,

yarn.lock

@@ -7238,23 +7238,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@spectrum-css/dialog@npm:11.0.1":
-  version: 11.0.1
-  resolution: "@spectrum-css/dialog@npm:11.0.1"
+"@spectrum-css/dialog@npm:12.1.0":
+  version: 12.1.0
+  resolution: "@spectrum-css/dialog@npm:12.1.0"
   peerDependencies:
-    "@spectrum-css/closebutton": ">=5"
-    "@spectrum-css/divider": ">=3"
-    "@spectrum-css/modal": ">=5"
-    "@spectrum-css/tokens": ">=14 || >=15"
-    "@spectrum-css/underlay": ">=4"
+    "@spectrum-css/closebutton": ">=6.0.0 <7.0.0"
+    "@spectrum-css/divider": ">=5.0.0 <6.0.0"
+    "@spectrum-css/modal": ">=7.0.0 <8.0.0"
+    "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
+    "@spectrum-css/underlay": ">=6.0.0 <7.0.0"
   peerDependenciesMeta:
+    "@spectrum-css/closebutton":
+      optional: true
     "@spectrum-css/divider":
       optional: true
     "@spectrum-css/modal":
       optional: true
+    "@spectrum-css/tokens":
+      optional: true
     "@spectrum-css/underlay":
       optional: true
-  checksum: 10c0/bc164c8a5c5343f647446c1833aaa77470fbb2dde8b375a051570690632dc727b7e3f3a19ea12ceffb42c7ef7d04be1ec74b02d9e80e25ea356161344c0c4fdb
+  checksum: 10c0/e6c761eb29e070f5b979dd6925e1b43aa727a24efa0389aa67cad25c1193a6149e1277c6270d0c44c831d6c0c0b2aa1e3c3cec6dde11677567bff756d1090e75
   languageName: node
   linkType: hard
 
@@ -8377,7 +8381,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-web-components/dialog@workspace:packages/dialog"
   dependencies:
-    "@spectrum-css/dialog": "npm:11.0.1"
+    "@spectrum-css/dialog": "npm:12.1.0"
     "@spectrum-web-components/alert-dialog": "npm:1.5.0"
     "@spectrum-web-components/base": "npm:1.5.0"
     "@spectrum-web-components/button": "npm:1.5.0"