feat(ui): add dark mode support to Toast component
Add dark: variants to all toast type colors and use semantic theme tokens (text-foreground, text-muted-foreground) for text elements. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -19,24 +19,24 @@ interface ToastItemProps {
|
|||||||
|
|
||||||
const typeStyles: Record<ToastType, { bg: string; border: string; icon: string }> = {
|
const typeStyles: Record<ToastType, { bg: string; border: string; icon: string }> = {
|
||||||
success: {
|
success: {
|
||||||
bg: 'bg-green-50',
|
bg: 'bg-green-50 dark:bg-green-950',
|
||||||
border: 'border-green-200',
|
border: 'border-green-200 dark:border-green-800',
|
||||||
icon: 'text-green-500'
|
icon: 'text-green-500 dark:text-green-400'
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
bg: 'bg-red-50',
|
bg: 'bg-red-50 dark:bg-red-950',
|
||||||
border: 'border-red-200',
|
border: 'border-red-200 dark:border-red-800',
|
||||||
icon: 'text-red-500'
|
icon: 'text-red-500 dark:text-red-400'
|
||||||
},
|
},
|
||||||
warning: {
|
warning: {
|
||||||
bg: 'bg-yellow-50',
|
bg: 'bg-yellow-50 dark:bg-yellow-950',
|
||||||
border: 'border-yellow-200',
|
border: 'border-yellow-200 dark:border-yellow-800',
|
||||||
icon: 'text-yellow-500'
|
icon: 'text-yellow-500 dark:text-yellow-400'
|
||||||
},
|
},
|
||||||
info: {
|
info: {
|
||||||
bg: 'bg-blue-50',
|
bg: 'bg-blue-50 dark:bg-blue-950',
|
||||||
border: 'border-blue-200',
|
border: 'border-blue-200 dark:border-blue-800',
|
||||||
icon: 'text-blue-500'
|
icon: 'text-blue-500 dark:text-blue-400'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -55,10 +55,10 @@ function ToastItem({ id, type, message, onClose }: ToastItemProps) {
|
|||||||
className={`flex items-center gap-3 px-4 py-3 rounded-lg border ${styles.bg} ${styles.border} shadow-lg min-w-72`}
|
className={`flex items-center gap-3 px-4 py-3 rounded-lg border ${styles.bg} ${styles.border} shadow-lg min-w-72`}
|
||||||
>
|
>
|
||||||
<span className={styles.icon}>{ToastIcon[type]}</span>
|
<span className={styles.icon}>{ToastIcon[type]}</span>
|
||||||
<p className="flex-1 text-sm text-gray-800">{message}</p>
|
<p className="flex-1 text-sm text-foreground">{message}</p>
|
||||||
<button
|
<button
|
||||||
onClick={() => onClose(id)}
|
onClick={() => onClose(id)}
|
||||||
className="p-1 text-gray-400 hover:text-gray-600 focus:outline-none"
|
className="p-1 text-muted-foreground hover:text-foreground focus:outline-none"
|
||||||
>
|
>
|
||||||
<X className="w-4 h-4" />
|
<X className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user