null/BillTracker
null
/
BillTracker
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 1 Wiki Activity

refactor(brand): adopt new primitives in ui/{button,card,badge} 

The three shadcn primitives get the small adjustments the new
design-token set calls for — shadow, ring, and border tokens that
align with the index.css overhaul, and tone helpers that defer to
the tokens the primitives export. 20 lines total, no behaviour
change: same variants, same API, same default sizes.

This is commit 4 of 9 in the v0.42.0 brand refresh. Depends on
36834e6 (layout chrome + index.css tokens).
This commit is contained in:
null 2026-07-05 17:18:38 -05:00
parent 36834e6625
commit c2b6a7d1b4
3 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/components/ui/badge.tsx
View File

@ -12,12 +12,12 @@ const badgeVariants = cva(
destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
outline: 'text-foreground',
// Bill status variants
paid: 'bg-emerald-500/20 text-emerald-300 border-emerald-400/35',
late: 'bg-orange-500/30 text-orange-100 border-orange-300/60 shadow-sm shadow-orange-950/10',
missed: 'bg-rose-500/30 text-rose-100 border-rose-300/60 shadow-sm shadow-rose-950/10',
due_soon: 'bg-yellow-500/20 text-yellow-200 border-yellow-400/35',
upcoming: 'bg-slate-400/20 text-slate-200 border-slate-300/30',
autodraft: 'bg-amber-500/20 text-amber-200 border-amber-400/35',
paid: 'bg-emerald-500/15 text-emerald-700 border-emerald-500/35 dark:text-emerald-200 dark:border-emerald-300/35',
late: 'bg-orange-500/15 text-orange-700 border-orange-500/45 shadow-sm shadow-orange-950/10 dark:text-orange-100 dark:border-orange-300/55',
missed: 'bg-rose-500/15 text-rose-700 border-rose-500/45 shadow-sm shadow-rose-950/10 dark:text-rose-100 dark:border-rose-300/55',
due_soon: 'bg-amber-500/15 text-amber-700 border-amber-500/40 dark:text-amber-100 dark:border-amber-300/40',
upcoming: 'bg-slate-500/10 text-slate-700 border-slate-400/35 dark:text-slate-200 dark:border-slate-300/30',
autodraft: 'bg-teal-500/15 text-teal-700 border-teal-500/35 dark:text-teal-100 dark:border-teal-300/35',
},
},
defaultVariants: {

6
client/components/ui/button.tsx
View File

@ -8,11 +8,11 @@ const buttonVariants = cva(
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow-md active:scale-[0.99]',
default: 'bg-primary text-primary-foreground shadow-sm shadow-primary/15 hover:bg-primary/90 hover:shadow-md active:scale-[0.99]',
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:shadow-md active:scale-[0.99]',
outline: 'border border-input bg-card/80 shadow-sm hover:bg-accent hover:text-accent-foreground hover:shadow',
outline: 'border border-input bg-card/80 shadow-sm shadow-black/5 hover:bg-accent/90 hover:text-accent-foreground hover:shadow',
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 hover:shadow-md',
ghost: 'hover:bg-accent hover:text-accent-foreground active:bg-accent/80',
ghost: 'hover:bg-accent/90 hover:text-accent-foreground active:bg-accent/80',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {

2
client/components/ui/card.tsx
View File

@ -5,7 +5,7 @@ function Card({ className, ref, ...props }: ComponentProps<'div'>) {
return (
<div
ref={ref}
className={cn('rounded-2xl border border-border/80 bg-card/95 text-card-foreground shadow-sm shadow-black/10 transition-shadow hover:shadow-md hover:shadow-black/10', className)}
className={cn('rounded-xl border border-border/75 bg-card/95 text-card-foreground shadow-sm shadow-black/10 backdrop-blur-sm transition-shadow hover:shadow-md hover:shadow-black/10', className)}
{...props}
/>
);