style(sonner): update toast background colors and add border

- Add backdrop blur effect to toast backgrounds
- Update color opacity values for better visual consistency
- Add border to toast container for better separation
This commit is contained in:
icarus 2025-12-14 16:14:05 +08:00
parent 372e254495
commit 1bd36a1c14
No known key found for this signature in database
GPG Key ID: D4AF089AAEC25D18

View File

@ -361,14 +361,14 @@ const toastColorVariants = cva(undefined, {
}
})
const toastBgColorVariants = cva(undefined, {
const toastBgColorVariants = cva('backdrop-blur-md', {
variants: {
type: {
info: 'bg-blue-50 border-blue-400',
warning: 'bg-warning-bg border-warning-base',
error: 'bg-error-bg border-error-base',
success: 'bg-success-bg border-success-base',
loading: undefined
info: 'bg-blue-500/10 border-blue-500/20',
warning: 'bg-orange-500/10 border-orange-500/20',
error: 'bg-red-500/10 border-red-500/20',
success: 'bg-primary/10 border-primary/20',
loading: 'backdrop-blur-none'
}
}
})
@ -409,7 +409,7 @@ function Toast({
<div
id={String(id)}
className={cn(
'flex p-4 rounded-xs bg-background items-center shadow-lg',
'flex p-4 rounded-xs bg-background border-border border-[0.5px] items-center shadow-lg',
coloredBackground && toastBgColorVariants({ type })
)}
aria-label="Toast">