@codefast/ui 0.3.16-canary.1 → 0.3.16-canary.3

package/src/css/cyan.css

@@ -1,9 +1,4 @@
 :root {
-  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-
-  --ring: oklch(0.8 0.13 212); /* --color-cyan-400 */
-
   --background: oklch(1 0 0); /* --color-zinc-50 */
   --foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
@@ -15,27 +10,28 @@
 
   --destructive: oklch(0.577 0.245 27.325); /* --color-red-600 */
 
-  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
-  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --muted: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --muted-foreground: oklch(0.552 0.016 285.938); /* --color-zinc-500 */
 
+  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
+  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+
   --popover: oklch(1 0 0); /* --color-zinc-50 */
   --popover-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
   --card: oklch(1 0 0); /* --color-zinc-50 */
   --card-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
+  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --ring: oklch(0.8 0.13 212); /* --color-cyan-400 */
+
   --sidebar: oklch(0.985 0 0); /* --color-zinc-50 */
   --sidebar-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
-
   --sidebar-primary: oklch(0.61 0.11 222); /* --color-cyan-600 */
   --sidebar-primary-foreground: oklch(0.98 0.02 201); /* --color-cyan-50 */
-
   --sidebar-accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --sidebar-border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --sidebar-ring: oklch(0.8 0.13 212); /* --color-cyan-400 */
 
@@ -47,11 +43,6 @@
 }
 
 .dark {
-  --input: oklch(1 0 0 / 15%); /* --color-white */
-  --border: oklch(1 0 0 / 10%); /* --color-white */
-
-  --ring: oklch(0.4 0.07 227); /* --color-cyan-900 */
-
   --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
   --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
@@ -63,27 +54,28 @@
 
   --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
 
-  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
 
+  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
   --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
   --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
+  --border: oklch(1 0 0 / 10%); /* --color-white */
+  --input: oklch(1 0 0 / 15%); /* --color-white */
+  --ring: oklch(0.4 0.07 227); /* --color-cyan-900 */
+
   --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-primary: oklch(0.71 0.13 215); /* --color-cyan-500 */
   --sidebar-primary-foreground: oklch(0.98 0.02 201); /* --color-cyan-50 */
-
   --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
   --sidebar-ring: oklch(0.4 0.07 227); /* --color-cyan-900 */
 
@@ -93,3 +85,48 @@
   --chart-4: oklch(0.61 0.11 222); /* --color-cyan-600 */
   --chart-5: oklch(0.52 0.09 223); /* --color-cyan-700 */
 }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
+    --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --primary: oklch(0.71 0.13 215); /* --color-cyan-500 */
+    --primary-foreground: oklch(0.98 0.02 201); /* --color-cyan-50 */
+
+    --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
+
+    --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
+
+    --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --border: oklch(1 0 0 / 10%); /* --color-white */
+    --input: oklch(1 0 0 / 15%); /* --color-white */
+    --ring: oklch(0.4 0.07 227); /* --color-cyan-900 */
+
+    --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-primary: oklch(0.71 0.13 215); /* --color-cyan-500 */
+    --sidebar-primary-foreground: oklch(0.98 0.02 201); /* --color-cyan-50 */
+    --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
+    --sidebar-ring: oklch(0.4 0.07 227); /* --color-cyan-900 */
+
+    --chart-1: oklch(0.87 0.12 207); /* --color-cyan-300 */
+    --chart-2: oklch(0.8 0.13 212); /* --color-cyan-400 */
+    --chart-3: oklch(0.71 0.13 215); /* --color-cyan-500 */
+    --chart-4: oklch(0.61 0.11 222); /* --color-cyan-600 */
+    --chart-5: oklch(0.52 0.09 223); /* --color-cyan-700 */
+  }
+}

package/src/css/emerald.css

