first color revision
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user