@optilogic/core 1.0.0-beta.0

package/src/theme/presets.ts

@@ -0,0 +1,502 @@
+/**
+ * Theme Presets
+ *
+ * Built-in theme definitions for opti-ui.
+ * Ported from platform-leapfrog for consistent theming.
+ */
+
+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",
+  chart1: "#6FCF97",
+  chart2: "#8FE3B0",
+  chart3: "#9DB8A8",
+  chart4: "#2d4038",
+  chart5: "#354840",
+  radius: "0.5rem",
+};
+
+/**
+ * Optilogic Legacy Theme - Default theme
+ */
+export const OPTILOGIC_LEGACY_THEME: Theme = {
+  id: "optilogic-legacy",
+  name: "Optilogic Legacy",
+  description: "Classic Optilogic color scheme with blue accents",
+  author: "Optilogic",
+  background: "#FFFFFF",
+  foreground: "#0C0A5A",
+  card: "#F9F9F9",
+  cardForeground: "#0C0A5A",
+  popover: "#FFFFFF",
+  popoverForeground: "#0C0A5A",
+  primary: "#0C0A5A",
+  primaryForeground: "#FFFFFF",
+  accent: "#CFD4FB",
+  accentForeground: "#0C0A5A",
+  secondary: "#5766F2",
+  secondaryForeground: "#FFFFFF",
+  muted: "#E6EAF0",
+  mutedForeground: "#737272",
+  destructive: "#DB2828",
+  destructiveForeground: "#FFFFFF",
+  success: "#44BD7E",
+  successForeground: "#FFFFFF",
+  warning: "#F5CF47",
+  warningForeground: "#0C0A5A",
+  chip: "#B8C5F9",
+  chipForeground: "#0C0A5A",
+  border: "#D0D0D0",
+  input: "#FFFFFF",
+  ring: "#5766F2",
+  chart1: "#78D237",
+  chart2: "#F5CF47",
+  chart3: "#5766F2",
+  chart4: "#44BD7E",
+  chart5: "#929BEF",
+  radius: "0.5rem",
+};
+
+/**
+ * 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",
+  chart1: "#6366f1",
+  chart2: "#8b5cf6",
+  chart3: "#a855f7",
+  chart4: "#ec4899",
+  chart5: "#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",
+  chart1: "#4caf50",
+  chart2: "#66bb6a",
+  chart3: "#81c784",
+  chart4: "#a5d6a7",
+  chart5: "#c8e6c9",
+  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",
+  chart1: "#00d9ff",
+  chart2: "#ff00ff",
+  chart3: "#00ff88",
+  chart4: "#ffd93d",
+  chart5: "#58a6ff",
+  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",
+  chart1: "#2196f3",
+  chart2: "#00bcd4",
+  chart3: "#03a9f4",
+  chart4: "#0288d1",
+  chart5: "#0277bd",
+  radius: "0.5rem",
+};
+
+/**
+ * Sunset Theme - Warm oranges and purples
+ */
+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",
+  chart1: "#ff6b35",
+  chart2: "#c44569",
+  chart3: "#f7931e",
+  chart4: "#ffb703",
+  chart5: "#ff8c42",
+  radius: "0.5rem",
+};
+
+/**
+ * Forest Theme - Deep greens and browns
+ */
+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",
+  chart1: "#2e7d32",
+  chart2: "#388e3c",
+  chart3: "#43a047",
+  chart4: "#66bb6a",
+  chart5: "#81c784",
+  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",
+  chart1: "#ff00ff",
+  chart2: "#00ffff",
+  chart3: "#00ff88",
+  chart4: "#ffd700",
+  chart5: "#ff1744",
+  radius: "0.5rem",
+};
+
+/**
+ * Minimalist Light Theme - Clean and simple
+ */
+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: "#ffffff",
+  ring: "#000000",
+  chart1: "#000000",
+  chart2: "#6c757d",
+  chart3: "#adb5bd",
+  chart4: "#dee2e6",
+  chart5: "#e9ecef",
+  radius: "0.5rem",
+};
+
+/**
+ * Dark Elegant Theme - Sophisticated dark mode
+ */
+export const DARK_ELEGANT_THEME: Theme = {
+  id: "dark-elegant",
+  name: "Dark Elegant",
+  description: "Sophisticated dark mode with refined colors",
+  author: "Leapfrog",
+  background: "#121212",
+  foreground: "#e0e0e0",
+  card: "#1e1e1e",
+  cardForeground: "#e0e0e0",
+  popover: "#1e1e1e",
+  popoverForeground: "#e0e0e0",
+  primary: "#bb86fc",
+  primaryForeground: "#121212",
+  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",
+  chart1: "#bb86fc",
+  chart2: "#03dac6",
+  chart3: "#4caf50",
+  chart4: "#ff9800",
+  chart5: "#cf6679",
+  radius: "0.5rem",
+};
+
+/**
+ * All available preset themes
+ */
+export const PRESET_THEMES: Theme[] = [OPTILOGIC_LEGACY_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,
+];
+
+/**
+ * Get a preset theme by ID
+ */
+export function getPresetTheme(id: string): Theme | undefined {
+  return ALL_THEMES.find((theme) => theme.id === id);
+}
+
+/**
+ * Get the default theme (fallback)
+ */
+export function getDefaultTheme(): Theme {
+  return OPTILOGIC_LEGACY_THEME;
+}
+
+/**
+ * Check if a theme is a preset (not user-created)
+ */
+export function isPresetTheme(themeId: string): boolean {
+  return ALL_THEMES.some((theme) => theme.id === themeId);
+}

