fix: update alert & button components styles

Author: ryu-man

src/stories/Theme.svelte

@@ -33,23 +33,27 @@
 			variants: {
 				variant: {
 					primary: {
-						class: 'bg-primary text-primary-foreground hover:bg-primary/80'
+						class: 'bg-primary text-primary-foreground hover:bg-primary/80 active:bg-primary/90'
 					},
 					secondary: {
-						class: 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
+						class:
+							'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/90'
 					},
 					destructive: {
-						class: 'bg-destructive text-destructive-foreground hover:bg-destructive/80'
+						class:
+							'bg-destructive text-destructive-foreground hover:bg-destructive/80 active:bg-destructive/90'
 					},
 					outline: {
 						class:
 							'bg-transparent hover:bg-foreground/5 active:bg-foreground/10 border border-border text-foreground'
 					},
 					ghost: {
-						class: 'hover:bg-accent hover:text-accent-foreground'
+						class:
+							'bg-transparent text-foreground hover:bg-foreground/5 active:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
 					}
 				}
 			},
+			compounds: [],
 			defaults: {
 				variant: 'primary'
 			}
@@ -81,16 +85,20 @@
 			variants: {
 				variant: {
 					info: {
-						class: 'bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950/50 dark:border-blue-800 dark:text-blue-100'
+						class:
+							'bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950/50 dark:border-blue-800 dark:text-blue-100'
 					},
 					success: {
-						class: 'bg-green-50 border-green-200 text-green-900 dark:bg-green-950/50 dark:border-green-800 dark:text-green-100'
+						class:
+							'bg-green-50 border-green-200 text-green-900 dark:bg-green-950/50 dark:border-green-800 dark:text-green-100'
 					},
 					warning: {
-						class: 'bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-950/50 dark:border-yellow-800 dark:text-yellow-100'
+						class:
+							'bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-950/50 dark:border-yellow-800 dark:text-yellow-100'
 					},
 					error: {
-						class: 'bg-red-50 border-red-200 text-red-900 dark:bg-red-950/50 dark:border-red-800 dark:text-red-100'
+						class:
+							'bg-red-50 border-red-200 text-red-900 dark:bg-red-950/50 dark:border-red-800 dark:text-red-100'
 					}
 				}
 			},
@@ -99,13 +107,13 @@
 			}
 		}),
 		'alert.icon': () => ({
-			class: 'inline-flex aspect-square h-5 w-5 shrink-0 items-center justify-center'
+			class: 'inline-flex aspect-square size-4 shrink-0 items-center justify-center'
 		}),
 		'alert.content': () => ({
 			class: 'flex-1 space-y-1'
 		}),
 		'alert.title': () => ({
-			class: 'text-sm font-semibold leading-tight'
+			class: 'text-md font-semibold leading-tight'
 		}),
 		'alert.description': () => ({
 			class: 'text-sm leading-relaxed opacity-90'
@@ -114,7 +122,8 @@
 			class: 'mt-3 flex items-center gap-2'
 		}),
 		'alert.close-button': () => ({
-			class: 'rounded-md p-1.5 opacity-70 transition-all hover:opacity-100 hover:bg-black/10 dark:hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-1'
+			class:
+				'rounded-md p-0.5 size-6 opacity-70 transition-all hover:opacity-100 hover:bg-black/10 dark:hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-1'
 		})
 	};