Skip to content

Commit 03e677f

Browse files
renovate[bot]castastrophecaseyisonit
authored
fix: update dependency @spectrum-css/closebutton to v6.1.0 (#5338)
* chore: update dependency @spectrum-css/closebutton to v6.1.0 * fix(close-button,styles): use latest CSS --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: [ Cassondra ] <[email protected]> Co-authored-by: Casey Eickhoff <[email protected]>
1 parent aeeb079 commit 03e677f

File tree

8 files changed

+64
-238
lines changed

8 files changed

+64
-238
lines changed

‎.changeset/stale-candies-camp.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
'@spectrum-web-components/close-button': patch
23
'@spectrum-web-components/menu': patch
34
'@spectrum-web-components/styles': patch
45
'@spectrum-web-components/switch': patch

‎packages/close-button/package.json

Lines changed: 1 addition & 1 deletion
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/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",

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

Lines changed: 0 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -24,40 +24,9 @@ governing permissions and limitations under the License.
2424
--spectrum-closebutton-background-color-focus: var(
2525
--system-close-button-background-color-focus
2626
);
27-
--spectrum-closebutton-icon-color-default: var(
28-
--system-close-button-icon-color-default
29-
);
30-
--spectrum-closebutton-icon-color-hover: var(
31-
--system-close-button-icon-color-hover
32-
);
33-
--spectrum-closebutton-icon-color-down: var(
34-
--system-close-button-icon-color-down
35-
);
36-
--spectrum-closebutton-icon-color-focus: var(
37-
--system-close-button-icon-color-focus
38-
);
39-
--spectrum-closebutton-icon-color-disabled: var(
40-
--system-close-button-icon-color-disabled
41-
);
42-
--spectrum-closebutton-focus-indicator-thickness: var(
43-
--system-close-button-focus-indicator-thickness
44-
);
45-
--spectrum-closebutton-focus-indicator-gap: var(
46-
--system-close-button-focus-indicator-gap
47-
);
48-
--spectrum-closebutton-focus-indicator-color: var(
49-
--system-close-button-focus-indicator-color
50-
);
51-
--spectrum-closebutton-animation-duration: var(
52-
--system-close-button-animation-duration
53-
);
54-
--spectrum-closebutton-size: var(--system-close-button-size);
5527
}
5628

5729
:host([static-color='white']) {
58-
--spectrum-closebutton-static-background-color-default: var(
59-
--system-close-button-static-white-static-background-color-default
60-
);
6130
--spectrum-closebutton-static-background-color-hover: var(
6231
--system-close-button-static-white-static-background-color-hover
6332
);
@@ -67,21 +36,9 @@ governing permissions and limitations under the License.
6736
--spectrum-closebutton-static-background-color-focus: var(
6837
--system-close-button-static-white-static-background-color-focus
6938
);
70-
--spectrum-closebutton-icon-color-default: var(
71-
--system-close-button-static-white-icon-color-default
72-
);
73-
--spectrum-closebutton-icon-color-disabled: var(
74-
--system-close-button-static-white-icon-color-disabled
75-
);
76-
--spectrum-closebutton-focus-indicator-color: var(
77-
--system-close-button-static-white-focus-indicator-color
78-
);
7939
}
8040

8141
:host([static-color='black']) {
82-
--spectrum-closebutton-static-background-color-default: var(
83-
--system-close-button-static-black-static-background-color-default
84-
);
8542
--spectrum-closebutton-static-background-color-hover: var(
8643
--system-close-button-static-black-static-background-color-hover
8744
);
@@ -91,29 +48,4 @@ governing permissions and limitations under the License.
9148
--spectrum-closebutton-static-background-color-focus: var(
9249
--system-close-button-static-black-static-background-color-focus
9350
);
94-
--spectrum-closebutton-icon-color-default: var(
95-
--system-close-button-static-black-icon-color-default
96-
);
97-
--spectrum-closebutton-icon-color-disabled: var(
98-
--system-close-button-static-black-icon-color-disabled
99-
);
100-
--spectrum-closebutton-focus-indicator-color: var(
101-
--system-close-button-static-black-focus-indicator-color
102-
);
103-
}
104-
105-
:host([size='s']) {
106-
--spectrum-closebutton-size: var(--system-close-button-size-s-size);
107-
}
108-
109-
:host {
110-
--spectrum-closebutton-size: var(--system-close-button-size-m-size);
111-
}
112-
113-
:host([size='l']) {
114-
--spectrum-closebutton-size: var(--system-close-button-size-l-size);
115-
}
116-
117-
:host([size='xl']) {
118-
--spectrum-closebutton-size: var(--system-close-button-size-xl-size);
11951
}

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

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,19 @@ governing permissions and limitations under the License.
8282
}
8383

