fix: ghost button hover color and padding

Author: intaniger

packages/react/v2/components/primitives/button.tsx

@@ -28,13 +28,13 @@ const buttonVariants = cva(
         outline:
           ' border border-border-button-outline text-text-secondary bg-surface-button-outline shadow-xs hover:bg-surface-button-outline-hover active:bg-surface-button-outline hover:border-border-button-outline-hover disabled:bg-surface-button-outline-disabled disabled:text-text-disabled disabled:*:text-text-disabled disabled:border disabled:border-border-button-outline-disabled dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         ghost:
-          'bg-transparent text-text-secondary hover:text-accent-foreground dark:hover:bg-accent/50',
+          'bg-transparent text-text-secondary hover:text-accent-foreground dark:hover:bg-accent/50 hover:bg-surface-button-ghost-hover',
         destructive:
           'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive focus-visible:ring-destructive dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
       },
       size: {
         md: 'h-18 px-8 py-4 has-[>svg]:px-6',
-        sm: 'h-16 rounded-md gap-3 px-6 has-[>svg]:px-5',
+        sm: 'h-20 rounded-md gap-3 px-7 py-4 has-[>svg]:px-5',
         lg: 'h-20 rounded-md px-12 has-[>svg]:px-8',
         icon: 'size-18',
         'icon-sm': 'size-16',
@@ -63,7 +63,7 @@ function Button({
   return (
     <Comp
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={cn(buttonVariants({ variant, size }), className)}
       {...(props as any)}
     />
   )