Skip to content

Commit 0ec1344

Browse files
caseyisonitcaseyisonit
authored
Merge branch 'main' into renovate/spectrum-css-slider-6.x
2 parents 17fa333 + a99c224 commit 0ec1344

File tree

9 files changed

+62
-325
lines changed

9 files changed

+62
-325
lines changed

‎.changeset/stale-candies-camp.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
'@spectrum-web-components/close-button': patch
3+
'@spectrum-web-components/drop-zone': patch
34
'@spectrum-web-components/illustrated-message': patch
45
'@spectrum-web-components/menu': patch
56
'@spectrum-web-components/status-light': patch

‎packages/dropzone/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
"@spectrum-web-components/base": "1.5.0"
6868
},
6969
"devDependencies": {
70-
"@spectrum-css/dropzone": "7.0.0-s2-foundations.16"
70+
"@spectrum-css/dropzone": "8.1.0"
7171
},
7272
"types": "./src/index.d.ts",
7373
"customElements": "custom-elements.json",

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

-86
Original file line numberDiff line numberDiff line change
@@ -12,91 +12,5 @@ governing permissions and limitations under the License.
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
1414
:host {
15-
--spectrum-drop-zone-padding: var(--system-drop-zone-padding);
16-
--spectrum-drop-zone-illustration-to-heading: var(
17-
--system-drop-zone-illustration-to-heading
18-
);
19-
--spectrum-drop-zone-heading-to-body: var(
20-
--system-drop-zone-heading-to-body
21-
);
22-
--spectrum-drop-zone-border-width: var(--system-drop-zone-border-width);
23-
--spectrum-drop-zone-corner-radius: var(--system-drop-zone-corner-radius);
2415
--spectrum-drop-zone-border-color: var(--system-drop-zone-border-color);
25-
--spectrum-drop-zone-heading-font-family: var(
26-
--system-drop-zone-heading-font-family
27-
);
28-
--spectrum-drop-zone-heading-font-weight: var(
29-
--system-drop-zone-heading-font-weight
30-
);
31-
--spectrum-drop-zone-heading-font-style: var(
32-
--system-drop-zone-heading-font-style
33-
);
34-
--spectrum-drop-zone-heading-font-size: var(
35-
--system-drop-zone-heading-font-size
36-
);
37-
--spectrum-drop-zone-heading-line-height: var(
38-
--system-drop-zone-heading-line-height
39-
);
40-
--spectrum-drop-zone-heading-color: var(--system-drop-zone-heading-color);
41-
--spectrum-drop-zone-body-font-family: var(
42-
--system-drop-zone-body-font-family
43-
);
44-
--spectrum-drop-zone-body-font-weight: var(
45-
--system-drop-zone-body-font-weight
46-
);
47-
--spectrum-drop-zone-body-font-style: var(
48-
--system-drop-zone-body-font-style
49-
);
50-
--spectrum-drop-zone-body-font-size: var(--system-drop-zone-body-font-size);
51-
--spectrum-drop-zone-body-line-height: var(
52-
--system-drop-zone-body-line-height
53-
);
54-
--spectrum-drop-zone-body-color: var(--system-drop-zone-body-color);
55-
--spectrum-drop-zone-background-color: var(
56-
--system-drop-zone-background-color
57-
);
58-
--spectrum-drop-zone-border-color-hover: var(
59-
--system-drop-zone-border-color-hover
60-
);
61-
--spectrum-drop-zone-illustration-color: var(
62-
--system-drop-zone-illustration-color
63-
);
64-
--spectrum-drop-zone-illustration-color-hover: var(
65-
--system-drop-zone-illustration-color-hover
66-
);
67-
--spectrum-drop-zone-content-height: var(--system-drop-zone-content-height);
68-
--spectrum-drop-zone-content-max-width: var(
69-
--system-drop-zone-content-max-width
70-
);
71-
--spectrum-drop-zone-content-edge-to-text: var(
72-
--system-drop-zone-content-edge-to-text
73-
);
74-
--spectrum-drop-zone-content-top-to-text: var(
75-
--system-drop-zone-content-top-to-text
76-
);
77-
--spectrum-drop-zone-content-bottom-to-text: var(
78-
--system-drop-zone-content-bottom-to-text
79-
);
80-
--spectrum-drop-zone-content-font-family: var(
81-
--system-drop-zone-content-font-family
82-
);
83-
--spectrum-drop-zone-content-font-weight: var(
84-
--system-drop-zone-content-font-weight
85-
);
86-
--spectrum-drop-zone-content-font-style: var(
87-
--system-drop-zone-content-font-style
88-
);
89-
--spectrum-drop-zone-content-font-size: var(
90-
--system-drop-zone-content-font-size
91-
);
92-
--spectrum-drop-zone-content-line-height: var(
93-
--system-drop-zone-content-line-height
94-
);
95-
--spectrum-drop-zone-content-background-color: var(
96-
--system-drop-zone-content-background-color
97-
);
98-
--spectrum-drop-zone-content-color: var(--system-drop-zone-content-color);
99-
--spectrum-drop-zone-heading-font-size-cjk: var(
100-
--system-drop-zone-heading-font-size-cjk
101-
);
10216
}

