feat: adopt kumo green ui system

components/ui/badge.tsx

@@ -1,31 +1,26 @@
 import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import { Badge as KumoBadge } from "@cloudflare/kumo/components/badge";
 
-import { cn } from "@/lib/utils";
+type KumoBadgeProps = React.ComponentProps<typeof KumoBadge>;
 
-const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium transition-colors",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground",
-        secondary: "border-transparent bg-secondary text-secondary-foreground",
-        outline: "text-foreground",
-        success: "border-emerald-200 bg-emerald-50 text-emerald-700",
-        warning: "border-amber-200 bg-amber-50 text-amber-700",
-        danger: "border-red-200 bg-red-50 text-red-700",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
+type LegacyBadgeVariant = "default" | "secondary" | "outline" | "success" | "warning" | "danger";
 
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+const variantMap: Record<LegacyBadgeVariant, KumoBadgeProps["variant"]> = {
+  default: "green",
+  secondary: "secondary",
+  outline: "outline",
+  success: "success",
+  warning: "warning",
+  danger: "error",
+};
 
-export function Badge({ className, variant, ...props }: BadgeProps): React.ReactElement {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+export type BadgeProps = Omit<KumoBadgeProps, "variant" | "children"> & {
+  variant?: LegacyBadgeVariant | KumoBadgeProps["variant"];
+  children?: React.ReactNode;
+};
+
+export function Badge({ variant = "default", ...props }: BadgeProps): React.ReactElement {
+  const mappedVariant = variant in variantMap ? variantMap[variant as LegacyBadgeVariant] : (variant as KumoBadgeProps["variant"]);
+
+  return <KumoBadge variant={mappedVariant} {...(props as KumoBadgeProps)} />;
 }