Apply Seubert brand colors: deep forest green primary, accent green, gold highlights (light + dark)
This commit is contained in:
parent
9028af2b4e
commit
daf0a1a83e
2 changed files with 59 additions and 57 deletions
|
|
@ -56,32 +56,33 @@
|
|||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
/* Seubert brand: white background, deep green primary */
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.147 0.004 49.25);
|
||||
--foreground: oklch(0.18 0.04 155); /* #174130 dark green text */
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.147 0.004 49.25);
|
||||
--card-foreground: oklch(0.18 0.04 155);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.147 0.004 49.25);
|
||||
--primary: oklch(0.216 0.006 56.043);
|
||||
--primary-foreground: oklch(0.985 0.001 106.423);
|
||||
--secondary: oklch(0.97 0.001 106.424);
|
||||
--secondary-foreground: oklch(0.216 0.006 56.043);
|
||||
--muted: oklch(0.97 0.001 106.424);
|
||||
--muted-foreground: oklch(0.553 0.013 58.071);
|
||||
--accent: oklch(0.97 0.001 106.424);
|
||||
--accent-foreground: oklch(0.216 0.006 56.043);
|
||||
--popover-foreground: oklch(0.18 0.04 155);
|
||||
--primary: oklch(0.32 0.09 155); /* #0F513F deep forest green */
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--secondary: oklch(0.95 0.02 155); /* very light green-tinted */
|
||||
--secondary-foreground: oklch(0.32 0.09 155);
|
||||
--muted: oklch(0.95 0.015 155);
|
||||
--muted-foreground: oklch(0.48 0.05 155);
|
||||
--accent: oklch(0.92 0.03 155);
|
||||
--accent-foreground: oklch(0.32 0.09 155);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.923 0.003 48.717);
|
||||
--input: oklch(0.923 0.003 48.717);
|
||||
--ring: oklch(0.709 0.01 56.259);
|
||||
--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.001 106.423);
|
||||
--sidebar-foreground: oklch(0.147 0.004 49.25);
|
||||
|
||||
--border: oklch(0.88 0.02 155);
|
||||
--input: oklch(0.88 0.02 155);
|
||||
--ring: oklch(0.52 0.12 155); /* #15745a mid green */
|
||||
--chart-1: oklch(0.32 0.09 155); /* deep green */
|
||||
--chart-2: oklch(0.52 0.12 155); /* mid green */
|
||||
--chart-3: oklch(0.65 0.14 155); /* #1FA883 accent green */
|
||||
--chart-4: oklch(0.72 0.13 85); /* #D6A620 gold */
|
||||
--chart-5: oklch(0.82 0.14 85); /* lighter gold */
|
||||
--sidebar: oklch(0.97 0.015 155);
|
||||
--sidebar-foreground: oklch(0.18 0.04 155);
|
||||
|
||||
/* Shape designation colors */
|
||||
--shape-blue: oklch(0.6 0.15 250);
|
||||
--shape-green: oklch(0.65 0.15 140);
|
||||
|
|
@ -91,41 +92,42 @@
|
|||
--shape-orange: oklch(0.7 0.18 50);
|
||||
--shape-teal: oklch(0.6 0.15 180);
|
||||
--shape-pink: oklch(0.7 0.18 350);
|
||||
--sidebar-primary: oklch(0.216 0.006 56.043);
|
||||
--sidebar-primary-foreground: oklch(0.985 0.001 106.423);
|
||||
--sidebar-accent: oklch(0.97 0.001 106.424);
|
||||
--sidebar-accent-foreground: oklch(0.216 0.006 56.043);
|
||||
--sidebar-border: oklch(0.923 0.003 48.717);
|
||||
--sidebar-ring: oklch(0.709 0.01 56.259);
|
||||
--sidebar-primary: oklch(0.32 0.09 155);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.92 0.03 155);
|
||||
--sidebar-accent-foreground: oklch(0.32 0.09 155);
|
||||
--sidebar-border: oklch(0.88 0.02 155);
|
||||
--sidebar-ring: oklch(0.52 0.12 155);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.147 0.004 49.25);
|
||||
--foreground: oklch(0.985 0.001 106.423);
|
||||
--card: oklch(0.216 0.006 56.043);
|
||||
--card-foreground: oklch(0.985 0.001 106.423);
|
||||
--popover: oklch(0.216 0.006 56.043);
|
||||
--popover-foreground: oklch(0.985 0.001 106.423);
|
||||
--primary: oklch(0.923 0.003 48.717);
|
||||
--primary-foreground: oklch(0.216 0.006 56.043);
|
||||
--secondary: oklch(0.268 0.007 34.298);
|
||||
--secondary-foreground: oklch(0.985 0.001 106.423);
|
||||
--muted: oklch(0.268 0.007 34.298);
|
||||
--muted-foreground: oklch(0.709 0.01 56.259);
|
||||
--accent: oklch(0.268 0.007 34.298);
|
||||
--accent-foreground: oklch(0.985 0.001 106.423);
|
||||
/* Seubert dark mode: deep green backgrounds */
|
||||
--background: oklch(0.18 0.05 155); /* very dark green */
|
||||
--foreground: oklch(0.96 0.01 155);
|
||||
--card: oklch(0.24 0.06 155); /* #0c4334 */
|
||||
--card-foreground: oklch(0.96 0.01 155);
|
||||
--popover: oklch(0.24 0.06 155);
|
||||
--popover-foreground: oklch(0.96 0.01 155);
|
||||
--primary: oklch(0.65 0.14 155); /* #1FA883 accent green — pops on dark bg */
|
||||
--primary-foreground: oklch(0.18 0.05 155);
|
||||
--secondary: oklch(0.28 0.07 155);
|
||||
--secondary-foreground: oklch(0.96 0.01 155);
|
||||
--muted: oklch(0.28 0.07 155);
|
||||
--muted-foreground: oklch(0.65 0.08 155);
|
||||
--accent: oklch(0.28 0.07 155);
|
||||
--accent-foreground: oklch(0.96 0.01 155);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.553 0.013 58.071);
|
||||
--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.216 0.006 56.043);
|
||||
--sidebar-foreground: oklch(0.985 0.001 106.423);
|
||||
|
||||
--ring: oklch(0.65 0.14 155);
|
||||
--chart-1: oklch(0.65 0.14 155); /* accent green */
|
||||
--chart-2: oklch(0.52 0.12 155); /* mid green */
|
||||
--chart-3: oklch(0.82 0.14 85); /* gold */
|
||||
--chart-4: oklch(0.72 0.13 85);
|
||||
--chart-5: oklch(0.45 0.1 155);
|
||||
--sidebar: oklch(0.22 0.06 155); /* #0c4334 */
|
||||
--sidebar-foreground: oklch(0.96 0.01 155);
|
||||
|
||||
/* Shape designation colors - dark mode */
|
||||
--shape-blue: oklch(0.65 0.18 250);
|
||||
--shape-green: oklch(0.7 0.18 140);
|
||||
|
|
@ -135,12 +137,12 @@
|
|||
--shape-orange: oklch(0.75 0.2 50);
|
||||
--shape-teal: oklch(0.65 0.18 180);
|
||||
--shape-pink: oklch(0.75 0.2 350);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0.001 106.423);
|
||||
--sidebar-accent: oklch(0.268 0.007 34.298);
|
||||
--sidebar-accent-foreground: oklch(0.985 0.001 106.423);
|
||||
--sidebar-primary: oklch(0.65 0.14 155);
|
||||
--sidebar-primary-foreground: oklch(0.18 0.05 155);
|
||||
--sidebar-accent: oklch(0.28 0.07 155);
|
||||
--sidebar-accent-foreground: oklch(0.96 0.01 155);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.553 0.013 58.071);
|
||||
--sidebar-ring: oklch(0.65 0.14 155);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export function NavBar() {
|
|||
<div className="flex items-center gap-8">
|
||||
<Link href="/dashboard" className="flex items-center gap-2 font-bold text-xl">
|
||||
<Shapes className="h-6 w-6 text-primary" />
|
||||
<span className="bg-gradient-to-r from-primary to-blue-600 bg-clip-text text-transparent">
|
||||
<span className="bg-gradient-to-r from-primary to-[#1FA883] bg-clip-text text-transparent">
|
||||
Horizon
|
||||
</span>
|
||||
</Link>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue