Skip to content

Commit 18acae3

Browse files
castastrophecastastrophe
committed
fix: full update for css packages
1 parent 6c58f50 commit 18acae3

File tree

103 files changed

+2464
-8984
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

103 files changed

+2464
-8984
lines changed

‎packages/button/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
"@spectrum-web-components/shared": "1.4.0"
100100
},
101101
"devDependencies": {
102-
"@spectrum-css/button": "14.1.1"
102+
"@spectrum-css/button": "14.1.4"
103103
},
104104
"types": "./src/index.d.ts",
105105
"customElements": "custom-elements.json",

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

+9-9
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,9 @@ governing permissions and limitations under the License.
133133
--mod-button-border-color-default: var(
134134
--system-button-secondary-outline-border-color-default
135135
);
136+
--mod-button-border-color-down: var(
137+
--system-button-secondary-outline-border-color-down
138+
);
136139
}
137140

138141
:host([static-color='white']) {
@@ -205,6 +208,9 @@ governing permissions and limitations under the License.
205208
}
206209

207210
:host([static-color='white'][treatment='outline']:not([variant='secondary'])) {
211+
--mod-button-background-color-default: var(
212+
--system-button-static-white-outline-not-secondary-background-color-default
213+
);
208214
--mod-button-background-color-hover: var(
209215
--system-button-static-white-outline-not-secondary-background-color-hover
210216
);
@@ -307,15 +313,6 @@ governing permissions and limitations under the License.
307313
}
308314

309315
:host([static-color='black'][variant='secondary'][treatment='outline']) {
310-
--mod-button-background-color-hover: var(
311-
--system-button-static-black-secondary-outline-background-color-hover
312-
);
313-
--mod-button-background-color-down: var(
314-
--system-button-static-black-secondary-outline-background-color-down
315-
);
316-
--mod-button-background-color-focus: var(
317-
--system-button-static-black-secondary-outline-background-color-focus
318-
);
319316
--mod-button-border-color-default: var(
320317
--system-button-static-black-secondary-outline-border-color-default
321318
);
@@ -331,6 +328,9 @@ governing permissions and limitations under the License.
331328
}
332329

333330
:host([static-color='black'][treatment='outline']:not([variant='secondary'])) {
331+
--mod-button-background-color-default: var(
332+
--system-button-static-black-outline-not-secondary-background-color-default
333+
);
334334
--mod-button-background-color-hover: var(
335335
--system-button-static-black-outline-not-secondary-background-color-hover
336336
);

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

+1-14
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ governing permissions and limitations under the License.
6161
}
6262

6363
#label {
64+
text-align: center;
6465
place-self: center;
6566
}
6667

@@ -249,7 +250,6 @@ governing permissions and limitations under the License.
249250
--mod-button-background-color-down: var(--spectrum-gray-400);
250251
--mod-button-border-color-default: var(--spectrum-gray-300);
251252
--mod-button-border-color-hover: var(--spectrum-gray-400);
252-
--mod-button-border-color-down: var(--spectrum-gray-500);
253253
--mod-button-border-color-focus: var(--spectrum-gray-400);
254254
--mod-button-border-color-disabled: var(--spectrum-disabled-border-color);
255255
--mod-button-content-color-default: var(--spectrum-neutral-content-color-default);
@@ -360,7 +360,6 @@ governing permissions and limitations under the License.
360360
font-size: var(--spectrum-button-font-size);
361361
font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight));
362362
gap: var(--spectrum-button-padding-label-to-icon);
363-
max-inline-size: none;
364363
max-inline-size: var(--mod-button-max-inline-size, none);
365364
min-inline-size: var(--spectrum-button-min-width);
366365
min-block-size: var(--spectrum-button-height);
@@ -370,12 +369,7 @@ governing permissions and limitations under the License.
370369
background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default)));
371370
border-style: solid;
372371
border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)));
373-
color: inherit;
374372
color: var(--spectrum-button-content-color-default, inherit);
375-
transition:
376-
border 0.13s linear,
377-
color 0.13s linear,
378-
background-color 0.13s linear;
379373
transition:
380374
border var(--spectrum-button-animation-duration, 0.13s) linear,
381375
color var(--spectrum-button-animation-duration, 0.13s) linear,
@@ -451,16 +445,12 @@ governing permissions and limitations under the License.
451445
::slotted([slot='icon']) {
452446
visibility: visible;
453447
opacity: 1;
454-
transition: opacity 0.13s ease-in-out;
455448
transition: opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out;
456449
}
457450

458451
.spectrum-ProgressCircle {
459452
visibility: hidden;
460453
opacity: 0;
461-
transition:
462-
opacity 0.13s ease-in-out,
463-
visibility 0s linear 0.13s;
464454
transition:
465455
opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out,
466456
visibility 0s linear var(--spectrum-button-animation-duration, 0.13s);
@@ -475,7 +465,6 @@ governing permissions and limitations under the License.
475465
:host([pending]) .spectrum-ProgressCircle {
476466
visibility: visible;
477467
opacity: 1;
478-
transition: opacity 0.13s ease-in-out;
479468
transition: opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out;
480469
}
481470

@@ -505,13 +494,11 @@ governing permissions and limitations under the License.
505494
}
506495