8484
:host {
85+
--spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default);
86+
--spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover);
87+
--spectrum-closebutton-icon-color-down: var(--spectrum-neutral-content-color-down);
88+
--spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
89+
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color);
90+
--spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
91+
--spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
92+
--spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
93+
--spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100);
8594
block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size));
86-
inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-size));
95+
inline-size: var(--mod-closebutton-width, var(--mod-closebutton-height, var(--spectrum-closebutton-size)));
8796
color: inherit;
88-
border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-size));
97+
border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius));
8998
transition: border-color var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out;
9099
margin-inline: var(--mod-closebutton-margin-inline);
91100
justify-content: center;
@@ -100,6 +109,41 @@ governing permissions and limitations under the License.
100109
position: relative;
101110
}
102111

112+
:host([size='s']) {
113+
--spectrum-closebutton-size: var(--spectrum-component-height-75);
114+
--spectrum-closebutton-border-radius: var(--spectrum-component-height-75);
115+
}
116+
117+
:host,
118+
:host {
119+
--spectrum-closebutton-size: var(--spectrum-component-height-100);
120+
--spectrum-closebutton-border-radius: var(--spectrum-component-height-100);
121+
}
122+
123+
:host([size='l']) {
124+
--spectrum-closebutton-size: var(--spectrum-component-height-200);
125+
--spectrum-closebutton-border-radius: var(--spectrum-component-height-200);
126+
}
127+
128+
:host([size='xl']) {
129+
--spectrum-closebutton-size: var(--spectrum-component-height-300);
130+
--spectrum-closebutton-border-radius: var(--spectrum-component-height-300);
131+
}
132+
133+
:host([static-color='white']) {
134+
--spectrum-closebutton-static-background-color-default: transparent;
135+
--spectrum-closebutton-icon-color-default: var(--spectrum-white);
136+
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
137+
--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
138+
}
139+
140+
:host([static-color='black']) {
141+
--spectrum-closebutton-static-background-color-default: transparent;
142+
--spectrum-closebutton-icon-color-default: var(--spectrum-black);
143+
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color);
144+
--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
145+
}
146+
103147
:host:after {
104148
pointer-events: none;
105149
content: '';
@@ -175,7 +219,7 @@ governing permissions and limitations under the License.
175219

176220
:host([static-color='black']:not([disabled]):hover),
177221
:host([static-color='white']:not([disabled]):hover) {
178-
background-color: var(--highcontrast-closebutton-static-background-color-hover, var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover)));
222+
background-color: var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover));
179223
}
180224

181225
:host([static-color='black']:not([disabled]):hover) .icon,
@@ -186,7 +230,7 @@ governing permissions and limitations under the License.
186230

187231
:host([static-color='black']:not([disabled]):is(:active, [active])),
188232
:host([static-color='white']:not([disabled]):is(:active, [active])) {
189-
background-color: var(--highcontrast-closebutton-static-background-color-down, var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down)));
233+
background-color: var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down));
190234
}
191235

192236
:host([static-color='black']:not([disabled]):is(:active, [active])) .icon,
@@ -198,7 +242,7 @@ governing permissions and limitations under the License.
198242
:host([static-color='black']:not([disabled]):focus-visible),
199243
:host([static-color='white'][focused]:not([disabled])),
200244
:host([static-color='white']:not([disabled]):focus-visible) {
201-
background-color: var(--highcontrast-closebutton-static-background-color-focus, var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus)));
245+
background-color: var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus));
202246
}
203247

204248
:host([static-color='black'][focused]:not([disabled])) .icon,
@@ -219,7 +263,7 @@ governing permissions and limitations under the License.
219263

220264
:host([static-color='black'][disabled]) .icon,
221265
:host([static-color='white'][disabled]) .icon {
222-
color: var(--highcontrast-closebutton-icon-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)));
266+
color: var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled));
223267
}
224268

