From 327b98497421a0219006f6e28c2c5ffcd89afc7d Mon Sep 17 00:00:00 2001
From: Maximilian Liebmann <lima@noreply.git.dominikstahl.dev>
Date: Fri, 30 May 2025 19:46:43 +0200
Subject: [PATCH] feat: update button variants and styles for improved
 consistency and accessibility

---
 src/app/login/page.tsx                   |  2 +-
 src/components/custom-ui/button.tsx      | 25 ++++++++++++++----------
 src/components/labeled-input.tsx         |  2 +-
 src/components/user/login-form.tsx       |  2 +-
 src/components/user/sso-login-button.tsx |  2 +-
 src/components/user/theme-picker.tsx     |  2 +-
 6 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index f49fb8f..074062c 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -57,7 +57,7 @@ export default async function LoginPage() {
         </div>
       </div>
       <HoverCard>
-        <HoverCardTrigger className='text-sm text-neutral-000 hover:underline'>
+        <HoverCardTrigger>
           <Button variant='link'>made with love</Button>
         </HoverCardTrigger>
         <HoverCardContent className='flex items-center justify-center'>
diff --git a/src/components/custom-ui/button.tsx b/src/components/custom-ui/button.tsx
index f45fcd7..5b53423 100644
--- a/src/components/custom-ui/button.tsx
+++ b/src/components/custom-ui/button.tsx
@@ -5,24 +5,29 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "radius-lg inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-label transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "radius-lg inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-button transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
         primary:
-          'bg-primary text-text shadow-xs hover:bg-hover-primary active:bg-active-primary',
+          'bg-primary text-text shadow-xs hover:bg-hover-primary active:bg-active-primary disabled:bg-disabled-primary',
         secondary:
-          'bg-secondary text-text-alt shadow-xs hover:bg-hover-secondary active:bg-active-secondary',
-        outline:
-          'border-2 border-primary bg-transparent text-text shadow-xs hover:bg-primary hover:border-neutral-000 hover:border-1.5 hover:text-neutral-000 active:bg-active-primary',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+          'bg-secondary text-text-alt shadow-xs hover:bg-hover-secondary active:bg-active-secondary disabled:bg-disabled-secondary',
+        muted:
+          'bg-muted text-text shadow-xs hover:bg-hover-muted active:bg-active-muted disabled:bg-disabled-muted',
+        outline_primary:
+          'bg-background border-2 text-text shadow-xs hover:bg-primary border-primary hover:border-background-reversed active:bg-active-primary disabled:bg-disabled-primary',
+        outline_secondary:
+          'bg-background border-2 text-text shadow-xs hover:bg-secondary border-secondary hover:border-background-reversed active:bg-active-secondary disabled:bg-disabled-secondary',
+        outline_muted:
+          'bg-background border-2 text-text shadow-xs hover:bg-muted border-muted hover:border-background-reversed active:bg-active-muted disabled:bg-disabled-muted',
+
         link: 'text-text underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 px-6 has-[>svg]:px-4',
         icon: 'size-9',
       },
     },
@@ -34,7 +39,7 @@ const buttonVariants = cva(
 );
 
 function Button({
-  className = 'font-label',
+  className,
   variant,
   size,
   asChild = false,
diff --git a/src/components/labeled-input.tsx b/src/components/labeled-input.tsx
index a16f26a..250dd5f 100644
--- a/src/components/labeled-input.tsx
+++ b/src/components/labeled-input.tsx
@@ -15,7 +15,7 @@ export default function LabeledInput({
   name?: string;
 }) {
   return (
-    <div className='grid grid-cols-1 gap-1 font-label'>
+    <div className='grid grid-cols-1 gap-1'>
       <Label htmlFor={name}>{label}</Label>
 
       <Input
diff --git a/src/components/user/login-form.tsx b/src/components/user/login-form.tsx
index 73ff42d..a8e6382 100644
--- a/src/components/user/login-form.tsx
+++ b/src/components/user/login-form.tsx
@@ -38,7 +38,7 @@ export default function LoginForm() {
         <Button type='submit' variant='primary'>
           Login
         </Button>
-        <Button type='submit' variant='outline'>
+        <Button type='submit' variant='outline_primary'>
           Sign Up
         </Button>
       </div>
diff --git a/src/components/user/sso-login-button.tsx b/src/components/user/sso-login-button.tsx
index 76eac83..dc070b5 100644
--- a/src/components/user/sso-login-button.tsx
+++ b/src/components/user/sso-login-button.tsx
@@ -11,7 +11,7 @@ export default function SSOLogin({
 }) {
   return (
     <form
-      className='flex flex-col items-center gap-4 w-full'
+      className='flex flex-col items-center w-full'
       action={async () => {
         'use server';
         await signIn(provider);
diff --git a/src/components/user/theme-picker.tsx b/src/components/user/theme-picker.tsx
index 37a2ceb..2a1649d 100644
--- a/src/components/user/theme-picker.tsx
+++ b/src/components/user/theme-picker.tsx
@@ -18,7 +18,7 @@ export function ThemePicker() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='outline' size='icon'>
+        <Button variant='outline_primary' size='icon'>
           <Sun className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
           <Moon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
           <span className='sr-only'>Toggle theme</span>