@@ -1,9 +1,4 @@
 :root {
-  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-
-  --ring: oklch(0.77 0.15 163); /* --color-emerald-400 */
-
   --background: oklch(1 0 0); /* --color-zinc-50 */
   --foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
@@ -15,27 +10,28 @@
 
   --destructive: oklch(0.577 0.245 27.325); /* --color-red-600 */
 
-  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
-  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --muted: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --muted-foreground: oklch(0.552 0.016 285.938); /* --color-zinc-500 */
 
+  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
+  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+
   --popover: oklch(1 0 0); /* --color-zinc-50 */
   --popover-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
   --card: oklch(1 0 0); /* --color-zinc-50 */
   --card-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
+  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --ring: oklch(0.77 0.15 163); /* --color-emerald-400 */
+
   --sidebar: oklch(0.985 0 0); /* --color-zinc-50 */
   --sidebar-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
-
   --sidebar-primary: oklch(0.6 0.13 163); /* --color-emerald-600 */
   --sidebar-primary-foreground: oklch(0.98 0.02 166); /* --color-emerald-50 */
-
   --sidebar-accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --sidebar-border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --sidebar-ring: oklch(0.77 0.15 163); /* --color-emerald-400 */
 
@@ -47,11 +43,6 @@
 }
 
 .dark {
-  --input: oklch(1 0 0 / 15%); /* --color-white */
-  --border: oklch(1 0 0 / 10%); /* --color-white */
-
-  --ring: oklch(0.38 0.07 169); /* --color-emerald-900 */
-
   --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
   --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
@@ -63,27 +54,28 @@
 
   --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
 
-  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
 
+  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
   --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
   --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
+  --border: oklch(1 0 0 / 10%); /* --color-white */
+  --input: oklch(1 0 0 / 15%); /* --color-white */
+  --ring: oklch(0.38 0.07 169); /* --color-emerald-900 */
+
   --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-primary: oklch(0.7 0.15 162); /* --color-emerald-500 */
   --sidebar-primary-foreground: oklch(0.98 0.02 166); /* --color-emerald-50 */
-
   --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
   --sidebar-ring: oklch(0.38 0.07 169); /* --color-emerald-900 */
 
@@ -93,3 +85,48 @@
   --chart-4: oklch(0.6 0.13 163); /* --color-emerald-600 */
   --chart-5: oklch(0.51 0.1 166); /* --color-emerald-700 */
 }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
+    --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --primary: oklch(0.7 0.15 162); /* --color-emerald-500 */
+    --primary-foreground: oklch(0.98 0.02 166); /* --color-emerald-50 */
+
+    --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
+
+    --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
+
+    --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --border: oklch(1 0 0 / 10%); /* --color-white */
+    --input: oklch(1 0 0 / 15%); /* --color-white */
+    --ring: oklch(0.38 0.07 169); /* --color-emerald-900 */
+
+    --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-primary: oklch(0.7 0.15 162); /* --color-emerald-500 */
+    --sidebar-primary-foreground: oklch(0.98 0.02 166); /* --color-emerald-50 */
+    --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
+    --sidebar-ring: oklch(0.38 0.07 169); /* --color-emerald-900 */
+
+    --chart-1: oklch(0.85 0.13 165); /* --color-emerald-300 */
+    --chart-2: oklch(0.77 0.15 163); /* --color-emerald-400 */
+    --chart-3: oklch(0.7 0.15 162); /* --color-emerald-500 */
+    --chart-4: oklch(0.6 0.13 163); /* --color-emerald-600 */
+    --chart-5: oklch(0.51 0.1 166); /* --color-emerald-700 */
+  }
+}

package/src/css/fuchsia.css

@@ -1,9 +1,4 @@
 :root {
-  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-
-  --ring: oklch(0.75 0.21 322); /* --color-fuchsia-400 */
-
   --background: oklch(1 0 0); /* --color-zinc-50 */
   --foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
@@ -15,27 +10,28 @@
 
   --destructive: oklch(0.577 0.245 27.325); /* --color-red-600 */
 
-  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
-  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --muted: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --muted-foreground: oklch(0.552 0.016 285.938); /* --color-zinc-500 */
 
+  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
+  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+
   --popover: oklch(1 0 0); /* --color-zinc-50 */
   --popover-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
   --card: oklch(1 0 0); /* --color-zinc-50 */
   --card-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
+  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --ring: oklch(0.75 0.21 322); /* --color-fuchsia-400 */
+
   --sidebar: oklch(0.985 0 0); /* --color-zinc-50 */
   --sidebar-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
-
   --sidebar-primary: oklch(0.59 0.26 323); /* --color-fuchsia-600 */
   --sidebar-primary-foreground: oklch(0.98 0.02 320); /* --color-fuchsia-50 */
-
   --sidebar-accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --sidebar-border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --sidebar-ring: oklch(0.75 0.21 322); /* --color-fuchsia-400 */
 
@@ -47,11 +43,6 @@
 }
 
 .dark {
-  --input: oklch(1 0 0 / 15%); /* --color-white */
-  --border: oklch(1 0 0 / 10%); /* --color-white */
-
-  --ring: oklch(0.4 0.16 326); /* --color-fuchsia-900 */
-
   --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
   --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
@@ -63,27 +54,28 @@
 
   --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
 
-  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
 
+  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
   --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
   --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
+  --border: oklch(1 0 0 / 10%); /* --color-white */
+  --input: oklch(1 0 0 / 15%); /* --color-white */
+  --ring: oklch(0.4 0.16 326); /* --color-fuchsia-900 */
+
   --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-primary: oklch(0.67 0.26 322); /* --color-fuchsia-500 */
   --sidebar-primary-foreground: oklch(0.98 0.02 320); /* --color-fuchsia-50 */
-
   --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
   --sidebar-ring: oklch(0.4 0.16 326); /* --color-fuchsia-900 */
 
@@ -93,3 +85,48 @@
   --chart-4: oklch(0.59 0.26 323); /* --color-fuchsia-600 */
   --chart-5: oklch(0.52 0.23 324); /* --color-fuchsia-700 */
 }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
