fix: remove dark: variants, use theme colors only

ISSUE: Tailwind v4 doesn't handle dark: variants the same way as v3
The dark: prefix wasn't working properly in light mode

SOLUTION: Replace all dark: variants with theme-aware colors

Admin Pages:
- AdminPlans: badges use bg-primary/20, bg-green-500/20, etc.
- AdminUsers: role/status badges use opacity-based colors
- AdminDashboard: stat cards use /20 opacity backgrounds

Member Pages:
- Overview: chart tooltips use text-foreground

Benefits:
 Works correctly in both light and dark mode
 Colors automatically adapt via CSS variables
 No more hardcoded dark: classes
 Consistent opacity-based approach

Technical:
- Tailwind v4 uses @theme and CSS variables
- dark: variants need proper configuration
- Using /20 opacity on colors works universally
This commit is contained in:
dwindown
2025-10-11 21:20:36 +07:00
parent 46f03a34a5
commit bef2344ddc
10 changed files with 48 additions and 50 deletions

View File

@@ -20,7 +20,7 @@ const PopoverContent = React.forwardRef<
sideOffset={sideOffset}
style={{backgroundColor: "var(--background)"}}
className={cn(
"z-50 w-72 rounded-md border-2 border-border bg-card p-4 text-card-foreground shadow-xl outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
"z-50 w-72 rounded-md border-2 border-border bg-card p-4 text-card-foreground shadow-xl outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-popover-content-transform-origin)]",
className
)}
{...props}