@snowcone-app/ui 0.1.43 → 0.2.1

package/src/themes/presets.ts

@@ -0,0 +1,989 @@
+/**
+ * Theme Presets (OKLCH-Based)
+ *
+ * This is the single source of truth for all theme definitions.
+ * All apps (next-ecommerce, docs, canvas) use these same presets.
+ *
+ * OKLCH THEME SYSTEM:
+ * -------------------
+ * Themes are defined with just hue + chroma, and all colors are generated
+ * algorithmically. This ensures:
+ * - Consistent contrast ratios
+ * - Neutral foreground colors (no accidental tinting)
+ * - Mathematically correct color relationships
+ *
+ * THEME STRUCTURE:
+ * ----------------
+ * Themes are organized as "base themes" with light and dark variants.
+ * The dark mode toggle switches between variants of the same base theme.
+ */
+
+import type { ThemePreset, OklchThemeConfig, RadiusPresetId } from './types';
+
+// =============================================================================
+// OKLCH THEME PRESETS (Source of Truth)
+// =============================================================================
+
+/**
+ * OKLCH-based theme configurations
+ *
+ * Define themes with just hue + chroma, everything else is computed.
+ * Hue reference: 0=red, 30=orange, 60=yellow, 120=green, 180=cyan, 240=blue, 270=purple, 300=magenta, 330=pink
+ */
+export const oklchPresets: OklchThemeConfig[] = [
+  // ============================================================================
+  // SNOWCONE (Neutral achromatic with black primary — Snowcone brand)
+  // ============================================================================
+  {
+    name: 'Snowcone',
+    hue: 0,
+    chroma: 0.0,
+    isDark: false,
+    primaryLightness: 0.0,  // Pure black primary
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'thin',
+    darkVariant: 'Snowcone Dark',
+  },
+  {
+    name: 'Snowcone Dark',
+    hue: 0,
+    chroma: 0.0,
+    isDark: true,
+    primaryLightness: 1.0,  // Pure white primary
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    lightVariant: 'Snowcone',
+  },
+
+  // ============================================================================
+  // MINIMAL / MIDNIGHT (Neutral - achromatic)
+  // ============================================================================
+  {
+    name: 'Minimal',
+    hue: 0,
+    chroma: 0.0,  // Pure achromatic
+    isDark: false,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'thin',
+    darkVariant: 'Midnight',
+  },
+  {
+    name: 'Midnight',
+    hue: 0,
+    chroma: 0.0,
+    isDark: true,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    lightVariant: 'Minimal',
+  },
+
+  // ============================================================================
+  // LINEAR (Indigo - hue ~250)
+  // ============================================================================
+  {
+    name: 'Linear',
+    hue: 250,
+    chroma: 0.15,
+    isDark: false,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    darkVariant: 'Linear Dark',
+  },
+  {
+    name: 'Linear Dark',
+    hue: 250,
+    chroma: 0.18,
+    isDark: true,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'thick',
+    lightVariant: 'Linear',
+  },
+
+  // ============================================================================
+  // RADIX (Violet - hue ~270)
+  // ============================================================================
+  {
+    name: 'Radix',
+    hue: 270,
+    chroma: 0.16,
+    isDark: false,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    darkVariant: 'Radix Dark',
+  },
+  {
+    name: 'Radix Dark',
+    hue: 270,
+    chroma: 0.18,
+    isDark: true,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'thick',
+    lightVariant: 'Radix',
+  },
+
+  // ============================================================================
+  // STRIPE (Indigo-blue - hue ~255)
+  // ============================================================================
+  {
+    name: 'Stripe',
+    hue: 255,
+    chroma: 0.18,
+    isDark: false,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    darkVariant: 'Stripe Dark',
+  },
+  {
+    name: 'Stripe Dark',
+    hue: 255,
+    chroma: 0.18,
+    isDark: true,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'thick',
+    lightVariant: 'Stripe',
+  },
+
+  // ============================================================================
+  // GITHUB (Green - hue ~145)
+  // ============================================================================
+  {
+    name: 'GitHub',
+    hue: 145,
+    chroma: 0.18,
+    isDark: false,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    darkVariant: 'GitHub Dark',
+  },
+  {
+    name: 'GitHub Dark',
+    hue: 145,
+    chroma: 0.18,
+    isDark: true,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    lightVariant: 'GitHub',
+  },
+
+  // ============================================================================
+  // VERCEL (Neutral - achromatic)
+  // ============================================================================
+  {
+    name: 'Vercel',
+    hue: 0,
+    chroma: 0.0,
+    isDark: false,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    darkVariant: 'Vercel Dark',
+  },
+  {
+    name: 'Vercel Dark',
+    hue: 0,
+    chroma: 0.0,
+    isDark: true,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    lightVariant: 'Vercel',
+  },
+
+  // ============================================================================
+  // NOTION (Neutral - sharp corners)
+  // ============================================================================
+  {
+    name: 'Notion',
+    hue: 0,
+    chroma: 0.0,
+    isDark: false,
+    radiusPreset: 'sharp',
+    fontFamily: 'sans',
+    darkVariant: 'Notion Dark',
+  },
+  {
+    name: 'Notion Dark',
+    hue: 0,
+    chroma: 0.0,
+    isDark: true,
+    radiusPreset: 'sharp',
+    fontFamily: 'sans',
+    lightVariant: 'Notion',
+  },
+
+  // ============================================================================
+  // MEDIUM (Green - editorial serif)
+  // ============================================================================
+  {
+    name: 'Medium',
+    hue: 145,
+    chroma: 0.20,
+    isDark: false,
+    radiusPreset: 'sharp',
+    fontFamily: 'serif',
+    darkVariant: 'Medium Dark',
+    fontPairing: {
+      id: 'medium-serif',
+      headingFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      bodyFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      labelFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      buttonFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      captionFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      displayFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      accentFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      weights: {
+        bodyWeight: '400',
+        headingWeight: '700',
+        buttonWeight: '500',
+        labelWeight: '500',
+        captionWeight: '400',
+        displayWeight: '700',
+      },
+    },
+  },
+  {
+    name: 'Medium Dark',
+    hue: 145,
+    chroma: 0.20,
+    isDark: true,
+    radiusPreset: 'sharp',
+    fontFamily: 'serif',
+    lightVariant: 'Medium',
+    fontPairing: {
+      id: 'medium-serif-dark',
+      headingFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      bodyFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      labelFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      buttonFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      captionFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      displayFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      accentFont: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      weights: {
+        bodyWeight: '400',
+        headingWeight: '700',
+        buttonWeight: '500',
+        labelWeight: '500',
+        captionWeight: '400',
+        displayWeight: '700',
+      },
+    },
+  },
+
+  // ============================================================================
+  // FRAMER (Cyan - playful with bold weights)
+  // ============================================================================
+  {
+    name: 'Framer',
+    hue: 200,
+    chroma: 0.20,
+    isDark: false,
+    radiusPreset: 'playful',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'extra-thick',
+    darkVariant: 'Framer Dark',
+    fontPairing: {
+      id: 'framer-bold-light',
+      headingFont: 'ui-sans-serif, system-ui, sans-serif',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif',
+      labelFont: 'ui-sans-serif, system-ui, sans-serif',
+      buttonFont: 'ui-sans-serif, system-ui, sans-serif',
+      captionFont: 'ui-sans-serif, system-ui, sans-serif',
+      displayFont: 'ui-sans-serif, system-ui, sans-serif',
+      weights: {
+        bodyWeight: '400',
+        headingWeight: '700',
+        buttonWeight: '600',
+        labelWeight: '500',
+        captionWeight: '400',
+        displayWeight: '800',
+      },
+    },
+  },
+  {
+    name: 'Framer Dark',
+    hue: 200,
+    chroma: 0.20,
+    isDark: true,
+    radiusPreset: 'playful',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'extra-thick',
+    lightVariant: 'Framer',
+    fontPairing: {
+      id: 'framer-bold',
+      headingFont: 'ui-sans-serif, system-ui, sans-serif',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif',
+      labelFont: 'ui-sans-serif, system-ui, sans-serif',
+      buttonFont: 'ui-sans-serif, system-ui, sans-serif',
+      captionFont: 'ui-sans-serif, system-ui, sans-serif',
+      displayFont: 'ui-sans-serif, system-ui, sans-serif',
+      weights: {
+        bodyWeight: '400',
+        headingWeight: '700',
+        buttonWeight: '600',
+        labelWeight: '500',
+        captionWeight: '400',
+        displayWeight: '800',
+      },
+    },
+  },
+
+  // ============================================================================
+  // FIGMA (Cyan - hue ~195)
+  // ============================================================================
+  {
+    name: 'Figma',
+    hue: 195,
+    chroma: 0.18,
+    isDark: false,
+    radiusPreset: 'sharp',
+    fontFamily: 'sans',
+    darkVariant: 'Figma Dark',
+  },
+  {
+    name: 'Figma Dark',
+    hue: 195,
+    chroma: 0.18,
+    isDark: true,
+    radiusPreset: 'sharp',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'thick',
+    lightVariant: 'Figma',
+  },
+
+  // ============================================================================
+  // APPLE (Blue - hue ~220)
+  // ============================================================================
+  {
+    name: 'Apple',
+    hue: 220,
+    chroma: 0.18,
+    isDark: false,
+    radiusPreset: 'soft',
+    fontFamily: 'sans',
+    darkVariant: 'Apple Dark',
+    fontPairing: {
+      id: 'apple-clean',
+      headingFont: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      labelFont: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      buttonFont: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      captionFont: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      displayFont: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      weights: {
+        bodyWeight: '400',
+        headingWeight: '600',
+        buttonWeight: '500',
+        labelWeight: '500',
+        captionWeight: '400',
+        displayWeight: '700',
+      },
+    },
+  },
+  {
+    name: 'Apple Dark',
+    hue: 220,
+    chroma: 0.18,
+    isDark: true,
+    radiusPreset: 'soft',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'thick',
+    lightVariant: 'Apple',
+    fontPairing: {
+      id: 'apple-clean-dark',
+      headingFont: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      labelFont: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      buttonFont: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      captionFont: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      displayFont: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      weights: {
+        bodyWeight: '400',
+        headingWeight: '600',
+        buttonWeight: '500',
+        labelWeight: '500',
+        captionWeight: '400',
+        displayWeight: '700',
+      },
+    },
+  },
+
+  // ============================================================================
+  // TAILWIND (Cyan - hue ~190)
+  // ============================================================================
+  {
+    name: 'Tailwind',
+    hue: 190,
+    chroma: 0.18,
+    isDark: false,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    darkVariant: 'Tailwind Dark',
+  },
+  {
+    name: 'Tailwind Dark',
+    hue: 190,
+    chroma: 0.20,
+    isDark: true,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'thick',
+    lightVariant: 'Tailwind',
+  },
+
+  // ============================================================================
+  // SQUIRCLE (Violet - soft/pill-shaped)
+  // ============================================================================
+  {
+    name: 'Squircle',
+    hue: 270,
+    chroma: 0.16,
+    isDark: false,
+    radiusPreset: 'soft',
+    fontFamily: 'sans',
+    darkVariant: 'Squircle Dark',
+  },
+  {
+    name: 'Squircle Dark',
+    hue: 270,
+    chroma: 0.18,
+    isDark: true,
+    radiusPreset: 'soft',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'thick',
+    lightVariant: 'Squircle',
+  },
+
+  // ============================================================================
+  // PILL UI (Blue - pill-shaped)
+  // ============================================================================
+  {
+    name: 'Pill UI',
+    hue: 220,
+    chroma: 0.18,
+    isDark: false,
+    radiusPreset: 'soft',
+    fontFamily: 'sans',
+    darkVariant: 'Pill UI Dark',
+  },
+  {
+    name: 'Pill UI Dark',
+    hue: 220,
+    chroma: 0.18,
+    isDark: true,
+    radiusPreset: 'soft',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'thick',
+    lightVariant: 'Pill UI',
+  },
+
+  // ============================================================================
+  // MODERN STORE (Blue - e-commerce focused)
+  // ============================================================================
+  {
+    name: 'Modern Store',
+    hue: 225,
+    chroma: 0.20,
+    isDark: false,
+    radiusPreset: 'default',
+    fontFamily: 'montserrat-combo',
+    iconStrokeWidth: 'thick',
+    darkVariant: 'Modern Store Dark',
+    fontPairing: {
+      id: 'montserrat-bold',
+      headingFont: 'ui-sans-serif, system-ui, sans-serif',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif',
+      labelFont: 'ui-sans-serif, system-ui, sans-serif',
+      buttonFont: 'ui-sans-serif, system-ui, sans-serif',
+      captionFont: 'ui-sans-serif, system-ui, sans-serif',
+      displayFont: 'ui-sans-serif, system-ui, sans-serif',
+      weights: {
+        bodyWeight: '400',
+        headingWeight: '700',
+        buttonWeight: '600',
+        labelWeight: '500',
+        captionWeight: '400',
+        displayWeight: '700',
+      },
+    },
+  },
+  {
+    name: 'Modern Store Dark',
+    hue: 225,
+    chroma: 0.18,
+    isDark: true,
+    radiusPreset: 'default',
+    fontFamily: 'montserrat-combo',
+    iconStrokeWidth: 'thick',
+    lightVariant: 'Modern Store',
+    fontPairing: {
+      id: 'montserrat-bold-dark',
+      headingFont: 'ui-sans-serif, system-ui, sans-serif',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif',
+      labelFont: 'ui-sans-serif, system-ui, sans-serif',
+      buttonFont: 'ui-sans-serif, system-ui, sans-serif',
+      captionFont: 'ui-sans-serif, system-ui, sans-serif',
+      displayFont: 'ui-sans-serif, system-ui, sans-serif',
+      weights: {
+        bodyWeight: '400',
+        headingWeight: '700',
+        buttonWeight: '600',
+        labelWeight: '500',
+        captionWeight: '400',
+        displayWeight: '700',
+      },
+    },
+  },
+
+  // ============================================================================
+  // LUXURY RETAIL (Red - elegant serif)
+  // ============================================================================
+  {
+    name: 'Luxury Retail',
+    hue: 25,
+    chroma: 0.22,
+    isDark: false,
+    radiusPreset: 'sharp',
+    fontFamily: 'playfair-combo',
+    iconStrokeWidth: 'thin',
+    darkVariant: 'Luxury Retail Dark',
+    fontPairing: {
+      id: 'playfair-elegant',
+      headingFont: 'ui-serif, Georgia, Cambria, serif',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif',
+      buttonFont: 'ui-serif, Georgia, Cambria, serif',
+      labelFont: 'ui-sans-serif, system-ui, sans-serif',
+      captionFont: 'ui-sans-serif, system-ui, sans-serif',
+      displayFont: 'ui-serif, Georgia, Cambria, serif',
+      accentFont: 'ui-serif, Georgia, Cambria, serif',
+      weights: {
+        bodyWeight: '400',
+        headingWeight: '500',
+        buttonWeight: '500',
+        labelWeight: '500',
+        captionWeight: '400',
+        displayWeight: '600',
+      },
+    },
+  },
+  {
+    name: 'Luxury Retail Dark',
+    hue: 25,
+    chroma: 0.20,
+    isDark: true,
+    radiusPreset: 'default',
+    fontFamily: 'playfair-combo',
+    iconStrokeWidth: 'thin',
+    lightVariant: 'Luxury Retail',
+    fontPairing: {
+      id: 'playfair-elegant-dark',
+      headingFont: 'ui-serif, Georgia, Cambria, serif',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif',
+      buttonFont: 'ui-serif, Georgia, Cambria, serif',
+      labelFont: 'ui-sans-serif, system-ui, sans-serif',
+      captionFont: 'ui-sans-serif, system-ui, sans-serif',
+      displayFont: 'ui-serif, Georgia, Cambria, serif',
+      accentFont: 'ui-serif, Georgia, Cambria, serif',
+      weights: {
+        bodyWeight: '300',
+        headingWeight: '400',
+        buttonWeight: '500',
+        labelWeight: '400',
+        captionWeight: '300',
+        displayWeight: '500',
+      },
+    },
+  },
+
+  // ============================================================================
+  // CORPORATE PRO (Emerald - professional)
+  // ============================================================================
+  {
+    name: 'Corporate Pro',
+    hue: 160,
+    chroma: 0.18,
+    isDark: false,
+    radiusPreset: 'sharp',
+    fontFamily: 'helvetica-combo',
+    darkVariant: 'Corporate Pro Dark',
+    fontPairing: {
+      id: 'helvetica-corporate',
+      headingFont: '"Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif',
+      bodyFont: '"Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif',
+      labelFont: '"Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif',
+      buttonFont: '"Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif',
+      captionFont: '"Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif',
+      displayFont: '"Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif',
+      weights: {
+        bodyWeight: '400',
+        headingWeight: '600',
+        buttonWeight: '500',
+        labelWeight: '500',
+        captionWeight: '400',
+        displayWeight: '700',
+      },
+    },
+  },
+  {
+    name: 'Corporate Pro Dark',
+    hue: 160,
+    chroma: 0.20,
+    isDark: true,
+    radiusPreset: 'sharp',
+    fontFamily: 'helvetica-combo',
+    lightVariant: 'Corporate Pro',
+    fontPairing: {
+      id: 'helvetica-corporate-dark',
+      headingFont: '"Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif',
+      bodyFont: '"Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif',
+      labelFont: '"Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif',
+      buttonFont: '"Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif',
+      captionFont: '"Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif',
+      displayFont: '"Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif',
+      weights: {
+        bodyWeight: '400',
+        headingWeight: '600',
+        buttonWeight: '500',
+        labelWeight: '500',
+        captionWeight: '400',
+        displayWeight: '700',
+      },
+    },
+  },
+
+  // ============================================================================
+  // NEON (Lime - electric)
+  // ============================================================================
+  {
+    name: 'Neon',
+    hue: 95,
+    chroma: 0.22,
+    isDark: false,
+    radiusPreset: 'default',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'thick',
+    darkVariant: 'Neon Dark',
+  },
+  {
+    name: 'Neon Dark',
+    hue: 95,
+    chroma: 0.25,
+    isDark: true,
+    radiusPreset: 'playful',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'extra-thick',
+    lightVariant: 'Neon',
+  },
+
+  // ============================================================================
+  // NEO BRUTAL (Pink/Yellow - raw brutalist)
+  // ============================================================================
+  {
+    name: 'Neo Brutal',
+    hue: 50,  // Yellow-ish base
+    chroma: 0.25,
+    isDark: false,
+    radiusPreset: 'brutalist',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'extra-thick',
+    darkVariant: 'Neo Brutal Dark',
+    fontPairing: {
+      id: 'brutal-bold',
+      headingFont: 'ui-sans-serif, system-ui, sans-serif',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif',
+      buttonFont: 'ui-sans-serif, system-ui, sans-serif',
+      weights: {
+        bodyWeight: '500',
+        headingWeight: '900',
+        buttonWeight: '700',
+        labelWeight: '600',
+        captionWeight: '500',
+        displayWeight: '900',
+      },
+    },
+  },
+  {
+    name: 'Neo Brutal Dark',
+    hue: 155,  // Neon green on black
+    chroma: 0.30,
+    isDark: true,
+    radiusPreset: 'brutalist',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'extra-thick',
+    lightVariant: 'Neo Brutal',
+    fontPairing: {
+      id: 'brutal-bold-dark',
+      headingFont: 'ui-sans-serif, system-ui, sans-serif',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif',
+      buttonFont: 'ui-sans-serif, system-ui, sans-serif',
+      weights: {
+        bodyWeight: '500',
+        headingWeight: '900',
+        buttonWeight: '700',
+        labelWeight: '600',
+        captionWeight: '500',
+        displayWeight: '900',
+      },
+    },
+  },
+
+  // ============================================================================
+  // AURORA (Indigo - ethereal glassmorphism)
+  // ============================================================================
+  {
+    name: 'Aurora',
+    hue: 250,
+    chroma: 0.16,
+    isDark: false,
+    radiusPreset: 'soft',
+    fontFamily: 'sans',
+    darkVariant: 'Aurora Dark',
+    fontPairing: {
+      id: 'aurora-ethereal',
+      headingFont: 'ui-sans-serif, system-ui, sans-serif',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif',
+      weights: {
+        bodyWeight: '400',
+        headingWeight: '600',
+        buttonWeight: '500',
+        labelWeight: '500',
+        captionWeight: '400',
+        displayWeight: '700',
+      },
+    },
+  },
+  {
+    name: 'Aurora Dark',
+    hue: 260,
+    chroma: 0.18,
+    isDark: true,
+    radiusPreset: 'soft',
+    fontFamily: 'sans',
+    lightVariant: 'Aurora',
+    fontPairing: {
+      id: 'aurora-ethereal-dark',
+      headingFont: 'ui-sans-serif, system-ui, sans-serif',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif',
+      weights: {
+        bodyWeight: '400',
+        headingWeight: '600',
+        buttonWeight: '500',
+        labelWeight: '500',
+        captionWeight: '400',
+        displayWeight: '700',
+      },
+    },
+  },
+
+  // ============================================================================
+  // CANDY (Pink - playful and bubbly)
+  // ============================================================================
+  {
+    name: 'Candy',
+    hue: 330,
+    chroma: 0.20,
+    isDark: false,
+    radiusPreset: 'playful',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'thick',
+    darkVariant: 'Candy Dark',
+    fontPairing: {
+      id: 'candy-fun',
+      headingFont: 'ui-sans-serif, system-ui, sans-serif',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif',
+      weights: {
+        bodyWeight: '500',
+        headingWeight: '700',
+        buttonWeight: '600',
+        labelWeight: '600',
+        captionWeight: '500',
+        displayWeight: '800',
+      },
+    },
+  },
+  {
+    name: 'Candy Dark',
+    hue: 330,
+    chroma: 0.22,
+    isDark: true,
+    radiusPreset: 'playful',
+    fontFamily: 'sans',
+    iconStrokeWidth: 'thick',
+    lightVariant: 'Candy',
+    fontPairing: {
+      id: 'candy-fun-dark',
+      headingFont: 'ui-sans-serif, system-ui, sans-serif',
+      bodyFont: 'ui-sans-serif, system-ui, sans-serif',
+      weights: {
+        bodyWeight: '500',
+        headingWeight: '700',
+        buttonWeight: '600',
+        labelWeight: '600',
+        captionWeight: '500',
+        displayWeight: '800',
+      },
+    },
+  },
+];
+
+// =============================================================================
+// OKLCH TO LEGACY CONVERSION
+// =============================================================================
+
+/**
+ * Convert OKLCH lightness and chroma to approximate hex color
+ * This is a simplified conversion for backward compatibility
+ */
+function oklchToHex(l: number, c: number, h: number): string {
+  // Convert OKLCH to sRGB (simplified approximation)
+  // For more accurate conversion, use a proper color library
+
+  // Normalize hue to radians
+  const hRad = (h * Math.PI) / 180;
+
+  // Convert to Lab-like intermediate (simplified)
+  const a = c * Math.cos(hRad);
+  const b = c * Math.sin(hRad);
+
+  // Approximate conversion to linear RGB
+  const l_ = l + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = l - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = l - 0.0894841775 * a - 1.2914855480 * b;
+
+  const l3 = l_ * l_ * l_;
+  const m3 = m_ * m_ * m_;
+  const s3 = s_ * s_ * s_;
+
+  // Linear RGB
+  let r = +4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3;
+  let g = -1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3;
+  let bl = -0.0041960863 * l3 - 0.7034186147 * m3 + 1.7076147010 * s3;
+
+  // Clamp and convert to sRGB
+  const toSRGB = (x: number) => {
+    x = Math.max(0, Math.min(1, x));
+    return x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055;
+  };
+
+  r = Math.round(toSRGB(r) * 255);
+  g = Math.round(toSRGB(g) * 255);
+  bl = Math.round(toSRGB(bl) * 255);
+
+  // Clamp to valid range
+  r = Math.max(0, Math.min(255, r));
+  g = Math.max(0, Math.min(255, g));
+  bl = Math.max(0, Math.min(255, bl));
+
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${bl.toString(16).padStart(2, '0')}`;
+}
+
+/**
+ * Convert OKLCH theme config to legacy ThemePreset format
+ * This provides backward compatibility with existing theme consumers
+ */
+export function oklchToLegacyPreset(config: OklchThemeConfig): ThemePreset {
+  const { hue, isDark, chroma: primaryChroma = 0.18 } = config;
+
+  // Generate colors using OKLCH
+  const backgroundL = isDark ? 0.12 : 0.97;
+  const backgroundC = 0.008;
+  const foregroundL = isDark ? 0.96 : 0.15;
+  const foregroundC = 0.005;
+  const primaryL = isDark ? 0.70 : 0.55;
+
+  // Map radius preset to legacy borderRadius
+  const radiusToLegacy: Record<RadiusPresetId, ThemePreset['borderRadius']> = {
+    default: 'md',
+    sharp: 'sm',
+    soft: 'full',
+    brutalist: 'none',
+    playful: 'xl',
+  };
+
+  return {
+    name: config.name,
+    backgroundColor: oklchToHex(backgroundL, backgroundC, hue),
+    primaryColor: oklchToHex(primaryL, primaryChroma, hue),
+    textColor: oklchToHex(foregroundL, foregroundC, hue),
+    borderRadius: radiusToLegacy[config.radiusPreset || 'default'],
+    radiusPreset: config.radiusPreset,
+    fontFamily: config.fontFamily,
+    fontPairing: config.fontPairing,
+    iconStrokeWidth: config.iconStrokeWidth,
+    isDark: config.isDark,
+    lightVariant: config.lightVariant,
+    darkVariant: config.darkVariant,
+  };
+}
+
+// =============================================================================
+// EXPORTS (Backward Compatible)
+// =============================================================================
+
+/**
+ * All theme presets (both light and dark variants)
+ * Converted from OKLCH to legacy format for backward compatibility
+ */
+export const presetThemes: ThemePreset[] = oklchPresets.map(oklchToLegacyPreset);
+
+/**
+ * Base themes - one entry per "theme family"
+ * Each has a light variant (the base) and a dark variant
+ * Used for the theme picker dropdown
+ */
+export const baseThemes = presetThemes.filter((t) => !t.isDark);
+
+/**
+ * Get the opposite variant of a theme (light <-> dark)
+ */
+export function getThemeVariant(theme: ThemePreset, isDark: boolean): ThemePreset {
+  if (theme.isDark === isDark) {
+    return theme;
+  }
+
+  const variantName = isDark ? theme.darkVariant : theme.lightVariant;
+  if (!variantName) {
+    return theme;
+  }
+
+  const variant = presetThemes.find((t) => t.name === variantName);
+  return variant || theme;
+}
+
+/**
+ * Find a theme by name
+ */
+export function findTheme(name: string): ThemePreset | undefined {
+  return presetThemes.find((t) => t.name === name);
+}
+
+/**
+ * Find a theme by its ID (data-theme value, e.g., "ne-github")
+ */
+export function findThemeById(themeId: string): ThemePreset | undefined {
+  // Theme IDs are formatted as "ne-{name}" with lowercase and hyphens
+  // e.g., "ne-github", "ne-linear-dark"
+  return presetThemes.find((t) => {
+    const id = `ne-${t.name.toLowerCase().replace(/[^a-z0-9]/g, '-')}`;
+    return id === themeId;
+  });
+}
+
+/**
+ * Find an OKLCH theme by name
+ */
+export function findOklchTheme(name: string): OklchThemeConfig | undefined {
+  return oklchPresets.find((t) => t.name === name);
+}
+
+/**
+ * Get the base theme name for a theme (handles both light and dark variants)
+ */
+export function getBaseThemeName(theme: ThemePreset): string {
+  if (theme.isDark && theme.lightVariant) {
+    return theme.lightVariant;
+  }
+  return theme.name;
+}