@optilogic/core 1.1.0 → 1.2.0

package/src/theme/presets.ts

@@ -2,64 +2,15 @@
  * Theme Presets
  *
  * Built-in theme definitions for opti-ui.
- * Ported from platform-leapfrog for consistent theming.
+ * Curated set of production-ready themes with proper contrast and border visibility.
  */
 
 import type { Theme } from "./types";
 
 /**
- * Green Theme - Alternative theme option
- */
-export const GREEN_THEME: Theme = {
-  id: "green-theme",
-  name: "Green Theme",
-  description: "A green theme with natural, earthy tones",
-  author: "Leapfrog",
-  background: "#1a2820",
-  foreground: "#E6F5EC",
-  card: "#2d4038",
-  cardForeground: "#E6F5EC",
-  popover: "#243630",
-  popoverForeground: "#E6F5EC",
-  primary: "#6FCF97",
-  primaryForeground: "#1a2820",
-  accent: "#6FCF97",
-  accentForeground: "#1a2820",
-  secondary: "#1f3329",
-  secondaryForeground: "#E6F5EC",
-  muted: "#354840",
-  mutedForeground: "#9DB8A8",
-  destructive: "#EB5757",
-  destructiveForeground: "#E6F5EC",
-  success: "#6FCF97",
-  successForeground: "#1a2820",
-  warning: "#F2C94C",
-  warningForeground: "#1a2820",
-  chip: "#3a5045",
-  chipForeground: "#C5E3D1",
-  border: "#243630",
-  input: "#243630",
-  ring: "#6FCF97",
-  toggleTrack: "#354840",
-  toggleTrackForeground: "#E6F5EC",
-  inputHover: "#6FCF97",
-  chart1: "#6FCF97",
-  chart2: "#8FE3B0",
-  chart3: "#9DB8A8",
-  chart4: "#2d4038",
-  chart5: "#354840",
-  chart6: "#4CAF50",
-  chart7: "#81C784",
-  chart8: "#F2C94C",
-  chart9: "#EB5757",
-  chart10: "#56CCF2",
-  chart11: "#BB6BD9",
-  chart12: "#2D9CDB",
-  radius: "0.5rem",
-};
-
-/**
- * Optilogic Legacy Theme - Default theme
+ * Optilogic Legacy Theme - Default light theme
+ *
+ * Classic Optilogic branding with deep blue (#0C0A5A) primary.
  */
 export const OPTILOGIC_LEGACY_THEME: Theme = {
   id: "optilogic-legacy",
@@ -91,6 +42,8 @@ export const OPTILOGIC_LEGACY_THEME: Theme = {
   border: "#D0D0D0",
   input: "#D0D0D0",
   ring: "#5766F2",
+  popoverBorder: "#D0D0D0",
+  divider: "#D0D0D0",
   toggleTrack: "#D0D0D0",
   toggleTrackForeground: "#FFFFFF",
   inputHover: "#5766F2",
@@ -110,485 +63,246 @@ export const OPTILOGIC_LEGACY_THEME: Theme = {
 };
 
 /**
- * Futuristic Theme - Neon cyberpunk aesthetic
- */
-export const FUTURISTIC_THEME: Theme = {
-  id: "futuristic",
-  name: "Futuristic",
-  description: "Neon cyberpunk aesthetic with electric blues and purples",
-  author: "Leapfrog",
-  background: "#0a0e27",
-  foreground: "#e0e7ff",
-  card: "#1a1f3a",
-  cardForeground: "#e0e7ff",
-  popover: "#1a1f3a",
-  popoverForeground: "#e0e7ff",
-  primary: "#6366f1",
-  primaryForeground: "#ffffff",
-  accent: "#8b5cf6",
-  accentForeground: "#ffffff",
-  secondary: "#1e293b",
-  secondaryForeground: "#e0e7ff",
-  muted: "#1e293b",
-  mutedForeground: "#94a3b8",
-  destructive: "#ef4444",
-  destructiveForeground: "#ffffff",
-  success: "#10b981",
-  successForeground: "#ffffff",
-  warning: "#f59e0b",
-  warningForeground: "#ffffff",
-  chip: "#312e81",
-  chipForeground: "#c7d2fe",
-  border: "#1e293b",
-  input: "#1e293b",
-  ring: "#6366f1",
-  toggleTrack: "#334155",
-  toggleTrackForeground: "#e0e7ff",
-  inputHover: "#6366f1",
-  chart1: "#6366f1",
-  chart2: "#8b5cf6",
-  chart3: "#a855f7",
-  chart4: "#ec4899",
-  chart5: "#f43f5e",
-  chart6: "#06b6d4",
-  chart7: "#14b8a6",
-  chart8: "#f97316",
-  chart9: "#eab308",
-  chart10: "#22c55e",
-  chart11: "#0ea5e9",
-  chart12: "#f43f5e",
-  radius: "0.5rem",
-};
-
-/**
- * Nature Inspired Theme - Earthy greens and browns
- */
-export const NATURE_THEME: Theme = {
-  id: "nature",
-  name: "Nature Inspired",
-  description: "Earthy greens and browns inspired by forests and meadows",
-  author: "Leapfrog",
-  background: "#1a2e1a",
-  foreground: "#e8f5e9",
-  card: "#2d4a2d",
-  cardForeground: "#e8f5e9",
-  popover: "#243824",
-  popoverForeground: "#e8f5e9",
-  primary: "#4caf50",
-  primaryForeground: "#1a2e1a",
-  accent: "#66bb6a",
-  accentForeground: "#1a2e1a",
-  secondary: "#2d4a2d",
-  secondaryForeground: "#e8f5e9",
-  muted: "#3d5a3d",
-  mutedForeground: "#a5d6a7",
-  destructive: "#e57373",
-  destructiveForeground: "#ffffff",
-  success: "#66bb6a",
-  successForeground: "#1a2e1a",
-  warning: "#ffb74d",
-  warningForeground: "#1a2e1a",
-  chip: "#3d5a3d",
-  chipForeground: "#c8e6c9",
-  border: "#243824",
-  input: "#243824",
-  ring: "#4caf50",
-  toggleTrack: "#3d5a3d",
-  toggleTrackForeground: "#e8f5e9",
-  inputHover: "#4caf50",
-  chart1: "#4caf50",
-  chart2: "#66bb6a",
-  chart3: "#81c784",
-  chart4: "#a5d6a7",
-  chart5: "#c8e6c9",
-  chart6: "#8bc34a",
-  chart7: "#cddc39",
-  chart8: "#ffb74d",
-  chart9: "#4db6ac",
-  chart10: "#7986cb",
-  chart11: "#e57373",
-  chart12: "#64b5f6",
-  radius: "0.5rem",
-};
-
-/**
- * Sci-Fi Theme - Deep space with vibrant accents
- */
-export const SCIFI_THEME: Theme = {
-  id: "scifi",
-  name: "Sci-Fi",
-  description: "Deep space aesthetic with vibrant cyan and magenta accents",
-  author: "Leapfrog",
-  background: "#0d1117",
-  foreground: "#c9d1d9",
-  card: "#161b22",
-  cardForeground: "#c9d1d9",
-  popover: "#161b22",
-  popoverForeground: "#c9d1d9",
-  primary: "#00d9ff",
-  primaryForeground: "#0d1117",
-  accent: "#ff00ff",
-  accentForeground: "#ffffff",
-  secondary: "#1c2128",
-  secondaryForeground: "#c9d1d9",
-  muted: "#21262d",
-  mutedForeground: "#8b949e",
-  destructive: "#ff6b6b",
-  destructiveForeground: "#ffffff",
-  success: "#00ff88",
-  successForeground: "#0d1117",
-  warning: "#ffd93d",
-  warningForeground: "#0d1117",
-  chip: "#1c2128",
-  chipForeground: "#58a6ff",
-  border: "#30363d",
-  input: "#21262d",
-  ring: "#00d9ff",
-  toggleTrack: "#30363d",
-  toggleTrackForeground: "#c9d1d9",
-  inputHover: "#00d9ff",
-  chart1: "#00d9ff",
-  chart2: "#ff00ff",
-  chart3: "#00ff88",
-  chart4: "#ffd93d",
-  chart5: "#58a6ff",
-  chart6: "#ff6b6b",
-  chart7: "#4ecdc4",
-  chart8: "#a855f7",
-  chart9: "#fb923c",
-  chart10: "#38bdf8",
-  chart11: "#f472b6",
-  chart12: "#34d399",
-  radius: "0.5rem",
-};
-
-/**
- * Ocean Theme - Calming blues and teals
- */
-export const OCEAN_THEME: Theme = {
-  id: "ocean",
-  name: "Ocean",
-  description: "Calming blues and teals inspired by the deep sea",
-  author: "Leapfrog",
-  background: "#0a1929",
-  foreground: "#e3f2fd",
-  card: "#132f4c",
-  cardForeground: "#e3f2fd",
-  popover: "#0f2540",
-  popoverForeground: "#e3f2fd",
-  primary: "#2196f3",
-  primaryForeground: "#ffffff",
-  accent: "#00bcd4",
-  accentForeground: "#0a1929",
-  secondary: "#1565c0",
-  secondaryForeground: "#ffffff",
-  muted: "#1e3a5f",
-  mutedForeground: "#90caf9",
-  destructive: "#f44336",
-  destructiveForeground: "#ffffff",
-  success: "#4caf50",
-  successForeground: "#ffffff",
-  warning: "#ff9800",
-  warningForeground: "#ffffff",
-  chip: "#1565c0",
-  chipForeground: "#bbdefb",
-  border: "#1e3a5f",
-  input: "#1e3a5f",
-  ring: "#2196f3",
-  toggleTrack: "#264a6e",
-  toggleTrackForeground: "#e3f2fd",
-  inputHover: "#2196f3",
-  chart1: "#2196f3",
-  chart2: "#00bcd4",
-  chart3: "#03a9f4",
-  chart4: "#0288d1",
-  chart5: "#0277bd",
-  chart6: "#26c6da",
-  chart7: "#42a5f5",
-  chart8: "#66bb6a",
-  chart9: "#ffb74d",
-  chart10: "#ef5350",
-  chart11: "#ab47bc",
-  chart12: "#78909c",
-  radius: "0.5rem",
-};
-
-/**
- * Sunset Theme - Warm oranges and purples
+ * Optilogic Dark Theme - Branded dark mode
+ *
+ * Uses Optilogic marketing site colors for a branded dark experience.
+ * Primary palette: deep teal background with signature neon green accent.
  */
-export const SUNSET_THEME: Theme = {
-  id: "sunset",
-  name: "Sunset",
-  description: "Warm oranges and purples like a beautiful sunset",
-  author: "Leapfrog",
-  background: "#1a0d1a",
-  foreground: "#ffe0e6",
-  card: "#2d1a2d",
-  cardForeground: "#ffe0e6",
-  popover: "#241424",
-  popoverForeground: "#ffe0e6",
-  primary: "#ff6b35",
-  primaryForeground: "#ffffff",
-  accent: "#c44569",
-  accentForeground: "#ffffff",
-  secondary: "#f7931e",
-  secondaryForeground: "#1a0d1a",
-  muted: "#3d2a3d",
-  mutedForeground: "#ffb3c1",
-  destructive: "#e63946",
-  destructiveForeground: "#ffffff",
-  success: "#06d6a0",
-  successForeground: "#1a0d1a",
-  warning: "#ffb703",
-  warningForeground: "#1a0d1a",
-  chip: "#3d2a3d",
-  chipForeground: "#ffb3c1",
-  border: "#241424",
-  input: "#241424",
-  ring: "#ff6b35",
-  toggleTrack: "#3d2a3d",
-  toggleTrackForeground: "#ffe0e6",
-  inputHover: "#ff6b35",
-  chart1: "#ff6b35",
-  chart2: "#c44569",
-  chart3: "#f7931e",
-  chart4: "#ffb703",
-  chart5: "#ff8c42",
-  chart6: "#06d6a0",
-  chart7: "#118ab2",
-  chart8: "#ef476f",
-  chart9: "#ffd166",
-  chart10: "#073b4c",
-  chart11: "#8338ec",
-  chart12: "#3a86ff",
+export const OPTILOGIC_DARK_THEME: Theme = {
+  id: "optilogic-dark",
+  name: "Optilogic Dark",
+  description: "Optilogic branded dark theme with signature green",
+  author: "Optilogic",
+  background: "#042926",
+  foreground: "#E0E7E6",
+  card: "#0A3F34",
+  cardForeground: "#E0E7E6",
+  popover: "#0A3F34",
+  popoverForeground: "#E0E7E6",
+  primary: "#23EF6A",
+  primaryForeground: "#042926",
+  accent: "#23EF6A",
+  accentForeground: "#042926",
+  secondary: "#0D4D3F",
+  secondaryForeground: "#E0E7E6",
+  muted: "#0D4D3F",
+  mutedForeground: "#9CB5B0",
+  destructive: "#EF4444",
+  destructiveForeground: "#FFFFFF",
+  success: "#23EF6A",
+  successForeground: "#042926",
+  warning: "#FBBF24",
+  warningForeground: "#042926",
+  chip: "#0D4D3F",
+  chipForeground: "#A7D5CA",
+  border: "#1A5C4C",
+  input: "#1A5C4C",
+  ring: "#23EF6A",
+  popoverBorder: "#237A64",
+  divider: "#1A5C4C",
+  toggleTrack: "#1A5C4C",
+  toggleTrackForeground: "#E0E7E6",
+  inputHover: "#23EF6A",
+  chart1: "#23EF6A",
+  chart2: "#3B82F6",
+  chart3: "#FBBF24",
+  chart4: "#F97316",
+  chart5: "#A78BFA",
+  chart6: "#EF4444",
+  chart7: "#06B6D4",
+  chart8: "#EC4899",
+  chart9: "#84CC16",
+  chart10: "#14B8A6",
+  chart11: "#F59E0B",
+  chart12: "#8B5CF6",
   radius: "0.5rem",
 };
 
 /**
- * Forest Theme - Deep greens and browns
+ * Modern Light Theme - Clean, readable light mode
+ *
+ * Neutral grays with blue primary for a modern, professional look.
+ * Reworked from the original Minimalist Light theme.
  */
-export const FOREST_THEME: Theme = {
-  id: "forest",
-  name: "Forest",
-  description: "Deep greens and browns like an ancient forest",
-  author: "Leapfrog",
-  background: "#0d1b0d",
-  foreground: "#e8f5e9",
-  card: "#1a2e1a",
-  cardForeground: "#e8f5e9",
-  popover: "#152515",
-  popoverForeground: "#e8f5e9",
-  primary: "#2e7d32",
-  primaryForeground: "#ffffff",
-  accent: "#558b2f",
-  accentForeground: "#ffffff",
-  secondary: "#1b5e20",
-  secondaryForeground: "#e8f5e9",
-  muted: "#2d4a2d",
-  mutedForeground: "#a5d6a7",
-  destructive: "#c62828",
-  destructiveForeground: "#ffffff",
-  success: "#4caf50",
-  successForeground: "#ffffff",
-  warning: "#f57c00",
-  warningForeground: "#ffffff",
-  chip: "#2d4a2d",
-  chipForeground: "#c8e6c9",
-  border: "#1b5e20",
-  input: "#1a2e1a",
-  ring: "#2e7d32",
-  toggleTrack: "#2d4a2d",
-  toggleTrackForeground: "#e8f5e9",
-  inputHover: "#2e7d32",
-  chart1: "#2e7d32",
-  chart2: "#388e3c",
-  chart3: "#43a047",
-  chart4: "#66bb6a",
-  chart5: "#81c784",
-  chart6: "#a5d6a7",
-  chart7: "#c8e6c9",
-  chart8: "#ffb74d",
-  chart9: "#4db6ac",
-  chart10: "#7986cb",
-  chart11: "#e57373",
-  chart12: "#64b5f6",
+export const MODERN_LIGHT_THEME: Theme = {
+  id: "modern-light",
+  name: "Modern Light",
+  description: "Clean and modern light theme with blue accents",
+  author: "opti-ui",
+  background: "#FFFFFF",
+  foreground: "#1A1A1A",
+  card: "#F8F9FA",
+  cardForeground: "#1A1A1A",
+  popover: "#FFFFFF",
+  popoverForeground: "#1A1A1A",
+  primary: "#2563EB",
+  primaryForeground: "#FFFFFF",
+  accent: "#E9ECEF",
+  accentForeground: "#1A1A1A",
+  secondary: "#F1F3F5",
+  secondaryForeground: "#1A1A1A",
+  muted: "#E9ECEF",
+  mutedForeground: "#6C757D",
+  destructive: "#DC3545",
+  destructiveForeground: "#FFFFFF",
+  success: "#28A745",
+  successForeground: "#FFFFFF",
+  warning: "#FFC107",
+  warningForeground: "#1A1A1A",
+  chip: "#E9ECEF",
+  chipForeground: "#495057",
+  border: "#DEE2E6",
+  input: "#DEE2E6",
+  ring: "#2563EB",
+  popoverBorder: "#DEE2E6",
+  divider: "#DEE2E6",
+  toggleTrack: "#CED4DA",
+  toggleTrackForeground: "#FFFFFF",
+  inputHover: "#6C757D",
+  chart1: "#2563EB",
+  chart2: "#16A34A",
+  chart3: "#EA580C",
+  chart4: "#9333EA",
+  chart5: "#DC2626",
+  chart6: "#0891B2",
+  chart7: "#CA8A04",
+  chart8: "#DB2777",
+  chart9: "#4F46E5",
+  chart10: "#059669",
+  chart11: "#D97706",
+  chart12: "#7C3AED",
   radius: "0.5rem",
 };
 
-/**
- * Cyberpunk Theme - Neon pinks and cyans
- */
-export const CYBERPUNK_THEME: Theme = {
-  id: "cyberpunk",
-  name: "Cyberpunk",
-  description: "Neon pinks and cyans with high contrast",
-  author: "Leapfrog",
-  background: "#0a0a0f",
-  foreground: "#f0f0f0",
-  card: "#1a1a2e",
-  cardForeground: "#f0f0f0",
-  popover: "#16213e",
-  popoverForeground: "#f0f0f0",
-  primary: "#ff00ff",
-  primaryForeground: "#ffffff",
-  accent: "#00ffff",
-  accentForeground: "#0a0a0f",
-  secondary: "#16213e",
-  secondaryForeground: "#f0f0f0",
-  muted: "#1a1a2e",
-  mutedForeground: "#a0a0a0",
-  destructive: "#ff1744",
-  destructiveForeground: "#ffffff",
-  success: "#00ff88",
-  successForeground: "#0a0a0f",
-  warning: "#ffd700",
-  warningForeground: "#0a0a0f",
-  chip: "#16213e",
-  chipForeground: "#ff00ff",
-  border: "#1a1a2e",
-  input: "#16213e",
-  ring: "#ff00ff",
-  toggleTrack: "#2a2a4e",
-  toggleTrackForeground: "#f0f0f0",
-  inputHover: "#ff00ff",
-  chart1: "#ff00ff",
-  chart2: "#00ffff",
-  chart3: "#00ff88",
-  chart4: "#ffd700",
-  chart5: "#ff1744",
-  chart6: "#ff6b6b",
-  chart7: "#4ecdc4",
-  chart8: "#a855f7",
-  chart9: "#fb923c",
-  chart10: "#38bdf8",
-  chart11: "#84cc16",
-  chart12: "#f97316",
-  radius: "0.5rem",
-};
+/** @deprecated Use MODERN_LIGHT_THEME instead */
+export const MINIMALIST_LIGHT_THEME = MODERN_LIGHT_THEME;
 
 /**
- * Minimalist Light Theme - Clean and simple
+ * Modern Dark Theme - Neutral, clean dark mode
+ *
+ * Zinc-based palette with blue accents. Strong border contrast
+ * for clear visual separation of UI elements.
  */
-export const MINIMALIST_LIGHT_THEME: Theme = {
-  id: "minimalist-light",
-  name: "Minimalist Light",
-  description: "Clean and simple light theme with subtle grays",
-  author: "Leapfrog",
-  background: "#ffffff",
-  foreground: "#1a1a1a",
-  card: "#f8f9fa",
-  cardForeground: "#1a1a1a",
-  popover: "#ffffff",
-  popoverForeground: "#1a1a1a",
-  primary: "#000000",
-  primaryForeground: "#ffffff",
-  accent: "#e9ecef",
-  accentForeground: "#1a1a1a",
-  secondary: "#f1f3f5",
-  secondaryForeground: "#1a1a1a",
-  muted: "#e9ecef",
-  mutedForeground: "#6c757d",
-  destructive: "#dc3545",
-  destructiveForeground: "#ffffff",
-  success: "#28a745",
-  successForeground: "#ffffff",
-  warning: "#ffc107",
-  warningForeground: "#1a1a1a",
-  chip: "#e9ecef",
-  chipForeground: "#495057",
-  border: "#dee2e6",
-  input: "#dee2e6",
-  ring: "#000000",
-  toggleTrack: "#ced4da",
-  toggleTrackForeground: "#ffffff",
-  inputHover: "#6c757d",
-  chart1: "#000000",
-  chart2: "#6c757d",
-  chart3: "#adb5bd",
-  chart4: "#dee2e6",
-  chart5: "#e9ecef",
-  chart6: "#343a40",
-  chart7: "#495057",
-  chart8: "#868e96",
-  chart9: "#5c6bc0",
-  chart10: "#26a69a",
-  chart11: "#ef5350",
-  chart12: "#ffa726",
+export const MODERN_DARK_THEME: Theme = {
+  id: "modern-dark",
+  name: "Modern Dark",
+  description: "Clean, neutral dark theme with blue accents",
+  author: "opti-ui",
+  background: "#09090B",
+  foreground: "#FAFAFA",
+  card: "#18181B",
+  cardForeground: "#FAFAFA",
+  popover: "#18181B",
+  popoverForeground: "#FAFAFA",
+  primary: "#3B82F6",
+  primaryForeground: "#FFFFFF",
+  accent: "#27272A",
+  accentForeground: "#FAFAFA",
+  secondary: "#27272A",
+  secondaryForeground: "#FAFAFA",
+  muted: "#27272A",
+  mutedForeground: "#A1A1AA",
+  destructive: "#EF4444",
+  destructiveForeground: "#FFFFFF",
+  success: "#22C55E",
+  successForeground: "#FFFFFF",
+  warning: "#EAB308",
+  warningForeground: "#09090B",
+  chip: "#27272A",
+  chipForeground: "#D4D4D8",
+  border: "#3F3F46",
+  input: "#3F3F46",
+  ring: "#3B82F6",
+  popoverBorder: "#52525B",
+  divider: "#3F3F46",
+  toggleTrack: "#3F3F46",
+  toggleTrackForeground: "#FAFAFA",
+  inputHover: "#3B82F6",
+  chart1: "#3B82F6",
+  chart2: "#22C55E",
+  chart3: "#F59E0B",
+  chart4: "#EF4444",
+  chart5: "#A855F7",
+  chart6: "#14B8A6",
+  chart7: "#F97316",
+  chart8: "#EC4899",
+  chart9: "#0EA5E9",
+  chart10: "#EAB308",
+  chart11: "#10B981",
+  chart12: "#C084FC",
   radius: "0.5rem",
 };
 
 /**
  * Dark Elegant Theme - Sophisticated dark mode
+ *
+ * Deep charcoal with purple/teal accents for a refined aesthetic.
  */
 export const DARK_ELEGANT_THEME: Theme = {
   id: "dark-elegant",
   name: "Dark Elegant",
   description: "Sophisticated dark mode with refined colors",
-  author: "Leapfrog",
+  author: "opti-ui",
   background: "#121212",
-  foreground: "#e0e0e0",
-  card: "#1e1e1e",
-  cardForeground: "#e0e0e0",
-  popover: "#1e1e1e",
-  popoverForeground: "#e0e0e0",
-  primary: "#bb86fc",
+  foreground: "#E0E0E0",
+  card: "#1E1E1E",
+  cardForeground: "#E0E0E0",
+  popover: "#1E1E1E",
+  popoverForeground: "#E0E0E0",
+  primary: "#BB86FC",
   primaryForeground: "#121212",
-  accent: "#03dac6",
+  accent: "#03DAC6",
   accentForeground: "#121212",
-  secondary: "#2d2d2d",
-  secondaryForeground: "#e0e0e0",
-  muted: "#2d2d2d",
-  mutedForeground: "#9e9e9e",
-  destructive: "#cf6679",
-  destructiveForeground: "#ffffff",
-  success: "#4caf50",
-  successForeground: "#ffffff",
-  warning: "#ff9800",
-  warningForeground: "#ffffff",
-  chip: "#2d2d2d",
-  chipForeground: "#b39ddb",
-  border: "#2d2d2d",
-  input: "#1e1e1e",
-  ring: "#bb86fc",
-  toggleTrack: "#3d3d3d",
-  toggleTrackForeground: "#e0e0e0",
-  inputHover: "#bb86fc",
-  chart1: "#bb86fc",
-  chart2: "#03dac6",
-  chart3: "#4caf50",
-  chart4: "#ff9800",
-  chart5: "#cf6679",
-  chart6: "#64b5f6",
-  chart7: "#81c784",
-  chart8: "#ffb74d",
-  chart9: "#e57373",
-  chart10: "#7986cb",
-  chart11: "#4db6ac",
-  chart12: "#f06292",
+  secondary: "#2D2D2D",
+  secondaryForeground: "#E0E0E0",
+  muted: "#2D2D2D",
+  mutedForeground: "#9E9E9E",
+  destructive: "#CF6679",
+  destructiveForeground: "#FFFFFF",
+  success: "#4CAF50",
+  successForeground: "#FFFFFF",
+  warning: "#FF9800",
+  warningForeground: "#121212",
+  chip: "#2D2D2D",
+  chipForeground: "#B39DDB",
+  border: "#404040",
+  input: "#404040",
+  ring: "#BB86FC",
+  popoverBorder: "#525252",
+  divider: "#404040",
+  toggleTrack: "#404040",
+  toggleTrackForeground: "#E0E0E0",
+  inputHover: "#BB86FC",
+  chart1: "#BB86FC",
+  chart2: "#03DAC6",
+  chart3: "#4CAF50",
+  chart4: "#FF9800",
+  chart5: "#CF6679",
+  chart6: "#64B5F6",
+  chart7: "#81C784",
+  chart8: "#FFB74D",
+  chart9: "#E57373",
+  chart10: "#7986CB",
+  chart11: "#4DB6AC",
+  chart12: "#F06292",
   radius: "0.5rem",
 };
 
 /**
  * All available preset themes
  */
-export const PRESET_THEMES: Theme[] = [OPTILOGIC_LEGACY_THEME];
+export const PRESET_THEMES: Theme[] = [
+  OPTILOGIC_LEGACY_THEME,
+  OPTILOGIC_DARK_THEME,
+  MODERN_LIGHT_THEME,
+  MODERN_DARK_THEME,
+  DARK_ELEGANT_THEME,
+];
 
 /**
  * All theme suggestions for preview
  */
-export const ALL_THEMES: Theme[] = [
-  OPTILOGIC_LEGACY_THEME,
-  FUTURISTIC_THEME,
-  NATURE_THEME,
-  SCIFI_THEME,
-  OCEAN_THEME,
-  SUNSET_THEME,
-  FOREST_THEME,
-  CYBERPUNK_THEME,
-  MINIMALIST_LIGHT_THEME,
-  DARK_ELEGANT_THEME,
-  GREEN_THEME,
-];
+export const ALL_THEMES: Theme[] = PRESET_THEMES;
 
 /**
  * Get a preset theme by ID