‎packages/dropzone/src/dropzone.css

+9-10
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ governing permissions and limitations under the License.
1313
@import url('./spectrum-dropzone.css');
1414
@import url('./dropzone-overrides.css');
1515

16-
/*
16+
/*
1717
* Host is inline-block by default which caused all the computed styling to be wrong.
18-
* We need it as a block
18+
* We need it as a block
1919
*/
2020
:host {
2121
display: block;
@@ -24,24 +24,23 @@ governing permissions and limitations under the License.
2424
::slotted(*) {
2525
font-family: var(
2626
--mod-drop-zone-body-font-family,
27-
var(--spectrum-drop-zone-body-font-family)
27+
var(--spectrum-sans-font-family-stack)
2828
);
2929
font-size: var(
3030
--mod-drop-zone-body-font-size,
31-
var(--spectrum-drop-zone-body-font-size)
31+
var(--spectrum-drop-zone-body-size)
3232
);
3333
font-weight: var(
3434
--mod-drop-zone-body-font-weight,
35-
var(--spectrum-drop-zone-body-font-weight)
35+
var(--spectrum-body-sans-serif-font-weight)
3636
);
3737
line-height: var(
3838
--mod-drop-zone-body-line-height,
39-
var(--spectrum-drop-zone-body-line-height)
39+
var(--spectrum-body-line-height)
4040
);
4141
font-style: var(
42-
--spectrum-drop-zone-body-font-style,
43-
var(--spectrum-drop-zone-body-font-style)
42+
--mod-drop-zone-body-font-style,
43+
var(--spectrum-body-sans-serif-font-style)
4444
);
45-
margin-top: 0;
46-
margin-bottom: 0;
45+
margin-block: 0;
4746
}

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

+38-33
Original file line numberDiff line numberDiff line change
@@ -12,52 +12,57 @@ governing permissions and limitations under the License.
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
1414
:host {
15+
--spectrum-drop-zone-border-width: var(--spectrum-border-width-200);
16+
--spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb);
17+
--spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color);
18+
--spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color);
19+
--spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color);
1520
--mod-illustrated-message-content-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width));
1621
--mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color, var(--spectrum-drop-zone-illustration-color));
17-
--mod-illustrated-message-title-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-drop-zone-illustration-to-heading));
18-
--mod-illustrated-message-heading-to-body: var(--mod-drop-zone-heading-to-body, var(--spectrum-drop-zone-heading-to-body));
19-
--mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-drop-zone-heading-font-family));
20-
--mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-drop-zone-heading-font-weight));
21-
--mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-drop-zone-heading-font-style));
22-
--mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-heading-font-size));
23-
--mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-drop-zone-heading-line-height));
24-
--mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-drop-zone-heading-color));
22+
--mod-illustrated-message-title-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-spacing-400));
23+
--mod-illustrated-message-heading-to-body: var(--mod-drop-zone-heading-to-body, var(--spectrum-spacing-75));
24+
--mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-sans-font-family-stack));
25+
--mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight));
26+
--mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-heading-sans-serif-font-style));
27+
--mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-title-size));
28+
--mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-heading-line-height));
29+
--mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-heading-color));
2530
--mod-illustrated-message-description-position: relative;
2631
--mod-illustrated-message-description-z-index: 1;
2732
--mod-illustrated-message-heading-to-description: 0;
28-
--mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-drop-zone-body-font-family));
29-
--mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-drop-zone-body-font-weight));
30-
--mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-drop-zone-body-font-style));
31-
--mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-font-size));
32-
--mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-drop-zone-body-line-height));
33-
--mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-drop-zone-body-color));
34-
--mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-drop-zone-content-font-size));
35-
--mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-drop-zone-content-color));
36-
--mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-drop-zone-content-edge-to-text));
33+
--mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-sans-font-family-stack));
34+
--mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-body-sans-serif-font-weight));
35+
--mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-body-sans-serif-font-style));
36+
--mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-size));
37+
--mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-body-line-height));
38+
--mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-body-color));
39+
--mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-font-size-300));
40+
--mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-white));
41+
--mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-component-edge-to-text-300));
3742
box-sizing: border-box;
3843
inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width));
39-
padding: calc(var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)));
44+
padding: calc(var(--mod-drop-zone-padding, var(--spectrum-spacing-400)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)));
4045
text-align: center;
4146
border-color: var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color));
4247
border-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width));
43-
border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius));
48+
border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-corner-radius-100));
4449
border-style: dashed;
45-
border-style: var(--mod-drop-zone-border-style, var(--spectrum-drop-zone-border-style, dashed));
50+
border-style: var(--mod-drop-zone-border-style, dashed);
4651
background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color));
4752
background-size: cover;
4853
}
4954

