glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Button): add tertiary variant and change ghost variant styles

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-27 12:25:16 +03:00
parent bf79cbb26f
commit f8f295e5a0
1 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/shared/ui/Button/Button.svelte
View File

@@ -89,10 +89,9 @@ const variantStyles: Record<ButtonVariant, string> = {
'bg-transparent', 'bg-transparent',
'text-neutral-500 dark:text-neutral-400', 'text-neutral-500 dark:text-neutral-400',
'border border-transparent', 'border border-transparent',
'hover:bg-paper dark:hover:bg-paper', 'hover:bg-transparent dark:hover:bg-transparent',
'hover:text-swiss-black dark:hover:text-neutral-200', 'hover:text-brand dark:hover:text-brand',
'hover:border-black/5 dark:hover:border-white/5', 'active:bg-transparent dark:active:bg-transparent',
'active:bg-surface dark:active:bg-neutral-700',
'disabled:text-neutral-400 dark:disabled:text-neutral-600', 'disabled:text-neutral-400 dark:disabled:text-neutral-600',
'disabled:cursor-not-allowed', 'disabled:cursor-not-allowed',
), ),
@@ -107,6 +106,23 @@ const variantStyles: Record<ButtonVariant, string> = {
'disabled:text-neutral-400 dark:disabled:text-neutral-600', 'disabled:text-neutral-400 dark:disabled:text-neutral-600',
'disabled:cursor-not-allowed', '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 ─────────────────────────────────────────────────────────────── // ── Size styles ───────────────────────────────────────────────────────────────
@@ -130,7 +146,9 @@ const iconSizeStyles: Record<ButtonSize, string> = {
// ── Active state overrides (per variant) ───────────────────────────────────── // ── Active state overrides (per variant) ─────────────────────────────────────
const activeStyles: Partial<Record<ButtonVariant, string>> = { const activeStyles: Partial<Record<ButtonVariant, string>> = {
secondary: 'bg-paper dark:bg-paper shadow-sm border-black/20 dark:border-white/20', 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', outline: 'bg-surface dark:bg-paper border-brand',
icon: 'bg-paper dark:bg-paper text-brand border-black/5 dark:border-white/10', 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( const classes = $derived(cn(
// Base // Base
'inline-flex items-center justify-center', 'inline-flex items-center justify-center',
'font-["Space_Grotesk"] font-bold tracking-tight uppercase', 'font-primary font-bold tracking-tight uppercase',
'rounded-none', 'rounded-none',
'transition-all duration-200', 'transition-all duration-200',
'select-none', 'select-none',
'outline-none', 'outline-none',
'cursor-pointer',
'focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2', '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', 'focus-visible:ring-offset-surface dark:focus-visible:ring-offset-dark-bg',
'disabled:cursor-not-allowed disabled:pointer-events-none', 'disabled:cursor-not-allowed disabled:pointer-events-none',