Skip to content

Commit 3be0f14

Browse files
castastrophecastastrophe
committed
fix(switch,styles): use latest CSS
1 parent c1b97be commit 3be0f14

File tree

6 files changed

+148
-1564
lines changed

6 files changed

+148
-1564
lines changed

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

+81-10
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,78 @@ governing permissions and limitations under the License.
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
1414
:host {
15+
--spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default);
16+
--spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover);
17+
--spectrum-switch-label-color-down: var(--spectrum-neutral-content-color-down);
18+
--spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus);
19+
--spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color);
20+
--spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default);
21+
--spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
22+
--spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
23+
--spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
24+
--spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color);
1525
--spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
26+
--spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color);
27+
--spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color);
28+
}
29+
30+
:host([disabled]) {
31+
--spectrum-switch-label-color-default: var(--spectrum-disabled-content-color);
32+
}
33+
34+
:host([emphasized]) {
35+
--spectrum-switch-background-color-selected-default: var(--spectrum-accent-color-900);
36+
--spectrum-switch-background-color-selected-hover: var(--spectrum-accent-color-1000);
37+
--spectrum-switch-background-color-selected-down: var(--spectrum-accent-color-1100);
38+
--spectrum-switch-background-color-selected-focus: var(--spectrum-accent-color-1000);
39+
--spectrum-switch-handle-border-color-selected-default: var(--spectrum-accent-color-900);
40+
--spectrum-switch-handle-border-color-selected-hover: var(--spectrum-accent-color-1000);
41+
--spectrum-switch-handle-border-color-selected-down: var(--spectrum-accent-color-1100);
42+
--spectrum-switch-handle-border-color-selected-focus: var(--spectrum-accent-color-1000);
43+
}
44+
45+
:host,
46+
:host {
47+
--spectrum-switch-min-height: var(--spectrum-component-height-100);
48+
--spectrum-switch-control-width: var(--spectrum-switch-control-width-medium);
49+
--spectrum-switch-control-height: var(--spectrum-switch-control-height-medium);
50+
--spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-100);
51+
--spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium);
52+
--spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
53+
--spectrum-switch-font-size: var(--spectrum-font-size-100);
54+
}
55+
56+
:host([size='s']) {
57+
--spectrum-switch-min-height: var(--spectrum-component-height-75);
58+
--spectrum-switch-control-width: var(--spectrum-switch-control-width-small);
59+
--spectrum-switch-control-height: var(--spectrum-switch-control-height-small);
60+
--spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-75);
61+
--spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-small);
62+
--spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-75);
63+
--spectrum-switch-font-size: var(--spectrum-font-size-75);
64+
}
65+
66+
:host([size='l']) {
67+
--spectrum-switch-min-height: var(--spectrum-component-height-200);
68+
--spectrum-switch-control-width: var(--spectrum-switch-control-width-large);
69+
--spectrum-switch-control-height: var(--spectrum-switch-control-height-large);
70+
--spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-200);
71+
--spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-large);
72+
--spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-200);
73+
--spectrum-switch-font-size: var(--spectrum-font-size-200);
74+
}
75+
76+
:host([size='xl']) {
77+
--spectrum-switch-min-height: var(--spectrum-component-height-300);
78+
--spectrum-switch-control-width: var(--spectrum-switch-control-width-extra-large);
79+
--spectrum-switch-control-height: var(--spectrum-switch-control-height-extra-large);
80+
--spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-300);
81+
--spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large);
82+
--spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-300);
83+
--spectrum-switch-font-size: var(--spectrum-font-size-300);
84+
}
85+
86+
:host {
1687
min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height));
1788
max-inline-size: 100%;
1889
vertical-align: top;
@@ -140,7 +211,7 @@ governing permissions and limitations under the License.
140211
}
141212

142213
#input:focus-visible + #switch:after {
143-
box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--mod-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness))) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)));
214+
box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)));
144215
}
145216

146217
#input:focus-visible + #switch:before {
@@ -179,7 +250,7 @@ governing permissions and limitations under the License.
179250

180251
:host([disabled]:hover) #input + #switch,
181252
:host([disabled]:hover) #input + #switch {
182-
background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled)));
253+
background-color: var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled));
183254
}
184255

185256
:host([disabled]:hover) #input + #switch:before,
@@ -208,7 +279,7 @@ governing permissions and limitations under the License.
208279
}
209280

