update css vars

components/ThemeProvider.tsx

@@ -13,7 +13,8 @@ export type ThemeProps = {
   mutedColor?: string;
   mutedForegroundColor?: string;
   borderColor?: string;
-  radius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+  radius?: "none" | "sm" | "md" | "lg" | "xl";
+  buttonRadius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
   shadow?: "none" | "sm" | "md" | "lg" | "xl";
   maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 };
@@ -24,6 +25,14 @@ const radiusMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
   md: "0.5rem",
   lg: "0.75rem",
   xl: "1rem",
+};
+
+const buttonRadiusMap: Record<NonNullable<ThemeProps["buttonRadius"]>, string> = {
+  none: "0px",
+  sm: "0.25rem",
+  md: "0.5rem",
+  lg: "0.75rem",
+  xl: "1rem",
   full: "9999px",
 };
 
@@ -59,6 +68,7 @@ export function ThemeProvider({
   mutedForegroundColor,
   borderColor,
   radius,
+  buttonRadius,
   shadow,
   children,
 }: ThemeProps & { children?: React.ReactNode }) {
@@ -75,6 +85,7 @@ export function ThemeProvider({
     if (mutedForegroundColor) vars["--muted-foreground"] = mutedForegroundColor;
     if (borderColor) vars["--border"] = borderColor;
     if (radius) vars["--radius"] = radiusMap[radius];
+    if (buttonRadius) vars["--button-radius"] = buttonRadiusMap[buttonRadius];
     if (shadow) vars["--shadow"] = shadowMap[shadow];
     if (headerFont) vars["--font-header"] = `"${headerFont}", system-ui, sans-serif`;
     if (bodyFont) vars["--font-body"] = `"${bodyFont}", system-ui, sans-serif`;
@@ -92,6 +103,7 @@ export function ThemeProvider({
     mutedForegroundColor,
     borderColor,
     radius,
+    buttonRadius,
     shadow,
   ]);