5055
:host:lang(ja),
5156
:host:lang(ko),
5257
:host:lang(zh) {
53-
--spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-heading-font-size-cjk);
58+
--mod-illustrated-message-title-font-size: var(--spectrum-drop-zone-cjk-title-size);
5459
}
5560

5661
:host([dragged]) {
5762
--mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid);
5863
--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-background-color-opacity)));
59-
--spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
60-
--mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover));
64+
--mod-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
65+
--mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-accent-visual-color));
6166
}
6267

6368
:host([filled]) {
@@ -71,13 +76,13 @@ governing permissions and limitations under the License.
7176

7277
:host(:focus-visible) {
7378
--mod-drop-zone-border-style: solid;
74-
--spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
79+
--mod-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
7580
outline: 0;
7681
}
7782

7883
.spectrum-DropZone-content {
7984
display: none;
80-
display: var(--mod-drop-zone-content-display, var(--spectrum-drop-zone-content-display, none));
85+
display: var(--mod-drop-zone-content-display, none);
8186
block-size: 100%;
8287
z-index: 1;
8388
justify-content: center;
@@ -87,15 +92,15 @@ governing permissions and limitations under the License.
8792

8893
.spectrum-DropZone-button {
8994
box-sizing: border-box;
90-
block-size: var(--mod-drop-zone-content-height, var(--spectrum-drop-zone-content-height));
91-
max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-max-width));
92-
font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-drop-zone-content-font-family));
93-
font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-drop-zone-content-font-weight));
94-
font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-drop-zone-content-font-style));
95-
line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-drop-zone-content-line-height));
95+
block-size: var(--mod-drop-zone-content-height, var(--spectrum-component-height-300));
96+
max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-maximum-width));
97+
font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-sans-font-family-stack));
98+
font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-bold-font-weight));
99+
font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-default-font-style));
100+
line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-line-height-100));
96101
border: none;
97-
padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-drop-zone-content-top-to-text));
98-
padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-drop-zone-content-bottom-to-text));
102+
padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-component-top-to-text-300));
103+
padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-component-bottom-to-text-300));
99104
}
100105

