Skip to content

Commit b59cf43

Browse files
castastrophecastastrophe
committed
fix(radio,styles): use latest CSS
1 parent 1614651 commit b59cf43

File tree

6 files changed

+77
-602
lines changed

6 files changed

+77
-602
lines changed

‎.changeset/brave-crews-win.md

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
'@spectrum-web-components/illustrated-message': patch
2020
'@spectrum-web-components/link': patch
2121
'@spectrum-web-components/modal': patch
22+
'@spectrum-web-components/radio': patch
2223
'@spectrum-web-components/sidenav': patch
2324
'@spectrum-web-components/split-view': patch
2425
'@spectrum-web-components/styles': patch

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

-180
Original file line numberDiff line numberDiff line change
@@ -24,187 +24,7 @@ governing permissions and limitations under the License.
2424
--spectrum-radio-button-border-color-focus: var(
2525
--system-radio-button-border-color-focus
2626
);
27-
--spectrum-radio-neutral-content-color: var(
28-
--system-radio-neutral-content-color
29-
);
30-
--spectrum-radio-neutral-content-color-hover: var(
31-
--system-radio-neutral-content-color-hover
32-
);
33-
--spectrum-radio-neutral-content-color-down: var(
34-
--system-radio-neutral-content-color-down
35-
);
36-
--spectrum-radio-neutral-content-color-focus: var(
37-
--system-radio-neutral-content-color-focus
38-
);
39-
--spectrum-radio-focus-indicator-thickness: var(
40-
--system-radio-focus-indicator-thickness
41-
);
42-
--spectrum-radio-focus-indicator-gap: var(
43-
--system-radio-focus-indicator-gap
44-
);
45-
--spectrum-radio-focus-indicator-color: var(
46-
--system-radio-focus-indicator-color
47-
);
48-
--spectrum-radio-disabled-content-color: var(
49-
--system-radio-disabled-content-color
50-
);
51-
--spectrum-radio-disabled-border-color: var(
52-
--system-radio-disabled-border-color
53-
);
54-
--spectrum-radio-emphasized-accent-color: var(
55-
--system-radio-emphasized-accent-color
56-
);
57-
--spectrum-radio-emphasized-accent-color-hover: var(
58-
--system-radio-emphasized-accent-color-hover
59-
);
60-
--spectrum-radio-emphasized-accent-color-down: var(
61-
--system-radio-emphasized-accent-color-down
62-
);
63-
--spectrum-radio-emphasized-accent-color-focus: var(
64-
--system-radio-emphasized-accent-color-focus
65-
);
66-
--spectrum-radio-border-width: var(--system-radio-border-width);
6727
--spectrum-radio-button-background-color: var(
6828
--system-radio-button-background-color
6929
);
70-
--spectrum-radio-button-checked-border-color-default: var(
71-
--system-radio-button-checked-border-color-default
72-
);
73-
--spectrum-radio-button-checked-border-color-hover: var(
74-
--system-radio-button-checked-border-color-hover
75-
);
76-
--spectrum-radio-button-checked-border-color-down: var(
77-
--system-radio-button-checked-border-color-down
78-
);
79-
--spectrum-radio-button-checked-border-color-focus: var(
80-
--system-radio-button-checked-border-color-focus
81-
);
82-
--spectrum-radio-line-height: var(--system-radio-line-height);
83-
--spectrum-radio-animation-duration: var(--system-radio-animation-duration);
84-
--spectrum-radio-height: var(--system-radio-height);
85-
--spectrum-radio-button-control-size: var(
86-
--system-radio-button-control-size
87-
);
88-
--spectrum-radio-text-to-control: var(--system-radio-text-to-control);
89-
--spectrum-radio-label-top-to-text: var(--system-radio-label-top-to-text);
90-
--spectrum-radio-label-bottom-to-text: var(
91-
--system-radio-label-bottom-to-text
92-
);
93-
--spectrum-radio-button-top-to-control: var(
94-
--system-radio-button-top-to-control
95-
);
96-
--spectrum-radio-font-size: var(--system-radio-font-size);
97-
}
98-
99-
:host(:lang(ja)) {
100-
--spectrum-radio-line-height-cjk: var(
101-
--system-radio-lang-ja-line-height-cjk
102-
);
103-
}
104-
105-
:host(:lang(zh)) {
106-
--spectrum-radio-line-height-cjk: var(
107-
--system-radio-lang-zh-line-height-cjk
108-
);
109-
}
110-
111-
:host(:lang(ko)) {
112-
--spectrum-radio-line-height-cjk: var(
113-
--system-radio-lang-ko-line-height-cjk
114-
);
115-
}
116-
117-
:host {
118-
--spectrum-radio-height: var(--system-radio-size-m-height);
119-
--spectrum-radio-button-control-size: var(
120-
--system-radio-size-m-button-control-size
121-
);
122-
--spectrum-radio-text-to-control: var(
123-
--system-radio-size-m-text-to-control
124-
);
125-
--spectrum-radio-label-top-to-text: var(
126-
--system-radio-size-m-label-top-to-text
127-
);
128-
--spectrum-radio-label-bottom-to-text: var(
129-
--system-radio-size-m-label-bottom-to-text
130-
);
131-
--spectrum-radio-button-top-to-control: var(
132-
--system-radio-size-m-button-top-to-control
133-
);
134-
--spectrum-radio-font-size: var(--system-radio-size-m-font-size);
135-
}
136-
137-
:host([size='s']) {
138-
--spectrum-radio-height: var(--system-radio-size-s-height);
139-
--spectrum-radio-button-control-size: var(
140-
--system-radio-size-s-button-control-size
141-
);
142-
--spectrum-radio-text-to-control: var(
143-
--system-radio-size-s-text-to-control
144-
);
145-
--spectrum-radio-label-top-to-text: var(
146-
--system-radio-size-s-label-top-to-text
147-
);
148-
--spectrum-radio-label-bottom-to-text: var(
149-
--system-radio-size-s-label-bottom-to-text
150-
);
151-
--spectrum-radio-button-top-to-control: var(
152-
--system-radio-size-s-button-top-to-control
153-
);
154-
--spectrum-radio-font-size: var(--system-radio-size-s-font-size);
155-
}
156-
157-
:host([size='l']) {
158-
--spectrum-radio-height: var(--system-radio-size-l-height);
159-
--spectrum-radio-button-control-size: var(
160-
--system-radio-size-l-button-control-size
161-
);
162-
--spectrum-radio-text-to-control: var(
163-
--system-radio-size-l-text-to-control
164-
);
165-
--spectrum-radio-label-top-to-text: var(
166-
--system-radio-size-l-label-top-to-text
167-
);
168-
--spectrum-radio-label-bottom-to-text: var(
169-
--system-radio-size-l-label-bottom-to-text
170-
);
171-
--spectrum-radio-button-top-to-control: var(
172-
--system-radio-size-l-button-top-to-control
173-
);
174-
--spectrum-radio-font-size: var(--system-radio-size-l-font-size);
175-
}
176-
177-
:host([size='xl']) {
178-
--spectrum-radio-height: var(--system-radio-size-xl-height);
179-
--spectrum-radio-button-control-size: var(
180-
--system-radio-size-xl-button-control-size
181-
);
182-
--spectrum-radio-text-to-control: var(
183-
--system-radio-size-xl-text-to-control
184-
);
185-
--spectrum-radio-label-top-to-text: var(
186-
--system-radio-size-xl-label-top-to-text
187-
);
188-
--spectrum-radio-label-bottom-to-text: var(
189-
--system-radio-size-xl-label-bottom-to-text
190-
);
191-
--spectrum-radio-button-top-to-control: var(
192-
--system-radio-size-xl-button-top-to-control
193-
);
194-
--spectrum-radio-font-size: var(--system-radio-size-xl-font-size);
195-
}
196-
197-
:host([emphasized]) {
198-
--spectrum-radio-button-checked-border-color-default: var(
199-
--system-radio-emphasized-button-checked-border-color-default
200-
);
201-
--spectrum-radio-button-checked-border-color-hover: var(
202-
--system-radio-emphasized-button-checked-border-color-hover
203-
);
204-
--spectrum-radio-button-checked-border-color-down: var(
205-
--system-radio-emphasized-button-checked-border-color-down
206-
);
207-
--spectrum-radio-button-checked-border-color-focus: var(
208-
--system-radio-emphasized-button-checked-border-color-focus
209-
);
21030
}

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