package/src/theme/types.ts

@@ -0,0 +1,164 @@
+/**
+ * Theme Types
+ *
+ * Type definitions for the JSON-based theme system.
+ * Ported from platform-leapfrog for consistent theming across projects.
+ */
+
+/**
+ * Theme interface mapping all color properties to CSS variables
+ */
+export interface Theme {
+  /** Theme metadata */
+  id: string;
+  name: string;
+  description?: string;
+  author?: string;
+
+  /** Base colors */
+  background: string; // --background
+  foreground: string; // --foreground
+
+  /** Surface colors */
+  card: string; // --card
+  cardForeground: string; // --card-foreground
+  popover: string; // --popover (bgElevated)
+  popoverForeground: string; // --popover-foreground
+
+  /** Accent & interactive colors */
+  primary: string; // --primary
+  primaryForeground: string; // --primary-foreground
+  accent: string; // --accent
+  accentForeground: string; // --accent-foreground
+
+  /** Secondary & utility colors */
+  secondary: string; // --secondary (gridHeader)
+  secondaryForeground: string; // --secondary-foreground
+  muted: string; // --muted (surfaceAlt)
+  mutedForeground: string; // --muted-foreground
+
+  /** State colors */
+  destructive: string; // --destructive (error)
+  destructiveForeground: string; // --destructive-foreground
+  success: string; // --success
+  successForeground: string; // --success-foreground
+  warning: string; // --warning
+  warningForeground: string; // --warning-foreground
+
+  /** Chip/badge colors */
+  chip: string; // --chip
+  chipForeground: string; // --chip-foreground
+
+  /** Borders & inputs */
+  border: string; // --border
+  input: string; // --input
+  ring: string; // --ring (focus ring)
+
+  /** Chart colors */
+  chart1: string; // --chart-1
+  chart2: string; // --chart-2
+  chart3: string; // --chart-3
+  chart4: string; // --chart-4
+  chart5: string; // --chart-5
+
+  /** Border radius */
+  radius?: string; // --radius (default: 0.5rem)
+}
+
+/**
+ * Theme with colors in hex format (for editing/display)
+ */
+export type ThemeHex = Theme;
+
+/**
+ * Theme with colors in HSL format (for CSS variables)
+ */
+export interface ThemeHSL extends Omit<Theme, keyof ThemeColorFields> {
+  id: string;
+  name: string;
+  description?: string;
+  author?: string;
+  radius?: string;
+
+  background: string;
+  foreground: string;
+  card: string;
+  cardForeground: string;
+  popover: string;
+  popoverForeground: string;
+  primary: string;
+  primaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  muted: string;
+  mutedForeground: string;
+  destructive: string;
+  destructiveForeground: string;
+  success: string;
+  successForeground: string;
+  warning: string;
+  warningForeground: string;
+  chip: string;
+  chipForeground: string;
+  border: string;
+  input: string;
+  ring: string;
+  chart1: string;
+  chart2: string;
+  chart3: string;
+  chart4: string;
+  chart5: string;
+}
+
+type ThemeColorFields = {
+  background: string;
+  foreground: string;
+  card: string;
+  cardForeground: string;
+  popover: string;
+  popoverForeground: string;
+  primary: string;
+  primaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  muted: string;
+  mutedForeground: string;
+  destructive: string;
+  destructiveForeground: string;
+  success: string;
+  successForeground: string;
+  warning: string;
+  warningForeground: string;
+  chip: string;
+  chipForeground: string;
+  border: string;
+  input: string;
+  ring: string;
+  chart1: string;
+  chart2: string;
+  chart3: string;
+  chart4: string;
+  chart5: string;
+};
+
+/**
+ * Color field configuration for editors
+ */
+export interface ColorFieldConfig {
+  key: keyof ThemeColorFields;
+  label: string;
+  description?: string;
+  group:
+    | "base"
+    | "surface"
+    | "accent"
+    | "secondary"
+    | "state"
+    | "chip"
+    | "border"
+    | "chart";
+}