Skip to content

Commit 5006718

Browse files
renovate[bot]castastrophe
renovate[bot]
authored and
castastrophe
committed
chore: update dependency @spectrum-css/radio to v10.1.0
1 parent c674612 commit 5006718

File tree

7 files changed

+89
-516
lines changed

7 files changed

+89
-516
lines changed

‎packages/radio/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
"@spectrum-web-components/shared": "1.6.0"
8080
},
8181
"devDependencies": {
82-
"@spectrum-css/radio": "10.0.0-s2-foundations.17"
82+
"@spectrum-css/radio": "10.1.0"
8383
},
8484
"types": "./src/index.d.ts",
8585
"customElements": "custom-elements.json",

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

-86
Original file line numberDiff line numberDiff line change
@@ -16,91 +16,5 @@ governing permissions and limitations under the License.
1616
--spectrum-radio-button-border-color-hover: var(--system-radio-button-border-color-hover);
1717
--spectrum-radio-button-border-color-down: var(--system-radio-button-border-color-down);
1818
--spectrum-radio-button-border-color-focus: var(--system-radio-button-border-color-focus);
19-
--spectrum-radio-neutral-content-color: var(--system-radio-neutral-content-color);
20-
--spectrum-radio-neutral-content-color-hover: var(--system-radio-neutral-content-color-hover);
21-
--spectrum-radio-neutral-content-color-down: var(--system-radio-neutral-content-color-down);
22-
--spectrum-radio-neutral-content-color-focus: var(--system-radio-neutral-content-color-focus);
23-
--spectrum-radio-focus-indicator-thickness: var(--system-radio-focus-indicator-thickness);
24-
--spectrum-radio-focus-indicator-gap: var(--system-radio-focus-indicator-gap);
25-
--spectrum-radio-focus-indicator-color: var(--system-radio-focus-indicator-color);
26-
--spectrum-radio-disabled-content-color: var(--system-radio-disabled-content-color);
27-
--spectrum-radio-disabled-border-color: var(--system-radio-disabled-border-color);
28-
--spectrum-radio-emphasized-accent-color: var(--system-radio-emphasized-accent-color);
29-
--spectrum-radio-emphasized-accent-color-hover: var(--system-radio-emphasized-accent-color-hover);
30-
--spectrum-radio-emphasized-accent-color-down: var(--system-radio-emphasized-accent-color-down);
31-
--spectrum-radio-emphasized-accent-color-focus: var(--system-radio-emphasized-accent-color-focus);
32-
--spectrum-radio-border-width: var(--system-radio-border-width);
3319
--spectrum-radio-button-background-color: var(--system-radio-button-background-color);
34-
--spectrum-radio-button-checked-border-color-default: var(--system-radio-button-checked-border-color-default);
35-
--spectrum-radio-button-checked-border-color-hover: var(--system-radio-button-checked-border-color-hover);
36-
--spectrum-radio-button-checked-border-color-down: var(--system-radio-button-checked-border-color-down);
37-
--spectrum-radio-button-checked-border-color-focus: var(--system-radio-button-checked-border-color-focus);
38-
--spectrum-radio-line-height: var(--system-radio-line-height);
39-
--spectrum-radio-animation-duration: var(--system-radio-animation-duration);
40-
--spectrum-radio-height: var(--system-radio-height);
41-
--spectrum-radio-button-control-size: var(--system-radio-button-control-size);
42-
--spectrum-radio-text-to-control: var(--system-radio-text-to-control);
43-
--spectrum-radio-label-top-to-text: var(--system-radio-label-top-to-text);
44-
--spectrum-radio-label-bottom-to-text: var(--system-radio-label-bottom-to-text);
45-
--spectrum-radio-button-top-to-control: var(--system-radio-button-top-to-control);
46-
--spectrum-radio-font-size: var(--system-radio-font-size);
47-
}
48-
49-
:host(:lang(ja)) {
50-
--spectrum-radio-line-height-cjk: var(--system-radio-lang-ja-line-height-cjk);
51-
}
52-
53-
:host(:lang(zh)) {
54-
--spectrum-radio-line-height-cjk: var(--system-radio-lang-zh-line-height-cjk);
55-
}
56-
57-
:host(:lang(ko)) {
58-
--spectrum-radio-line-height-cjk: var(--system-radio-lang-ko-line-height-cjk);
59-
}
60-
61-
:host {
62-
--spectrum-radio-height: var(--system-radio-size-m-height);
63-
--spectrum-radio-button-control-size: var(--system-radio-size-m-button-control-size);
64-
--spectrum-radio-text-to-control: var(--system-radio-size-m-text-to-control);
65-
--spectrum-radio-label-top-to-text: var(--system-radio-size-m-label-top-to-text);
66-
--spectrum-radio-label-bottom-to-text: var(--system-radio-size-m-label-bottom-to-text);
67-
--spectrum-radio-button-top-to-control: var(--system-radio-size-m-button-top-to-control);
68-
--spectrum-radio-font-size: var(--system-radio-size-m-font-size);
69-
}
70-
71-
:host([size="s"]) {
72-
--spectrum-radio-height: var(--system-radio-size-s-height);
73-
--spectrum-radio-button-control-size: var(--system-radio-size-s-button-control-size);
74-
--spectrum-radio-text-to-control: var(--system-radio-size-s-text-to-control);
75-
--spectrum-radio-label-top-to-text: var(--system-radio-size-s-label-top-to-text);
76-
--spectrum-radio-label-bottom-to-text: var(--system-radio-size-s-label-bottom-to-text);
77-
--spectrum-radio-button-top-to-control: var(--system-radio-size-s-button-top-to-control);
78-
--spectrum-radio-font-size: var(--system-radio-size-s-font-size);
79-
}
80-
81-
:host([size="l"]) {
82-
--spectrum-radio-height: var(--system-radio-size-l-height);
83-
--spectrum-radio-button-control-size: var(--system-radio-size-l-button-control-size);
84-
--spectrum-radio-text-to-control: var(--system-radio-size-l-text-to-control);
85-
--spectrum-radio-label-top-to-text: var(--system-radio-size-l-label-top-to-text);
86-
--spectrum-radio-label-bottom-to-text: var(--system-radio-size-l-label-bottom-to-text);
87-
--spectrum-radio-button-top-to-control: var(--system-radio-size-l-button-top-to-control);
88-
--spectrum-radio-font-size: var(--system-radio-size-l-font-size);
89-
}
90-
91-
:host([size="xl"]) {
92-
--spectrum-radio-height: var(--system-radio-size-xl-height);
93-
--spectrum-radio-button-control-size: var(--system-radio-size-xl-button-control-size);
94-
--spectrum-radio-text-to-control: var(--system-radio-size-xl-text-to-control);
95-
--spectrum-radio-label-top-to-text: var(--system-radio-size-xl-label-top-to-text);
96-
--spectrum-radio-label-bottom-to-text: var(--system-radio-size-xl-label-bottom-to-text);
97-
--spectrum-radio-button-top-to-control: var(--system-radio-size-xl-button-top-to-control);
98-
--spectrum-radio-font-size: var(--system-radio-size-xl-font-size);
99-
}
100-
101-
:host([emphasized]) {
102-
--spectrum-radio-button-checked-border-color-default: var(--system-radio-emphasized-button-checked-border-color-default);
103-
--spectrum-radio-button-checked-border-color-hover: var(--system-radio-emphasized-button-checked-border-color-hover);
104-
--spectrum-radio-button-checked-border-color-down: var(--system-radio-emphasized-button-checked-border-color-down);
105-
--spectrum-radio-button-checked-border-color-focus: var(--system-radio-emphasized-button-checked-border-color-focus);
10620
}

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

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

