From 58a96279b133266c659daae8db0dedf298655d9c Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Tue, 5 Aug 2025 23:17:32 +0000 Subject: [PATCH] Enhance toast system with AeThex theme variants and animations cgen-b6f4662ed6f549ea878fada6faab99b9 --- client/components/ui/toast.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/client/components/ui/toast.tsx b/client/components/ui/toast.tsx index 2bc23c1f..c355b93a 100644 --- a/client/components/ui/toast.tsx +++ b/client/components/ui/toast.tsx @@ -23,13 +23,21 @@ const ToastViewport = React.forwardRef< ToastViewport.displayName = ToastPrimitives.Viewport.displayName; const toastVariants = cva( - "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", + "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full backdrop-blur-sm", { variants: { variant: { - default: "border bg-background text-foreground", + default: "border-border/50 bg-card/95 text-foreground shadow-2xl", destructive: - "destructive group border-destructive bg-destructive text-destructive-foreground", + "destructive group border-destructive/50 bg-destructive/10 text-destructive backdrop-blur-sm shadow-2xl", + success: + "border-green-500/50 bg-green-500/10 text-green-400 shadow-2xl shadow-green-500/20", + warning: + "border-yellow-500/50 bg-yellow-500/10 text-yellow-400 shadow-2xl shadow-yellow-500/20", + info: + "border-aethex-400/50 bg-aethex-500/10 text-aethex-300 shadow-2xl shadow-aethex-500/20 glow-blue", + aethex: + "border-aethex-400/50 bg-gradient-to-r from-aethex-500/20 via-neon-blue/20 to-aethex-600/20 text-aethex-300 shadow-2xl shadow-aethex-500/30 glow-purple animate-pulse-glow", }, }, defaultVariants: {