101106
.spectrum-DropZone-button,

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

-62
Original file line numberDiff line numberDiff line change
@@ -680,69 +680,7 @@
680680
--system-divider-background-color-static-black: var(
681681
--spectrum-transparent-black-200
682682
);
683-
--system-drop-zone-padding: var(--spectrum-spacing-400);
684-
--system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400);
685-
--system-drop-zone-heading-to-body: var(--spectrum-spacing-75);
686-
--system-drop-zone-border-width: var(--spectrum-border-width-200);
687-
--system-drop-zone-corner-radius: var(--spectrum-corner-radius-100);
688683
--system-drop-zone-border-color: var(--spectrum-gray-200);
689-
--system-drop-zone-heading-font-family: var(
690-
--spectrum-sans-font-family-stack
691-
);
692-
--system-drop-zone-heading-font-weight: var(
693-
--spectrum-heading-sans-serif-font-weight
694-
);
695-
--system-drop-zone-heading-font-style: var(
696-
--spectrum-heading-sans-serif-font-style
697-
);
698-
--system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size);
699-
--system-drop-zone-heading-line-height: var(--spectrum-heading-line-height);
700-
--system-drop-zone-heading-color: var(--spectrum-heading-color);
701-
--system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack);
702-
--system-drop-zone-body-font-weight: var(
703-
--spectrum-body-sans-serif-font-weight
704-
);
705-
--system-drop-zone-body-font-style: var(
706-
--spectrum-body-sans-serif-font-style
707-
);
708-
--system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size);
709-
--system-drop-zone-body-line-height: var(--spectrum-body-line-height);
710-
--system-drop-zone-body-color: var(--spectrum-body-color);
711-
--system-drop-zone-background-color: var(
712-
--spectrum-drop-zone-background-color-rgb
713-
);
714-
--system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color);
715-
--system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color);
716-
--system-drop-zone-illustration-color-hover: var(
717-
--spectrum-accent-visual-color
718-
);
719-
--system-drop-zone-content-height: var(--spectrum-component-height-300);
720-
--system-drop-zone-content-max-width: var(
721-
--spectrum-drop-zone-content-maximum-width
722-
);
723-
--system-drop-zone-content-edge-to-text: var(
724-
--spectrum-component-edge-to-text-300
725-
);
726-
--system-drop-zone-content-top-to-text: var(
727-
--spectrum-component-top-to-text-300
728-
);
729-
--system-drop-zone-content-bottom-to-text: var(
730-
--spectrum-component-bottom-to-text-300
731-
);
732-
--system-drop-zone-content-font-family: var(
733-
--spectrum-sans-font-family-stack
734-
);
735-
--system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight);
736-
--system-drop-zone-content-font-style: var(--spectrum-default-font-style);
737-
--system-drop-zone-content-font-size: var(--spectrum-font-size-300);
738-
--system-drop-zone-content-line-height: var(--spectrum-line-height-100);
739-
--system-drop-zone-content-background-color: var(
740-
--spectrum-accent-visual-color
741-
);
742-
--system-drop-zone-content-color: var(--spectrum-white);
743-
--system-drop-zone-heading-font-size-cjk: var(
744-
--spectrum-drop-zone-cjk-title-size
745-
);
746684
--system-field-group-margin: var(--spectrum-spacing-300);
747685
--system-field-group-readonly-delimiter: ',';
748686
--system-infield-button-border-width: var(--spectrum-border-width-100);

0 commit comments

Comments
 (0)