225269
.icon {

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

Lines changed: 0 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -498,34 +498,6 @@
498498
--system-close-button-background-color-hover: var(--spectrum-gray-100);
499499
--system-close-button-background-color-down: var(--spectrum-gray-200);
500500
--system-close-button-background-color-focus: var(--spectrum-gray-100);
501-
--system-close-button-icon-color-default: var(
502-
--spectrum-neutral-content-color-default
503-
);
504-
--system-close-button-icon-color-hover: var(
505-
--spectrum-neutral-content-color-hover
506-
);
507-
--system-close-button-icon-color-down: var(
508-
--spectrum-neutral-content-color-down
509-
);
510-
--system-close-button-icon-color-focus: var(
511-
--spectrum-neutral-content-color-key-focus
512-
);
513-
--system-close-button-icon-color-disabled: var(
514-
--spectrum-disabled-content-color
515-
);
516-
--system-close-button-focus-indicator-thickness: var(
517-
--spectrum-focus-indicator-thickness
518-
);
519-
--system-close-button-focus-indicator-gap: var(
520-
--spectrum-focus-indicator-gap
521-
);
522-
--system-close-button-focus-indicator-color: var(
523-
--spectrum-focus-indicator-color
524-
);
525-
--system-close-button-animation-duration: var(
526-
--spectrum-animation-duration-100
527-
);
528-
--system-close-button-static-white-static-background-color-default: transparent;
529501
--system-close-button-static-white-static-background-color-hover: var(
530502
--spectrum-transparent-white-400
531503
);
@@ -535,16 +507,6 @@
535507
--system-close-button-static-white-static-background-color-focus: var(
536508
--spectrum-transparent-white-400
537509
);
538-
--system-close-button-static-white-icon-color-default: var(
539-
--spectrum-white
540-
);
541-
--system-close-button-static-white-icon-color-disabled: var(
542-
--spectrum-disabled-static-white-content-color
543-
);
544-
--system-close-button-static-white-focus-indicator-color: var(
545-
--spectrum-static-white-focus-indicator-color
546-
);
547-
--system-close-button-static-black-static-background-color-default: transparent;
548510
--system-close-button-static-black-static-background-color-hover: var(
549511
--spectrum-transparent-black-400
550512
);
@@ -554,20 +516,6 @@
554516
--system-close-button-static-black-static-background-color-focus: var(
555517
--spectrum-transparent-black-400
556518
);
557-
--system-close-button-static-black-icon-color-default: var(
558-
--spectrum-black
559-
);
560-
--system-close-button-static-black-icon-color-disabled: var(
561-
--spectrum-disabled-static-black-content-color
562-
);
563-
--system-close-button-static-black-focus-indicator-color: var(
564-
--spectrum-static-black-focus-indicator-color
565-
);
566-
--system-close-button-size-s-size: var(--spectrum-component-height-75);
567-
--system-close-button-size: var(--spectrum-component-height-100);
568-
--system-close-button-size-m-size: var(--spectrum-component-height-100);
569-
--system-close-button-size-l-size: var(--spectrum-component-height-200);
570-
--system-close-button-size-xl-size: var(--spectrum-component-height-300);
571519
--system-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
572520
--system-coach-indicator-min-inline-size: calc(
573521
var(--spectrum-coach-indicator-ring-diameter) * 3

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

Lines changed: 0 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -505,34 +505,6 @@
505505
--system-close-button-background-color-hover: var(--spectrum-gray-300);
506506
--system-close-button-background-color-down: var(--spectrum-gray-400);
507507
--system-close-button-background-color-focus: var(--spectrum-gray-300);
508-
--system-close-button-icon-color-default: var(
509-
--spectrum-neutral-content-color-default
510-
);
511-
--system-close-button-icon-color-hover: var(
512-
--spectrum-neutral-content-color-hover
513-
);
514-
--system-close-button-icon-color-down: var(
515-
--spectrum-neutral-content-color-down
516-
);
517-
--system-close-button-icon-color-focus: var(
518-
--spectrum-neutral-content-color-key-focus
519-
);
520-
--system-close-button-icon-color-disabled: var(
521-
--spectrum-disabled-content-color
522-
);
523-
--system-close-button-focus-indicator-thickness: var(
524-
--spectrum-focus-indicator-thickness
525-
);
526-
--system-close-button-focus-indicator-gap: var(
527-
--spectrum-focus-indicator-gap
528-
);
529-
--system-close-button-focus-indicator-color: var(
530-
--spectrum-focus-indicator-color
531-
);
532-
--system-close-button-animation-duration: var(
533-
--spectrum-animation-duration-100
534-
);
535-
--system-close-button-static-white-static-background-color-default: transparent;
536508
--system-close-button-static-white-static-background-color-hover: var(
537509
--spectrum-transparent-white-300
538510
);
@@ -542,16 +514,6 @@
542514
--system-close-button-static-white-static-background-color-focus: var(
543515
--spectrum-transparent-white-300
544516
);
545-
--system-close-button-static-white-icon-color-default: var(
546-
--spectrum-white
547-
);
548-
--system-close-button-static-white-icon-color-disabled: var(
549-
--spectrum-disabled-static-white-content-color
550-
);
551-
--system-close-button-static-white-focus-indicator-color: var(
552-
--spectrum-static-white-focus-indicator-color
553-
);
554-
--system-close-button-static-black-static-background-color-default: transparent;
555517
--system-close-button-static-black-static-background-color-hover: var(
556518
--spectrum-transparent-black-300
557519
);
@@ -561,20 +523,6 @@
561523
--system-close-button-static-black-static-background-color-focus: var(
562524
--spectrum-transparent-black-300
563525
);
564-
--system-close-button-static-black-icon-color-default: var(
565-
--spectrum-black
566-
);
567-
--system-close-button-static-black-icon-color-disabled: var(
568-
--spectrum-disabled-static-black-content-color
569-
);
570-
--system-close-button-static-black-focus-indicator-color: var(
571-
--spectrum-static-black-focus-indicator-color
572-
);
573-
--system-close-button-size-s-size: var(--spectrum-component-height-75);
574-
--system-close-button-size: var(--spectrum-component-height-100);
575-
--system-close-button-size-m-size: var(--spectrum-component-height-100);
576-
--system-close-button-size-l-size: var(--spectrum-component-height-200);
577-
--system-close-button-size-xl-size: var(--spectrum-component-height-300);
578526
--system-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
579527
--system-coach-indicator-min-inline-size: calc(
580528
var(--spectrum-coach-indicator-ring-diameter) * 3

0 commit comments

Comments
 (0)