210281
:host(:hover) #input:focus-visible + #switch:after {
211-
box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--mod-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness))) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)));
282+
box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)));
212283
}
213284

214285
:host(:hover) #input:focus-visible + #switch:before {
@@ -238,7 +309,7 @@ governing permissions and limitations under the License.
238309

239310
:host([disabled]) #input + #switch,
240311
:host([disabled]) #input + #switch {
241-
background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled)));
312+
background-color: var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled));
242313
}
243314

244315
:host([disabled]) #input + #switch:before,
@@ -299,39 +370,39 @@ governing permissions and limitations under the License.
299370

300371
:host([disabled][checked]:hover) #input + #switch,
301372
:host([disabled][checked]:hover) #input + #switch {
302-
background-color: GrayText;
303373
box-shadow: inset 0 0 0 1px GrayText;
374+
background-color: GrayText;
304375
}
305376

306377
:host([disabled][checked]:hover) #input + #switch:before,
307378
:host([disabled][checked]:hover) #input + #switch:before {
308-
background-color: ButtonFace;
309379
border-color: GrayText;
380+
background-color: ButtonFace;
310381
}
311382
}
312383

313384
:host([disabled]) #input:not(:checked) + #switch,
314385
:host([disabled]) #input:not(:checked) + #switch {
315-
background-color: ButtonFace;
316386
box-shadow: inset 0 0 0 1px GrayText;
387+
background-color: ButtonFace;
317388
}
318389

319390
:host([disabled]) #input:not(:checked) + #switch:before,
320391
:host([disabled]) #input:not(:checked) + #switch:before {
321-
background-color: ButtonFace;
322392
border-color: GrayText;
393+
background-color: ButtonFace;
323394
}
324395

325396
:host([disabled][checked]) #input + #switch,
326397
:host([disabled][checked]) #input + #switch {
327-
background-color: GrayText;
328398
box-shadow: inset 0 0 0 1px GrayText;
399+
background-color: GrayText;
329400
}
330401

331402
:host([disabled][checked]) #input + #switch:before,
332403
:host([disabled][checked]) #input + #switch:before {
333-
background-color: ButtonFace;
334404
border-color: GrayText;
405+
background-color: ButtonFace;
335406
}
336407

337408
:host([disabled]) #input ~ #label,

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