507496
[name='icon'] + #label {
508-
text-align: start;
509497
text-align: var(--mod-button-text-align-with-icon, start);
510498
}
511499

512500
#label {
513501
line-height: var(--spectrum-button-line-height);
514-
text-align: center;
515502
text-align: var(--mod-button-text-align, center);
516503
align-self: start;
517504
padding-block-start: calc(var(--spectrum-button-top-to-text) - var(--spectrum-button-border-width));

‎packages/clear-button/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"@spectrum-web-components/base": "1.4.0"
5353
},
5454
"devDependencies": {
55-
"@spectrum-css/clearbutton": "7.0.0-s2-foundations.16"
55+
"@spectrum-css/clearbutton": "7.2.0"
5656
},
5757
"types": "./src/index.d.ts",
5858
"customElements": "custom-elements.json",

‎packages/clear-button/src/clear-button-overrides.css

+4-78
Original file line numberDiff line numberDiff line change
@@ -24,90 +24,16 @@ governing permissions and limitations under the License.
2424
--spectrum-clear-button-background-color-key-focus: var(
2525
--system-clear-button-background-color-key-focus
2626
);
27-
--spectrum-clear-button-height: var(--system-clear-button-height);
28-
--spectrum-clear-button-width: var(--system-clear-button-width);
29-
--spectrum-clear-button-padding: var(--system-clear-button-padding);
30-
--spectrum-clear-button-icon-color: var(--system-clear-button-icon-color);
31-
--spectrum-clear-button-icon-color-hover: var(
32-
--system-clear-button-icon-color-hover
33-
);
34-
--spectrum-clear-button-icon-color-down: var(
35-
--system-clear-button-icon-color-down
36-
);
37-
--spectrum-clear-button-icon-color-key-focus: var(
38-
--system-clear-button-icon-color-key-focus
39-
);
40-
}
41-
42-
:host([size='s']) {
43-
--spectrum-clear-button-height: var(--system-clear-button-size-s-height);
44-
--spectrum-clear-button-width: var(--system-clear-button-size-s-width);
45-
}
46-
47-
:host([size='l']) {
48-
--spectrum-clear-button-height: var(--system-clear-button-size-l-height);
49-
--spectrum-clear-button-width: var(--system-clear-button-size-l-width);
50-
}
51-
52-
:host([size='xl']) {
53-
--spectrum-clear-button-height: var(--system-clear-button-size-xl-height);
54-
--spectrum-clear-button-width: var(--system-clear-button-size-xl-width);
55-
}
56-
57-
:host .spectrum-ClearButton--quiet {
58-
--spectrum-clear-button-background-color: var(
59-
--system-clear-button-quiet-background-color
60-
);
61-
--spectrum-clear-button-background-color-hover: var(
62-
--system-clear-button-quiet-background-color-hover
63-
);
64-
--spectrum-clear-button-background-color-down: var(
65-
--system-clear-button-quiet-background-color-down
66-
);
67-
--spectrum-clear-button-background-color-key-focus: var(
68-
--system-clear-button-quiet-background-color-key-focus
69-
);
7027
}
7128

72-
:host([variant='overBackground']) {
73-
--spectrum-clear-button-icon-color: var(
74-
--system-clear-button-over-background-icon-color
75-
);
76-
--spectrum-clear-button-icon-color-hover: var(
77-
--system-clear-button-over-background-icon-color-hover
78-
);
79-
--spectrum-clear-button-icon-color-down: var(
80-
--system-clear-button-over-background-icon-color-down
81-
);
82-
--spectrum-clear-button-icon-color-key-focus: var(
83-
--system-clear-button-over-background-icon-color-key-focus
84-
);
85-
--spectrum-clear-button-background-color: var(
86-
--system-clear-button-over-background-background-color
87-
);
29+
:host .spectrum-ClearButton--staticWhite {
8830
--spectrum-clear-button-background-color-hover: var(
89-
--system-clear-button-over-background-background-color-hover
31+
--system-clear-button-static-white-background-color-hover
9032
);
9133
--spectrum-clear-button-background-color-down: var(
92-
--system-clear-button-over-background-background-color-down
34+
--system-clear-button-static-white-background-color-down
9335
);
9436
--spectrum-clear-button-background-color-key-focus: var(
95-
--system-clear-button-over-background-background-color-key-focus
96-
);
97-
}
98-
99-
:host([disabled]),
100-
:host([disabled]) {
101-
--spectrum-clear-button-icon-color: var(
102-
--system-clear-button-disabled-icon-color
103-
);
104-
--spectrum-clear-button-icon-color-hover: var(
105-
--system-clear-button-disabled-icon-color-hover
106-
);
107-
--spectrum-clear-button-icon-color-down: var(
108-
--system-clear-button-disabled-icon-color-down
109-
);
110-
--spectrum-clear-button-background-color: var(
111-
--system-clear-button-disabled-background-color
37+
--system-clear-button-static-white-background-color-key-focus
11238
);
11339
}

‎packages/clear-button/src/spectrum-clear-button.css

+62-19
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,15 @@ governing permissions and limitations under the License.
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
1414
:host {
15+
--spectrum-clear-button-height: var(--spectrum-component-height-100);
16+
--spectrum-clear-button-width: var(--spectrum-component-height-100);
17+
--spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
18+
--spectrum-clear-button-icon-color: var(--spectrum-neutral-content-color-default);
19+
--spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
20+
--spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
21+
--spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
1522
block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
1623
inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width));
17-
cursor: pointer;
18-
background-color: initial;
1924
background-color: var(--mod-clear-button-background-color, transparent);
2025
padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding));
2126
color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color));
@@ -24,47 +29,84 @@ governing permissions and limitations under the License.
2429
margin: 0;
2530
}
2631

