style(ui): elevate Button to SaaS Premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke
parent
ba9ccfb30b
commit
6e9bacff54
1 changed files with 25 additions and 27 deletions
|
|
@ -5,44 +5,42 @@ import { cn } from '@/lib/utils';
|
|||
|
||||
/**
|
||||
* Button variant styles using class-variance-authority
|
||||
*
|
||||
* Variants:
|
||||
* - default: Primary action button with cyan background, subtle hover glow
|
||||
* - destructive: Destructive actions (delete, remove) with red styling
|
||||
* - outline: Outlined button for secondary actions
|
||||
* - secondary: Secondary button with steel background
|
||||
* - ghost: Minimal button with hover effect, for tertiary actions
|
||||
* SaaS Premium: semantic tokens, glass/glow, radius-full, duration-normal, active:scale-95
|
||||
*/
|
||||
const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium tracking-tight transition-[color,transform,box-shadow,border-color,background-color] duration-[var(--duration-normal)] ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void disabled:pointer-events-none disabled:opacity-50 gap-2 active:scale-95',
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium tracking-tight transition-[color,transform,box-shadow,border-color,background-color] duration-[var(--duration-normal)] ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 gap-2 active:scale-95',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
/** Primary action button - use for main CTAs, submit buttons */
|
||||
/** Primary action button - main CTAs, submit */
|
||||
default:
|
||||
'bg-kodo-cyan text-kodo-void hover:bg-kodo-cyan-dim hover:shadow-[0_0_15px_rgba(102,252,241,0.3)] border border-transparent font-semibold',
|
||||
'bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-[0_0_20px_var(--primary)/0.25] border border-transparent font-semibold',
|
||||
/** Primary alias for Design System compatibility */
|
||||
primary:
|
||||
'bg-kodo-cyan text-kodo-void hover:bg-kodo-cyan-dim hover:shadow-[0_0_15px_rgba(102,252,241,0.3)] border border-transparent font-semibold',
|
||||
/** Destructive actions - use for delete, remove, clear actions */
|
||||
'bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-[0_0_20px_var(--primary)/0.25] border border-transparent font-semibold',
|
||||
/** Destructive actions - delete, remove, clear */
|
||||
destructive:
|
||||
'bg-kodo-red/10 text-kodo-red hover:bg-kodo-red/20 border border-kodo-red/30 hover:border-kodo-red/50',
|
||||
/** Outlined button - use for secondary actions, cancel buttons */
|
||||
'bg-destructive/10 text-destructive hover:bg-destructive/20 border border-destructive/30 hover:border-destructive/50',
|
||||
/** Outlined - secondary actions, cancel */
|
||||
outline:
|
||||
'border border-kodo-steel bg-transparent text-white hover:bg-white/5 hover:border-kodo-steel/50',
|
||||
/** Secondary button - use for less prominent actions */
|
||||
'border border-border bg-transparent text-foreground hover:bg-muted/50 hover:border-border',
|
||||
/** Secondary - less prominent actions */
|
||||
secondary:
|
||||
'bg-kodo-steel/30 text-white hover:bg-kodo-steel/50 border border-white/5 hover:border-white/10',
|
||||
/** Ghost button - use for icon buttons, menu items, subtle actions */
|
||||
ghost: 'hover:bg-white/5 text-white',
|
||||
/** Gaming style */
|
||||
gaming: 'bg-kodo-slate border border-kodo-gold/40 text-kodo-gold hover:bg-kodo-gold/10 hover:border-kodo-gold font-bold tracking-wider uppercase',
|
||||
/** Terminal style */
|
||||
terminal: 'bg-kodo-ink border border-kodo-steel text-gray-300 font-mono text-xs hover:border-kodo-cyan hover:text-kodo-cyan',
|
||||
/** Nature style */
|
||||
nature: 'bg-kodo-slate border border-kodo-lime/30 text-kodo-lime hover:bg-kodo-lime/10',
|
||||
/** Glass style */
|
||||
glass: 'bg-white/5 backdrop-blur-md border border-white/10 text-white hover:bg-white/10 hover:border-white/20 shadow-lg',
|
||||
'bg-muted text-foreground hover:bg-muted/80 border border-border',
|
||||
/** Ghost - icon buttons, menu items */
|
||||
ghost: 'hover:bg-muted/50 text-foreground',
|
||||
/** Gaming style - accent warning/gold */
|
||||
gaming:
|
||||
'bg-muted border border-warning/40 text-warning hover:bg-warning/10 hover:border-warning font-bold tracking-wider uppercase',
|
||||
/** Terminal style - monospace, primary accent on hover */
|
||||
terminal:
|
||||
'bg-card border border-border text-muted-foreground font-mono text-xs hover:border-primary hover:text-primary',
|
||||
/** Nature style - success green */
|
||||
nature:
|
||||
'bg-muted border border-success/30 text-success hover:bg-success/10 hover:border-success/50',
|
||||
/** Glass - glassmorphism */
|
||||
glass:
|
||||
'bg-white/5 backdrop-blur-md border border-white/10 text-foreground hover:bg-white/10 hover:border-white/20 shadow-lg',
|
||||
},
|
||||
size: {
|
||||
/** Default size - standard buttons */
|
||||
|
|
|
|||
Loading…
Reference in a new issue