From f8f295e5a0eaa0ffb33a8fa5f3af976b4d2c97e3 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 27 Feb 2026 12:25:16 +0300
Subject: [PATCH] feat(Button): add tertiary variant and change ghost variant
 styles

---
 src/shared/ui/Button/Button.svelte | 31 ++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/shared/ui/Button/Button.svelte b/src/shared/ui/Button/Button.svelte
index ec1c5c8..04d9c19 100644
--- a/src/shared/ui/Button/Button.svelte
+++ b/src/shared/ui/Button/Button.svelte
@@ -89,10 +89,9 @@ const variantStyles: Record<ButtonVariant, string> = {
         'bg-transparent',
         'text-neutral-500 dark:text-neutral-400',
         'border border-transparent',
-        'hover:bg-paper dark:hover:bg-paper',
-        'hover:text-swiss-black dark:hover:text-neutral-200',
-        'hover:border-black/5 dark:hover:border-white/5',
-        'active:bg-surface dark:active:bg-neutral-700',
+        'hover:bg-transparent dark:hover:bg-transparent',
+        'hover:text-brand dark:hover:text-brand',
+        'active:bg-transparent dark:active:bg-transparent',
         'disabled:text-neutral-400 dark:disabled:text-neutral-600',
         'disabled:cursor-not-allowed',
     ),
@@ -107,6 +106,23 @@ const variantStyles: Record<ButtonVariant, string> = {
         'disabled:text-neutral-400 dark:disabled:text-neutral-600',
         'disabled:cursor-not-allowed',
     ),
+    tertiary: cn(
+        // Font override — must come after base in cn() to win via tailwind-merge
+        'font-secondary font-medium normal-case tracking-normal',
+        // Inactive state
+        'bg-transparent',
+        'text-neutral-400 dark:text-neutral-400',
+        'border border-transparent',
+        // Hover (inactive) — semi-transparent lift, no bg-paper token
+        'hover:bg-white/50 dark:hover:bg-[#1e1e1e]/50',
+        'hover:text-neutral-900 dark:hover:text-neutral-100',
+        'hover:border-black/5 dark:hover:border-white/10',
+        // Press
+        'active:bg-white/70 dark:active:bg-[#1e1e1e]/70',
+        // Disabled
+        'disabled:text-neutral-300 dark:disabled:text-neutral-600',
+        'disabled:cursor-not-allowed',
+    ),
 };
 
 // ── Size styles ───────────────────────────────────────────────────────────────
@@ -130,7 +146,9 @@ const iconSizeStyles: Record<ButtonSize, string> = {
 // ── Active state overrides (per variant) ─────────────────────────────────────
 const activeStyles: Partial<Record<ButtonVariant, string>> = {
     secondary: 'bg-paper dark:bg-paper shadow-sm border-black/20 dark:border-white/20',
-    ghost: 'bg-paper dark:bg-paper text-swiss-black dark:text-neutral-200',
+    tertiary:
+        'bg-paper dark:bg-[#1e1e1e] border-black/10 dark:border-white/10 shadow-sm text-neutral-900 dark:text-neutral-100',
+    ghost: 'bg-transparent dark:bg-transparent text-brnad dark:text-brand',
     outline: 'bg-surface dark:bg-paper border-brand',
     icon: 'bg-paper dark:bg-paper text-brand border-black/5 dark:border-white/10',
 };
@@ -138,11 +156,12 @@ const activeStyles: Partial<Record<ButtonVariant, string>> = {
 const classes = $derived(cn(
     // Base
     'inline-flex items-center justify-center',
-    'font-["Space_Grotesk"] font-bold tracking-tight uppercase',
+    'font-primary font-bold tracking-tight uppercase',
     'rounded-none',
     'transition-all duration-200',
     'select-none',
     'outline-none',
+    'cursor-pointer',
     'focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2',
     'focus-visible:ring-offset-surface dark:focus-visible:ring-offset-dark-bg',
     'disabled:cursor-not-allowed disabled:pointer-events-none',