nextworks 0.2.0-alpha.11 → 0.2.0-alpha.13

package/dist/kits/blocks/lib/themes.ts

@@ -1,400 +1,400 @@
-export type { ThemeConfig, ThemeVariant } from "@nextworks/blocks-core";
-import { type ThemeConfig, type ThemeVariant } from "@nextworks/blocks-core";
-
-export const themes: Record<ThemeVariant, ThemeConfig> = {
-  default: {
-    name: "Default",
-    colors: {
-      primary: "oklch(0.205 0 0)",
-      primaryForeground: "oklch(0.985 0 0)",
-      secondary: "oklch(0.97 0 0)",
-      secondaryForeground: "oklch(0.205 0 0)",
-      accent: "oklch(0.97 0 0)",
-      accentForeground: "oklch(0.205 0 0)",
-      background: "oklch(1 0 0)",
-      foreground: "oklch(0.145 0 0)",
-      card: "oklch(1 0 0)",
-      cardForeground: "oklch(0.145 0 0)",
-      popover: "oklch(1 0 0)",
-      popoverForeground: "oklch(0.145 0 0)",
-      muted: "oklch(0.97 0 0)",
-      mutedForeground: "oklch(0.556 0 0)",
-      border: "oklch(0.922 0 0)",
-      input: "oklch(0.922 0 0)",
-      ring: "oklch(0.708 0 0)",
-      destructive: "oklch(0.577 0.245 27.325)",
-      chart1: "oklch(0.646 0.222 41.116)",
-      chart2: "oklch(0.6 0.118 184.704)",
-      chart3: "oklch(0.398 0.07 227.392)",
-      chart4: "oklch(0.828 0.189 84.429)",
-      chart5: "oklch(0.769 0.188 70.08)",
-    },
-  },
-  monochrome: {
-    name: "Monochrome",
-    colors: {
-      primary: "oklch(0.2 0 0)",
-      primaryForeground: "oklch(0.98 0 0)",
-      secondary: "oklch(0.95 0 0)",
-      secondaryForeground: "oklch(0.2 0 0)",
-      accent: "oklch(0.9 0 0)",
-      accentForeground: "oklch(0.2 0 0)",
-      background: "oklch(1 0 0)",
-      foreground: "oklch(0.1 0 0)",
-      card: "oklch(0.99 0 0)",
-      cardForeground: "oklch(0.1 0 0)",
-      popover: "oklch(0.99 0 0)",
-      popoverForeground: "oklch(0.1 0 0)",
-      muted: "oklch(0.95 0 0)",
-      mutedForeground: "oklch(0.5 0 0)",
-      border: "oklch(0.9 0 0)",
-      input: "oklch(0.9 0 0)",
-      ring: "oklch(0.7 0 0)",
-      destructive: "oklch(0.4 0 0)",
-      chart1: "oklch(0.2 0 0)",
-      chart2: "oklch(0.4 0 0)",
-      chart3: "oklch(0.6 0 0)",
-      chart4: "oklch(0.8 0 0)",
-      chart5: "oklch(0.3 0 0)",
-    },
-  },
-  blue: {
-    name: "Blue",
-    colors: {
-      primary: "oklch(0.5 0.2 240)",
-      primaryForeground: "oklch(0.98 0 0)",
-      secondary: "oklch(0.95 0.05 240)",
-      secondaryForeground: "oklch(0.2 0.1 240)",
-      accent: "oklch(0.9 0.1 240)",
-      accentForeground: "oklch(0.2 0.1 240)",
-      background: "oklch(1 0 0)",
-      foreground: "oklch(0.1 0 0)",
-      card: "oklch(0.99 0 0)",
-      cardForeground: "oklch(0.1 0 0)",
-      popover: "oklch(0.99 0 0)",
-      popoverForeground: "oklch(0.1 0 0)",
-      muted: "oklch(0.95 0.02 240)",
-      mutedForeground: "oklch(0.5 0.05 240)",
-      border: "oklch(0.9 0.05 240)",
-      input: "oklch(0.9 0.05 240)",
-      ring: "oklch(0.5 0.2 240)",
-      destructive: "oklch(0.6 0.2 0)",
-      chart1: "oklch(0.5 0.2 240)",
-      chart2: "oklch(0.6 0.15 200)",
-      chart3: "oklch(0.7 0.1 180)",
-      chart4: "oklch(0.4 0.2 280)",
-      chart5: "oklch(0.8 0.1 220)",
-    },
-  },
-  green: {
-    name: "Green",
-    colors: {
-      primary: "oklch(0.5 0.2 140)",
-      primaryForeground: "oklch(0.98 0 0)",
-      secondary: "oklch(0.95 0.05 140)",
-      secondaryForeground: "oklch(0.2 0.1 140)",
-      accent: "oklch(0.9 0.1 140)",
-      accentForeground: "oklch(0.2 0.1 140)",
-      background: "oklch(1 0 0)",
-      foreground: "oklch(0.1 0 0)",
-      card: "oklch(0.99 0 0)",
-      cardForeground: "oklch(0.1 0 0)",
-      popover: "oklch(0.99 0 0)",
-      popoverForeground: "oklch(0.1 0 0)",
-      muted: "oklch(0.95 0.02 140)",
-      mutedForeground: "oklch(0.5 0.05 140)",
-      border: "oklch(0.9 0.05 140)",
-      input: "oklch(0.9 0.05 140)",
-      ring: "oklch(0.5 0.2 140)",
-      destructive: "oklch(0.6 0.2 0)",
-      chart1: "oklch(0.5 0.2 140)",
-      chart2: "oklch(0.6 0.15 120)",
-      chart3: "oklch(0.7 0.1 100)",
-      chart4: "oklch(0.4 0.2 160)",
-      chart5: "oklch(0.8 0.1 130)",
-    },
-  },
-  purple: {
-    name: "Purple",
-    colors: {
-      primary: "oklch(0.5 0.2 300)",
-      primaryForeground: "oklch(0.98 0 0)",
-      secondary: "oklch(0.95 0.05 300)",
-      secondaryForeground: "oklch(0.2 0.1 300)",
-      accent: "oklch(0.9 0.1 300)",
-      accentForeground: "oklch(0.2 0.1 300)",
-      background: "oklch(1 0 0)",
-      foreground: "oklch(0.1 0 0)",
-      card: "oklch(0.99 0 0)",
-      cardForeground: "oklch(0.1 0 0)",
-      popover: "oklch(0.99 0 0)",
-      popoverForeground: "oklch(0.1 0 0)",
-      muted: "oklch(0.95 0.02 300)",
-      mutedForeground: "oklch(0.5 0.05 300)",
-      border: "oklch(0.9 0.05 300)",
-      input: "oklch(0.9 0.05 300)",
-      ring: "oklch(0.5 0.2 300)",
-      destructive: "oklch(0.6 0.2 0)",
-      chart1: "oklch(0.5 0.2 300)",
-      chart2: "oklch(0.6 0.15 280)",
-      chart3: "oklch(0.7 0.1 260)",
-      chart4: "oklch(0.4 0.2 320)",
-      chart5: "oklch(0.8 0.1 290)",
-    },
-  },
-  orange: {
-    name: "Orange",
-    colors: {
-      primary: "oklch(0.6 0.2 40)",
-      primaryForeground: "oklch(0.98 0 0)",
-      secondary: "oklch(0.95 0.05 40)",
-      secondaryForeground: "oklch(0.2 0.1 40)",
-      accent: "oklch(0.9 0.1 40)",
-      accentForeground: "oklch(0.2 0.1 40)",
-      background: "oklch(1 0 0)",
-      foreground: "oklch(0.1 0 0)",
-      card: "oklch(0.99 0 0)",
-      cardForeground: "oklch(0.1 0 0)",
-      popover: "oklch(0.99 0 0)",
-      popoverForeground: "oklch(0.1 0 0)",
-      muted: "oklch(0.95 0.02 40)",
-      mutedForeground: "oklch(0.5 0.05 40)",
-      border: "oklch(0.9 0.05 40)",
-      input: "oklch(0.9 0.05 40)",
-      ring: "oklch(0.6 0.2 40)",
-      destructive: "oklch(0.6 0.2 0)",
-      chart1: "oklch(0.6 0.2 40)",
-      chart2: "oklch(0.7 0.15 20)",
-      chart3: "oklch(0.8 0.1 0)",
-      chart4: "oklch(0.5 0.2 60)",
-      chart5: "oklch(0.9 0.1 30)",
-    },
-  },
-  custom: {
-    name: "Custom",
-    colors: {
-      primary: "oklch(0.205 0 0)",
-      primaryForeground: "oklch(0.985 0 0)",
-      secondary: "oklch(0.97 0 0)",
-      secondaryForeground: "oklch(0.205 0 0)",
-      accent: "oklch(0.97 0 0)",
-      accentForeground: "oklch(0.205 0 0)",
-      background: "oklch(1 0 0)",
-      foreground: "oklch(0.145 0 0)",
-      card: "oklch(1 0 0)",
-      cardForeground: "oklch(0.145 0 0)",
-      popover: "oklch(1 0 0)",
-      popoverForeground: "oklch(0.145 0 0)",
-      muted: "oklch(0.97 0 0)",
-      mutedForeground: "oklch(0.556 0 0)",
-      border: "oklch(0.922 0 0)",
-      input: "oklch(0.922 0 0)",
-      ring: "oklch(0.708 0 0)",
-      destructive: "oklch(0.577 0.245 27.325)",
-      chart1: "oklch(0.646 0.222 41.116)",
-      chart2: "oklch(0.6 0.118 184.704)",
-      chart3: "oklch(0.398 0.07 227.392)",
-      chart4: "oklch(0.828 0.189 84.429)",
-      chart5: "oklch(0.769 0.188 70.08)",
-    },
-  },
-};
-
-export const darkThemes: Record<ThemeVariant, ThemeConfig> = {
-  default: {
-    name: "Default Dark",
-    colors: {
-      primary: "oklch(0.922 0 0)",
-      primaryForeground: "oklch(0.205 0 0)",
-      secondary: "oklch(0.269 0 0)",
-      secondaryForeground: "oklch(0.985 0 0)",
-      accent: "oklch(0.269 0 0)",
-      accentForeground: "oklch(0.985 0 0)",
-      background: "oklch(0.145 0 0)",
-      foreground: "oklch(0.985 0 0)",
-      card: "oklch(0.205 0 0)",
-      cardForeground: "oklch(0.985 0 0)",
-      popover: "oklch(0.205 0 0)",
-      popoverForeground: "oklch(0.985 0 0)",
-      muted: "oklch(0.269 0 0)",
-      mutedForeground: "oklch(0.708 0 0)",
-      border: "oklch(1 0 0 / 10%)",
-      input: "oklch(1 0 0 / 15%)",
-      ring: "oklch(0.556 0 0)",
-      destructive: "oklch(0.704 0.191 22.216)",
-      chart1: "oklch(0.488 0.243 264.376)",
-      chart2: "oklch(0.696 0.17 162.48)",
-      chart3: "oklch(0.769 0.188 70.08)",
-      chart4: "oklch(0.627 0.265 303.9)",
-      chart5: "oklch(0.645 0.246 16.439)",
-    },
-  },
-  monochrome: {
-    name: "Monochrome Dark",
-    colors: {
-      primary: "oklch(0.8 0 0)",
-      primaryForeground: "oklch(0.2 0 0)",
-      secondary: "oklch(0.3 0 0)",
-      secondaryForeground: "oklch(0.9 0 0)",
-      accent: "oklch(0.3 0 0)",
-      accentForeground: "oklch(0.9 0 0)",
-      background: "oklch(0.1 0 0)",
-      foreground: "oklch(0.9 0 0)",
-      card: "oklch(0.15 0 0)",
-      cardForeground: "oklch(0.9 0 0)",
-      popover: "oklch(0.15 0 0)",
-      popoverForeground: "oklch(0.9 0 0)",
-      muted: "oklch(0.3 0 0)",
-      mutedForeground: "oklch(0.6 0 0)",
-      border: "oklch(0.2 0 0)",
-      input: "oklch(0.2 0 0)",
-      ring: "oklch(0.5 0 0)",
-      destructive: "oklch(0.6 0 0)",
-      chart1: "oklch(0.8 0 0)",
-      chart2: "oklch(0.6 0 0)",
-      chart3: "oklch(0.4 0 0)",
-      chart4: "oklch(0.7 0 0)",
-      chart5: "oklch(0.5 0 0)",
-    },
-  },
-  blue: {
-    name: "Blue Dark",
-    colors: {
-      primary: "oklch(0.7 0.2 240)",
-      primaryForeground: "oklch(0.1 0 0)",
-      secondary: "oklch(0.3 0.1 240)",
-      secondaryForeground: "oklch(0.9 0 0)",
-      accent: "oklch(0.3 0.1 240)",
-      accentForeground: "oklch(0.9 0 0)",
-      background: "oklch(0.1 0 0)",
-      foreground: "oklch(0.9 0 0)",
-      card: "oklch(0.15 0.05 240)",
-      cardForeground: "oklch(0.9 0 0)",
-      popover: "oklch(0.15 0.05 240)",
-      popoverForeground: "oklch(0.9 0 0)",
-      muted: "oklch(0.3 0.05 240)",
-      mutedForeground: "oklch(0.6 0.05 240)",
-      border: "oklch(0.2 0.1 240)",
-      input: "oklch(0.2 0.1 240)",
-      ring: "oklch(0.7 0.2 240)",
-      destructive: "oklch(0.6 0.2 0)",
-      chart1: "oklch(0.7 0.2 240)",
-      chart2: "oklch(0.6 0.15 200)",
-      chart3: "oklch(0.5 0.1 180)",
-      chart4: "oklch(0.8 0.2 280)",
-      chart5: "oklch(0.4 0.1 220)",
-    },
-  },
-  green: {
-    name: "Green Dark",
-    colors: {
-      primary: "oklch(0.7 0.2 140)",
-      primaryForeground: "oklch(0.1 0 0)",
-      secondary: "oklch(0.3 0.1 140)",
-      secondaryForeground: "oklch(0.9 0 0)",
-      accent: "oklch(0.3 0.1 140)",
-      accentForeground: "oklch(0.9 0 0)",
-      background: "oklch(0.1 0 0)",
-      foreground: "oklch(0.9 0 0)",
-      card: "oklch(0.15 0.05 140)",
-      cardForeground: "oklch(0.9 0 0)",
-      popover: "oklch(0.15 0.05 140)",
-      popoverForeground: "oklch(0.9 0 0)",
-      muted: "oklch(0.3 0.05 140)",
-      mutedForeground: "oklch(0.6 0.05 140)",
-      border: "oklch(0.2 0.1 140)",
-      input: "oklch(0.2 0.1 140)",
-      ring: "oklch(0.7 0.2 140)",
-      destructive: "oklch(0.6 0.2 0)",
-      chart1: "oklch(0.7 0.2 140)",
-      chart2: "oklch(0.6 0.15 120)",
-      chart3: "oklch(0.5 0.1 100)",
-      chart4: "oklch(0.8 0.2 160)",
-      chart5: "oklch(0.4 0.1 130)",
-    },
-  },
-  purple: {
-    name: "Purple Dark",
-    colors: {
-      primary: "oklch(0.7 0.2 300)",
-      primaryForeground: "oklch(0.1 0 0)",
-      secondary: "oklch(0.3 0.1 300)",
-      secondaryForeground: "oklch(0.9 0 0)",
-      accent: "oklch(0.3 0.1 300)",
-      accentForeground: "oklch(0.9 0 0)",
-      background: "oklch(0.1 0 0)",
-      foreground: "oklch(0.9 0 0)",
-      card: "oklch(0.15 0.05 300)",
-      cardForeground: "oklch(0.9 0 0)",
-      popover: "oklch(0.15 0.05 300)",
-      popoverForeground: "oklch(0.9 0 0)",
-      muted: "oklch(0.3 0.05 300)",
-      mutedForeground: "oklch(0.6 0.05 300)",
-      border: "oklch(0.2 0.1 300)",
-      input: "oklch(0.2 0.1 300)",
-      ring: "oklch(0.7 0.2 300)",
-      destructive: "oklch(0.6 0.2 0)",
-      chart1: "oklch(0.7 0.2 300)",
-      chart2: "oklch(0.6 0.15 280)",
-      chart3: "oklch(0.5 0.1 260)",
-      chart4: "oklch(0.8 0.2 320)",
-      chart5: "oklch(0.4 0.1 290)",
-    },
-  },
-  orange: {
-    name: "Orange Dark",
-    colors: {
-      primary: "oklch(0.8 0.2 40)",
-      primaryForeground: "oklch(0.1 0 0)",
-      secondary: "oklch(0.3 0.1 40)",
-      secondaryForeground: "oklch(0.9 0 0)",
-      accent: "oklch(0.3 0.1 40)",
-      accentForeground: "oklch(0.9 0 0)",
-      background: "oklch(0.1 0 0)",
-      foreground: "oklch(0.9 0 0)",
-      card: "oklch(0.15 0.05 40)",
-      cardForeground: "oklch(0.9 0 0)",
-      popover: "oklch(0.15 0.05 40)",
-      popoverForeground: "oklch(0.9 0 0)",
-      muted: "oklch(0.3 0.05 40)",
-      mutedForeground: "oklch(0.6 0.05 40)",
-      border: "oklch(0.2 0.1 40)",
-      input: "oklch(0.2 0.1 40)",
-      ring: "oklch(0.8 0.2 40)",
-      destructive: "oklch(0.6 0.2 0)",
-      chart1: "oklch(0.8 0.2 40)",
-      chart2: "oklch(0.7 0.15 20)",
-      chart3: "oklch(0.6 0.1 0)",
-      chart4: "oklch(0.9 0.2 60)",
-      chart5: "oklch(0.5 0.1 30)",
-    },
-  },
-  custom: {
-    name: "Custom Dark",
-    colors: {
-      primary: "oklch(0.922 0 0)",
-      primaryForeground: "oklch(0.205 0 0)",
-      secondary: "oklch(0.269 0 0)",
-      secondaryForeground: "oklch(0.985 0 0)",
-      accent: "oklch(0.269 0 0)",
-      accentForeground: "oklch(0.985 0 0)",
-      background: "oklch(0.145 0 0)",
-      foreground: "oklch(0.985 0 0)",
-      card: "oklch(0.205 0 0)",
-      cardForeground: "oklch(0.985 0 0)",
-      popover: "oklch(0.205 0 0)",
-      popoverForeground: "oklch(0.985 0 0)",
-      muted: "oklch(0.269 0 0)",
-      mutedForeground: "oklch(0.708 0 0)",
-      border: "oklch(1 0 0 / 10%)",
-      input: "oklch(1 0 0 / 15%)",
-      ring: "oklch(0.556 0 0)",
-      destructive: "oklch(0.704 0.191 22.216)",
-      chart1: "oklch(0.488 0.243 264.376)",
-      chart2: "oklch(0.696 0.17 162.48)",
-      chart3: "oklch(0.769 0.188 70.08)",
-      chart4: "oklch(0.627 0.265 303.9)",
-      chart5: "oklch(0.645 0.246 16.439)",
-    },
-  },
-};
+export type { ThemeConfig, ThemeVariant } from "@nextworks/blocks-core";
+import { type ThemeConfig, type ThemeVariant } from "@nextworks/blocks-core";
+
+export const themes: Record<ThemeVariant, ThemeConfig> = {
+  default: {
+    name: "Default",
+    colors: {
+      primary: "oklch(0.205 0 0)",
+      primaryForeground: "oklch(0.985 0 0)",
+      secondary: "oklch(0.97 0 0)",
+      secondaryForeground: "oklch(0.205 0 0)",
+      accent: "oklch(0.97 0 0)",
+      accentForeground: "oklch(0.205 0 0)",
+      background: "oklch(1 0 0)",
+      foreground: "oklch(0.145 0 0)",
+      card: "oklch(1 0 0)",
+      cardForeground: "oklch(0.145 0 0)",
+      popover: "oklch(1 0 0)",
+      popoverForeground: "oklch(0.145 0 0)",
+      muted: "oklch(0.97 0 0)",
+      mutedForeground: "oklch(0.556 0 0)",
+      border: "oklch(0.922 0 0)",
+      input: "oklch(0.922 0 0)",
+      ring: "oklch(0.708 0 0)",
+      destructive: "oklch(0.577 0.245 27.325)",
+      chart1: "oklch(0.646 0.222 41.116)",
+      chart2: "oklch(0.6 0.118 184.704)",
+      chart3: "oklch(0.398 0.07 227.392)",
+      chart4: "oklch(0.828 0.189 84.429)",
+      chart5: "oklch(0.769 0.188 70.08)",
+    },
+  },
+  monochrome: {
+    name: "Monochrome",
+    colors: {
+      primary: "oklch(0.2 0 0)",
+      primaryForeground: "oklch(0.98 0 0)",
+      secondary: "oklch(0.95 0 0)",
+      secondaryForeground: "oklch(0.2 0 0)",
+      accent: "oklch(0.9 0 0)",
+      accentForeground: "oklch(0.2 0 0)",
+      background: "oklch(1 0 0)",
+      foreground: "oklch(0.1 0 0)",
+      card: "oklch(0.99 0 0)",
+      cardForeground: "oklch(0.1 0 0)",
+      popover: "oklch(0.99 0 0)",
+      popoverForeground: "oklch(0.1 0 0)",
+      muted: "oklch(0.95 0 0)",
+      mutedForeground: "oklch(0.5 0 0)",
+      border: "oklch(0.9 0 0)",
+      input: "oklch(0.9 0 0)",
+      ring: "oklch(0.7 0 0)",
+      destructive: "oklch(0.4 0 0)",
+      chart1: "oklch(0.2 0 0)",
+      chart2: "oklch(0.4 0 0)",
+      chart3: "oklch(0.6 0 0)",
+      chart4: "oklch(0.8 0 0)",
+      chart5: "oklch(0.3 0 0)",
+    },
+  },
+  blue: {
+    name: "Blue",
+    colors: {
+      primary: "oklch(0.5 0.2 240)",
+      primaryForeground: "oklch(0.98 0 0)",
+      secondary: "oklch(0.95 0.05 240)",
+      secondaryForeground: "oklch(0.2 0.1 240)",
+      accent: "oklch(0.9 0.1 240)",
+      accentForeground: "oklch(0.2 0.1 240)",
+      background: "oklch(1 0 0)",
+      foreground: "oklch(0.1 0 0)",
+      card: "oklch(0.99 0 0)",
+      cardForeground: "oklch(0.1 0 0)",
+      popover: "oklch(0.99 0 0)",
+      popoverForeground: "oklch(0.1 0 0)",
+      muted: "oklch(0.95 0.02 240)",
+      mutedForeground: "oklch(0.5 0.05 240)",
+      border: "oklch(0.9 0.05 240)",
+      input: "oklch(0.9 0.05 240)",
+      ring: "oklch(0.5 0.2 240)",
+      destructive: "oklch(0.6 0.2 0)",
+      chart1: "oklch(0.5 0.2 240)",
+      chart2: "oklch(0.6 0.15 200)",
+      chart3: "oklch(0.7 0.1 180)",
+      chart4: "oklch(0.4 0.2 280)",
+      chart5: "oklch(0.8 0.1 220)",
+    },
+  },
+  green: {
+    name: "Green",
+    colors: {
+      primary: "oklch(0.5 0.2 140)",
+      primaryForeground: "oklch(0.98 0 0)",
+      secondary: "oklch(0.95 0.05 140)",
+      secondaryForeground: "oklch(0.2 0.1 140)",
+      accent: "oklch(0.9 0.1 140)",
+      accentForeground: "oklch(0.2 0.1 140)",
+      background: "oklch(1 0 0)",
+      foreground: "oklch(0.1 0 0)",
+      card: "oklch(0.99 0 0)",
+      cardForeground: "oklch(0.1 0 0)",
+      popover: "oklch(0.99 0 0)",
+      popoverForeground: "oklch(0.1 0 0)",
+      muted: "oklch(0.95 0.02 140)",
+      mutedForeground: "oklch(0.5 0.05 140)",
+      border: "oklch(0.9 0.05 140)",
+      input: "oklch(0.9 0.05 140)",
+      ring: "oklch(0.5 0.2 140)",
+      destructive: "oklch(0.6 0.2 0)",
+      chart1: "oklch(0.5 0.2 140)",
+      chart2: "oklch(0.6 0.15 120)",
+      chart3: "oklch(0.7 0.1 100)",
+      chart4: "oklch(0.4 0.2 160)",
+      chart5: "oklch(0.8 0.1 130)",
+    },
+  },
+  purple: {
+    name: "Purple",
+    colors: {
+      primary: "oklch(0.5 0.2 300)",
+      primaryForeground: "oklch(0.98 0 0)",
+      secondary: "oklch(0.95 0.05 300)",
+      secondaryForeground: "oklch(0.2 0.1 300)",
+      accent: "oklch(0.9 0.1 300)",
+      accentForeground: "oklch(0.2 0.1 300)",
+      background: "oklch(1 0 0)",
+      foreground: "oklch(0.1 0 0)",
+      card: "oklch(0.99 0 0)",
+      cardForeground: "oklch(0.1 0 0)",
+      popover: "oklch(0.99 0 0)",
+      popoverForeground: "oklch(0.1 0 0)",
+      muted: "oklch(0.95 0.02 300)",
+      mutedForeground: "oklch(0.5 0.05 300)",
+      border: "oklch(0.9 0.05 300)",
+      input: "oklch(0.9 0.05 300)",
+      ring: "oklch(0.5 0.2 300)",
+      destructive: "oklch(0.6 0.2 0)",
+      chart1: "oklch(0.5 0.2 300)",
+      chart2: "oklch(0.6 0.15 280)",
+      chart3: "oklch(0.7 0.1 260)",
+      chart4: "oklch(0.4 0.2 320)",
+      chart5: "oklch(0.8 0.1 290)",
+    },
+  },
+  orange: {
+    name: "Orange",
+    colors: {
+      primary: "oklch(0.6 0.2 40)",
+      primaryForeground: "oklch(0.98 0 0)",
+      secondary: "oklch(0.95 0.05 40)",
+      secondaryForeground: "oklch(0.2 0.1 40)",
+      accent: "oklch(0.9 0.1 40)",
+      accentForeground: "oklch(0.2 0.1 40)",
+      background: "oklch(1 0 0)",
+      foreground: "oklch(0.1 0 0)",
+      card: "oklch(0.99 0 0)",
+      cardForeground: "oklch(0.1 0 0)",
+      popover: "oklch(0.99 0 0)",
+      popoverForeground: "oklch(0.1 0 0)",
+      muted: "oklch(0.95 0.02 40)",
+      mutedForeground: "oklch(0.5 0.05 40)",
+      border: "oklch(0.9 0.05 40)",
+      input: "oklch(0.9 0.05 40)",
+      ring: "oklch(0.6 0.2 40)",
+      destructive: "oklch(0.6 0.2 0)",
+      chart1: "oklch(0.6 0.2 40)",
+      chart2: "oklch(0.7 0.15 20)",
+      chart3: "oklch(0.8 0.1 0)",
+      chart4: "oklch(0.5 0.2 60)",
+      chart5: "oklch(0.9 0.1 30)",
+    },
+  },
+  custom: {
+    name: "Custom",
+    colors: {
+      primary: "oklch(0.205 0 0)",
+      primaryForeground: "oklch(0.985 0 0)",
+      secondary: "oklch(0.97 0 0)",
+      secondaryForeground: "oklch(0.205 0 0)",
+      accent: "oklch(0.97 0 0)",
+      accentForeground: "oklch(0.205 0 0)",
+      background: "oklch(1 0 0)",
+      foreground: "oklch(0.145 0 0)",
+      card: "oklch(1 0 0)",
+      cardForeground: "oklch(0.145 0 0)",
+      popover: "oklch(1 0 0)",
+      popoverForeground: "oklch(0.145 0 0)",
+      muted: "oklch(0.97 0 0)",
+      mutedForeground: "oklch(0.556 0 0)",
+      border: "oklch(0.922 0 0)",
+      input: "oklch(0.922 0 0)",
+      ring: "oklch(0.708 0 0)",
+      destructive: "oklch(0.577 0.245 27.325)",
+      chart1: "oklch(0.646 0.222 41.116)",
+      chart2: "oklch(0.6 0.118 184.704)",
+      chart3: "oklch(0.398 0.07 227.392)",
+      chart4: "oklch(0.828 0.189 84.429)",
+      chart5: "oklch(0.769 0.188 70.08)",
+    },
+  },
+};
+
+export const darkThemes: Record<ThemeVariant, ThemeConfig> = {
+  default: {
+    name: "Default Dark",
+    colors: {
+      primary: "oklch(0.922 0 0)",
+      primaryForeground: "oklch(0.205 0 0)",
+      secondary: "oklch(0.269 0 0)",
+      secondaryForeground: "oklch(0.985 0 0)",
+      accent: "oklch(0.269 0 0)",
+      accentForeground: "oklch(0.985 0 0)",
+      background: "oklch(0.145 0 0)",
+      foreground: "oklch(0.985 0 0)",
+      card: "oklch(0.205 0 0)",
+      cardForeground: "oklch(0.985 0 0)",
+      popover: "oklch(0.205 0 0)",
+      popoverForeground: "oklch(0.985 0 0)",
+      muted: "oklch(0.269 0 0)",
+      mutedForeground: "oklch(0.708 0 0)",
+      border: "oklch(1 0 0 / 10%)",
+      input: "oklch(1 0 0 / 15%)",
+      ring: "oklch(0.556 0 0)",
+      destructive: "oklch(0.704 0.191 22.216)",
+      chart1: "oklch(0.488 0.243 264.376)",
+      chart2: "oklch(0.696 0.17 162.48)",
+      chart3: "oklch(0.769 0.188 70.08)",
+      chart4: "oklch(0.627 0.265 303.9)",
+      chart5: "oklch(0.645 0.246 16.439)",
+    },
+  },
+  monochrome: {
+    name: "Monochrome Dark",
+    colors: {
+      primary: "oklch(0.8 0 0)",
+      primaryForeground: "oklch(0.2 0 0)",
+      secondary: "oklch(0.3 0 0)",
+      secondaryForeground: "oklch(0.9 0 0)",
+      accent: "oklch(0.3 0 0)",
+      accentForeground: "oklch(0.9 0 0)",
+      background: "oklch(0.1 0 0)",
+      foreground: "oklch(0.9 0 0)",
+      card: "oklch(0.15 0 0)",
+      cardForeground: "oklch(0.9 0 0)",
+      popover: "oklch(0.15 0 0)",
+      popoverForeground: "oklch(0.9 0 0)",
+      muted: "oklch(0.3 0 0)",
+      mutedForeground: "oklch(0.6 0 0)",
+      border: "oklch(0.2 0 0)",
+      input: "oklch(0.2 0 0)",
+      ring: "oklch(0.5 0 0)",
+      destructive: "oklch(0.6 0 0)",
+      chart1: "oklch(0.8 0 0)",
+      chart2: "oklch(0.6 0 0)",
+      chart3: "oklch(0.4 0 0)",
+      chart4: "oklch(0.7 0 0)",
+      chart5: "oklch(0.5 0 0)",
+    },
+  },
+  blue: {
+    name: "Blue Dark",
+    colors: {
+      primary: "oklch(0.7 0.2 240)",
+      primaryForeground: "oklch(0.1 0 0)",
+      secondary: "oklch(0.3 0.1 240)",
+      secondaryForeground: "oklch(0.9 0 0)",
+      accent: "oklch(0.3 0.1 240)",
+      accentForeground: "oklch(0.9 0 0)",
+      background: "oklch(0.1 0 0)",
+      foreground: "oklch(0.9 0 0)",
+      card: "oklch(0.15 0.05 240)",
+      cardForeground: "oklch(0.9 0 0)",
+      popover: "oklch(0.15 0.05 240)",
+      popoverForeground: "oklch(0.9 0 0)",
+      muted: "oklch(0.3 0.05 240)",
+      mutedForeground: "oklch(0.6 0.05 240)",
+      border: "oklch(0.2 0.1 240)",
+      input: "oklch(0.2 0.1 240)",
+      ring: "oklch(0.7 0.2 240)",
+      destructive: "oklch(0.6 0.2 0)",
+      chart1: "oklch(0.7 0.2 240)",
+      chart2: "oklch(0.6 0.15 200)",
+      chart3: "oklch(0.5 0.1 180)",
+      chart4: "oklch(0.8 0.2 280)",
+      chart5: "oklch(0.4 0.1 220)",
+    },
+  },
+  green: {
+    name: "Green Dark",
+    colors: {
+      primary: "oklch(0.7 0.2 140)",
+      primaryForeground: "oklch(0.1 0 0)",
+      secondary: "oklch(0.3 0.1 140)",
+      secondaryForeground: "oklch(0.9 0 0)",
+      accent: "oklch(0.3 0.1 140)",
+      accentForeground: "oklch(0.9 0 0)",
+      background: "oklch(0.1 0 0)",
+      foreground: "oklch(0.9 0 0)",
+      card: "oklch(0.15 0.05 140)",
+      cardForeground: "oklch(0.9 0 0)",
+      popover: "oklch(0.15 0.05 140)",
+      popoverForeground: "oklch(0.9 0 0)",
+      muted: "oklch(0.3 0.05 140)",
+      mutedForeground: "oklch(0.6 0.05 140)",
+      border: "oklch(0.2 0.1 140)",
+      input: "oklch(0.2 0.1 140)",
+      ring: "oklch(0.7 0.2 140)",
+      destructive: "oklch(0.6 0.2 0)",
+      chart1: "oklch(0.7 0.2 140)",
+      chart2: "oklch(0.6 0.15 120)",
+      chart3: "oklch(0.5 0.1 100)",
+      chart4: "oklch(0.8 0.2 160)",
+      chart5: "oklch(0.4 0.1 130)",
+    },
+  },
+  purple: {
+    name: "Purple Dark",
+    colors: {
+      primary: "oklch(0.7 0.2 300)",
+      primaryForeground: "oklch(0.1 0 0)",
+      secondary: "oklch(0.3 0.1 300)",
+      secondaryForeground: "oklch(0.9 0 0)",
+      accent: "oklch(0.3 0.1 300)",
+      accentForeground: "oklch(0.9 0 0)",
+      background: "oklch(0.1 0 0)",
+      foreground: "oklch(0.9 0 0)",
+      card: "oklch(0.15 0.05 300)",
+      cardForeground: "oklch(0.9 0 0)",
+      popover: "oklch(0.15 0.05 300)",
+      popoverForeground: "oklch(0.9 0 0)",
+      muted: "oklch(0.3 0.05 300)",
+      mutedForeground: "oklch(0.6 0.05 300)",
+      border: "oklch(0.2 0.1 300)",
+      input: "oklch(0.2 0.1 300)",
+      ring: "oklch(0.7 0.2 300)",
+      destructive: "oklch(0.6 0.2 0)",
+      chart1: "oklch(0.7 0.2 300)",
+      chart2: "oklch(0.6 0.15 280)",
+      chart3: "oklch(0.5 0.1 260)",
+      chart4: "oklch(0.8 0.2 320)",
+      chart5: "oklch(0.4 0.1 290)",
+    },
+  },
+  orange: {
+    name: "Orange Dark",
+    colors: {
+      primary: "oklch(0.8 0.2 40)",
+      primaryForeground: "oklch(0.1 0 0)",
+      secondary: "oklch(0.3 0.1 40)",
+      secondaryForeground: "oklch(0.9 0 0)",
+      accent: "oklch(0.3 0.1 40)",
+      accentForeground: "oklch(0.9 0 0)",
+      background: "oklch(0.1 0 0)",
+      foreground: "oklch(0.9 0 0)",
+      card: "oklch(0.15 0.05 40)",
+      cardForeground: "oklch(0.9 0 0)",
+      popover: "oklch(0.15 0.05 40)",
+      popoverForeground: "oklch(0.9 0 0)",
+      muted: "oklch(0.3 0.05 40)",
+      mutedForeground: "oklch(0.6 0.05 40)",
+      border: "oklch(0.2 0.1 40)",
+      input: "oklch(0.2 0.1 40)",
+      ring: "oklch(0.8 0.2 40)",
+      destructive: "oklch(0.6 0.2 0)",
+      chart1: "oklch(0.8 0.2 40)",
+      chart2: "oklch(0.7 0.15 20)",
+      chart3: "oklch(0.6 0.1 0)",
+      chart4: "oklch(0.9 0.2 60)",
+      chart5: "oklch(0.5 0.1 30)",
+    },
+  },
+  custom: {
+    name: "Custom Dark",
+    colors: {
+      primary: "oklch(0.922 0 0)",
+      primaryForeground: "oklch(0.205 0 0)",
+      secondary: "oklch(0.269 0 0)",
+      secondaryForeground: "oklch(0.985 0 0)",
+      accent: "oklch(0.269 0 0)",
+      accentForeground: "oklch(0.985 0 0)",
+      background: "oklch(0.145 0 0)",
+      foreground: "oklch(0.985 0 0)",
+      card: "oklch(0.205 0 0)",
+      cardForeground: "oklch(0.985 0 0)",
+      popover: "oklch(0.205 0 0)",
+      popoverForeground: "oklch(0.985 0 0)",
+      muted: "oklch(0.269 0 0)",
+      mutedForeground: "oklch(0.708 0 0)",
+      border: "oklch(1 0 0 / 10%)",
+      input: "oklch(1 0 0 / 15%)",
+      ring: "oklch(0.556 0 0)",
+      destructive: "oklch(0.704 0.191 22.216)",
+      chart1: "oklch(0.488 0.243 264.376)",
+      chart2: "oklch(0.696 0.17 162.48)",
+      chart3: "oklch(0.769 0.188 70.08)",
+      chart4: "oklch(0.627 0.265 303.9)",
+      chart5: "oklch(0.645 0.246 16.439)",
+    },
+  },
+};