fix(radio,styles): use latest CSS

Author: castastrophe

.changeset/funny-insects-sin.md

@@ -0,0 +1,7 @@
+---
+'@spectrum-web-components/radio': patch
+'@spectrum-web-components/styles': patch
+'@spectrum-web-components/theme': 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,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;
+}

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

@@ -10,11 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import url('@spectrum-web-components/styles/tokens/global-vars.css');
-@import url('@spectrum-web-components/styles/tokens/spectrum/global-vars.css');
-@import url('@spectrum-web-components/styles/tokens/express/global-vars.css');
-@import url('@spectrum-web-components/styles/tokens/express/system-theme-bridge.css');
-@import url('@spectrum-web-components/styles/typography.css');
+@import url("@spectrum-web-components/styles/tokens/global-vars.css");
+@import url("@spectrum-web-components/styles/tokens/spectrum/global-vars.css");
+@import url("@spectrum-web-components/styles/tokens/express/global-vars.css");
+@import url("@spectrum-web-components/styles/tokens/express/system-theme-bridge.css");
+@import url("@spectrum-web-components/styles/typography.css");
 
 :host {
     display: block;
@@ -40,6 +40,11 @@ governing permissions and limitations under the License.
     }
 }
 
+/* Manual override: can remove after cutover */
+:host {
+    --system-radio-button-background-color: var(--spectrum-gray-50);
+}
+
 #scale,
 #theme {
     width: 100%;

tools/theme/src/express/theme.css

@@ -10,12 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import url('@spectrum-web-components/styles/tokens/global-vars.css');
-@import url('@spectrum-web-components/styles/tokens/spectrum/global-vars.css');
-@import url('@spectrum-web-components/styles/tokens/express/global-vars.css');
-@import url('@spectrum-web-components/styles/express/core-global.css');
-@import url('@spectrum-web-components/styles/tokens/express/system-theme-bridge.css');
-@import url('@spectrum-web-components/styles/typography.css');
+@import url("@spectrum-web-components/styles/tokens/global-vars.css");
+@import url("@spectrum-web-components/styles/tokens/spectrum/global-vars.css");
+@import url("@spectrum-web-components/styles/tokens/express/global-vars.css");
+@import url("@spectrum-web-components/styles/express/core-global.css");
+@import url("@spectrum-web-components/styles/tokens/express/system-theme-bridge.css");
+@import url("@spectrum-web-components/styles/typography.css");
 
 :host {
     display: block;
@@ -41,6 +41,11 @@ governing permissions and limitations under the License.
     }
 }
 
+/* Manual override: can remove after cutover */
+:host {
+    --system-radio-button-background-color: var(--spectrum-gray-50);
+}
+
 #scale,
 #theme {
     width: 100%;

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

@@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import url('@spectrum-web-components/styles/tokens/global-vars.css');
-@import url('@spectrum-web-components/styles/tokens/spectrum/global-vars.css');
-@import url('@spectrum-web-components/styles/tokens/spectrum/system-theme-bridge.css');
-@import url('@spectrum-web-components/styles/typography.css');
+@import url("@spectrum-web-components/styles/tokens/global-vars.css");
+@import url("@spectrum-web-components/styles/tokens/spectrum/global-vars.css");
+@import url("@spectrum-web-components/styles/tokens/spectrum/system-theme-bridge.css");
+@import url("@spectrum-web-components/styles/typography.css");
 
 :host {
     display: block;
@@ -35,6 +35,11 @@ governing permissions and limitations under the License.
     }
 }
 
+/* Manual override: can remove after cutover */
+:host {
+    --system-radio-button-background-color: var(--spectrum-gray-50);
+}
+
 #scale,
 #theme {
     width: 100%;

tools/theme/src/theme.css

@@ -10,11 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import url('@spectrum-web-components/styles/core-global.css');
-@import url('@spectrum-web-components/styles/tokens/global-vars.css');
-@import url('@spectrum-web-components/styles/tokens/spectrum/global-vars.css');
-@import url('@spectrum-web-components/styles/tokens/spectrum/system-theme-bridge.css');
-@import url('@spectrum-web-components/styles/typography.css');
+@import url("@spectrum-web-components/styles/core-global.css");
+@import url("@spectrum-web-components/styles/tokens/global-vars.css");
+@import url("@spectrum-web-components/styles/tokens/spectrum/global-vars.css");
+@import url("@spectrum-web-components/styles/tokens/spectrum/system-theme-bridge.css");
+@import url("@spectrum-web-components/styles/typography.css");
 
 :host {
     display: block;
@@ -36,6 +36,11 @@ governing permissions and limitations under the License.
     }
 }
 
+/* Manual override: can remove after cutover */
+:host {
+    --system-radio-button-background-color: var(--spectrum-gray-50);
+}
+
 #scale,
 #theme {
     width: 100%;