32+
:host([size='s']) {
33+
--spectrum-clear-button-height: var(--spectrum-component-height-75);
34+
--spectrum-clear-button-width: var(--spectrum-component-height-75);
35+
}
36+
37+
:host([size='l']) {
38+
--spectrum-clear-button-height: var(--spectrum-component-height-200);
39+
--spectrum-clear-button-width: var(--spectrum-component-height-200);
40+
}
41+
42+
:host([size='xl']) {
43+
--spectrum-clear-button-height: var(--spectrum-component-height-300);
44+
--spectrum-clear-button-width: var(--spectrum-component-height-300);
45+
}
46+
47+
:host .spectrum-ClearButton--quiet {
48+
--mod-clear-button-background-color: transparent;
49+
--mod-clear-button-background-color-hover: transparent;
50+
--mod-clear-button-background-color-down: transparent;
51+
--mod-clear-button-background-color-key-focus: transparent;
52+
}
53+
54+
:host .spectrum-ClearButton--staticWhite {
55+
--mod-clear-button-icon-color: var(--spectrum-white);
56+
--mod-clear-button-icon-color-hover: var(--spectrum-white);
57+
--mod-clear-button-icon-color-down: var(--spectrum-white);
58+
--mod-clear-button-icon-color-key-focus: var(--spectrum-white);
59+
--mod-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
60+
--mod-clear-button-background-color: transparent;
61+
}
62+
63+
:host([disabled]),
64+
:host([disabled]) {
65+
--mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
66+
--mod-clear-button-icon-color-hover: var(--spectrum-disabled-content-color);
67+
--mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color);
68+
--mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
69+
}
70+
71+
:host:not(:disabled) {
72+
cursor: pointer;
73+
}
74+
2775
.icon {
2876
margin-block: 0;
2977
margin-inline: auto;
3078
}
3179

3280
@media (hover: hover) {
33-
:host(:hover) {
81+
:host:not(:disabled):hover {
3482
color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover)));
3583
}
3684

37-
:host(:hover) .fill {
85+
:host:not(:disabled):hover .fill {
3886
background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover));
3987
}
4088
}
4189

42-
:host(:is(:active, [active])) {
90+
:host(:is(:active, [active])):not(:disabled) {
4391
color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down));
4492
}
4593

46-
:host(:is(:active, [active])) .fill {
94+
:host(:is(:active, [active])):not(:disabled) .fill {
4795
background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down));
4896
}
4997

50-
:host([focus-within]) .js-focus-within,
51-
:host(:focus-visible),
52-
:host:focus-within,
53-
:host([focus-within]) .js-focus-within {
98+
:host:not(:disabled):focus-visible,
99+
:host:not(:disabled):focus-within {
54100
color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus));
55101
}
56102

57-
:host([focus-within]) .js-focus-within .fill,
58-
:host(:focus-visible) .fill,
59-
:host:focus-within .fill,
60-
:host([focus-within]) .js-focus-within .fill {
103+
:host:not(:disabled):focus-visible .fill,
104+
:host:not(:disabled):focus-within .fill {
61105
background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus));
62106
}
63107

64-
:host([disabled]),
65-
:host([disabled]) {
66-
--spectrum-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
67-
--spectrum-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
108+
.spectrum-ClearButton-icon {
109+
color: inherit;
68110
}
69111

70112
.fill {
@@ -77,7 +119,8 @@ governing permissions and limitations under the License.
77119
display: flex;
78120
}
79121

80-
:host([variant='overBackground']:focus-visible) {
122+
:host([variant='overBackground']:focus-visible),
123+
.spectrum-ClearButton--staticWhite:focus-visible {
81124
outline: none;
82125
}
83126

‎packages/close-button/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"@spectrum-web-components/base": "1.4.0"
5353
},
5454
"devDependencies": {
55-
"@spectrum-css/closebutton": "6.0.0-s2-foundations.16"
55+
"@spectrum-css/closebutton": "6.1.0"
5656
},
5757
"types": "./src/index.d.ts",
5858
"customElements": "custom-elements.json",

0 commit comments

Comments
 (0)