Skip to content

Commit 5210b62

Browse files
castastrophecastastrophe
committed
fix(dialog,styles): use latest CSS
1 parent f23a3ff commit 5210b62

File tree

9 files changed

+41
-208
lines changed

9 files changed

+41
-208
lines changed

‎.changeset/brave-crews-win.md

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
'@spectrum-web-components/color-loupe': patch
1414
'@spectrum-web-components/color-slider': patch
1515
'@spectrum-web-components/color-wheel': patch
16+
'@spectrum-web-components/dialog': patch
1617
'@spectrum-web-components/divider': patch
1718
'@spectrum-web-components/field-label': patch
1819
'@spectrum-web-components/help-text': patch

‎packages/dialog/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
"@spectrum-web-components/underlay": "1.4.0"
9292
},
9393
"devDependencies": {
94-
"@spectrum-css/dialog": "11.0.1"
94+
"@spectrum-css/dialog": "12.1.0"
9595
},
9696
"types": "./src/index.d.ts",
9797
"customElements": "custom-elements.json",

‎packages/dialog/src/dialog-overrides.css

-58
Original file line numberDiff line numberDiff line change
@@ -11,61 +11,3 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
14-
:host {
15-
--spectrum-dialog-fullscreen-header-text-size: var(
16-
--system-dialog-fullscreen-header-text-size
17-
);
18-
--spectrum-dialog-min-inline-size: var(--system-dialog-min-inline-size);
19-
--spectrum-dialog-confirm-small-width: var(
20-
--system-dialog-confirm-small-width
21-
);
22-
--spectrum-dialog-confirm-medium-width: var(
23-
--system-dialog-confirm-medium-width
24-
);
25-
--spectrum-dialog-confirm-large-width: var(
26-
--system-dialog-confirm-large-width
27-
);
28-
--spectrum-dialog-confirm-divider-block-spacing-start: var(
29-
--system-dialog-confirm-divider-block-spacing-start
30-
);
31-
--spectrum-dialog-confirm-divider-block-spacing-end: var(
32-
--system-dialog-confirm-divider-block-spacing-end
33-
);
34-
--spectrum-dialog-confirm-description-text-color: var(
35-
--system-dialog-confirm-description-text-color
36-
);
37-
--spectrum-dialog-confirm-title-text-color: var(
38-
--system-dialog-confirm-title-text-color
39-
);
40-
--spectrum-dialog-confirm-description-text-line-height: var(
41-
--system-dialog-confirm-description-text-line-height
42-
);
43-
--spectrum-dialog-confirm-title-text-line-height: var(
44-
--system-dialog-confirm-title-text-line-height
45-
);
46-
--spectrum-dialog-heading-font-weight: var(
47-
--system-dialog-heading-font-weight
48-
);
49-
--spectrum-dialog-confirm-description-padding: var(
50-
--system-dialog-confirm-description-padding
51-
);
52-
--spectrum-dialog-confirm-description-margin: var(
53-
--system-dialog-confirm-description-margin
54-
);
55-
--spectrum-dialog-confirm-footer-padding-top: var(
56-
--system-dialog-confirm-footer-padding-top
57-
);
58-
--spectrum-dialog-confirm-gap-size: var(--system-dialog-confirm-gap-size);
59-
--spectrum-dialog-confirm-buttongroup-padding-top: var(
60-
--system-dialog-confirm-buttongroup-padding-top
61-
);
62-
--spectrum-dialog-confirm-close-button-size: var(
63-
--system-dialog-confirm-close-button-size
64-
);
65-
--spectrum-dialog-confirm-close-button-padding: var(
66-
--system-dialog-confirm-close-button-padding
67-
);
68-
--spectrum-dialog-confirm-divider-height: var(
69-
--system-dialog-confirm-divider-height
70-
);
71-
}

‎packages/dialog/src/dialog.css

-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
@import url('./spectrum-dialog.css');
14-
@import url('./dialog-overrides.css');
1514

1615
:host {
1716
--swc-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color);

‎packages/dialog/src/spectrum-dialog.css