-138
Original file line numberDiff line numberDiff line change
@@ -36,149 +36,11 @@ governing permissions and limitations under the License.
3636
--spectrum-switch-handle-border-color-selected-focus: var(
3737
--system-switch-handle-border-color-selected-focus
3838
);
39-
--spectrum-switch-label-color-default: var(
40-
--system-switch-label-color-default
41-
);
42-
--spectrum-switch-label-color-hover: var(--system-switch-label-color-hover);
43-
--spectrum-switch-label-color-down: var(--system-switch-label-color-down);
44-
--spectrum-switch-label-color-focus: var(--system-switch-label-color-focus);
45-
--spectrum-switch-label-color-disabled: var(
46-
--system-switch-label-color-disabled
47-
);
4839
--spectrum-switch-background-color: var(--system-switch-background-color);
4940
--spectrum-switch-background-color-disabled: var(
5041
--system-switch-background-color-disabled
5142
);
52-
--spectrum-switch-background-color-selected-disabled: var(
53-
--system-switch-background-color-selected-disabled
54-
);
55-
--spectrum-switch-background-color-selected-default: var(
56-
--system-switch-background-color-selected-default
57-
);
58-
--spectrum-switch-background-color-selected-hover: var(
59-
--system-switch-background-color-selected-hover
60-
);
61-
--spectrum-switch-background-color-selected-down: var(
62-
--system-switch-background-color-selected-down
63-
);
64-
--spectrum-switch-background-color-selected-focus: var(
65-
--system-switch-background-color-selected-focus
66-
);
67-
--spectrum-switch-focus-indicator-thickness: var(
68-
--system-switch-focus-indicator-thickness
69-
);
70-
--spectrum-switch-focus-indicator-color: var(
71-
--system-switch-focus-indicator-color
72-
);
7343
--spectrum-switch-handle-background-color: var(
7444
--system-switch-handle-background-color
7545
);
76-
--spectrum-switch-handle-border-color-disabled: var(
77-
--system-switch-handle-border-color-disabled
78-
);
79-
}
80-
81-
:host([disabled]) {
82-
--spectrum-switch-label-color-default: var(
83-
--system-switch-disabled-label-color-default
84-
);
85-
}
86-
87-
:host([emphasized]) {
88-
--spectrum-switch-background-color-selected-default: var(
89-
--system-switch-emphasized-background-color-selected-default
90-
);
91-
--spectrum-switch-background-color-selected-hover: var(
92-
--system-switch-emphasized-background-color-selected-hover
93-
);
94-
--spectrum-switch-background-color-selected-down: var(
95-
--system-switch-emphasized-background-color-selected-down
96-
);
97-
--spectrum-switch-background-color-selected-focus: var(
98-
--system-switch-emphasized-background-color-selected-focus
99-
);
100-
--spectrum-switch-handle-border-color-selected-default: var(
101-
--system-switch-emphasized-handle-border-color-selected-default
102-
);
103-
--spectrum-switch-handle-border-color-selected-hover: var(
104-
--system-switch-emphasized-handle-border-color-selected-hover
105-
);
106-
--spectrum-switch-handle-border-color-selected-down: var(
107-
--system-switch-emphasized-handle-border-color-selected-down
108-
);
109-
--spectrum-switch-handle-border-color-selected-focus: var(
110-
--system-switch-emphasized-handle-border-color-selected-focus
111-
);
112-
}
113-
114-
:host([size='s']) {
115-
--spectrum-switch-min-height: var(--system-switch-size-s-min-height);
116-
--spectrum-switch-control-width: var(--system-switch-size-s-control-width);
117-
--spectrum-switch-control-height: var(
118-
--system-switch-size-s-control-height
119-
);
120-
--spectrum-switch-control-label-spacing: var(
121-
--system-switch-size-s-control-label-spacing
122-
);
123-
--spectrum-switch-spacing-top-to-control: var(
124-
--system-switch-size-s-spacing-top-to-control
125-
);
126-
--spectrum-switch-spacing-top-to-label: var(
127-
--system-switch-size-s-spacing-top-to-label
128-
);
129-
--spectrum-switch-font-size: var(--system-switch-size-s-font-size);
130-
}
131-
132-
:host {
133-
--spectrum-switch-min-height: var(--system-switch-size-m-min-height);
134-
--spectrum-switch-control-width: var(--system-switch-size-m-control-width);
135-
--spectrum-switch-control-height: var(
136-
--system-switch-size-m-control-height
137-
);
138-
--spectrum-switch-control-label-spacing: var(
139-
--system-switch-size-m-control-label-spacing
140-
);
141-
--spectrum-switch-spacing-top-to-control: var(
142-
--system-switch-size-m-spacing-top-to-control
143-
);
144-
--spectrum-switch-spacing-top-to-label: var(
145-
--system-switch-size-m-spacing-top-to-label
146-
);
147-
--spectrum-switch-font-size: var(--system-switch-size-m-font-size);
148-
}
149-
150-
:host([size='l']) {
151-
--spectrum-switch-min-height: var(--system-switch-size-l-min-height);
152-
--spectrum-switch-control-width: var(--system-switch-size-l-control-width);
153-
--spectrum-switch-control-height: var(
154-
--system-switch-size-l-control-height
155-
);
156-
--spectrum-switch-control-label-spacing: var(
157-
--system-switch-size-l-control-label-spacing
158-
);
159-
--spectrum-switch-spacing-top-to-control: var(
160-
--system-switch-size-l-spacing-top-to-control
161-
);
162-
--spectrum-switch-spacing-top-to-label: var(
163-
--system-switch-size-l-spacing-top-to-label
164-
);
165-
--spectrum-switch-font-size: var(--system-switch-size-l-font-size);
166-
}
167-
168-
:host([size='xl']) {
169-
--spectrum-switch-min-height: var(--system-switch-size-xl-min-height);
170-
--spectrum-switch-control-width: var(--system-switch-size-xl-control-width);
171-
--spectrum-switch-control-height: var(
172-
--system-switch-size-xl-control-height
173-
);
174-
--spectrum-switch-control-label-spacing: var(
175-
--system-switch-size-xl-control-label-spacing
176-
);
177-
--spectrum-switch-spacing-top-to-control: var(
178-
--system-switch-size-xl-spacing-top-to-control
179-
);
180-
--spectrum-switch-spacing-top-to-label: var(
181-
--system-switch-size-xl-spacing-top-to-label
182-
);
183-
--spectrum-switch-font-size: var(--system-switch-size-xl-font-size);
18446
}

0 commit comments

Comments
 (0)