+74-12
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,79 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
14+
:host {
15+
--spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
16+
--spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
17+
--spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
18+
--spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
19+
--spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
20+
--spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
21+
--spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
22+
--spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color);
23+
--spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color);
24+
--spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
25+
--spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
26+
--spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
27+
--spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
28+
--spectrum-radio-border-width: var(--spectrum-border-width-200);
29+
--spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
30+
--spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
31+
--spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
32+
--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
33+
--spectrum-radio-line-height: var(--spectrum-line-height-100);
34+
--spectrum-radio-animation-duration: var(--spectrum-animation-duration-100);
35+
}
36+
37+
:host(:lang(ja)),
38+
:host(:lang(ko)),
39+
:host(:lang(zh)) {
40+
--spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
41+
}
42+
43+
:host,
44+
:host {
45+
--spectrum-radio-height: var(--spectrum-component-height-100);
46+
--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
47+
--spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
48+
--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
49+
--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
50+
--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
51+
--spectrum-radio-font-size: var(--spectrum-font-size-100);
52+
}
53+
54+
:host([size='s']) {
55+
--spectrum-radio-height: var(--spectrum-component-height-75);
56+
--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small);
57+
--spectrum-radio-text-to-control: var(--spectrum-text-to-control-75);
58+
--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75);
59+
--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
60+
--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small);
61+
--spectrum-radio-font-size: var(--spectrum-font-size-75);
62+
}
63+
64+
:host([size='l']) {
65+
--spectrum-radio-height: var(--spectrum-component-height-200);
66+
--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large);
67+
--spectrum-radio-text-to-control: var(--spectrum-text-to-control-200);
68+
--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200);
69+
--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
70+
--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large);
71+
--spectrum-radio-font-size: var(--spectrum-font-size-200);
72+
}
73+
74+
:host([size='xl']) {
75+
--spectrum-radio-height: var(--spectrum-component-height-300);
76+
--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large);
77+
--spectrum-radio-text-to-control: var(--spectrum-text-to-control-300);
78+
--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300);
79+
--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
80+
--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large);
81+
--spectrum-radio-font-size: var(--spectrum-font-size-300);
82+
}
83+
1484
@media (forced-colors: active) {
1585
:host {
86+
--highcontrast-radio-button-background-color: ButtonFace;
1687
--highcontrast-radio-neutral-content-color: CanvasText;
1788
--highcontrast-radio-neutral-content-color-hover: CanvasText;
1889
--highcontrast-radio-neutral-content-color-down: CanvasText;
@@ -80,23 +151,14 @@ governing permissions and limitations under the License.
80151
color: var(--highcontrast-radio-neutral-content-color-focus, var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus)));
81152
}
82153

83-
:host([readonly]) #input:read-only {
84-
cursor: auto;
85-
}
86-
87-
:host([readonly]) #button {
88-
clip: rect(1px, 1px, 1px, 1px);
89-
clip-path: inset(50%);
90-
position: fixed;
91-
inset-block-end: 100%;
92-
inset-inline-end: 100%;
154+
:host([readonly]) #input {
155+
pointer-events: none;
93156
}
94157

95158
:host([readonly][checked][disabled]) #input ~ #label,
96159
:host([readonly][disabled]) #input ~ #label,
97160
:host([readonly]) #label {
98161
color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
99-
margin-inline-start: 0;
100162
}
101163

102164
:host([emphasized][checked]) #input + #button:before {
@@ -205,7 +267,7 @@ governing permissions and limitations under the License.
205267
box-sizing: border-box;
206268
inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
207269
block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
208-
background-color: var(--highcontrast-radio-button-background-color, var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color)));
270+
background-color: var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color));
209271
border-width: var(--mod-radio-border-width, var(--spectrum-radio-border-width));
210272
border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default)));
211273
transition:

0 commit comments

Comments
 (0)