+25-18
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,31 @@ governing permissions and limitations under the License.
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
1414
:host {
15+
--spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300);
16+
--spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200);
17+
--spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800);
18+
--spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50);
19+
--spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100);
20+
--spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600);
21+
--spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100);
22+
--spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300));
1523
box-sizing: border-box;
16-
inline-size: fit-content;
17-
min-inline-size: var(--mod-dialog-min-inline-size, var(--spectrum-dialog-min-inline-size));
24+
inline-size: 480px;
25+
inline-size: var(--mod-dialog-width, var(--mod-dialog-confirm-medium-width, 480px));
26+
min-inline-size: 288px;
27+
min-inline-size: var(--mod-dialog-min-inline-size, 288px);
1828
max-inline-size: 100%;
1929
max-block-size: inherit;
2030
outline: none;
2131
display: flex;
2232
}
2333

24-
:host([size='s']) {
25-
inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width));
34+
.spectrum-Dialog--sizeS {
35+
--mod-dialog-width: var(--mod-dialog-confirm-small-width, 400px);
2636
}
2737

28-
:host([size='m']) {
29-
inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width));
30-
}
31-
32-
:host([size='l']) {
33-
inline-size: var(--mod-dialog-confirm-large-width, var(--spectrum-dialog-confirm-large-width));
38+
.spectrum-Dialog--sizeL {
39+
--mod-dialog-width: var(--mod-dialog-confirm-large-width, 640px);
3440
}
3541

3642
::slotted([slot='hero']) {
@@ -60,9 +66,9 @@ governing permissions and limitations under the License.
6066

6167
::slotted([slot='heading']) {
6268
font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size));
63-
font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-dialog-heading-font-weight));
64-
line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-dialog-confirm-title-text-line-height));
65-
color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-dialog-confirm-title-text-color));
69+
font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight));
70+
line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-line-height-100));
71+
color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-gray-900));
6672
outline: none;
6773
grid-area: heading;
6874
margin: 0;
@@ -99,18 +105,18 @@ governing permissions and limitations under the License.
99105
}
100106

101107
:host([no-divider]) ::slotted([slot='heading']) {
102-
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)));
108+
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)));
103109
}
104110

105111
.content {
106112
box-sizing: border-box;
107113
-webkit-overflow-scrolling: touch;
108114
font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size));
109115
font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight));
110-
line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-dialog-confirm-description-text-line-height));
116+
line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-line-height-100));
111117
color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color));
112118
padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2);
113-
margin: 0 var(--mod-dialog-confirm-description-margin, var(--spectrum-dialog-confirm-description-margin));
119+
margin: 0 var(--mod-dialog-confirm-description-margin, calc(var(--spectrum-spacing-50) * -1));
114120
outline: none;
115121
grid-area: content;
116122
overflow-y: auto;
@@ -120,7 +126,7 @@ governing permissions and limitations under the License.
120126
outline: none;
121127
flex-wrap: wrap;
122128
grid-area: footer;
123-
padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-dialog-confirm-footer-padding-top));
129+
padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-spacing-600));
124130
display: flex;
125131
}
126132

@@ -202,7 +208,8 @@ governing permissions and limitations under the License.
202208

203209
:host([mode='fullscreen']) ::slotted([slot='heading']),
204210
:host([mode='fullscreenTakeover']) ::slotted([slot='heading']) {
205-
font-size: var(--mod-dialog-fullscreen-header-text-size, var(--spectrum-dialog-fullscreen-header-text-size));
211+
font-size: 28px;
212+
font-size: var(--mod-dialog-fullscreen-header-text-size, 28px);
206213
}
207214

208215
:host([mode='fullscreen']) .content,

‎tools/styles/tokens-v2/system-theme-bridge.css

