style: Match Ersen design system
- Add Space Grotesk and JetBrains Mono fonts - Implement light/dark mode toggle with next-themes - Update color palette to match Ersen (HSL-based tokens) - Add ThemeProvider and ThemeToggle components - Reduce border radius to 0.3rem for cleaner look
This commit is contained in:
fullsizemalt
parent
415a092257
commit
67fbd4d152
6 changed files with 174 additions and 80 deletions
|
|
@ -3,11 +3,14 @@
|
|||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* Import Space Grotesk and JetBrains Mono from Google Fonts */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-sans: 'Space Grotesk', system-ui, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
|
|
@ -43,73 +46,75 @@
|
|||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
/* Light Mode - Ersen Style */
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.141 0.005 285.823);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.141 0.005 285.823);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.141 0.005 285.823);
|
||||
--primary: oklch(0.21 0.006 285.885);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.967 0.001 286.375);
|
||||
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||
--muted: oklch(0.967 0.001 286.375);
|
||||
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||
--accent: oklch(0.967 0.001 286.375);
|
||||
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.92 0.004 286.32);
|
||||
--input: oklch(0.92 0.004 286.32);
|
||||
--ring: oklch(0.705 0.015 286.067);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||||
--sidebar-primary: oklch(0.21 0.006 285.885);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.705 0.015 286.067);
|
||||
--radius: 0.3rem;
|
||||
--background: hsl(240, 5%, 98%);
|
||||
--foreground: hsl(240, 10%, 3.9%);
|
||||
--card: hsl(0, 0%, 100%);
|
||||
--card-foreground: hsl(240, 10%, 3.9%);
|
||||
--popover: hsl(0, 0%, 100%);
|
||||
--popover-foreground: hsl(240, 10%, 3.9%);
|
||||
--primary: hsl(221.2, 83.2%, 53.3%);
|
||||
--primary-foreground: hsl(0, 0%, 100%);
|
||||
--secondary: hsl(240, 5.9%, 90%);
|
||||
--secondary-foreground: hsl(240, 5.9%, 10%);
|
||||
--muted: hsl(240, 4.8%, 95.9%);
|
||||
--muted-foreground: hsl(240, 3.8%, 46.1%);
|
||||
--accent: hsl(240, 4.8%, 95.9%);
|
||||
--accent-foreground: hsl(240, 5.9%, 10%);
|
||||
--destructive: hsl(0, 84.2%, 60.2%);
|
||||
--border: hsl(240, 5.9%, 90%);
|
||||
--input: hsl(240, 5.9%, 90%);
|
||||
--ring: hsl(221.2, 83.2%, 53.3%);
|
||||
--chart-1: hsl(12, 76%, 61%);
|
||||
--chart-2: hsl(173, 58%, 39%);
|
||||
--chart-3: hsl(197, 37%, 24%);
|
||||
--chart-4: hsl(43, 74%, 66%);
|
||||
--chart-5: hsl(27, 87%, 67%);
|
||||
--sidebar: hsl(0, 0%, 100%);
|
||||
--sidebar-foreground: hsl(240, 10%, 3.9%);
|
||||
--sidebar-primary: hsl(221.2, 83.2%, 53.3%);
|
||||
--sidebar-primary-foreground: hsl(0, 0%, 100%);
|
||||
--sidebar-accent: hsl(240, 4.8%, 95.9%);
|
||||
--sidebar-accent-foreground: hsl(240, 5.9%, 10%);
|
||||
--sidebar-border: hsl(240, 5.9%, 90%);
|
||||
--sidebar-ring: hsl(221.2, 83.2%, 53.3%);
|
||||
}
|
||||
|
||||
/* Dark Mode - Ersen Style */
|
||||
.dark {
|
||||
--background: oklch(0.141 0.005 285.823);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.21 0.006 285.885);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.21 0.006 285.885);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.92 0.004 286.32);
|
||||
--primary-foreground: oklch(0.21 0.006 285.885);
|
||||
--secondary: oklch(0.274 0.006 286.033);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.274 0.006 286.033);
|
||||
--muted-foreground: oklch(0.705 0.015 286.067);
|
||||
--accent: oklch(0.274 0.006 286.033);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.552 0.016 285.938);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.21 0.006 285.885);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.552 0.016 285.938);
|
||||
--background: hsl(240, 10%, 3.9%);
|
||||
--foreground: hsl(0, 0%, 95%);
|
||||
--card: hsl(240, 10%, 5%);
|
||||
--card-foreground: hsl(0, 0%, 95%);
|
||||
--popover: hsl(240, 10%, 5%);
|
||||
--popover-foreground: hsl(0, 0%, 95%);
|
||||
--primary: hsl(221.2, 83.2%, 53.3%);
|
||||
--primary-foreground: hsl(0, 0%, 100%);
|
||||
--secondary: hsl(240, 3.7%, 15.9%);
|
||||
--secondary-foreground: hsl(0, 0%, 95%);
|
||||
--muted: hsl(240, 3.7%, 15.9%);
|
||||
--muted-foreground: hsl(240, 5%, 64.9%);
|
||||
--accent: hsl(240, 3.7%, 15.9%);
|
||||
--accent-foreground: hsl(0, 0%, 95%);
|
||||
--destructive: hsl(0, 62.8%, 50.6%);
|
||||
--border: hsl(240, 3.7%, 15.9%);
|
||||
--input: hsl(240, 3.7%, 15.9%);
|
||||
--ring: hsl(221.2, 83.2%, 53.3%);
|
||||
--chart-1: hsl(220, 70%, 50%);
|
||||
--chart-2: hsl(160, 60%, 45%);
|
||||
--chart-3: hsl(30, 80%, 55%);
|
||||
--chart-4: hsl(280, 65%, 60%);
|
||||
--chart-5: hsl(340, 75%, 55%);
|
||||
--sidebar: hsl(240, 10%, 5%);
|
||||
--sidebar-foreground: hsl(0, 0%, 95%);
|
||||
--sidebar-primary: hsl(221.2, 83.2%, 53.3%);
|
||||
--sidebar-primary-foreground: hsl(0, 0%, 100%);
|
||||
--sidebar-accent: hsl(240, 3.7%, 15.9%);
|
||||
--sidebar-accent-foreground: hsl(0, 0%, 95%);
|
||||
--sidebar-border: hsl(240, 3.7%, 15.9%);
|
||||
--sidebar-ring: hsl(221.2, 83.2%, 53.3%);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
|
@ -119,5 +124,22 @@
|
|||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family: 'Space Grotesk', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
.font-mono {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: 'Space Grotesk', system-ui, sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,22 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Space_Grotesk, JetBrains_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { Navbar } from "@/components/layout/navbar";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PreferencesProvider } from "@/contexts/preferences-context";
|
||||
import { AuthProvider } from "@/contexts/auth-context";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import { Footer } from "@/components/layout/footer";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
const spaceGrotesk = Space_Grotesk({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-sans",
|
||||
});
|
||||
|
||||
const jetbrainsMono = JetBrains_Mono({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-mono",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Elmeg - Fandom Archive",
|
||||
|
|
@ -21,17 +29,28 @@ export default function RootLayout({
|
|||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={cn(inter.className, "min-h-screen bg-background font-sans antialiased flex flex-col")}>
|
||||
<AuthProvider>
|
||||
<PreferencesProvider>
|
||||
<Navbar />
|
||||
<main className="flex-1 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
</PreferencesProvider>
|
||||
</AuthProvider>
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={cn(
|
||||
spaceGrotesk.variable,
|
||||
jetbrainsMono.variable,
|
||||
"min-h-screen bg-background font-sans antialiased flex flex-col"
|
||||
)}>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="dark"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<AuthProvider>
|
||||
<PreferencesProvider>
|
||||
<Navbar />
|
||||
<main className="flex-1 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
</PreferencesProvider>
|
||||
</AuthProvider>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { Music, User, ChevronDown } from "lucide-react"
|
|||
import { Button } from "@/components/ui/button"
|
||||
import { SearchDialog } from "@/components/ui/search-dialog"
|
||||
import { NotificationBell } from "@/components/notifications/notification-bell"
|
||||
import { ThemeToggle } from "@/components/theme-toggle"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
|
|
@ -64,6 +65,7 @@ export function Navbar() {
|
|||
<div className="w-full flex-1 md:w-auto md:flex-none">
|
||||
<SearchDialog />
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
<nav className="flex items-center gap-2">
|
||||
{user ? (
|
||||
<>
|
||||
|
|
|
|||
11
frontend/components/theme-provider.tsx
Normal file
11
frontend/components/theme-provider.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { ThemeProvider as NextThemesProvider } from "next-themes"
|
||||
|
||||
export function ThemeProvider({
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NextThemesProvider>) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
||||
}
|
||||
39
frontend/components/theme-toggle.tsx
Normal file
39
frontend/components/theme-toggle.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Moon, Sun } from "lucide-react"
|
||||
import { useTheme } from "next-themes"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { theme, setTheme } = useTheme()
|
||||
const [mounted, setMounted] = React.useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
if (!mounted) {
|
||||
return (
|
||||
<Button variant="ghost" size="icon" className="h-9 w-9">
|
||||
<Sun className="h-4 w-4" />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9"
|
||||
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
|
||||
>
|
||||
{theme === "dark" ? (
|
||||
<Sun className="h-4 w-4" />
|
||||
) : (
|
||||
<Moon className="h-4 w-4" />
|
||||
)}
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
|
@ -28,7 +28,8 @@
|
|||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"recharts": "^3.6.0",
|
||||
"tailwind-merge": "^3.4.0"
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"next-themes": "^0.4.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue