danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

chore: color improvements in light mode

Browse source
This commit is contained in:
Nicolas Meienberger 2026-03-09 18:39:39 +01:00
parent 55dbcf0eb3
commit d59677e322
8 changed files with 48 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
app/app.css
View file

@ -89,40 +89,40 @@ body {
:root { :root {
--radius: 0.625rem; --radius: 0.625rem;
--background: oklch(0.975 0.005 80); --background: oklch(0.98 0.002 250);
--foreground: oklch(0.25 0.015 55); --foreground: oklch(0.20 0.01 260);
--card: oklch(0.988 0.004 80); --card: #ffffff;
--card-foreground: oklch(0.25 0.015 55); --card-foreground: oklch(0.20 0.01 260);
--card-header: oklch(0.945 0.008 80); --card-header: oklch(0.99 0.001 260);
--popover: oklch(0.988 0.004 80); --popover: #ffffff;
--popover-foreground: oklch(0.25 0.015 55); --popover-foreground: oklch(0.20 0.01 260);
--primary: oklch(0.25 0.015 55); --primary: oklch(0.20 0.01 260);
--primary-foreground: oklch(0.975 0.005 80); --primary-foreground: #ffffff;
--secondary: oklch(0.935 0.008 70); --secondary: oklch(0.96 0.005 260);
--secondary-foreground: oklch(0.25 0.015 55); --secondary-foreground: oklch(0.20 0.01 260);
--muted: oklch(0.935 0.008 70); --muted: oklch(0.95 0.005 260);
--muted-foreground: oklch(0.58 0.025 60); --muted-foreground: oklch(0.45 0.01 260);
--accent: oklch(0.935 0.008 70); --accent: oklch(0.96 0.005 260);
--accent-foreground: oklch(0.25 0.015 55); --accent-foreground: oklch(0.20 0.01 260);
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: #fff; --destructive-foreground: #fff;
--success: oklch(0.57 0.16 148); --success: oklch(0.57 0.16 148);
--border: oklch(0.9 0.01 70); --border: oklch(0.90 0.01 260);
--input: oklch(0.9 0.01 70); --input: oklch(0.90 0.01 260);
--ring: oklch(0.7 0.015 60); --ring: oklch(0.7 0.01 260);
--chart-1: oklch(0.646 0.222 41.116); --chart-1: oklch(0.55 0.22 260);
--chart-2: oklch(0.6 0.118 184.704); --chart-2: oklch(0.6 0.15 200);
--chart-3: oklch(0.398 0.07 227.392); --chart-3: oklch(0.45 0.12 280);
--chart-4: oklch(0.828 0.189 84.429); --chart-4: oklch(0.7 0.15 190);
--chart-5: oklch(0.769 0.188 70.08); --chart-5: oklch(0.55 0.18 300);
--sidebar: oklch(0.96 0.007 75); --sidebar: #ffffff;
--sidebar-foreground: oklch(0.25 0.015 55); --sidebar-foreground: oklch(0.35 0.01 260);
--sidebar-primary: oklch(0.25 0.015 55); --sidebar-primary: oklch(0.20 0.01 260);
--sidebar-primary-foreground: oklch(0.975 0.005 80); --sidebar-primary-foreground: #ffffff;
--sidebar-accent: oklch(0.935 0.008 70); --sidebar-accent: oklch(0.97 0.005 260);
--sidebar-accent-foreground: oklch(0.25 0.015 55); --sidebar-accent-foreground: oklch(0.20 0.01 260);
--sidebar-border: oklch(0.9 0.01 70); --sidebar-border: oklch(0.90 0.01 260);
--sidebar-ring: oklch(0.7 0.015 60); --sidebar-ring: oklch(0.7 0.01 260);
--strong-accent: #ff543a; --strong-accent: #ff543a;
} }
@ -179,11 +179,11 @@ body {
@layer base { @layer base {
:root { :root {
--chart-1: oklch(0.646 0.222 41.116); --chart-1: oklch(0.55 0.22 260);
--chart-2: oklch(0.6 0.118 184.704); --chart-2: oklch(0.6 0.15 200);
--chart-3: oklch(0.398 0.07 227.392); --chart-3: oklch(0.45 0.12 280);
--chart-4: oklch(0.828 0.189 84.429); --chart-4: oklch(0.7 0.15 190);
--chart-5: oklch(0.769 0.188 70.08); --chart-5: oklch(0.55 0.18 300);
} }
.dark { .dark {

4
app/client/components/app-sidebar.tsx
View file

@ -69,7 +69,7 @@ export function AppSidebar({ isInstanceAdmin }: Props) {
return ( return (
<Sidebar variant="inset" collapsible="icon" className="p-0"> <Sidebar variant="inset" collapsible="icon" className="p-0">
<SidebarHeader className="bg-card-header border-b border-border/50 hidden md:flex h-16.25 flex-row items-center p-4"> <SidebarHeader className="bg-card-header border-b border-border/80 dark:border-border/50 hidden md:flex h-16.25 flex-row items-center p-4">
<Link to="/volumes" className="flex items-center gap-3 font-semibold pl-2"> <Link to="/volumes" className="flex items-center gap-3 font-semibold pl-2">
<img src="/images/zerobyte.png" alt="Zerobyte Logo" className={cn("h-8 w-8 shrink-0 object-contain -ml-2")} /> <img src="/images/zerobyte.png" alt="Zerobyte Logo" className={cn("h-8 w-8 shrink-0 object-contain -ml-2")} />
<span <span
@ -194,7 +194,7 @@ export function AppSidebar({ isInstanceAdmin }: Props) {
</> </>
)} )}
</SidebarContent> </SidebarContent>
<SidebarFooter className="p-4 border-r border-border/50"> <SidebarFooter className="p-4 border-r border-border/80 dark:border-border/50">
<OrganizationSwitcher /> <OrganizationSwitcher />
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<HoverCard openDelay={200}> <HoverCard openDelay={200}>

2
app/client/components/grid-background.tsx
View file

@ -14,7 +14,7 @@ export function GridBackground({ children, className, containerClassName }: Grid
className={cn( className={cn(
"pointer-events-none absolute inset-0 w-full h-full", "pointer-events-none absolute inset-0 w-full h-full",
"bg-[size:40px_40px]", "bg-[size:40px_40px]",
"bg-[linear-gradient(to_right,#EAE5DF_1px,transparent_1px),linear-gradient(to_bottom,#EAE5DF_1px,transparent_1px)]", "bg-[linear-gradient(to_right,rgba(0,0,0,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.04)_1px,transparent_1px)]",
"dark:bg-[linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]", "dark:bg-[linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
"[mask-image:radial-gradient(ellipse_at_top,black_70%,transparent_100%)]", "[mask-image:radial-gradient(ellipse_at_top,black_70%,transparent_100%)]",
)} )}

4
app/client/components/layout.tsx
View file

@ -36,14 +36,14 @@ export function Layout({ loaderData }: Props) {
<SidebarProvider defaultOpen={loaderData.sidebarOpen}> <SidebarProvider defaultOpen={loaderData.sidebarOpen}>
<AppSidebar isInstanceAdmin={loaderData.user?.role === "admin"} /> <AppSidebar isInstanceAdmin={loaderData.user?.role === "admin"} />
<div className="w-full relative flex flex-col min-h-screen md:h-screen md:overflow-hidden"> <div className="w-full relative flex flex-col min-h-screen md:h-screen md:overflow-hidden">
<header className="z-50 bg-card-header border-b border-border/50 shrink-0 h-16.25"> <header className="z-50 bg-card-header border-b border-border/80 dark:border-border/50 shrink-0 h-16.25">
<div className="flex items-center h-full justify-between px-2 sm:px-8 mx-auto container gap-4"> <div className="flex items-center h-full justify-between px-2 sm:px-8 mx-auto container gap-4">
<div className="flex items-center gap-4 min-w-0"> <div className="flex items-center gap-4 min-w-0">
<SidebarTrigger /> <SidebarTrigger />
<AppBreadcrumb /> <AppBreadcrumb />
</div> </div>
{loaderData.user && ( {loaderData.user && (
<div className="flex items-center bg-muted/30 border border-border/50 px-2 py-1 rounded-full shadow-sm"> <div className="flex items-center bg-card dark:bg-muted/30 border border-border/80 dark:border-border/50 px-2 py-1 rounded-full shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)] dark:shadow-sm">
<span className="text-sm text-muted-foreground hidden md:inline-flex pl-2 mr-5"> <span className="text-sm text-muted-foreground hidden md:inline-flex pl-2 mr-5">
<span className="text-foreground">{loaderData.user.name}</span> <span className="text-foreground">{loaderData.user.name}</span>
</span> </span>

2
app/client/components/ui/card.tsx
View file

@ -7,7 +7,7 @@ function Card({ className, children, interactive, ...props }: React.ComponentPro
<div <div
data-slot="card" data-slot="card"
className={cn( className={cn(
"bg-card text-card-foreground group relative flex flex-col gap-6 border border-border py-6 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.03)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02)] transition-colors duration-300 ", "bg-card text-card-foreground group relative flex flex-col gap-6 border border-border py-6 shadow-[0_8px_30px_-15px_rgba(0,0,0,0.04)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02)] transition-colors duration-300 ",
className, className,
)} )}
{...props} {...props}

6
app/client/modules/backups/components/backup-card.tsx
View file

@ -33,19 +33,19 @@ export const BackupCard = ({ schedule }: { schedule: BackupSchedule }) => {
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center text-sm gap-2"> <div className="flex items-center text-sm gap-2">
<span className="text-muted-foreground shrink-0">Schedule</span> <span className="text-muted-foreground shrink-0">Schedule</span>
<div className="flex-1 border-b border-dashed border-border/50" /> <div className="flex-1 border-b border-dashed border-border/80 dark:border-border/50" />
<code className="text-xs text-foreground font-mono bg-muted px-2 py-1 rounded shrink-0"> <code className="text-xs text-foreground font-mono bg-muted px-2 py-1 rounded shrink-0">
{schedule.cronExpression} {schedule.cronExpression}
</code> </code>
</div> </div>
<div className="flex items-center text-sm gap-2"> <div className="flex items-center text-sm gap-2">
<span className="text-muted-foreground shrink-0">Last backup</span> <span className="text-muted-foreground shrink-0">Last backup</span>
<div className="flex-1 border-b border-dashed border-border/50" /> <div className="flex-1 border-b border-dashed border-border/80 dark:border-border/50" />
<span className="text-foreground font-mono text-sm shrink-0">{formatTimeAgo(schedule.lastBackupAt)}</span> <span className="text-foreground font-mono text-sm shrink-0">{formatTimeAgo(schedule.lastBackupAt)}</span>
</div> </div>
<div className="flex items-center text-sm gap-2"> <div className="flex items-center text-sm gap-2">
<span className="text-muted-foreground shrink-0">Next backup</span> <span className="text-muted-foreground shrink-0">Next backup</span>
<div className="flex-1 border-b border-dashed border-border/50" /> <div className="flex-1 border-b border-dashed border-border/80 dark:border-border/50" />
<span className="text-foreground font-mono text-sm shrink-0"> <span className="text-foreground font-mono text-sm shrink-0">
{formatShortDateTime(schedule.nextBackupAt)} {formatShortDateTime(schedule.nextBackupAt)}
</span> </span>

4
app/client/modules/backups/routes/backups.tsx
View file

@ -110,9 +110,9 @@ export function BackupsPage() {
); );
})} })}
<Link to="/backups/create" className="h-full"> <Link to="/backups/create" className="h-full">
<div className="group flex flex-col items-center justify-center h-full min-h-50 border border-dashed border-border/80 bg-card hover:bg-card/50 transition-colors cursor-pointer rounded-s shadow-sm hover:border-border"> <div className="group flex flex-col items-center justify-center h-full min-h-50 border-2 border-dashed border-border/60 bg-muted/20 dark:bg-card hover:bg-muted/40 dark:hover:bg-card/50 transition-all cursor-pointer rounded-xl hover:shadow-[0_8px_30px_-15px_rgba(0,0,0,0.05)] dark:hover:shadow-sm hover:border-border hover:-translate-y-[1px] active:scale-[0.98] duration-300">
<div className="flex flex-col items-center justify-center gap-3"> <div className="flex flex-col items-center justify-center gap-3">
<div className="p-3 rounded-full bg-muted/20 group-hover:bg-muted/50 transition-all group-hover:scale-110 duration-300"> <div className="p-3 rounded-full bg-background/50 dark:bg-muted/20 group-hover:bg-background dark:group-hover:bg-muted/50 transition-all group-hover:scale-110 duration-300 shadow-xs dark:shadow-none">
<Plus className="h-6 w-6 text-muted-foreground group-hover:text-foreground transition-colors" /> <Plus className="h-6 w-6 text-muted-foreground group-hover:text-foreground transition-colors" />
</div> </div>
<span className="text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors"> <span className="text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors">

2
app/client/modules/volumes/components/storage-chart.tsx
View file

@ -18,7 +18,7 @@ export function StorageChart({ statfs }: Props) {
{ {
name: "Used", name: "Used",
value: statfs.used, value: statfs.used,
fill: "#ff543a", fill: "var(--strong-accent)",
}, },
{ {
name: "Free", name: "Free",