fix(radio,styles): use latest CSS

Author: castastrophe

.changeset/stale-candies-camp.md

@@ -3,6 +3,7 @@
 '@spectrum-web-components/dropzone': patch
 '@spectrum-web-components/illustrated-message': patch
 '@spectrum-web-components/menu': patch
+'@spectrum-web-components/radio': patch
 '@spectrum-web-components/status-light': patch
 '@spectrum-web-components/styles': patch
 '@spectrum-web-components/switch': patch

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

@@ -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

@@ -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

@@ -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

@@ -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%;