+    --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --primary: oklch(0.67 0.26 322); /* --color-fuchsia-500 */
+    --primary-foreground: oklch(0.98 0.02 320); /* --color-fuchsia-50 */
+
+    --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
+
+    --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
+
+    --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --border: oklch(1 0 0 / 10%); /* --color-white */
+    --input: oklch(1 0 0 / 15%); /* --color-white */
+    --ring: oklch(0.4 0.16 326); /* --color-fuchsia-900 */
+
+    --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-primary: oklch(0.67 0.26 322); /* --color-fuchsia-500 */
+    --sidebar-primary-foreground: oklch(0.98 0.02 320); /* --color-fuchsia-50 */
+    --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
+    --sidebar-ring: oklch(0.4 0.16 326); /* --color-fuchsia-900 */
+
+    --chart-1: oklch(0.83 0.13 321); /* --color-fuchsia-300 */
+    --chart-2: oklch(0.75 0.21 322); /* --color-fuchsia-400 */
+    --chart-3: oklch(0.67 0.26 322); /* --color-fuchsia-500 */
+    --chart-4: oklch(0.59 0.26 323); /* --color-fuchsia-600 */
+    --chart-5: oklch(0.52 0.23 324); /* --color-fuchsia-700 */
+  }
+}

package/src/css/gray.css

@@ -1,9 +1,4 @@
 :root {
-  --input: oklch(0.93 0.01 265); /* --color-gray-200 */
-  --border: oklch(0.93 0.01 265); /* --color-gray-200 */
-
-  --ring: oklch(0.71 0.02 261); /* --color-gray-400 */
-
   --background: oklch(0.98 0 248); /* --color-gray-50 */
   --foreground: oklch(0.13 0.03 262); /* --color-gray-950 */
 
@@ -15,27 +10,28 @@
 
   --destructive: oklch(0.577 0.245 27.325); /* --color-red-600 */
 
-  --accent: oklch(0.97 0 265); /* --color-gray-100 */
-  --accent-foreground: oklch(0.21 0.03 265); /* --color-gray-900 */
-
   --muted: oklch(0.97 0 265); /* --color-gray-100 */
   --muted-foreground: oklch(0.55 0.02 264); /* --color-gray-500 */
 
+  --accent: oklch(0.97 0 265); /* --color-gray-100 */
+  --accent-foreground: oklch(0.21 0.03 265); /* --color-gray-900 */
+
   --popover: oklch(0.98 0 248); /* --color-gray-50 */
   --popover-foreground: oklch(0.13 0.03 262); /* --color-gray-950 */
 
   --card: oklch(0.98 0 248); /* --color-gray-50 */
   --card-foreground: oklch(0.13 0.03 262); /* --color-gray-950 */
 
+  --border: oklch(0.93 0.01 265); /* --color-gray-200 */
+  --input: oklch(0.93 0.01 265); /* --color-gray-200 */
+  --ring: oklch(0.71 0.02 261); /* --color-gray-400 */
+
   --sidebar: oklch(0.98 0 248); /* --color-gray-50 */
   --sidebar-foreground: oklch(0.13 0.03 262); /* --color-gray-950 */
-
   --sidebar-primary: oklch(0.21 0.03 265); /* --color-gray-900 */
   --sidebar-primary-foreground: oklch(0.98 0 248); /* --color-gray-50 */
-
   --sidebar-accent: oklch(0.97 0 265); /* --color-gray-100 */
   --sidebar-accent-foreground: oklch(0.21 0.03 265); /* --color-gray-900 */
-
   --sidebar-border: oklch(0.93 0.01 265); /* --color-gray-200 */
   --sidebar-ring: oklch(0.71 0.02 261); /* --color-gray-400 */
 
@@ -47,11 +43,6 @@
 }
 
 .dark {
-  --input: oklch(1 0 0 / 15%); /* --color-white */
-  --border: oklch(1 0 0 / 10%); /* --color-white */
-
-  --ring: oklch(0.55 0.02 264); /* --color-gray-500 */
-
   --background: oklch(0.13 0.03 262); /* --color-gray-950 */
   --foreground: oklch(0.98 0 248); /* --color-gray-50 */
 
@@ -63,27 +54,28 @@
 
   --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
 
-  --accent: oklch(0.28 0.03 257); /* --color-gray-800 */
-  --accent-foreground: oklch(0.98 0 248); /* --color-gray-50 */
-
   --muted: oklch(0.28 0.03 257); /* --color-gray-800 */
   --muted-foreground: oklch(0.71 0.02 261); /* --color-gray-400 */
 
+  --accent: oklch(0.28 0.03 257); /* --color-gray-800 */
+  --accent-foreground: oklch(0.98 0 248); /* --color-gray-50 */
+
   --popover: oklch(0.21 0.03 265); /* --color-gray-900 */
   --popover-foreground: oklch(0.98 0 248); /* --color-gray-50 */
 
   --card: oklch(0.21 0.03 265); /* --color-gray-900 */
   --card-foreground: oklch(0.98 0 248); /* --color-gray-50 */
 
+  --border: oklch(1 0 0 / 10%); /* --color-white */
+  --input: oklch(1 0 0 / 15%); /* --color-white */
+  --ring: oklch(0.55 0.02 264); /* --color-gray-500 */
+
   --sidebar: oklch(0.21 0.03 265); /* --color-gray-900 */
   --sidebar-foreground: oklch(0.98 0 248); /* --color-gray-50 */
-
   --sidebar-primary: oklch(0.488 0.243 264.376); /* --color-blue-700 */
   --sidebar-primary-foreground: oklch(0.98 0 248); /* --color-gray-50 */
-
   --sidebar-accent: oklch(0.28 0.03 257); /* --color-gray-800 */
   --sidebar-accent-foreground: oklch(0.98 0 248); /* --color-gray-50 */
-
   --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
   --sidebar-ring: oklch(0.55 0.02 264); /* --color-gray-500 */
 
@@ -93,3 +85,48 @@
   --chart-4: oklch(0.627 0.265 303.9); /* --color-purple-500 */
   --chart-5: oklch(0.645 0.246 16.439); /* --color-rose-500 */
 }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: oklch(0.13 0.03 262); /* --color-gray-950 */
