Skip to content

Commit 3ee92ca

Browse files
castastrophecastastrophe
committed
fix(dialog,styles): use latest CSS
1 parent f445cfa commit 3ee92ca

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
@@ -10,6 +10,7 @@
1010
'@spectrum-web-components/color-area': patch
1111
'@spectrum-web-components/color-handle': patch
1212
'@spectrum-web-components/color-loupe': patch
13+
'@spectrum-web-components/dialog': patch
1314
'@spectrum-web-components/divider': patch
1415
'@spectrum-web-components/field-label': patch
1516
'@spectrum-web-components/help-text': patch

‎packages/dialog/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
"@spectrum-web-components/underlay": "1.4.0"
8686
},
8787
"devDependencies": {
88-
"@spectrum-css/dialog": "11.0.1"
88+
"@spectrum-css/dialog": "12.1.0"
8989
},
9090
"types": "./src/index.d.ts",
9191
"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
@@ -734,46 +734,6 @@
734734
--system-combobox-border-color-disabled: var(
735735
--spectrum-disabled-border-color
736736
);
737-
--system-dialog-fullscreen-header-text-size: 28px;
738-
--system-dialog-min-inline-size: 288px;
739-
--system-dialog-confirm-small-width: 400px;
740-
--system-dialog-confirm-medium-width: 480px;
741-
--system-dialog-confirm-large-width: 640px;
742-
--system-dialog-confirm-divider-block-spacing-start: var(
743-
--spectrum-spacing-300
744-
);
745-
--system-dialog-confirm-divider-block-spacing-end: var(
746-
--spectrum-spacing-200
747-
);
748-
--system-dialog-confirm-description-text-color: var(--spectrum-gray-800);
749-
--system-dialog-confirm-title-text-color: var(--spectrum-gray-900);
750-
--system-dialog-confirm-description-text-line-height: var(
751-
--spectrum-line-height-100
752-
);
753-
--system-dialog-confirm-title-text-line-height: var(
754-
--spectrum-line-height-100
755-
);
756-
--system-dialog-heading-font-weight: var(
757-
--spectrum-heading-sans-serif-font-weight
758-
);
759-
--system-dialog-confirm-description-padding: var(--spectrum-spacing-50);
760-
--system-dialog-confirm-description-margin: calc(
761-
var(--spectrum-spacing-50) * -1
762-
);
763-
--system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
764-
--system-dialog-confirm-gap-size: var(
765-
--spectrum-component-pill-edge-to-text-100
766-
);
767-
--system-dialog-confirm-buttongroup-padding-top: var(
768-
--spectrum-spacing-600
769-
);
770-
--system-dialog-confirm-close-button-size: var(
771-
--spectrum-component-height-100
772-
);
773-
--system-dialog-confirm-close-button-padding: calc(
774-
26px - var(--spectrum-component-bottom-to-text-300)
775-
);
776-
--system-dialog-confirm-divider-height: var(--spectrum-spacing-50);
777737
--system-divider-background-color: var(--spectrum-gray-200);
778738
--system-divider-background-color-static-white: var(
779739
--spectrum-transparent-white-200

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

-40
Original file line numberDiff line numberDiff line change
@@ -750,46 +750,6 @@
750750
--spectrum-disabled-background-color
751751
);
752752
--system-combobox-border-color-disabled: transparent;
753-
--system-dialog-fullscreen-header-text-size: 28px;
754-
--system-dialog-min-inline-size: 288px;
755-
--system-dialog-confirm-small-width: 400px;
756-
--system-dialog-confirm-medium-width: 480px;
757-
--system-dialog-confirm-large-width: 640px;
758-
--system-dialog-confirm-divider-block-spacing-start: var(
759-
--spectrum-spacing-300
760-
);
761-
--system-dialog-confirm-divider-block-spacing-end: var(
762-
--spectrum-spacing-200
763-
);
764-
--system-dialog-confirm-description-text-color: var(--spectrum-gray-800);
765-
--system-dialog-confirm-title-text-color: var(--spectrum-gray-900);
766-
--system-dialog-confirm-description-text-line-height: var(
767-
--spectrum-line-height-100
768-
);
769-
--system-dialog-confirm-title-text-line-height: var(
770-
--spectrum-line-height-100
771-
);
772-
--system-dialog-heading-font-weight: var(
773-
--spectrum-heading-sans-serif-font-weight
774-
);
775-
--system-dialog-confirm-description-padding: var(--spectrum-spacing-50);
776-
--system-dialog-confirm-description-margin: calc(
777-
var(--spectrum-spacing-50) * -1
778-
);
779-
--system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
780-
--system-dialog-confirm-gap-size: var(
781-
--spectrum-component-pill-edge-to-text-100
782-
);
783-
--system-dialog-confirm-buttongroup-padding-top: var(
784-
--spectrum-spacing-600
785-
);
786-
--system-dialog-confirm-close-button-size: var(
787-
--spectrum-component-height-100
788-
);
789-
--system-dialog-confirm-close-button-padding: calc(
790-
26px - var(--spectrum-component-bottom-to-text-300)
791-
);
792-
--system-dialog-confirm-divider-height: var(--spectrum-spacing-50);
793753
--system-divider-background-color: var(--spectrum-gray-300);
794754
--system-divider-background-color-static-white: var(
795755
--spectrum-transparent-white-300

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

-40
Original file line numberDiff line numberDiff line change
@@ -756,46 +756,6 @@
756756
--spectrum-disabled-background-color
757757
);
758758
--system-combobox-border-color-disabled: transparent;
759-
--system-dialog-fullscreen-header-text-size: 28px;
760-
--system-dialog-min-inline-size: 288px;
761-
--system-dialog-confirm-small-width: 400px;
762-
--system-dialog-confirm-medium-width: 480px;
763-
--system-dialog-confirm-large-width: 640px;
764-
--system-dialog-confirm-divider-block-spacing-start: var(
765-
--spectrum-spacing-300
766-
);
767-
--system-dialog-confirm-divider-block-spacing-end: var(
768-
--spectrum-spacing-200
769-
);
770-
--system-dialog-confirm-description-text-color: var(--spectrum-gray-800);
771-
--system-dialog-confirm-title-text-color: var(--spectrum-gray-900);
772-
--system-dialog-confirm-description-text-line-height: var(
773-
--spectrum-line-height-100
774-
);
775-
--system-dialog-confirm-title-text-line-height: var(
776-
--spectrum-line-height-100
777-
);
778-
--system-dialog-heading-font-weight: var(
779-
--spectrum-heading-sans-serif-font-weight
780-
);
781-
--system-dialog-confirm-description-padding: var(--spectrum-spacing-50);
782-
--system-dialog-confirm-description-margin: calc(
783-
var(--spectrum-spacing-50) * -1
784-
);
785-
--system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
786-
--system-dialog-confirm-gap-size: var(
787-
--spectrum-component-pill-edge-to-text-100
788-
);
789-
--system-dialog-confirm-buttongroup-padding-top: var(
790-
--spectrum-spacing-600
791-
);
792-
--system-dialog-confirm-close-button-size: var(
793-
--spectrum-component-height-100
794-
);
795-
--system-dialog-confirm-close-button-padding: calc(
796-
26px - var(--spectrum-component-bottom-to-text-300)
797-
);
798-
--system-dialog-confirm-divider-height: var(--spectrum-spacing-50);
799759
--system-divider-background-color: var(--spectrum-gray-300);
800760
--system-divider-background-color-static-white: var(
801761
--spectrum-transparent-white-300

‎yarn.lock

+14-10
Original file line numberDiff line numberDiff line change
@@ -7201,23 +7201,27 @@ __metadata:
72017201
languageName: node
72027202
linkType: hard
72037203

7204-
"@spectrum-css/dialog@npm:11.0.1":
7205-
version: 11.0.1
7206-
resolution: "@spectrum-css/dialog@npm:11.0.1"
7204+
"@spectrum-css/dialog@npm:12.1.0":
7205+
version: 12.1.0
7206+
resolution: "@spectrum-css/dialog@npm:12.1.0"
72077207
peerDependencies:
7208-
"@spectrum-css/closebutton": ">=5"
7209-
"@spectrum-css/divider": ">=3"
7210-
"@spectrum-css/modal": ">=5"
7211-
"@spectrum-css/tokens": ">=14 || >=15"
7212-
"@spectrum-css/underlay": ">=4"
7208+
"@spectrum-css/closebutton": ">=6.0.0 <7.0.0"
7209+
"@spectrum-css/divider": ">=5.0.0 <6.0.0"
7210+
"@spectrum-css/modal": ">=7.0.0 <8.0.0"
7211+
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
7212+
"@spectrum-css/underlay": ">=6.0.0 <7.0.0"
72137213
peerDependenciesMeta:
7214+
"@spectrum-css/closebutton":
7215+
optional: true
72147216
"@spectrum-css/divider":
72157217
optional: true
72167218
"@spectrum-css/modal":
72177219
optional: true
7220+
"@spectrum-css/tokens":
7221+
optional: true
72187222
"@spectrum-css/underlay":
72197223
optional: true
7220-
checksum: 10c0/bc164c8a5c5343f647446c1833aaa77470fbb2dde8b375a051570690632dc727b7e3f3a19ea12ceffb42c7ef7d04be1ec74b02d9e80e25ea356161344c0c4fdb
7224+
checksum: 10c0/e6c761eb29e070f5b979dd6925e1b43aa727a24efa0389aa67cad25c1193a6149e1277c6270d0c44c831d6c0c0b2aa1e3c3cec6dde11677567bff756d1090e75
72217225
languageName: node
72227226
linkType: hard
72237227

@@ -8250,7 +8254,7 @@ __metadata:
82508254
version: 0.0.0-use.local
82518255
resolution: "@spectrum-web-components/dialog@workspace:packages/dialog"
82528256
dependencies:
8253-
"@spectrum-css/dialog": "npm:11.0.1"
8257+
"@spectrum-css/dialog": "npm:12.1.0"
82548258
"@spectrum-web-components/alert-dialog": "npm:1.4.0"
82558259
"@spectrum-web-components/base": "npm:1.4.0"
82568260
"@spectrum-web-components/button": "npm:1.4.0"

0 commit comments

Comments
 (0)