@optilogic/core 1.0.0-beta.0

package/src/theme/utils.ts

@@ -0,0 +1,309 @@
+/**
+ * Theme Utilities
+ *
+ * Functions for theme conversion and application.
+ * Ported from platform-leapfrog for consistent theming.
+ */
+
+import type { Theme, ThemeHSL } from "./types";
+import { getDefaultTheme } from "./presets";
+
+// Re-export for convenience
+export type { Theme };
+
+/**
+ * Convert hex color to HSL format for CSS variables
+ */
+export function hexToHsl(hex: string): string {
+  // Remove # if present
+  hex = hex.replace(/^#/, "");
+
+  // Parse hex values
+  const r = parseInt(hex.substring(0, 2), 16) / 255;
+  const g = parseInt(hex.substring(2, 4), 16) / 255;
+  const b = parseInt(hex.substring(4, 6), 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+
+  // Convert to degrees and percentages
+  const hDeg = Math.round(h * 360);
+  const sPercent = Math.round(s * 100);
+  const lPercent = Math.round(l * 100);
+
+  return `${hDeg} ${sPercent}% ${lPercent}%`;
+}
+
+/**
+ * Convert hex theme to HSL theme
+ */
+export function themeToHsl(theme: Theme): ThemeHSL {
+  return {
+    ...theme,
+    background: hexToHsl(theme.background),
+    foreground: hexToHsl(theme.foreground),
+    card: hexToHsl(theme.card),
+    cardForeground: hexToHsl(theme.cardForeground),
+    popover: hexToHsl(theme.popover),
+    popoverForeground: hexToHsl(theme.popoverForeground),
+    primary: hexToHsl(theme.primary),
+    primaryForeground: hexToHsl(theme.primaryForeground),
+    accent: hexToHsl(theme.accent),
+    accentForeground: hexToHsl(theme.accentForeground),
+    secondary: hexToHsl(theme.secondary),
+    secondaryForeground: hexToHsl(theme.secondaryForeground),
+    muted: hexToHsl(theme.muted),
+    mutedForeground: hexToHsl(theme.mutedForeground),
+    destructive: hexToHsl(theme.destructive),
+    destructiveForeground: hexToHsl(theme.destructiveForeground),
+    success: hexToHsl(theme.success),
+    successForeground: hexToHsl(theme.successForeground),
+    warning: hexToHsl(theme.warning),
+    warningForeground: hexToHsl(theme.warningForeground),
+    chip: hexToHsl(theme.chip),
+    chipForeground: hexToHsl(theme.chipForeground),
+    border: hexToHsl(theme.border),
+    input: hexToHsl(theme.input),
+    ring: hexToHsl(theme.ring),
+    chart1: hexToHsl(theme.chart1),
+    chart2: hexToHsl(theme.chart2),
+    chart3: hexToHsl(theme.chart3),
+    chart4: hexToHsl(theme.chart4),
+    chart5: hexToHsl(theme.chart5),
+  };
+}
+
+/**
+ * Apply a theme to the DOM
+ *
+ * @param theme - The theme to apply
+ * @param targetElement - Optional element to apply theme to (defaults to document.documentElement)
+ */
+export function applyTheme(theme: Theme, targetElement?: HTMLElement): void {
+  const element = targetElement || document.documentElement;
+  const hslTheme = themeToHsl(theme);
+
+  // Set CSS variables as inline styles
+  element.style.setProperty("--background", hslTheme.background);
+  element.style.setProperty("--foreground", hslTheme.foreground);
+  element.style.setProperty("--card", hslTheme.card);
+  element.style.setProperty("--card-foreground", hslTheme.cardForeground);
+  element.style.setProperty("--popover", hslTheme.popover);
+  element.style.setProperty("--popover-foreground", hslTheme.popoverForeground);
+  element.style.setProperty("--primary", hslTheme.primary);
+  element.style.setProperty("--primary-foreground", hslTheme.primaryForeground);
+  element.style.setProperty("--accent", hslTheme.accent);
+  element.style.setProperty("--accent-foreground", hslTheme.accentForeground);
+  element.style.setProperty("--secondary", hslTheme.secondary);
+  element.style.setProperty(
+    "--secondary-foreground",
+    hslTheme.secondaryForeground
+  );
+  element.style.setProperty("--muted", hslTheme.muted);
+  element.style.setProperty("--muted-foreground", hslTheme.mutedForeground);
+  element.style.setProperty("--destructive", hslTheme.destructive);
+  element.style.setProperty(
+    "--destructive-foreground",
+    hslTheme.destructiveForeground
+  );
+  element.style.setProperty("--success", hslTheme.success);
+  element.style.setProperty("--success-foreground", hslTheme.successForeground);
+  element.style.setProperty("--warning", hslTheme.warning);
+  element.style.setProperty("--warning-foreground", hslTheme.warningForeground);
+  element.style.setProperty("--chip", hslTheme.chip);
+  element.style.setProperty("--chip-foreground", hslTheme.chipForeground);
+  element.style.setProperty("--border", hslTheme.border);
+  element.style.setProperty("--input", hslTheme.input);
+  element.style.setProperty("--ring", hslTheme.ring);
+  element.style.setProperty("--chart-1", hslTheme.chart1);
+  element.style.setProperty("--chart-2", hslTheme.chart2);
+  element.style.setProperty("--chart-3", hslTheme.chart3);
+  element.style.setProperty("--chart-4", hslTheme.chart4);
+  element.style.setProperty("--chart-5", hslTheme.chart5);
+
+  if (theme.radius) {
+    element.style.setProperty("--radius", theme.radius);
+  }
+}
+
+/**
+ * Get the currently active theme (uses default)
+ */
+export function getCurrentTheme(): Theme {
+  return getDefaultTheme();
+}
+
+/**
+ * Validate theme object structure
+ */
+export function validateTheme(theme: unknown): theme is Theme {
+  if (!theme || typeof theme !== "object") return false;
+
+  const t = theme as Record<string, unknown>;
+
+  // Check required fields
+  const requiredFields: string[] = [
+    "id",
+    "name",
+    "background",
+    "foreground",
+    "card",
+    "cardForeground",
+    "popover",
+    "popoverForeground",
+    "primary",
+    "primaryForeground",
+    "accent",
+    "accentForeground",
+    "secondary",
+    "secondaryForeground",
+    "muted",
+    "mutedForeground",
+    "destructive",
+    "destructiveForeground",
+    "success",
+    "successForeground",
+    "warning",
+    "warningForeground",
+    "chip",
+    "chipForeground",
+    "border",
+    "input",
+    "ring",
+    "chart1",
+    "chart2",
+    "chart3",
+    "chart4",
+    "chart5",
+  ];
+
+  for (const field of requiredFields) {
+    if (!(field in t)) {
+      console.error(`Theme validation failed: missing field "${field}"`);
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Clone a theme (for editing)
+ */
+export function cloneTheme(theme: Theme, newName?: string): Theme {
+  return {
+    ...theme,
+    id: `custom-${Date.now()}`,
+    name: newName || `${theme.name} - copy`,
+    author: "Custom",
+  };
+}
+
+/**
+ * Deep comparison of two themes
+ */
+export function areThemesEqual(theme1: Theme, theme2: Theme): boolean {
+  if (!theme1 || !theme2) return false;
+
+  if (theme1.name !== theme2.name) return false;
+  if (theme1.description !== theme2.description) return false;
+
+  const colorFields: (keyof Theme)[] = [
+    "background",
+    "foreground",
+    "card",
+    "cardForeground",
+    "popover",
+    "popoverForeground",
+    "primary",
+    "primaryForeground",
+    "accent",
+    "accentForeground",
+    "secondary",
+    "secondaryForeground",
+    "muted",
+    "mutedForeground",
+    "destructive",
+    "destructiveForeground",
+    "success",
+    "successForeground",
+    "warning",
+    "warningForeground",
+    "chip",
+    "chipForeground",
+    "border",
+    "input",
+    "ring",
+    "chart1",
+    "chart2",
+    "chart3",
+    "chart4",
+    "chart5",
+  ];
+
+  for (const field of colorFields) {
+    if (theme1[field] !== theme2[field]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Export theme as JSON string
+ */
+export function exportTheme(theme: Theme): string {
+  return JSON.stringify(theme, null, 2);
+}
+
+/**
+ * Import theme from JSON string
+ */
+export function importTheme(jsonString: string): {
+  success: boolean;
+  theme?: Theme;
+  error?: string;
+} {
+  try {
+    const theme = JSON.parse(jsonString);
+
+    if (!validateTheme(theme)) {
+      return {
+        success: false,
+        error:
+          "Invalid theme format. Please check that all required fields are present.",
+      };
+    }
+
+    return {
+      success: true,
+      theme,
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "Failed to parse JSON",
+    };
+  }
+}

package/src/utils/cn.ts

@@ -0,0 +1,14 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Utility function to merge Tailwind CSS classes with proper precedence.
+ * Combines clsx for conditional classes with tailwind-merge for deduplication.
+ *
+ * @example
+ * cn("px-4 py-2", "px-6") // => "py-2 px-6"
+ * cn("text-red-500", isActive && "text-blue-500") // => conditional
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}