From 4feea6ff9e7cafaacc87b1addf76dd4725db301c Mon Sep 17 00:00:00 2001 From: highperfocused Date: Thu, 27 Nov 2025 23:41:47 +0100 Subject: [PATCH] Refactor CSS variables for improved theming and consistency --- src/index.css | 179 +++++++++++++++++++++++++++++--------------------- 1 file changed, 103 insertions(+), 76 deletions(-) diff --git a/src/index.css b/src/index.css index 33fdf9d..3a00d93 100644 --- a/src/index.css +++ b/src/index.css @@ -3,90 +3,117 @@ @tailwind utilities; @layer base { + /* darkmatter tweakcn */ :root { --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; - + --foreground: 220.9091 39.2857% 10.9804%; --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; - + --card-foreground: 220.9091 39.2857% 10.9804%; --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; - - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; - - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; - - --radius: 0.5rem; - - --sidebar-background: 0 0% 98%; - - --sidebar-foreground: 240 5.3% 26.1%; - - --sidebar-primary: 240 5.9% 10%; - - --sidebar-primary-foreground: 0 0% 98%; - - --sidebar-accent: 240 4.8% 95.9%; - - --sidebar-accent-foreground: 240 5.9% 10%; - - --sidebar-border: 220 13% 91%; - - --sidebar-ring: 217.2 91.2% 59.8%; + --popover-foreground: 220.9091 39.2857% 10.9804%; + --primary: 21.7450 65.6388% 55.4902%; + --primary-foreground: 0 0% 100%; + --secondary: 180 17.5879% 39.0196%; + --secondary-foreground: 0 0% 100%; + --muted: 220.0000 14.2857% 95.8824%; + --muted-foreground: 220 8.9362% 46.0784%; + --accent: 0 0% 93.3333%; + --accent-foreground: 220.9091 39.2857% 10.9804%; + --destructive: 0 84.2365% 60.1961%; + --destructive-foreground: 0 0% 98.0392%; + --border: 220 13.0435% 90.9804%; + --input: 220 13.0435% 90.9804%; + --ring: 21.7450 65.6388% 55.4902%; + --chart-1: 180 17.3913% 45.0980%; + --chart-2: 22.2973 75.5102% 61.5686%; + --chart-3: 31.2000 92.5926% 78.8235%; + --chart-4: 0 0% 53.3333%; + --chart-5: 0 0% 60%; + --sidebar: 220.0000 14.2857% 95.8824%; + --sidebar-foreground: 220.9091 39.2857% 10.9804%; + --sidebar-primary: 21.7450 65.6388% 55.4902%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 0 0% 100%; + --sidebar-accent-foreground: 220.9091 39.2857% 10.9804%; + --sidebar-border: 220 13.0435% 90.9804%; + --sidebar-ring: 21.7450 65.6388% 55.4902%; + --font-sans: Geist Mono, ui-monospace, monospace; + --font-serif: serif; + --font-mono: JetBrains Mono, monospace; + --radius: 0.75rem; + --shadow-x: 0px; + --shadow-y: 1px; + --shadow-blur: 4px; + --shadow-spread: 0px; + --shadow-opacity: 0.05; + --shadow-color: #000000; + --shadow-2xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03); + --shadow-xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03); + --shadow-sm: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05); + --shadow: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05); + --shadow-md: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05); + --shadow-lg: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05); + --shadow-xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05); + --shadow-2xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.13); + --tracking-normal: 0rem; + --spacing: 0.25rem; } .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; + --background: 270 5.5556% 7.0588%; + --foreground: 0 0% 75.6863%; + --card: 0 0% 7.0588%; + --card-foreground: 0 0% 75.6863%; + --popover: 270 5.5556% 7.0588%; + --popover-foreground: 0 0% 75.6863%; + --primary: 22.2973 75.5102% 61.5686%; + --primary-foreground: 270 5.5556% 7.0588%; + --secondary: 180 17.3913% 45.0980%; + --secondary-foreground: 270 5.5556% 7.0588%; + --muted: 0 0% 13.3333%; + --muted-foreground: 0 0% 53.3333%; + --accent: 0 0% 20%; + --accent-foreground: 0 0% 75.6863%; + --destructive: 180 17.3913% 45.0980%; + --destructive-foreground: 270 5.5556% 7.0588%; + --border: 0 0% 13.3333%; + --input: 0 0% 13.3333%; + --ring: 22.2973 75.5102% 61.5686%; + --chart-1: 180 17.3913% 45.0980%; + --chart-2: 22.2973 75.5102% 61.5686%; + --chart-3: 31.2000 92.5926% 78.8235%; + --chart-4: 0 0% 53.3333%; + --chart-5: 0 0% 60%; + --sidebar: 0 0% 7.0588%; + --sidebar-foreground: 0 0% 75.6863%; + --sidebar-primary: 22.2973 75.5102% 61.5686%; + --sidebar-primary-foreground: 270 5.5556% 7.0588%; + --sidebar-accent: 0 0% 20%; + --sidebar-accent-foreground: 0 0% 75.6863%; + --sidebar-border: 0 0% 13.3333%; + --sidebar-ring: 22.2973 75.5102% 61.5686%; + --font-sans: Geist Mono, ui-monospace, monospace; + --font-serif: serif; + --font-mono: JetBrains Mono, monospace; + --radius: 0.75rem; + --shadow-x: 0px; + --shadow-y: 1px; + --shadow-blur: 4px; + --shadow-spread: 0px; + --shadow-opacity: 0.05; + --shadow-color: #000000; + --shadow-2xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03); + --shadow-xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03); + --shadow-sm: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05); + --shadow: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05); + --shadow-md: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05); + --shadow-lg: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05); + --shadow-xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05); + --shadow-2xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.13); + } - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; - - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; - - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; - - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; - - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; - --sidebar-background: 240 5.9% 10%; - --sidebar-foreground: 240 4.8% 95.9%; - --sidebar-primary: 224.3 76.3% 48%; - --sidebar-primary-foreground: 0 0% 100%; - --sidebar-accent: 240 3.7% 15.9%; - --sidebar-accent-foreground: 240 4.8% 95.9%; - --sidebar-border: 240 3.7% 15.9%; - --sidebar-ring: 217.2 91.2% 59.8%; + body { + letter-spacing: var(--tracking-normal); } }