update css vars

config/root.tsx

@@ -32,6 +32,7 @@ export const Root: RootConfig<{
     fgColor: "#0a0a0a",
     mutedColor: "#f5f5f5",
     radius: "md",
+    buttonRadius: "md",
     shadow: "sm",
     maxWidth: "xl",
   },
@@ -50,6 +51,17 @@ export const Root: RootConfig<{
     radius: {
       label: "Radius",
       type: "select",
+      options: [
+        { label: "None (square)", value: "none" },
+        { label: "Small", value: "sm" },
+        { label: "Medium", value: "md" },
+        { label: "Large", value: "lg" },
+        { label: "Extra large", value: "xl" },
+      ],
+    },
+    buttonRadius: {
+      label: "Button radius",
+      type: "select",
       options: [
         { label: "None (square)", value: "none" },
         { label: "Small", value: "sm" },
@@ -94,6 +106,7 @@ export const Root: RootConfig<{
     fgColor,
     mutedColor,
     radius,
+    buttonRadius,
     shadow,
   }) => {
     return (
@@ -107,6 +120,7 @@ export const Root: RootConfig<{
         fgColor={fgColor}
         mutedColor={mutedColor}
         radius={radius}
+        buttonRadius={buttonRadius}
         shadow={shadow}
       >
         {children}