diff --git a/.changeset/funny-insects-sin.md b/.changeset/funny-insects-sin.md
new file mode 100644
index 00000000000..c89ba2b1e27
--- /dev/null
+++ b/.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.
diff --git a/packages/radio/src/radio-overrides.css b/packages/radio/src/radio-overrides.css
index 050e7baab03..900681f27d0 100644
--- a/packages/radio/src/radio-overrides.css
+++ b/packages/radio/src/radio-overrides.css
@@ -16,91 +16,5 @@ governing permissions and limitations under the License.
--spectrum-radio-button-border-color-hover: var(--system-radio-button-border-color-hover);
--spectrum-radio-button-border-color-down: var(--system-radio-button-border-color-down);
--spectrum-radio-button-border-color-focus: var(--system-radio-button-border-color-focus);
- --spectrum-radio-neutral-content-color: var(--system-radio-neutral-content-color);
- --spectrum-radio-neutral-content-color-hover: var(--system-radio-neutral-content-color-hover);
- --spectrum-radio-neutral-content-color-down: var(--system-radio-neutral-content-color-down);
- --spectrum-radio-neutral-content-color-focus: var(--system-radio-neutral-content-color-focus);
- --spectrum-radio-focus-indicator-thickness: var(--system-radio-focus-indicator-thickness);
- --spectrum-radio-focus-indicator-gap: var(--system-radio-focus-indicator-gap);
- --spectrum-radio-focus-indicator-color: var(--system-radio-focus-indicator-color);
- --spectrum-radio-disabled-content-color: var(--system-radio-disabled-content-color);
- --spectrum-radio-disabled-border-color: var(--system-radio-disabled-border-color);
- --spectrum-radio-emphasized-accent-color: var(--system-radio-emphasized-accent-color);
- --spectrum-radio-emphasized-accent-color-hover: var(--system-radio-emphasized-accent-color-hover);
- --spectrum-radio-emphasized-accent-color-down: var(--system-radio-emphasized-accent-color-down);
- --spectrum-radio-emphasized-accent-color-focus: var(--system-radio-emphasized-accent-color-focus);
- --spectrum-radio-border-width: var(--system-radio-border-width);
--spectrum-radio-button-background-color: var(--system-radio-button-background-color);
- --spectrum-radio-button-checked-border-color-default: var(--system-radio-button-checked-border-color-default);
- --spectrum-radio-button-checked-border-color-hover: var(--system-radio-button-checked-border-color-hover);
- --spectrum-radio-button-checked-border-color-down: var(--system-radio-button-checked-border-color-down);
- --spectrum-radio-button-checked-border-color-focus: var(--system-radio-button-checked-border-color-focus);
- --spectrum-radio-line-height: var(--system-radio-line-height);
- --spectrum-radio-animation-duration: var(--system-radio-animation-duration);
- --spectrum-radio-height: var(--system-radio-height);
- --spectrum-radio-button-control-size: var(--system-radio-button-control-size);
- --spectrum-radio-text-to-control: var(--system-radio-text-to-control);
- --spectrum-radio-label-top-to-text: var(--system-radio-label-top-to-text);
- --spectrum-radio-label-bottom-to-text: var(--system-radio-label-bottom-to-text);
- --spectrum-radio-button-top-to-control: var(--system-radio-button-top-to-control);
- --spectrum-radio-font-size: var(--system-radio-font-size);
-}
-
-:host(:lang(ja)) {
- --spectrum-radio-line-height-cjk: var(--system-radio-lang-ja-line-height-cjk);
-}
-
-:host(:lang(zh)) {
- --spectrum-radio-line-height-cjk: var(--system-radio-lang-zh-line-height-cjk);
-}
-
-:host(:lang(ko)) {
- --spectrum-radio-line-height-cjk: var(--system-radio-lang-ko-line-height-cjk);
-}
-
-:host {
- --spectrum-radio-height: var(--system-radio-size-m-height);
- --spectrum-radio-button-control-size: var(--system-radio-size-m-button-control-size);
- --spectrum-radio-text-to-control: var(--system-radio-size-m-text-to-control);
- --spectrum-radio-label-top-to-text: var(--system-radio-size-m-label-top-to-text);
- --spectrum-radio-label-bottom-to-text: var(--system-radio-size-m-label-bottom-to-text);
- --spectrum-radio-button-top-to-control: var(--system-radio-size-m-button-top-to-control);
- --spectrum-radio-font-size: var(--system-radio-size-m-font-size);
-}
-
-:host([size="s"]) {
- --spectrum-radio-height: var(--system-radio-size-s-height);
- --spectrum-radio-button-control-size: var(--system-radio-size-s-button-control-size);
- --spectrum-radio-text-to-control: var(--system-radio-size-s-text-to-control);
- --spectrum-radio-label-top-to-text: var(--system-radio-size-s-label-top-to-text);
- --spectrum-radio-label-bottom-to-text: var(--system-radio-size-s-label-bottom-to-text);
- --spectrum-radio-button-top-to-control: var(--system-radio-size-s-button-top-to-control);
- --spectrum-radio-font-size: var(--system-radio-size-s-font-size);
-}
-
-:host([size="l"]) {
- --spectrum-radio-height: var(--system-radio-size-l-height);
- --spectrum-radio-button-control-size: var(--system-radio-size-l-button-control-size);
- --spectrum-radio-text-to-control: var(--system-radio-size-l-text-to-control);
- --spectrum-radio-label-top-to-text: var(--system-radio-size-l-label-top-to-text);
- --spectrum-radio-label-bottom-to-text: var(--system-radio-size-l-label-bottom-to-text);
- --spectrum-radio-button-top-to-control: var(--system-radio-size-l-button-top-to-control);
- --spectrum-radio-font-size: var(--system-radio-size-l-font-size);
-}
-
-:host([size="xl"]) {
- --spectrum-radio-height: var(--system-radio-size-xl-height);
- --spectrum-radio-button-control-size: var(--system-radio-size-xl-button-control-size);
- --spectrum-radio-text-to-control: var(--system-radio-size-xl-text-to-control);
- --spectrum-radio-label-top-to-text: var(--system-radio-size-xl-label-top-to-text);
- --spectrum-radio-label-bottom-to-text: var(--system-radio-size-xl-label-bottom-to-text);
- --spectrum-radio-button-top-to-control: var(--system-radio-size-xl-button-top-to-control);
- --spectrum-radio-font-size: var(--system-radio-size-xl-font-size);
-}
-
-:host([emphasized]) {
- --spectrum-radio-button-checked-border-color-default: var(--system-radio-emphasized-button-checked-border-color-default);
- --spectrum-radio-button-checked-border-color-hover: var(--system-radio-emphasized-button-checked-border-color-hover);
- --spectrum-radio-button-checked-border-color-down: var(--system-radio-emphasized-button-checked-border-color-down);
- --spectrum-radio-button-checked-border-color-focus: var(--system-radio-emphasized-button-checked-border-color-focus);
}
diff --git a/packages/radio/src/radio.css b/packages/radio/src/radio.css
index 41b19a1682b..a2ff69fd9f8 100644
--- a/packages/radio/src/radio.css
+++ b/packages/radio/src/radio.css
@@ -22,12 +22,17 @@ governing permissions and limitations under the License.
}
/**
- * 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
- **/
+:host([readonly]) #label {
+ margin-inline-start: 0;
+}
diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css
index 0d1262ad455..65e4f46d85a 100644
--- a/packages/radio/src/spectrum-radio.css
+++ b/packages/radio/src/spectrum-radio.css
@@ -11,8 +11,75 @@ governing permissions and limitations under the License.
*/
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+ --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+ --spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
+ --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color);
+ --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color);
+ --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
+ --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
+ --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
+ --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
+ --spectrum-radio-border-width: var(--spectrum-border-width-200);
+ --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
+ --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
+ --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
+ --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);
+ --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);
+ --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
+ --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);
+ --spectrum-radio-text-to-control: var(--spectrum-text-to-control-75);
+ --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small);
+ --spectrum-radio-font-size: var(--spectrum-font-size-75);
+}
+
+:host([size="l"]) {
+ --spectrum-radio-height: var(--spectrum-component-height-200);
+ --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large);
+ --spectrum-radio-text-to-control: var(--spectrum-text-to-control-200);
+ --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200);
+ --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large);
+ --spectrum-radio-font-size: var(--spectrum-font-size-200);
+}
+
+:host([size="xl"]) {
+ --spectrum-radio-height: var(--spectrum-component-height-300);
+ --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large);
+ --spectrum-radio-text-to-control: var(--spectrum-text-to-control-300);
+ --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300);
+ --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
+ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large);
+ --spectrum-radio-font-size: var(--spectrum-font-size-300);
+}
+
@media (forced-colors: active) {
:host {
+ --highcontrast-radio-button-background-color: ButtonFace;
--highcontrast-radio-neutral-content-color: CanvasText;
--highcontrast-radio-neutral-content-color-hover: CanvasText;
--highcontrast-radio-neutral-content-color-down: CanvasText;
@@ -80,23 +147,14 @@ governing permissions and limitations under the License.
color: var(--highcontrast-radio-neutral-content-color-focus, var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus)));
}
-:host([readonly]) #input:read-only {
- cursor: auto;
-}
-
-:host([readonly]) #button {
- clip: rect(1px, 1px, 1px, 1px);
- clip-path: inset(50%);
- position: fixed;
- inset-block-end: 100%;
- inset-inline-end: 100%;
+:host([readonly]) #input {
+ pointer-events: none;
}
:host([readonly][checked][disabled]) #input ~ #label,
: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 {
@@ -205,7 +263,7 @@ governing permissions and limitations under the License.
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(--highcontrast-radio-button-background-color, var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color)));
+ 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:
diff --git a/tools/styles/express/spectrum-core-global.css b/tools/styles/express/spectrum-core-global.css
index e777a486732..bd446b42327 100644
--- a/tools/styles/express/spectrum-core-global.css
+++ b/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);
diff --git a/tools/styles/spectrum-core-global.css b/tools/styles/spectrum-core-global.css
index af8078db72b..70f2a74dd3c 100644
--- a/tools/styles/spectrum-core-global.css
+++ b/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;
diff --git a/tools/styles/spectrum-two/spectrum-core-global.css b/tools/styles/spectrum-two/spectrum-core-global.css
index af8078db72b..70f2a74dd3c 100644
--- a/tools/styles/spectrum-two/spectrum-core-global.css
+++ b/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;
diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css
index 2ab1aa83de3..b0ba3dfe36e 100644
--- a/tools/styles/tokens-v2/system-theme-bridge.css
+++ b/tools/styles/tokens-v2/system-theme-bridge.css
@@ -429,69 +429,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-neutral-content-color: var(--spectrum-neutral-content-color-default);
- --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
- --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
- --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
- --system-radio-disabled-content-color: var(--spectrum-disabled-content-color);
- --system-radio-disabled-border-color: var(--spectrum-disabled-content-color);
- --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
- --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
- --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
- --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
- --system-radio-border-width: var(--spectrum-border-width-200);
--system-radio-button-background-color: var(--spectrum-gray-50);
- --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
- --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
- --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
- --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
- --system-radio-line-height: var(--spectrum-line-height-100);
- --system-radio-animation-duration: var(--spectrum-animation-duration-100);
- --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100);
- --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100);
- --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100);
- --system-radio-height: var(--spectrum-component-height-100);
- --system-radio-size-m-height: var(--spectrum-component-height-100);
- --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
- --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium);
- --system-radio-text-to-control: var(--spectrum-text-to-control-100);
- --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100);
- --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
- --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100);
- --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
- --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
- --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
- --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
- --system-radio-font-size: var(--spectrum-font-size-100);
- --system-radio-size-m-font-size: var(--spectrum-font-size-100);
- --system-radio-size-s-height: var(--spectrum-component-height-75);
- --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small);
- --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75);
- --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75);
- --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
- --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small);
- --system-radio-size-s-font-size: var(--spectrum-font-size-75);
- --system-radio-size-l-height: var(--spectrum-component-height-200);
- --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large);
- --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200);
- --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200);
- --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
- --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large);
- --system-radio-size-l-font-size: var(--spectrum-font-size-200);
- --system-radio-size-xl-height: var(--spectrum-component-height-300);
- --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large);
- --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300);
- --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300);
- --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
- --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large);
- --system-radio-size-xl-font-size: var(--spectrum-font-size-300);
- --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900);
- --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000);
- --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100);
- --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000);
--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);
diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css
index a5bde1ea167..7b96f3177ef 100644
--- a/tools/styles/tokens/express/system-theme-bridge.css
+++ b/tools/styles/tokens/express/system-theme-bridge.css
@@ -424,73 +424,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-neutral-content-color: var(--spectrum-neutral-content-color-default);
- --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
- --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
- --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
- --system-radio-disabled-content-color: var(--spectrum-disabled-content-color);
- --system-radio-disabled-border-color: var(--spectrum-disabled-content-color);
- --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
- --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
- --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
- --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
- --system-radio-border-width: var(--spectrum-border-width-200);
- --system-radio-button-background-color: var(--spectrum-gray-50);
- --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
- --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
- --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
- --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
- --system-radio-line-height: var(--spectrum-line-height-100);
- --system-radio-animation-duration: var(--spectrum-animation-duration-100);
- --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100);
- --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100);
- --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100);
- --system-radio-height: var(--spectrum-component-height-100);
- --system-radio-size-m-height: var(--spectrum-component-height-100);
- --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
- --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium);
- --system-radio-text-to-control: var(--spectrum-text-to-control-100);
- --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100);
- --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
- --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100);
- --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
- --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
- --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
- --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
- --system-radio-font-size: var(--spectrum-font-size-100);
- --system-radio-size-m-font-size: var(--spectrum-font-size-100);
- --system-radio-size-s-height: var(--spectrum-component-height-75);
- --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small);
- --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75);
- --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75);
- --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
- --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small);
- --system-radio-size-s-font-size: var(--spectrum-font-size-75);
- --system-radio-size-l-height: var(--spectrum-component-height-200);
- --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large);
- --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200);
- --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200);
- --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
- --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large);
- --system-radio-size-l-font-size: var(--spectrum-font-size-200);
- --system-radio-size-xl-height: var(--spectrum-component-height-300);
- --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large);
- --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300);
- --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300);
- --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
- --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large);
- --system-radio-size-xl-font-size: var(--spectrum-font-size-300);
- --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900);
- --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000);
- --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100);
- --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000);
--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);
diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css
index 2a1ab6eb9c9..b9ec4a837f2 100644
--- a/tools/styles/tokens/spectrum/system-theme-bridge.css
+++ b/tools/styles/tokens/spectrum/system-theme-bridge.css
@@ -428,69 +428,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-neutral-content-color: var(--spectrum-neutral-content-color-default);
- --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
- --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
- --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
- --system-radio-disabled-content-color: var(--spectrum-disabled-content-color);
- --system-radio-disabled-border-color: var(--spectrum-disabled-content-color);
- --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
- --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
- --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
- --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
- --system-radio-border-width: var(--spectrum-border-width-200);
--system-radio-button-background-color: var(--spectrum-gray-50);
- --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
- --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
- --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
- --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
- --system-radio-line-height: var(--spectrum-line-height-100);
- --system-radio-animation-duration: var(--spectrum-animation-duration-100);
- --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100);
- --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100);
- --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100);
- --system-radio-height: var(--spectrum-component-height-100);
- --system-radio-size-m-height: var(--spectrum-component-height-100);
- --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
- --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium);
- --system-radio-text-to-control: var(--spectrum-text-to-control-100);
- --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100);
- --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
- --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100);
- --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
- --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
- --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
- --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
- --system-radio-font-size: var(--spectrum-font-size-100);
- --system-radio-size-m-font-size: var(--spectrum-font-size-100);
- --system-radio-size-s-height: var(--spectrum-component-height-75);
- --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small);
- --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75);
- --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75);
- --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
- --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small);
- --system-radio-size-s-font-size: var(--spectrum-font-size-75);
- --system-radio-size-l-height: var(--spectrum-component-height-200);
- --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large);
- --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200);
- --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200);
- --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
- --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large);
- --system-radio-size-l-font-size: var(--spectrum-font-size-200);
- --system-radio-size-xl-height: var(--spectrum-component-height-300);
- --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large);
- --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300);
- --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300);
- --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
- --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large);
- --system-radio-size-xl-font-size: var(--spectrum-font-size-300);
- --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900);
- --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000);
- --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100);
- --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000);
--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);