Merge branch 'feature/color' into feature/popup-ai

This commit is contained in:
Roberto Musso
2026-02-27 23:56:19 +01:00

View File

@@ -50,73 +50,113 @@
:root { :root {
--radius: 0.625rem; --radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823); /* #f4edf3 - Light Pinkish-White Canvas */
--card: oklch(1 0 0); --background: oklch(0.945 0.012 328.5);
--card-foreground: oklch(0.141 0.005 285.823); /* #040404 - Almost Black Text */
--popover: oklch(1 0 0); --foreground: oklch(0.145 0 0);
--popover-foreground: oklch(0.141 0.005 285.823);
--primary: oklch(0.21 0.006 285.885); --card: oklch(0.945 0.012 328.5);
--primary-foreground: oklch(0.985 0 0); --card-foreground: oklch(0.145 0 0);
--secondary: oklch(0.967 0.001 286.375); --popover: oklch(0.945 0.012 328.5);
--secondary-foreground: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.145 0 0);
--muted: oklch(0.967 0.001 286.375);
--muted-foreground: oklch(0.552 0.016 285.938); /* #fbc881 - Golden Yellow Accent */
--accent: oklch(0.967 0.001 286.375); --primary: oklch(0.838 0.117 76.8);
--accent-foreground: oklch(0.21 0.006 285.885); --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: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0); --destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32); --border: oklch(0.811 0.014 300.2);
--ring: oklch(0.705 0.015 286.067); --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-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704); --chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392); --chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429); --chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08); --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 uses the custom palette */
--sidebar-primary: oklch(0.21 0.006 285.885); --sidebar: oklch(0.945 0.012 328.5);
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0);
--sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-primary: oklch(0.838 0.117 76.8);
--sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-primary-foreground: oklch(0.145 0 0);
--sidebar-border: oklch(0.92 0.004 286.32); --sidebar-accent: oklch(0.811 0.014 300.2);
--sidebar-ring: oklch(0.705 0.015 286.067); --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 { .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); --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); --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); --popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.92 0.004 286.32);
--primary-foreground: oklch(0.21 0.006 285.885); /* #fbfbfb - Primary actions (like the active white circle menu item) */
--secondary: oklch(0.274 0.006 286.033); --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); --secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067); /* #323232 - Dark gray for muted backgrounds */
--accent: oklch(0.274 0.006 286.033); --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); --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); --destructive-foreground: oklch(0.985 0 0);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%); /* #323232 - Distinct dark gray borders for the cards/panels */
--ring: oklch(0.552 0.016 285.938); --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-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48); --chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08); --chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9); --chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439); --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-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary: oklch(0.985 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-primary-foreground: oklch(0.15 0 0);
--sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent: oklch(0.335 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%); --sidebar-border: oklch(0.335 0 0);
--sidebar-ring: oklch(0.552 0.016 285.938); --sidebar-ring: oklch(0.765 0 0);
} }
@layer base { @layer base {