Skip to content

Commit 88558c7

Browse files
castastrophecastastrophe
committed
fix(radio,styles): use latest CSS
1 parent 4e8ac17 commit 88558c7

File tree

8 files changed

+25
-44
lines changed

8 files changed

+25
-44
lines changed

‎.changeset/funny-insects-sin.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@spectrum-web-components/radio': patch
3+
'@spectrum-web-components/styles': patch
4+
---
5+
6+
Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

‎packages/radio/src/radio.css‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,13 @@
2222
}
2323

2424
/**
25-
* Work around for https://github.com/adobe/spectrum-css/issues/2251
26-
**/
27-
:host([dir="rtl"]) #button:after {
28-
transform: translateX(50%) translateY(-50%);
25+
* @todo updated designs call for the radio button to be visible;
26+
* however as that can cause layout shifts, hold this update until a breaking release.
27+
*/
28+
:host([readonly]) #button {
29+
clip: rect(1px, 1px, 1px, 1px);
30+
clip-path: inset(50%);
31+
position: fixed;
32+
inset-block-end: 100%;
33+
inset-inline-end: 100%;
2934
}
30-
31-
/**
32-
* End workaround
33-
**/

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,6 @@
3131
--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
3232
--spectrum-radio-line-height: var(--spectrum-line-height-100);
3333
--spectrum-radio-animation-duration: var(--spectrum-animation-duration-100);
34-
}
35-
36-
:host(:lang(ja)),
37-
:host(:lang(ko)),
38-
:host(:lang(zh)) {
39-
--spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
40-
}
41-
42-
:host {
4334
--spectrum-radio-height: var(--spectrum-component-height-100);
4435
--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
4536
--spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
@@ -49,6 +40,12 @@
4940
--spectrum-radio-font-size: var(--spectrum-font-size-100);
5041
}
5142

43+
:host(:lang(ja)),
44+
:host(:lang(ko)),
45+
:host(:lang(zh)) {
46+
--spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
47+
}
48+
5249
:host([size="s"]) {
5350
--spectrum-radio-height: var(--spectrum-component-height-75);
5451
--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small);
@@ -157,6 +154,7 @@
157154
:host([readonly][disabled]) #input ~ #label,
158155
:host([readonly]) #label {
159156
color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
157+
margin-inline-start: 0;
160158
}
161159

162160
:host([emphasized][checked]) #input + #button:before {
@@ -265,7 +263,7 @@
265263
box-sizing: border-box;
266264
inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
267265
block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
268-
background-color: var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color));
266+
background-color: var(--highcontrast-radio-button-background-color, var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color)));
269267
border-width: var(--mod-radio-border-width, var(--spectrum-radio-border-width));
270268
border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default)));
271269
transition:

‎tools/styles/express/spectrum-core-global.css‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -503,10 +503,6 @@
503503
--spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
504504
--spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
505505
--spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black);
506-
}
507-
508-
:root,
509-
:host {
510506
--spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300);
511507
--spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400);
512508
--spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500);
@@ -856,10 +852,6 @@
856852
--spectrum-alias-tag-icon-margin-right-l: var(--spectrum-global-dimension-size-115);
857853
--spectrum-alias-tag-focusring-size: var(--spectrum-global-dimension-size-25);
858854
--spectrum-alias-tag-focusring-gap-selected: var(--spectrum-global-dimension-size-25);
859-
}
860-
861-
:root,
862-
:host {
863855
--spectrum-alias-colorhandle-outer-border-color: #0000006b;
864856
--spectrum-alias-component-text-color-selected-default: var(--spectrum-global-color-gray-50);
865857
--spectrum-alias-component-text-color-selected-hover: var(--spectrum-alias-component-text-color-selected-default);

‎tools/styles/spectrum-core-global.css‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -503,10 +503,6 @@
503503
--spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
504504
--spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
505505
--spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black);
506-
}
507-
508-
:root,
509-
:host {
510506
--spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300);
511507
--spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400);
512508
--spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500);
@@ -853,10 +849,6 @@
853849
--spectrum-alias-tag-focusring-gap-selected: var(--spectrum-global-dimension-size-25);
854850
--spectrum-alias-colorloupe-width: var(--spectrum-global-dimension-static-size-600);
855851
--spectrum-alias-colorloupe-height: var(--spectrum-global-dimension-static-size-800);
856-
}
857-
858-
:root,
859-
:host {
860852
--spectrum-alias-colorhandle-outer-border-color: #0000006b;
861853
--spectrum-alias-transparent-blue-background-color-hover: #0057be26;
862854
--spectrum-alias-transparent-blue-background-color-down: #0048994d;

‎tools/styles/spectrum-two/spectrum-core-global.css‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -503,10 +503,6 @@
503503
--spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
504504
--spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
505505
--spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black);
506-
}
507-
508-
:root,
509-
:host {
510506
--spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300);
511507
--spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400);
512508
--spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500);
@@ -853,10 +849,6 @@
853849
--spectrum-alias-tag-focusring-gap-selected: var(--spectrum-global-dimension-size-25);
854850
--spectrum-alias-colorloupe-width: var(--spectrum-global-dimension-static-size-600);
855851
--spectrum-alias-colorloupe-height: var(--spectrum-global-dimension-static-size-800);
856-
}
857-
858-
:root,
859-
:host {
860852
--spectrum-alias-colorhandle-outer-border-color: #0000006b;
861853
--spectrum-alias-transparent-blue-background-color-hover: #0057be26;
862854
--spectrum-alias-transparent-blue-background-color-down: #0048994d;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -398,11 +398,11 @@
398398
--system-progress-circle-track-border-color: var(--spectrum-gray-300);
399399
--system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300);
400400
--system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900);
401+
--system-radio-button-background-color: var(--spectrum-gray-50);
401402
--system-radio-button-border-color-default: var(--spectrum-gray-800);
402403
--system-radio-button-border-color-hover: var(--spectrum-gray-900);
403404
--system-radio-button-border-color-down: var(--spectrum-gray-900);
404405
--system-radio-button-border-color-focus: var(--spectrum-gray-900);
405-
--system-radio-button-background-color: var(--spectrum-gray-75);
406406
--system-search-border-color-default: var(--spectrum-gray-400);
407407
--system-search-border-color-hover: var(--spectrum-gray-500);
408408
--system-search-border-color-focus: var(--spectrum-gray-800);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -402,7 +402,7 @@
402402
--system-radio-button-border-color-hover: var(--spectrum-gray-700);
403403
--system-radio-button-border-color-down: var(--spectrum-gray-800);
404404
--system-radio-button-border-color-focus: var(--spectrum-gray-700);
405-
--system-radio-button-background-color: var(--spectrum-gray-75);
405+
--system-radio-button-background-color: var(--spectrum-gray-50);
406406
--system-search-border-color-default: var(--spectrum-gray-500);
407407
--system-search-border-color-hover: var(--spectrum-gray-600);
408408
--system-search-border-color-focus: var(--spectrum-gray-800);

0 commit comments

Comments
 (0)