dwindown/tabungin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove dark: variants, use theme colors only

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/web/src/components/ui/sidebar.tsx
View File

@@ -185,7 +185,7 @@ const Sidebar = React.forwardRef<
return (
<div
className={cn(
"flex h-full w-[--sidebar-width] flex-col bg-sidebar bg-background text-sidebar-foreground",
"flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar bg-background text-sidebar-foreground",
className
)}
ref={ref}
@@ -202,7 +202,7 @@ const Sidebar = React.forwardRef<
<SheetContent
data-sidebar="sidebar"
data-mobile="true"
className="w-[--sidebar-width] bg-sidebar bg-background p-0 text-sidebar-foreground [&>button]:hidden"
className="w-[var(--sidebar-width)] bg-sidebar bg-background p-0 text-sidebar-foreground [&>button]:hidden"
style={
{
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -232,24 +232,24 @@ const Sidebar = React.forwardRef<
{/* This is what handles the sidebar gap on desktop */}
<div
className={cn(
"relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
"relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear",
"group-data-[collapsible=offcanvas]:w-0",
"group-data-[side=right]:rotate-180",
variant === "floating" || variant === "inset"
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
: "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
)}
/>
<div
className={cn(
"inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
"inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex",
side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
// Adjust the padding for floating and inset variants.
variant === "floating" || variant === "inset"
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
: "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l",
className
)}
{...props}
@@ -677,7 +677,7 @@ const SidebarMenuSkeleton = React.forwardRef<
/>
)}
<Skeleton
className="h-4 max-w-[--skeleton-width] flex-1"
className="h-4 max-w-[var(--skeleton-width)] flex-1"
data-sidebar="menu-skeleton-text"
style={
{