Skip to content

Commit fd68fae

Browse files
committed
fix(radio,styles): use latest CSS
1 parent 59b1b95 commit fd68fae

File tree

10 files changed

+36
-43
lines changed

10 files changed

+36
-43
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: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,17 @@ governing permissions and limitations under the License.
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
}
3035

31-
/**
32-
* End workaround
33-
**/
36+
:host([readonly]) #label {
37+
margin-inline-start: 0;
38+
}

packages/radio/src/spectrum-radio.css

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,6 @@ governing permissions and limitations under the License.
3232
--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
3333
--spectrum-radio-line-height: var(--spectrum-line-height-100);
3434
--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 {
4535
--spectrum-radio-height: var(--spectrum-component-height-100);
4636
--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
4737
--spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
@@ -51,6 +41,12 @@ governing permissions and limitations under the License.
5141
--spectrum-radio-font-size: var(--spectrum-font-size-100);
5242
}
5343

44+
:host(:lang(ja)),
45+
:host(:lang(ko)),
46+
:host(:lang(zh)) {
47+
--spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
48+
}
49+
5450
:host([size="s"]) {
5551
--spectrum-radio-height: var(--spectrum-component-height-75);
5652
--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small);

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
@@ -424,11 +424,11 @@
424424
--system-progress-circle-track-border-color: var(--spectrum-gray-300);
425425
--system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300);
426426
--system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900);
427+
--system-radio-button-background-color: var(--spectrum-gray-50);
427428
--system-radio-button-border-color-default: var(--spectrum-gray-800);
428429
--system-radio-button-border-color-hover: var(--spectrum-gray-900);
429430
--system-radio-button-border-color-down: var(--spectrum-gray-900);
430431
--system-radio-button-border-color-focus: var(--spectrum-gray-900);
431-
--system-radio-button-background-color: var(--spectrum-gray-75);
432432
--system-search-border-color-default: var(--spectrum-gray-400);
433433
--system-search-border-color-hover: var(--spectrum-gray-500);
434434
--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
@@ -428,7 +428,7 @@
428428
--system-radio-button-border-color-hover: var(--spectrum-gray-700);
429429
--system-radio-button-border-color-down: var(--spectrum-gray-800);
430430
--system-radio-button-border-color-focus: var(--spectrum-gray-700);
431-
--system-radio-button-background-color: var(--spectrum-gray-75);
431+
--system-radio-button-background-color: var(--spectrum-gray-50);
432432
--system-search-border-color-default: var(--spectrum-gray-500);
433433
--system-search-border-color-hover: var(--spectrum-gray-600);
434434
--system-search-border-color-focus: var(--spectrum-gray-800);

tools/theme/src/express/theme.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,11 @@ governing permissions and limitations under the License.
4141
}
4242
}
4343

44+
/* Manual override: can remove after cutover */
45+
:host {
46+
--system-radio-button-background-color: var(--spectrum-gray-50);
47+
}
48+
4449
#scale,
4550
#theme {
4651
width: 100%;

tools/theme/src/theme-core-tokens.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ governing permissions and limitations under the License.
3535
}
3636
}
3737

38+
/* Manual override: can remove after cutover */
39+
:host {
40+
--system-radio-button-background-color: var(--spectrum-gray-50);
41+
}
42+
3843
#scale,
3944
#theme {
4045
width: 100%;

0 commit comments

Comments
 (0)