-40
Original file line numberDiff line numberDiff line change
@@ -676,46 +676,6 @@
676676
--system-combobox-border-color-disabled: var(
677677
--spectrum-disabled-border-color
678678
);
679-
--system-dialog-fullscreen-header-text-size: 28px;
680-
--system-dialog-min-inline-size: 288px;
681-
--system-dialog-confirm-small-width: 400px;
682-
--system-dialog-confirm-medium-width: 480px;
683-
--system-dialog-confirm-large-width: 640px;
684-
--system-dialog-confirm-divider-block-spacing-start: var(
685-
--spectrum-spacing-300
686-
);
687-
--system-dialog-confirm-divider-block-spacing-end: var(
688-
--spectrum-spacing-200
689-
);
690-
--system-dialog-confirm-description-text-color: var(--spectrum-gray-800);
691-
--system-dialog-confirm-title-text-color: var(--spectrum-gray-900);
692-
--system-dialog-confirm-description-text-line-height: var(
693-
--spectrum-line-height-100
694-
);
695-
--system-dialog-confirm-title-text-line-height: var(
696-
--spectrum-line-height-100
697-
);
698-
--system-dialog-heading-font-weight: var(
699-
--spectrum-heading-sans-serif-font-weight
700-
);
701-
--system-dialog-confirm-description-padding: var(--spectrum-spacing-50);
702-
--system-dialog-confirm-description-margin: calc(
703-
var(--spectrum-spacing-50) * -1
704-
);
705-
--system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
706-
--system-dialog-confirm-gap-size: var(
707-
--spectrum-component-pill-edge-to-text-100
708-
);
709-
--system-dialog-confirm-buttongroup-padding-top: var(
710-
--spectrum-spacing-600
711-
);
712-
--system-dialog-confirm-close-button-size: var(
713-
--spectrum-component-height-100
714-
);
715-
--system-dialog-confirm-close-button-padding: calc(
716-
26px - var(--spectrum-component-bottom-to-text-300)
717-
);
718-
--system-dialog-confirm-divider-height: var(--spectrum-spacing-50);
719679
--system-divider-background-color: var(--spectrum-gray-200);
720680
--system-divider-background-color-static-white: var(
721681
--spectrum-transparent-white-200

‎tools/styles/tokens/express/system-theme-bridge.css

-40
Original file line numberDiff line numberDiff line change
@@ -692,46 +692,6 @@
692692
--spectrum-disabled-background-color
693693
);
694694
--system-combobox-border-color-disabled: transparent;
695-
--system-dialog-fullscreen-header-text-size: 28px;
696-
--system-dialog-min-inline-size: 288px;
697-
--system-dialog-confirm-small-width: 400px;
698-
--system-dialog-confirm-medium-width: 480px;
699-
--system-dialog-confirm-large-width: 640px;
700-
--system-dialog-confirm-divider-block-spacing-start: var(
701-
--spectrum-spacing-300
702-
);
703-
--system-dialog-confirm-divider-block-spacing-end: var(
704-
--spectrum-spacing-200
705-
);
706-
--system-dialog-confirm-description-text-color: var(--spectrum-gray-800);
707-
--system-dialog-confirm-title-text-color: var(--spectrum-gray-900);
708-
--system-dialog-confirm-description-text-line-height: var(
709-
--spectrum-line-height-100
710-
);
711-
--system-dialog-confirm-title-text-line-height: var(
712-
--spectrum-line-height-100
713-
);
714-
--system-dialog-heading-font-weight: var(
715-
--spectrum-heading-sans-serif-font-weight
716-
);
717-
--system-dialog-confirm-description-padding: var(--spectrum-spacing-50);
718-
--system-dialog-confirm-description-margin: calc(
719-
var(--spectrum-spacing-50) * -1
720-
);
721-
--system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
722-
--system-dialog-confirm-gap-size: var(
723-
--spectrum-component-pill-edge-to-text-100
724-
);
725-
--system-dialog-confirm-buttongroup-padding-top: var(
726-
--spectrum-spacing-600
727-
);
728-
--system-dialog-confirm-close-button-size: var(
729-
--spectrum-component-height-100
730-
);
731-
--system-dialog-confirm-close-button-padding: calc(
732-
26px - var(--spectrum-component-bottom-to-text-300)
733-
);
734-
--system-dialog-confirm-divider-height: var(--spectrum-spacing-50);
735695
--system-divider-background-color: var(--spectrum-gray-300);
736696
--system-divider-background-color-static-white: var(
737697
--spectrum-transparent-white-300

‎tools/styles/tokens/spectrum/system-theme-bridge.css

-40
Original file line numberDiff line numberDiff line change
@@ -698,46 +698,6 @@
698698
--spectrum-disabled-background-color
699699
);
700700
--system-combobox-border-color-disabled: transparent;
701-
--system-dialog-fullscreen-header-text-size: 28px;
702-
--system-dialog-min-inline-size: 288px;
703-
--system-dialog-confirm-small-width: 400px;
704-
--system-dialog-confirm-medium-width: 480px;
705-
--system-dialog-confirm-large-width: 640px;
706-
--system-dialog-confirm-divider-block-spacing-start: var(
707-
--spectrum-spacing-300
708-
);
709-
--system-dialog-confirm-divider-block-spacing-end: var(
710-
--spectrum-spacing-200
711-
);
712-
--system-dialog-confirm-description-text-color: var(--spectrum-gray-800);
713-
--system-dialog-confirm-title-text-color: var(--spectrum-gray-900);
714-
--system-dialog-confirm-description-text-line-height: var(
715-
--spectrum-line-height-100
716-
);
717-
--system-dialog-confirm-title-text-line-height: var(
718-
--spectrum-line-height-100
719-
);
720-
--system-dialog-heading-font-weight: var(
721-
--spectrum-heading-sans-serif-font-weight
722-
);
723-
--system-dialog-confirm-description-padding: var(--spectrum-spacing-50);
724-
--system-dialog-confirm-description-margin: calc(
725-
var(--spectrum-spacing-50) * -1
726-
);
727-
--system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
728-
--system-dialog-confirm-gap-size: var(
729-
--spectrum-component-pill-edge-to-text-100
730-
);
731-
--system-dialog-confirm-buttongroup-padding-top: var(
732-
--spectrum-spacing-600
733-
);
734-
--system-dialog-confirm-close-button-size: var(
735-
--spectrum-component-height-100
736-
);
737-
--system-dialog-confirm-close-button-padding: calc(
738-
26px - var(--spectrum-component-bottom-to-text-300)
739-
);
740-
--system-dialog-confirm-divider-height: var(--spectrum-spacing-50);
741701
--system-divider-background-color: var(--spectrum-gray-300);
742702
--system-divider-background-color-static-white: var(
743703
--spectrum-transparent-white-300

‎yarn.lock

+14-10
Original file line numberDiff line numberDiff line change
@@ -7233,23 +7233,27 @@ __metadata:
72337233
languageName: node
72347234
linkType: hard
72357235

7236-
"@spectrum-css/dialog@npm:11.0.1":
7237-
version: 11.0.1
7238-
resolution: "@spectrum-css/dialog@npm:11.0.1"
7236+
"@spectrum-css/dialog@npm:12.1.0":
7237+
version: 12.1.0
7238+
resolution: "@spectrum-css/dialog@npm:12.1.0"
72397239
peerDependencies:
7240-
"@spectrum-css/closebutton": ">=5"
7241-
"@spectrum-css/divider": ">=3"
7242-
"@spectrum-css/modal": ">=5"
7243-
"@spectrum-css/tokens": ">=14 || >=15"
7244-
"@spectrum-css/underlay": ">=4"
7240+
"@spectrum-css/closebutton": ">=6.0.0 <7.0.0"
7241+
"@spectrum-css/divider": ">=5.0.0 <6.0.0"
7242+
"@spectrum-css/modal": ">=7.0.0 <8.0.0"
7243+
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
7244+
"@spectrum-css/underlay": ">=6.0.0 <7.0.0"
72457245
peerDependenciesMeta:
7246+
"@spectrum-css/closebutton":
7247+
optional: true
72467248
"@spectrum-css/divider":
72477249
optional: true
72487250
"@spectrum-css/modal":
72497251
optional: true
7252+
"@spectrum-css/tokens":
7253+
optional: true
72507254
"@spectrum-css/underlay":
72517255
optional: true
7252-
checksum: 10c0/bc164c8a5c5343f647446c1833aaa77470fbb2dde8b375a051570690632dc727b7e3f3a19ea12ceffb42c7ef7d04be1ec74b02d9e80e25ea356161344c0c4fdb
7256+
checksum: 10c0/e6c761eb29e070f5b979dd6925e1b43aa727a24efa0389aa67cad25c1193a6149e1277c6270d0c44c831d6c0c0b2aa1e3c3cec6dde11677567bff756d1090e75
72537257
languageName: node
72547258
linkType: hard
72557259

@@ -8312,7 +8316,7 @@ __metadata:
83128316
version: 0.0.0-use.local
83138317
resolution: "@spectrum-web-components/dialog@workspace:packages/dialog"
83148318
dependencies:
8315-
"@spectrum-css/dialog": "npm:11.0.1"
8319+
"@spectrum-css/dialog": "npm:12.1.0"
83168320
"@spectrum-web-components/alert-dialog": "npm:1.4.0"
83178321
"@spectrum-web-components/base": "npm:1.4.0"
83188322
"@spectrum-web-components/button": "npm:1.4.0"

0 commit comments

Comments
 (0)