From 9c07d3195fedb6db45db7b783675b8b33a57e585 Mon Sep 17 00:00:00 2001 From: Roberto Musso Date: Fri, 27 Feb 2026 00:15:45 +0100 Subject: [PATCH] first color revision --- src/renderer/globals.css | 128 +++++++++++++++++++++++++-------------- 1 file changed, 84 insertions(+), 44 deletions(-) diff --git a/src/renderer/globals.css b/src/renderer/globals.css index 2a5d662..ea1ed95 100644 --- a/src/renderer/globals.css +++ b/src/renderer/globals.css @@ -50,73 +50,113 @@ :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); + + /* #f4edf3 - Light Pinkish-White Canvas */ + --background: oklch(0.945 0.012 328.5); + /* #040404 - Almost Black Text */ + --foreground: oklch(0.145 0 0); + + --card: oklch(0.945 0.012 328.5); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(0.945 0.012 328.5); + --popover-foreground: oklch(0.145 0 0); + + /* #fbc881 - Golden Yellow Accent */ + --primary: oklch(0.838 0.117 76.8); + --primary-foreground: oklch(0.145 0 0); + + /* #8a8ea9 - Slate Blue/Gray */ + --secondary: oklch(0.627 0.041 274.5); + --secondary-foreground: oklch(0.945 0.012 328.5); + + /* #c8c3cd - Light Gray/Purple */ + --muted: oklch(0.811 0.014 300.2); + --muted-foreground: oklch(0.627 0.041 274.5); + + --accent: oklch(0.811 0.014 300.2); + --accent-foreground: oklch(0.145 0 0); + --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); - --border: oklch(0.92 0.004 286.32); - --input: oklch(0.92 0.004 286.32); - --ring: oklch(0.705 0.015 286.067); + + --border: oklch(0.811 0.014 300.2); + --input: oklch(0.811 0.014 300.2); + --ring: oklch(0.838 0.117 76.8); + + /* Kept your original chart colors */ --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); + + /* Sidebar uses the custom palette */ + --sidebar: oklch(0.945 0.012 328.5); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.838 0.117 76.8); + --sidebar-primary-foreground: oklch(0.145 0 0); + --sidebar-accent: oklch(0.811 0.014 300.2); + --sidebar-accent-foreground: oklch(0.145 0 0); + --sidebar-border: oklch(0.811 0.014 300.2); + --sidebar-ring: oklch(0.838 0.117 76.8); } .dark { - --background: oklch(0.141 0.005 285.823); + /* #0c0c0c - Deepest black for the main canvas */ + --background: oklch(0.15 0 0); + /* #fbfbfb - Crisp white for primary text */ --foreground: oklch(0.985 0 0); - --card: oklch(0.21 0.006 285.885); + + /* Cards use the main background but are defined by borders */ + --card: oklch(0.15 0 0); --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.21 0.006 285.885); + --popover: oklch(0.15 0 0); --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); + + /* #fbfbfb - Primary actions (like the active white circle menu item) */ + --primary: oklch(0.985 0 0); + /* #0c0c0c - Dark text/icons inside primary buttons */ + --primary-foreground: oklch(0.15 0 0); + + /* #323232 - Dark gray for secondary surfaces and button backgrounds */ + --secondary: oklch(0.335 0 0); + /* #fbfbfb - White text on secondary surfaces */ --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); + + /* #323232 - Dark gray for muted backgrounds */ + --muted: oklch(0.335 0 0); + /* #77797b - Mid gray for muted/secondary text (like "ELEVATE YOUR...") */ + --muted-foreground: oklch(0.555 0 0); + + /* #323232 - Hover states */ + --accent: oklch(0.335 0 0); --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); + + --destructive: oklch(0.704 0.191 22.216); /* Kept original dark red */ --destructive-foreground: oklch(0.985 0 0); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.552 0.016 285.938); + + /* #323232 - Distinct dark gray borders for the cards/panels */ + --border: oklch(0.335 0 0); + --input: oklch(0.335 0 0); + /* #bab7ba - Lighter gray for focus rings to stand out against dark borders */ + --ring: oklch(0.765 0 0); + + /* Kept your original chart colors */ --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 mapped to the new sleek dark palette */ + --sidebar: oklch(0.15 0 0); --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-primary: oklch(0.985 0 0); + --sidebar-primary-foreground: oklch(0.15 0 0); + --sidebar-accent: oklch(0.335 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.552 0.016 285.938); + --sidebar-border: oklch(0.335 0 0); + --sidebar-ring: oklch(0.765 0 0); } @layer base {