+    --foreground: oklch(0.98 0 248); /* --color-gray-50 */
+
+    --primary: oklch(0.93 0.01 265); /* --color-gray-200 */
+    --primary-foreground: oklch(0.21 0.03 265); /* --color-gray-900 */
+
+    --secondary: oklch(0.28 0.03 257); /* --color-gray-800 */
+    --secondary-foreground: oklch(0.98 0 248); /* --color-gray-50 */
+
+    --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
+
+    --muted: oklch(0.28 0.03 257); /* --color-gray-800 */
+    --muted-foreground: oklch(0.71 0.02 261); /* --color-gray-400 */
+
+    --accent: oklch(0.28 0.03 257); /* --color-gray-800 */
+    --accent-foreground: oklch(0.98 0 248); /* --color-gray-50 */
+
+    --popover: oklch(0.21 0.03 265); /* --color-gray-900 */
+    --popover-foreground: oklch(0.98 0 248); /* --color-gray-50 */
+
+    --card: oklch(0.21 0.03 265); /* --color-gray-900 */
+    --card-foreground: oklch(0.98 0 248); /* --color-gray-50 */
+
+    --border: oklch(1 0 0 / 10%); /* --color-white */
+    --input: oklch(1 0 0 / 15%); /* --color-white */
+    --ring: oklch(0.55 0.02 264); /* --color-gray-500 */
+
+    --sidebar: oklch(0.21 0.03 265); /* --color-gray-900 */
+    --sidebar-foreground: oklch(0.98 0 248); /* --color-gray-50 */
+    --sidebar-primary: oklch(0.488 0.243 264.376); /* --color-blue-700 */
+    --sidebar-primary-foreground: oklch(0.98 0 248); /* --color-gray-50 */
+    --sidebar-accent: oklch(0.28 0.03 257); /* --color-gray-800 */
+    --sidebar-accent-foreground: oklch(0.98 0 248); /* --color-gray-50 */
+    --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
+    --sidebar-ring: oklch(0.55 0.02 264); /* --color-gray-500 */
+
+    --chart-1: oklch(0.488 0.243 264.376); /* --color-blue-700 */
+    --chart-2: oklch(0.696 0.17 162.48); /* --color-emerald-500 */
+    --chart-3: oklch(0.769 0.188 70.08); /* --color-amber-500 */
+    --chart-4: oklch(0.627 0.265 303.9); /* --color-purple-500 */
+    --chart-5: oklch(0.645 0.246 16.439); /* --color-rose-500 */
+  }
+}