GPT4'd some components

packages/react/src/shadcn/ui/badge.tsx

@@ -9,26 +9,34 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary-6 text-primary shadow hover:bg-primary-8",
-        primary: "border-transparent bg-primary-6 text-primary shadow hover:bg-primary-8",
+          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4",
+        primary:
+          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4",
         secondary:
-          "border-transparent bg-secondary text-secondary hover:bg-secondary-8",
-        outline: "text-foreground",
+          "border-transparent bg-secondary-9 text-secondary-12 hover:bg-secondaryA-4",
+        outline:
+          "text-base-12", // Assuming the foreground is a high-contrast text of base color
+      },
+      size: {
+        default: "px-2.5 py-0.5 text-xs",
+        sm: "px-1.5 py-0.25 text-xs",
+        lg: "px-3 py-1 text-sm",
       },
     },
     defaultVariants: {
       variant: "default",
+      size: "default",
     },
   }
 )
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+  VariantProps<typeof badgeVariants> { }
 
-function Badge({ className, variant, ...props }: BadgeProps) {
+function Badge({ className, variant, size, ...props }: BadgeProps) {
   return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    <div className={cn(badgeVariants({ variant, size }), className)} {...props} />
   )
 }
 

packages/react/src/shadcn/ui/dialog.tsx

@@ -3,6 +3,8 @@ import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { Cross2Icon } from "@radix-ui/react-icons"
 
 import { cn } from "@/lib/utils"
+import { type VariantProps, cva } from "class-variance-authority"
+import { badgeVariants } from "./badge"
 
 const Dialog = DialogPrimitive.Root
 
@@ -17,24 +19,37 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
   />
 ))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
+const dialogVariants = cva(
+  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-base-1 border-base-7",
+        primary: "bg-primary-1 border-primary-7",
+        secondary: "bg-secondary-1 border-secondary-7",
+      },
+    },
+  }
+);
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & VariantProps<typeof dialogVariants>
+>(({ className, children, variant, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        badgeVariants({ variant }),
         className
       )}
       {...props}
@@ -109,6 +124,7 @@ export {
   DialogPortal,
   DialogOverlay,
   DialogTrigger,
+  dialogVariants,
   DialogContent,
   DialogHeader,
   DialogFooter,

packages/react/src/shadcn/ui/toast.tsx

@@ -27,9 +27,13 @@ const toastVariants = cva(
   {
     variants: {
       variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
+        default: "border-base-7 bg-base-1 text-base-12",
+        destructive: "border-red-7 bg-red-9 text-red-12",
+        warning: "border-amber-7 bg-amber-9 text-amber-12",
+        info: "border-jade-7 bg-jade-9 text-jade-12",
+        secondary: "border-secondary-7 bg-secondary-9 text-secondary-12",
+        primary: "border-primary-7 bg-primary-9 text-primary-12",
+        error: "border-red-7 bg-red-9 text-red-12",
       },
     },
     defaultVariants: {
@@ -41,7 +45,7 @@ const toastVariants = cva(
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+  VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
   return (
     <ToastPrimitives.Root
@@ -68,14 +72,25 @@ const ToastAction = React.forwardRef<
 ))
 ToastAction.displayName = ToastPrimitives.Action.displayName
 
+const toastCloseVariants = cva(
+  "absolute right-1 top-1 rounded-md p-1 transition-opacity focus:outline-none focus:ring-1 opacity-0 group-hover:opacity-100",
+  {
+    variants: {
+      variant: {
+        default: "text-base-11 hover:text-base-12 focus:opacity-100",
+        secondary: "text-secondary-9 hover:text-secondary-5 focus:ring-secondary-7 focus:ring-offset-secondary-8",
+      }
+    }
+  });
+
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & VariantProps<typeof toastCloseVariants>
+>(({ className, variant, ...props }, ref) => (
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      toastCloseVariants({ variant }),
       className
     )}
     toast-close=""