Skip to content

Commit 352ec80

Browse files
renovate[bot]castastrophe
renovate[bot]
authored and
castastrophe
committed
chore: update dependency @spectrum-css/clearbutton to v7.2.0
1 parent 02af616 commit 352ec80

File tree

7 files changed

+97
-339
lines changed

7 files changed

+97
-339
lines changed

‎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.5.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

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

+6-78
Original file line numberDiff line numberDiff line change
@@ -413,87 +413,15 @@
413413
--system-clear-button-background-color-hover: transparent;
414414
--system-clear-button-background-color-down: transparent;
415415
--system-clear-button-background-color-key-focus: transparent;
416-
--system-clear-button-height: var(--spectrum-component-height-100);
417-
--system-clear-button-width: var(--spectrum-component-height-100);
418-
--system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
419-
--system-clear-button-icon-color: var(
420-
--spectrum-neutral-content-color-default
421-
);
422-
--system-clear-button-icon-color-hover: var(
423-
--spectrum-neutral-content-color-hover
424-
);
425-
--system-clear-button-icon-color-down: var(
426-
--spectrum-neutral-content-color-down
427-
);
428-
--system-clear-button-icon-color-key-focus: var(
429-
--spectrum-neutral-content-color-key-focus
430-
);
431-
--system-clear-button-size-s-height: var(--spectrum-component-height-75);
432-
--system-clear-button-size-s-width: var(--spectrum-component-height-75);
433-
--system-clear-button-size-l-height: var(--spectrum-component-height-200);
434-
--system-clear-button-size-l-width: var(--spectrum-component-height-200);
435-
--system-clear-button-size-xl-height: var(--spectrum-component-height-300);
436-
--system-clear-button-size-xl-width: var(--spectrum-component-height-300);
437-
--system-clear-button-quiet-background-color: var(
438-
--spectrum-clear-button-background-color-quiet,
439-
transparent
440-
);
441-
--system-clear-button-quiet-background-color-hover: var(
442-
--spectrum-clear-button-background-color-hover-quiet,
443-
transparent
444-
);
445-
--system-clear-button-quiet-background-color-down: var(
446-
--spectrum-clear-button-background-color-down-quiet,
447-
transparent
448-
);
449-
--system-clear-button-quiet-background-color-key-focus: var(
450-
--spectrum-clear-button-background-color-key-focus-quiet,
451-
transparent
452-
);
453-
--system-clear-button-over-background-icon-color: var(
454-
--spectrum-clear-button-icon-color-over-background,
455-
var(--spectrum-white)
456-
);
457-
--system-clear-button-over-background-icon-color-hover: var(
458-
--spectrum-clear-button-icon-color-hover-over-background,
459-
var(--spectrum-white)
460-
);
461-
--system-clear-button-over-background-icon-color-down: var(
462-
--spectrum-clear-button-icon-color-down-over-background,
463-
var(--spectrum-white)
464-
);
465-
--system-clear-button-over-background-icon-color-key-focus: var(
466-
--spectrum-clear-button-icon-color-key-focus-over-background,
467-
var(--spectrum-white)
468-
);
469-
--system-clear-button-over-background-background-color: var(
470-
--spectrum-clear-button-background-color-over-background,
471-
transparent
472-
);
473-
--system-clear-button-over-background-background-color-hover: var(
474-
--spectrum-clear-button-background-color-hover-over-background,
475-
var(--spectrum-transparent-white-400)
476-
);
477-
--system-clear-button-over-background-background-color-down: var(
478-
--spectrum-clear-button-background-color-hover-over-background,
479-
var(--spectrum-transparent-white-500)
480-
);
481-
--system-clear-button-over-background-background-color-key-focus: var(
482-
--spectrum-clear-button-background-color-hover-over-background,
483-
var(--spectrum-transparent-white-400)
484-
);
485-
--system-clear-button-disabled-icon-color: var(
486-
--spectrum-disabled-content-color
416+
--system-clear-button-static-white-background-color-hover: var(
417+
--spectrum-transparent-white-400
487418
);
488-
--system-clear-button-disabled-icon-color-hover: var(
489-
--spectrum-clear-button-icon-color-hover-disabled,
490-
var(--spectrum-disabled-content-color)
419+
--system-clear-button-static-white-background-color-down: var(
420+
--spectrum-transparent-white-500
491421
);
492-
--system-clear-button-disabled-icon-color-down: var(
493-
--spectrum-clear-button-icon-color-down-disabled,
494-
var(--spectrum-disabled-content-color)
422+
--system-clear-button-static-white-background-color-key-focus: var(
423+
--spectrum-transparent-white-400
495424
);
496-
--system-clear-button-disabled-background-color: transparent;
497425
--system-close-button-background-color-default: transparent;
498426
--system-close-button-background-color-hover: var(--spectrum-gray-100);
499427
--system-close-button-background-color-down: var(--spectrum-gray-200);

0 commit comments

Comments
 (0)