From 82dfab99f9b10161e7e1dddb25aa2185faf74100 Mon Sep 17 00:00:00 2001 From: Leo dev Date: Fri, 26 Dec 2025 19:37:52 +0100 Subject: [PATCH] Cool theme --- src/app/globals.css | 202 ++++++++++++++++++++++++++++++-------------- 1 file changed, 139 insertions(+), 63 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index d6a166c..f4479d7 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -45,72 +45,148 @@ } :root { - --radius: 0.625rem; - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --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.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); + --background: oklch(0.97 0.02 225.66); + --foreground: oklch(0.15 0.02 269.18); + --card: oklch(0.98 0.01 228.79); + --card-foreground: oklch(0.15 0.02 269.18); + --popover: oklch(0.98 0.01 238.45); + --popover-foreground: oklch(0.15 0.02 269.18); + --primary: oklch(0.71 0.15 239.15); + --primary-foreground: oklch(0.94 0.03 232.39); + --secondary: oklch(0.91 0.03 229.20); + --secondary-foreground: oklch(0.15 0.02 269.18); + --muted: oklch(0.89 0.02 225.69); + --muted-foreground: oklch(0.36 0.03 231.55); + --accent: oklch(0.88 0.02 235.72); + --accent-foreground: oklch(0.34 0.05 229.20); + --destructive: oklch(0.61 0.24 20.96); + --border: oklch(0.82 0.02 240.77); + --input: oklch(0.82 0.02 240.77); + --ring: oklch(0.55 0.10 235.72); + --chart-1: oklch(0.57 0.11 228.92); + --chart-2: oklch(0.45 0.10 270.08); + --chart-3: oklch(0.65 0.15 159.03); + --chart-4: oklch(0.75 0.10 100.01); + --chart-5: oklch(0.55 0.15 299.88); + --sidebar: oklch(0.93 0.01 238.46); + --sidebar-foreground: oklch(0.15 0.02 269.18); + --sidebar-primary: oklch(0.57 0.11 228.92); + --sidebar-primary-foreground: oklch(0.99 0.01 203.97); + --sidebar-accent: oklch(0.88 0.02 235.72); + --sidebar-accent-foreground: oklch(0.15 0.02 269.18); + --sidebar-border: oklch(0.82 0.02 240.77); + --sidebar-ring: oklch(0.57 0.11 228.92); + + --font-sans: 'Source Code Pro', 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-serif: 'Source Serif 4', 'Geist', 'Geist Fallback', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --font-mono: 'Source Code Pro', 'Geist Mono', 'Geist Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + + --radius: 0rem; + + --shadow-2xs: 0px 1px 2.5px 0px oklch(0.49 0.09 235.00 / 0.03); + --shadow-xs: 0px 1px 2.5px 0px oklch(0.49 0.09 235.00 / 0.03); + --shadow-sm: 0px 1px 2.5px 0px oklch(0.49 0.09 235.00 / 0.06), 0px 1px 2px -1px oklch(0.49 0.09 235.00 / 0.06); + --shadow: 0px 1px 2.5px 0px oklch(0.49 0.09 235.00 / 0.06), 0px 1px 2px -1px oklch(0.49 0.09 235.00 / 0.06); + --shadow-md: 0px 1px 2.5px 0px oklch(0.49 0.09 235.00 / 0.06), 0px 2px 4px -1px oklch(0.49 0.09 235.00 / 0.06); + --shadow-lg: 0px 1px 2.5px 0px oklch(0.49 0.09 235.00 / 0.06), 0px 4px 6px -1px oklch(0.49 0.09 235.00 / 0.06); + --shadow-xl: 0px 1px 2.5px 0px oklch(0.49 0.09 235.00 / 0.06), 0px 8px 10px -1px oklch(0.49 0.09 235.00 / 0.06); + --shadow-2xl: 0px 1px 2.5px 0px oklch(0.49 0.09 235.00 / 0.15); + } .dark { - --background: oklch(0.145 0 0); - --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 0 0); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); - --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.556 0 0); - --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.205 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.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); + --background: oklch(0.18 0.02 271.27); + --foreground: oklch(0.90 0.01 238.47); + --card: oklch(0.22 0.02 271.67); + --card-foreground: oklch(0.90 0.01 238.47); + --popover: oklch(0.22 0.02 271.67); + --popover-foreground: oklch(0.90 0.01 238.47); + --primary: oklch(0.71 0.15 239.15); + --primary-foreground: oklch(0.94 0.03 232.39); + --secondary: oklch(0.28 0.03 270.91); + --secondary-foreground: oklch(0.90 0.01 238.47); + --muted: oklch(0.28 0.03 270.91); + --muted-foreground: oklch(0.60 0.03 269.46); + --accent: oklch(0.28 0.03 270.91); + --accent-foreground: oklch(0.90 0.01 238.47); + --destructive: oklch(0.64 0.25 19.69); + --border: oklch(0.90 0.01 238.47 / 15%); + --input: oklch(0.90 0.01 238.47 / 20%); + --ring: oklch(0.66 0.13 227.70); + --chart-1: oklch(0.66 0.13 227.70); + --chart-2: oklch(0.60 0.10 269.83); + --chart-3: oklch(0.70 0.15 159.83); + --chart-4: oklch(0.80 0.10 100.65); + --chart-5: oklch(0.60 0.15 300.14); + --sidebar: oklch(0.22 0.02 271.67); + --sidebar-foreground: oklch(0.90 0.01 238.47); + --sidebar-primary: oklch(0.66 0.13 227.70); + --sidebar-primary-foreground: oklch(0.18 0.02 271.27); + --sidebar-accent: oklch(0.28 0.03 270.91); + --sidebar-accent-foreground: oklch(0.90 0.01 238.47); + --sidebar-border: oklch(0.90 0.01 238.47 / 15%); + --sidebar-ring: oklch(0.66 0.13 227.70); + + --shadow-2xs: 0px 1px 2px 0px oklch(0 0 0 / 0.01); + --shadow-xs: 0px 1px 2px 0px oklch(0 0 0 / 0.01); + --shadow-sm: 0px 1px 2px 0px oklch(0 0 0 / 0.01), 0px 1px 2px -1px oklch(0 0 0 / 0.01); + --shadow: 0px 1px 2px 0px oklch(0 0 0 / 0.01), 0px 1px 2px -1px oklch(0 0 0 / 0.01); + --shadow-md: 0px 1px 2px 0px oklch(0 0 0 / 0.01), 0px 2px 4px -1px oklch(0 0 0 / 0.01); + --shadow-lg: 0px 1px 2px 0px oklch(0 0 0 / 0.01), 0px 4px 6px -1px oklch(0 0 0 / 0.01); + --shadow-xl: 0px 1px 2px 0px oklch(0 0 0 / 0.01), 0px 8px 10px -1px oklch(0 0 0 / 0.01); + --shadow-2xl: 0px 1px 2px 0px oklch(0 0 0 / 0.03); +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); + + --font-sans: var(--font-sans); + --font-mono: var(--font-mono); + --font-serif: var(--font-serif); + + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + + --shadow-2xs: var(--shadow-2xs); + --shadow-xs: var(--shadow-xs); + --shadow-sm: var(--shadow-sm); + --shadow: var(--shadow); + --shadow-md: var(--shadow-md); + --shadow-lg: var(--shadow-lg); + --shadow-xl: var(--shadow-xl); + --shadow-2xl: var(--shadow-2xl); } @layer base {