Merge pull request #68 from buildo/radio-without-svg

Author: gabro

Diff for: src/RadioGroupField/Radio.css.ts

@@ -1,63 +1,57 @@
+import { style } from "@vanilla-extract/css";
 import { bentoSprinkles } from "../internal";
 import { strictRecipe } from "../util/strictRecipe";
 import { vars } from "../vars.css";
 import { radioOption } from "./RadioGroupField.css";
 
-export const radio = bentoSprinkles({ width: 24, height: 24 });
-
 export const outerRadioCircleRecipe = strictRecipe({
+  base: bentoSprinkles({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: 24,
+    height: 24,
+    borderRadius: "circled",
+  }),
   variants: {
     selected: {
       false: [
-        bentoSprinkles({ fill: "outlineInputEnabled" }),
+        bentoSprinkles({ boxShadow: "outlineInputEnabled" }),
         {
           selectors: {
             [`${radioOption}:hover:not([disabled]) &`]: {
-              fill: vars.outlineColor.outlineInputHover,
+              boxShadow: vars.boxShadow.outlineInputHover,
             },
             [`${radioOption}[disabled] &`]: {
-              fill: vars.outlineColor.outlineInputDisabled,
+              boxShadow: vars.boxShadow.outlineInputDisabled,
             },
           },
         },
       ],
       true: [
-        bentoSprinkles({ fill: "primarySolidEnabledBackground" }),
+        bentoSprinkles({ background: "primarySolidEnabledBackground" }),
         {
           selectors: {
             [`${radioOption}:hover:not([disabled]) &`]: {
-              fill: vars.interactiveBackgroundColor.primarySolidHoverBackground,
+              background: vars.interactiveBackgroundColor.primarySolidHoverBackground,
             },
             [`${radioOption}[disabled] &`]: {
-              fill: vars.interactiveBackgroundColor.disabledSolidBackground,
+              background: vars.interactiveBackgroundColor.disabledSolidBackground,
             },
           },
         },
       ],
     },
     focused: {
-      true: { fill: vars.interactiveBackgroundColor.primarySolidFocusBackground },
+      true: { background: vars.interactiveBackgroundColor.primarySolidFocusBackground },
     },
   },
 });
 
-export const innerRadioCircleRecipe = strictRecipe({
-  base: bentoSprinkles({ fill: "backgroundPrimary" }),
-  variants: {
-    selected: {
-      false: {
-        r: "11",
-      },
-      true: { r: "5" },
-    },
-    focused: {
-      true: {},
-    },
-  },
-  compoundVariants: [
-    {
-      variants: { selected: false, focused: true },
-      style: { r: "10" },
-    },
-  ],
-});
+export const innerRadioCircle = [
+  bentoSprinkles({
+    background: "backgroundPrimary",
+    borderRadius: "circled",
+  }),
+  style({ width: 10, height: 10 }),
+];

Diff for: src/RadioGroupField/Radio.tsx

@@ -1,13 +1,13 @@
-import { innerRadioCircleRecipe, outerRadioCircleRecipe, radio } from "./Radio.css";
+import { innerRadioCircle, outerRadioCircleRecipe } from "./Radio.css";
+import { Box } from "../internal";
 
 export function Radio({ selected, focused }: { selected: boolean; focused: boolean }) {
   // NOTE(gabro): we can't draw svg strokes "inside" the container, so instead of modelling the radio
   // as a circle with a stroke, we model it as two overlapping circles (one outer larger circle, which
   // we use to draw the radio "border", and one smaller inner circle)
   return (
-    <svg aria-hidden="true" viewBox="0 0 24 24" className={radio}>
-      <circle cx="12" cy="12" r="12" className={outerRadioCircleRecipe({ selected, focused })} />
-      <circle cx="12" cy="12" className={innerRadioCircleRecipe({ selected, focused })} />
-    </svg>
+    <Box className={outerRadioCircleRecipe({ selected, focused })}>
+      {selected && <Box className={innerRadioCircle} />}
+    </Box>
   );
 }