-136
Original file line numberDiff line numberDiff line change
@@ -854,143 +854,7 @@
854854
--system-radio-button-border-color-hover: var(--spectrum-gray-700);
855855
--system-radio-button-border-color-down: var(--spectrum-gray-800);
856856
--system-radio-button-border-color-focus: var(--spectrum-gray-700);
857-
--system-radio-neutral-content-color: var(
858-
--spectrum-neutral-content-color-default
859-
);
860-
--system-radio-neutral-content-color-hover: var(
861-
--spectrum-neutral-content-color-hover
862-
);
863-
--system-radio-neutral-content-color-down: var(
864-
--spectrum-neutral-content-color-down
865-
);
866-
--system-radio-neutral-content-color-focus: var(
867-
--spectrum-neutral-content-color-key-focus
868-
);
869-
--system-radio-focus-indicator-thickness: var(
870-
--spectrum-focus-indicator-thickness
871-
);
872-
--system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
873-
--system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
874-
--system-radio-disabled-content-color: var(
875-
--spectrum-disabled-content-color
876-
);
877-
--system-radio-disabled-border-color: var(
878-
--spectrum-disabled-content-color
879-
);
880-
--system-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
881-
--system-radio-emphasized-accent-color-hover: var(
882-
--spectrum-accent-color-1000
883-
);
884-
--system-radio-emphasized-accent-color-down: var(
885-
--spectrum-accent-color-1100
886-
);
887-
--system-radio-emphasized-accent-color-focus: var(
888-
--spectrum-accent-color-1000
889-
);
890-
--system-radio-border-width: var(--spectrum-border-width-200);
891857
--system-radio-button-background-color: var(--spectrum-gray-50);
892-
--system-radio-button-checked-border-color-default: var(
893-
--spectrum-neutral-background-color-selected-default
894-
);
895-
--system-radio-button-checked-border-color-hover: var(
896-
--spectrum-neutral-background-color-selected-hover
897-
);
898-
--system-radio-button-checked-border-color-down: var(
899-
--spectrum-neutral-background-color-selected-down
900-
);
901-
--system-radio-button-checked-border-color-focus: var(
902-
--spectrum-neutral-background-color-selected-focus
903-
);
904-
--system-radio-line-height: var(--spectrum-line-height-100);
905-
--system-radio-animation-duration: var(--spectrum-animation-duration-100);
906-
--system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100);
907-
--system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100);
908-
--system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100);
909-
--system-radio-height: var(--spectrum-component-height-100);
910-
--system-radio-size-m-height: var(--spectrum-component-height-100);
911-
--system-radio-button-control-size: var(
912-
--spectrum-radio-button-control-size-medium
913-
);
914-
--system-radio-size-m-button-control-size: var(
915-
--spectrum-radio-button-control-size-medium
916-
);
917-
--system-radio-text-to-control: var(--spectrum-text-to-control-100);
918-
--system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100);
919-
--system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
920-
--system-radio-size-m-label-top-to-text: var(
921-
--spectrum-component-top-to-text-100
922-
);
923-
--system-radio-label-bottom-to-text: var(
924-
--spectrum-component-bottom-to-text-100
925-
);
926-
--system-radio-size-m-label-bottom-to-text: var(
927-
--spectrum-component-bottom-to-text-100
928-
);
929-
--system-radio-button-top-to-control: var(
930-
--spectrum-radio-button-top-to-control-medium
931-
);
932-
--system-radio-size-m-button-top-to-control: var(
933-
--spectrum-radio-button-top-to-control-medium
934-
);
935-
--system-radio-font-size: var(--spectrum-font-size-100);
936-
--system-radio-size-m-font-size: var(--spectrum-font-size-100);
937-
--system-radio-size-s-height: var(--spectrum-component-height-75);
938-
--system-radio-size-s-button-control-size: var(
939-
--spectrum-radio-button-control-size-small
940-
);
941-
--system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75);
942-
--system-radio-size-s-label-top-to-text: var(
943-
--spectrum-component-top-to-text-75
944-
);
945-
--system-radio-size-s-label-bottom-to-text: var(
946-
--spectrum-component-bottom-to-text-75
947-
);
948-
--system-radio-size-s-button-top-to-control: var(
949-
--spectrum-radio-button-top-to-control-small
950-
);
951-
--system-radio-size-s-font-size: var(--spectrum-font-size-75);
952-
--system-radio-size-l-height: var(--spectrum-component-height-200);
953-
--system-radio-size-l-button-control-size: var(
954-
--spectrum-radio-button-control-size-large
955-
);
956-
--system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200);
957-
--system-radio-size-l-label-top-to-text: var(
958-
--spectrum-component-top-to-text-200
959-
);
960-
--system-radio-size-l-label-bottom-to-text: var(
961-
--spectrum-component-bottom-to-text-200
962-
);
963-
--system-radio-size-l-button-top-to-control: var(
964-
--spectrum-radio-button-top-to-control-large
965-
);
966-
--system-radio-size-l-font-size: var(--spectrum-font-size-200);
967-
--system-radio-size-xl-height: var(--spectrum-component-height-300);
968-
--system-radio-size-xl-button-control-size: var(
969-
--spectrum-radio-button-control-size-extra-large
970-
);
971-
--system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300);
972-
--system-radio-size-xl-label-top-to-text: var(
973-
--spectrum-component-top-to-text-300
974-
);
975-
--system-radio-size-xl-label-bottom-to-text: var(
976-
--spectrum-component-bottom-to-text-300
977-
);
978-
--system-radio-size-xl-button-top-to-control: var(
979-
--spectrum-radio-button-top-to-control-extra-large
980-
);
981-
--system-radio-size-xl-font-size: var(--spectrum-font-size-300);
982-
--system-radio-emphasized-button-checked-border-color-default: var(
983-
--spectrum-accent-color-900
984-
);
985-
--system-radio-emphasized-button-checked-border-color-hover: var(
986-
--spectrum-accent-color-1000
987-
);
988-
--system-radio-emphasized-button-checked-border-color-down: var(
989-
--spectrum-accent-color-1100
990-
);
991-
--system-radio-emphasized-button-checked-border-color-focus: var(
992-
--spectrum-accent-color-1000
993-
);
994858
--system-search-border-color-default: var(--spectrum-gray-500);
995859
--system-search-border-color-hover: var(--spectrum-gray-600);
996860
--system-search-border-color-focus: var(--spectrum-gray-800);

0 commit comments

Comments
 (0)