Skip to content

Commit db37bd6

Browse files
castastrophecastastrophe
committed
fix: full update for css packages
1 parent fdb37bf commit db37bd6

File tree

109 files changed

+2519
-9108
lines changed

Some content is hidden

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

109 files changed

+2519
-9108
lines changed

‎packages/action-button/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
"@spectrum-web-components/shared": "1.4.0"
7272
},
7373
"devDependencies": {
74-
"@spectrum-css/actionbutton": "7.1.2"
74+
"@spectrum-css/actionbutton": "7.1.3"
7575
},
7676
"types": "./src/index.d.ts",
7777
"customElements": "custom-elements.json",

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

+10-10
Original file line numberDiff line numberDiff line change
@@ -63,32 +63,32 @@ governing permissions and limitations under the License.
6363
}
6464

6565
:host {
66-
--spectrum-actionbutton-border-radius: var(
67-
--system-action-button-size-m-border-radius
66+
--spectrum-actionbutton-border-radius-default: var(
67+
--system-action-button-size-m-border-radius-default
6868
);
6969
}
7070

7171
:host([size='xs']) {
72-
--spectrum-actionbutton-border-radius: var(
73-
--system-action-button-size-xs-border-radius
72+
--spectrum-actionbutton-border-radius-default: var(
73+
--system-action-button-size-xs-border-radius-default
7474
);
7575
}
7676

7777
:host([size='s']) {
78-
--spectrum-actionbutton-border-radius: var(
79-
--system-action-button-size-s-border-radius
78+
--spectrum-actionbutton-border-radius-default: var(
79+
--system-action-button-size-s-border-radius-default
8080
);
8181
}
8282

8383
:host([size='l']) {
84-
--spectrum-actionbutton-border-radius: var(
85-
--system-action-button-size-l-border-radius
84+
--spectrum-actionbutton-border-radius-default: var(
85+
--system-action-button-size-l-border-radius-default
8686
);
8787
}
8888

8989
:host([size='xl']) {
90-
--spectrum-actionbutton-border-radius: var(
91-
--system-action-button-size-xl-border-radius
90+
--spectrum-actionbutton-border-radius-default: var(
91+
--system-action-button-size-xl-border-radius-default
9292
);
9393
}
9494

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ governing permissions and limitations under the License.
9595
--spectrum-actionbutton-background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
9696
--spectrum-actionbutton-border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default)));
9797
--spectrum-actionbutton-content-color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default)));
98-
--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius));
98+
--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius-default));
9999
--spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100));
100100
--spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
101101
--spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
@@ -315,7 +315,6 @@ governing permissions and limitations under the License.
315315
line-height: var(--spectrum-actionbutton-height);
316316
font-size: var(--spectrum-actionbutton-font-size);
317317
white-space: nowrap;
318-
color: inherit;
319318
color: var(--mod-actionbutton-label-color, inherit);
320319
text-overflow: ellipsis;
321320
overflow: hidden;

‎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
}

0 commit comments

Comments
 (0)