fix(radio,styles): use latest CSS

Author: castastrophe

.changeset/funny-insects-sin.md

@@ -0,0 +1,6 @@
+---
+'@spectrum-web-components/radio': patch
+'@spectrum-web-components/styles': patch
+---
+
+Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

packages/radio/src/radio.css

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

packages/radio/src/spectrum-radio.css

@@ -31,15 +31,6 @@
     --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
     --spectrum-radio-line-height: var(--spectrum-line-height-100);
     --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100);
-}
-
-:host(:lang(ja)),
-:host(:lang(ko)),
-:host(:lang(zh)) {
-    --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
-}
-
-:host {
     --spectrum-radio-height: var(--spectrum-component-height-100);
     --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
     --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
@@ -49,6 +40,12 @@
     --spectrum-radio-font-size: var(--spectrum-font-size-100);
 }
 
+:host(:lang(ja)),
+:host(:lang(ko)),
+:host(:lang(zh)) {
+    --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
+}
+
 :host([size="s"]) {
     --spectrum-radio-height: var(--spectrum-component-height-75);
     --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small);
@@ -157,6 +154,7 @@
 :host([readonly][disabled]) #input ~ #label,
 :host([readonly]) #label {
     color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
+    margin-inline-start: 0;
 }
 
 :host([emphasized][checked]) #input + #button:before {
@@ -265,7 +263,7 @@
     box-sizing: border-box;
     inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
     block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
-    background-color: var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color));
+    background-color: var(--highcontrast-radio-button-background-color, var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color)));
     border-width: var(--mod-radio-border-width, var(--spectrum-radio-border-width));
     border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default)));
     transition:

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

@@ -503,10 +503,6 @@
     --spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
     --spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
     --spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-}
-
-:root,
-:host {
     --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300);
     --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400);
     --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500);
@@ -856,10 +852,6 @@
     --spectrum-alias-tag-icon-margin-right-l: var(--spectrum-global-dimension-size-115);
     --spectrum-alias-tag-focusring-size: var(--spectrum-global-dimension-size-25);
     --spectrum-alias-tag-focusring-gap-selected: var(--spectrum-global-dimension-size-25);
-}
-
-:root,
-:host {
     --spectrum-alias-colorhandle-outer-border-color: #0000006b;
     --spectrum-alias-component-text-color-selected-default: var(--spectrum-global-color-gray-50);
     --spectrum-alias-component-text-color-selected-hover: var(--spectrum-alias-component-text-color-selected-default);

tools/styles/spectrum-core-global.css

@@ -503,10 +503,6 @@
     --spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
     --spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
     --spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-}
-
-:root,
-:host {
     --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300);
     --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400);
     --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500);
@@ -853,10 +849,6 @@
     --spectrum-alias-tag-focusring-gap-selected: var(--spectrum-global-dimension-size-25);
     --spectrum-alias-colorloupe-width: var(--spectrum-global-dimension-static-size-600);
     --spectrum-alias-colorloupe-height: var(--spectrum-global-dimension-static-size-800);
-}
-
-:root,
-:host {
     --spectrum-alias-colorhandle-outer-border-color: #0000006b;
     --spectrum-alias-transparent-blue-background-color-hover: #0057be26;
     --spectrum-alias-transparent-blue-background-color-down: #0048994d;

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

@@ -503,10 +503,6 @@
     --spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
     --spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
     --spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black);
-}
-
-:root,
-:host {
     --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300);
     --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400);
     --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500);
@@ -853,10 +849,6 @@
     --spectrum-alias-tag-focusring-gap-selected: var(--spectrum-global-dimension-size-25);
     --spectrum-alias-colorloupe-width: var(--spectrum-global-dimension-static-size-600);
     --spectrum-alias-colorloupe-height: var(--spectrum-global-dimension-static-size-800);
-}
-
-:root,
-:host {
     --spectrum-alias-colorhandle-outer-border-color: #0000006b;
     --spectrum-alias-transparent-blue-background-color-hover: #0057be26;
     --spectrum-alias-transparent-blue-background-color-down: #0048994d;

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

@@ -398,11 +398,11 @@
     --system-progress-circle-track-border-color: var(--spectrum-gray-300);
     --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300);
     --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900);
+    --system-radio-button-background-color: var(--spectrum-gray-50);
     --system-radio-button-border-color-default: var(--spectrum-gray-800);
     --system-radio-button-border-color-hover: var(--spectrum-gray-900);
     --system-radio-button-border-color-down: var(--spectrum-gray-900);
     --system-radio-button-border-color-focus: var(--spectrum-gray-900);
-    --system-radio-button-background-color: var(--spectrum-gray-75);
     --system-search-border-color-default: var(--spectrum-gray-400);
     --system-search-border-color-hover: var(--spectrum-gray-500);
     --system-search-border-color-focus: var(--spectrum-gray-800);

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

@@ -402,7 +402,7 @@
     --system-radio-button-border-color-hover: var(--spectrum-gray-700);
     --system-radio-button-border-color-down: var(--spectrum-gray-800);
     --system-radio-button-border-color-focus: var(--spectrum-gray-700);
-    --system-radio-button-background-color: var(--spectrum-gray-75);
+    --system-radio-button-background-color: var(--spectrum-gray-50);
     --system-search-border-color-default: var(--spectrum-gray-500);
     --system-search-border-color-hover: var(--spectrum-gray-600);
     --system-search-border-color-focus: var(--spectrum-gray-800);