@optilogic/core 1.5.0 → 1.6.0

package/src/theme/presets.ts

@@ -8,116 +8,130 @@
 import type { Theme } from "./types";
 
 /**
- * Optilogic Legacy Theme - Default light theme
+ * Optilogic Light Theme - Default light theme
  *
- * Classic Optilogic branding with deep blue (#0C0A5A) primary.
+ * The current Optilogic light theme, synced from platform-leapfrog. Indigo
+ * (#5766F2) primary on a soft lavender-white surface.
  */
-export const OPTILOGIC_LEGACY_THEME: Theme = {
-  id: "optilogic-legacy",
-  name: "Optilogic Legacy",
-  description: "Classic Optilogic color scheme with blue accents",
+export const OPTILOGIC_LIGHT_THEME: Theme = {
+  id: "optilogic-light",
+  name: "Optilogic Light",
+  description: "The default Optilogic light theme",
   author: "Optilogic",
-  background: "#FFFFFF",
-  foreground: "#0C0A5A",
-  card: "#F9F9F9",
-  cardForeground: "#0C0A5A",
-  popover: "#FFFFFF",
-  popoverForeground: "#0C0A5A",
-  primary: "#0C0A5A",
-  primaryForeground: "#FFFFFF",
-  accent: "#CFD4FB",
+  background: "#F3F4FF",
+  foreground: "#000000",
+  card: "#EDEEFF",
+  cardForeground: "#000000",
+  popover: "#EDEEFF",
+  popoverForeground: "#000000",
+  primary: "#5766F2",
+  primaryForeground: "#000000",
+  primaryHover: "#4555E0",
+  accent: "#929BEF",
   accentForeground: "#0C0A5A",
-  secondary: "#5766F2",
-  secondaryForeground: "#FFFFFF",
-  muted: "#E6EAF0",
-  mutedForeground: "#737272",
-  destructive: "#DB2828",
+  secondary: "#CFD4FB",
+  secondaryForeground: "#000000",
+  muted: "#E8ECFF",
+  mutedForeground: "#2E2D5E",
+  destructive: "#DC2626",
   destructiveForeground: "#FFFFFF",
-  success: "#44BD7E",
-  successForeground: "#FFFFFF",
-  warning: "#F5CF47",
-  warningForeground: "#0C0A5A",
-  chip: "#B8C5F9",
-  chipForeground: "#0C0A5A",
-  border: "#D0D0D0",
-  input: "#D0D0D0",
+  success: "#929BEF",
+  successForeground: "#0C0A5A",
+  warning: "#B45309",
+  warningForeground: "#FFFFFF",
+  chip: "#5766F2",
+  chipForeground: "#FFFFFF",
+  border: "#C8CEFF",
+  input: "#C8CEFF",
   ring: "#5766F2",
-  popoverBorder: "#D0D0D0",
-  divider: "#D0D0D0",
-  toggleTrack: "#D0D0D0",
+  popoverBorder: "#C8CEFF",
+  divider: "#B8BEE0",
+  toggleTrack: "#929BEF",
   toggleTrackForeground: "#FFFFFF",
   inputHover: "#5766F2",
-  chart1: "#78D237",
-  chart2: "#F5CF47",
-  chart3: "#5766F2",
-  chart4: "#44BD7E",
-  chart5: "#929BEF",
-  chart6: "#DB2828",
-  chart7: "#E07B39",
-  chart8: "#2BBBAD",
-  chart9: "#A5673F",
-  chart10: "#00B5AD",
-  chart11: "#6435C9",
-  chart12: "#E03997",
+  chart1: "#5766F2",
+  chart2: "#929BEF",
+  chart3: "#CFD4FB",
+  chart4: "#0C0A5A",
+  chart5: "#B45309",
+  chart6: "#DC2626",
+  chart7: "#A855F7",
+  chart8: "#EC4899",
+  chart9: "#55548C",
+  chart10: "#0C0A5A",
+  chart11: "#C05621",
+  chart12: "#06B6D4",
   radius: "0.5rem",
+  brandGradientFrom: "#1A7B4A",
+  brandGradientTo: "#72DA60",
 };
 
 /**
- * Optilogic Dark Theme - Branded dark mode
+ * Optilogic Dark Theme - Default dark mode
  *
- * Uses Optilogic marketing site colors for a branded dark experience.
- * Primary palette: deep teal background with signature neon green accent.
+ * The current Optilogic dark theme, synced from platform-leapfrog. Indigo
+ * primary on a deep navy surface.
  */
 export const OPTILOGIC_DARK_THEME: Theme = {
   id: "optilogic-dark",
   name: "Optilogic Dark",
-  description: "Optilogic branded dark theme with signature green",
+  description: "The default Optilogic dark theme",
   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",
+  background: "#141826",
+  foreground: "#E8EAF0",
+  card: "#2D3252",
+  cardForeground: "#E8EAF0",
+  popover: "#2D3252",
+  popoverForeground: "#E8EAF0",
+  primary: "#5766F2",
+  primaryForeground: "#FFFFFF",
+  primaryHover: "#7B8FF7",
+  accent: "#5766F2",
+  accentForeground: "#FFFFFF",
+  accentHover: "#7B8FF7",
+  secondary: "#2D3252",
+  secondaryForeground: "#E8EAF0",
+  muted: "#2D3252",
+  mutedForeground: "#C5C9D4",
   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",
+  success: "#22C55E",
+  successForeground: "#141826",
+  warning: "#F59E0B",
+  warningForeground: "#141826",
+  chip: "#5766F2",
+  chipForeground: "#FFFFFF",
+  border: "#3A3F5C",
+  input: "#2D3252",
+  ring: "#7B8FF7",
+  popoverBorder: "#3A3F5C",
+  divider: "#363B5C",
+  toggleTrack: "#4A5068",
+  toggleTrackForeground: "#141826",
+  inputHover: "#7B8FF7",
+  chart1: "#7B8FF7",
+  chart2: "#5766F2",
+  chart3: "#22D3EE",
+  chart4: "#22C55E",
+  chart5: "#F59E0B",
   chart6: "#EF4444",
-  chart7: "#06B6D4",
+  chart7: "#A855F7",
   chart8: "#EC4899",
-  chart9: "#84CC16",
+  chart9: "#C5C9D4",
   chart10: "#14B8A6",
-  chart11: "#F59E0B",
-  chart12: "#8B5CF6",
+  chart11: "#FB923C",
+  chart12: "#60A5FA",
   radius: "0.5rem",
+  brandGradientFrom: "#1A7B4A",
+  brandGradientTo: "#50FFA7",
 };
 
+/**
+ * @deprecated Use OPTILOGIC_LIGHT_THEME. Retained so existing imports resolve;
+ * now points at the current Optilogic Light theme.
+ */
+export const OPTILOGIC_LEGACY_THEME = OPTILOGIC_LIGHT_THEME;
+
 /**
  * Modern Light Theme - Clean, readable light mode
  *
@@ -289,14 +303,64 @@ export const DARK_ELEGANT_THEME: Theme = {
 };
 
 /**
- * All available preset themes
+ * Green Theme - Natural, earthy greens
+ *
+ * Synced from platform-leapfrog. Soft green primary on deep forest surfaces.
+ */
+export const GREEN_THEME: Theme = {
+  id: "green-theme",
+  name: "Green Theme",
+  description: "A green theme with natural, earthy tones",
+  author: "Optilogic",
+  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",
+  chart6: "#EB5757",
+  chart7: "#F2C94C",
+  chart8: "#56CCF2",
+  chart9: "#BB6BD9",
+  chart10: "#4ECDC4",
+  chart11: "#A8D8B9",
+  chart12: "#E07B39",
+  radius: "0.5rem",
+};
+
+/**
+ * All available preset themes (shown in the theme picker).
  */
 export const PRESET_THEMES: Theme[] = [
-  OPTILOGIC_LEGACY_THEME,
+  OPTILOGIC_LIGHT_THEME,
   OPTILOGIC_DARK_THEME,
   MODERN_LIGHT_THEME,
   MODERN_DARK_THEME,
-  DARK_ELEGANT_THEME,
+  GREEN_THEME,
 ];
 
 /**
@@ -305,22 +369,33 @@ export const PRESET_THEMES: Theme[] = [
 export const ALL_THEMES: Theme[] = PRESET_THEMES;
 
 /**
- * Get a preset theme by ID
+ * Retired preset IDs mapped to their current replacement, so themes saved
+ * under an old ID (e.g. in localStorage) resolve to a shipping preset.
+ */
+export const LEGACY_THEME_ID_MAP: Record<string, string> = {
+  "optilogic-legacy": OPTILOGIC_LIGHT_THEME.id,
+  "dark-elegant": OPTILOGIC_DARK_THEME.id,
+};
+
+/**
+ * Get a preset theme by ID, transparently resolving retired IDs.
  */
 export function getPresetTheme(id: string): Theme | undefined {
-  return ALL_THEMES.find((theme) => theme.id === id);
+  const resolvedId = LEGACY_THEME_ID_MAP[id] ?? id;
+  return ALL_THEMES.find((theme) => theme.id === resolvedId);
 }
 
 /**
  * Get the default theme (fallback)
  */
 export function getDefaultTheme(): Theme {
-  return OPTILOGIC_LEGACY_THEME;
+  return OPTILOGIC_LIGHT_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);
+  const resolvedId = LEGACY_THEME_ID_MAP[themeId] ?? themeId;
+  return ALL_THEMES.some((theme) => theme.id === resolvedId);
 }

package/src/theme/types.ts

@@ -54,6 +54,14 @@ export interface Theme {
   input: string; // --input
   ring: string; // --ring (focus ring)
 
+  /** Hover states (optional, with fallbacks) */
+  primaryHover?: string; // --primary-hover (primary control hover; fallback: primary)
+  accentHover?: string; // --accent-hover (accent surface hover; fallback: derived from card+accent)
+
+  /** Brand identity gradient (optional, with fallbacks) */
+  brandGradientFrom?: string; // --brand-from (fallback: primary)
+  brandGradientTo?: string; // --brand-to (fallback: chart-2)
+
   /** Elevated surface border (optional, with fallback) */
   popoverBorder?: string; // --popover-border (floating surface border; fallback: border)
 

package/src/theme/utils.ts

@@ -110,6 +110,28 @@ export function themeToHsl(theme: Theme): ThemeHSL {
   };
 }
 
+/**
+ * Blend two hex colors by `amount` (0..1). Used to derive --accent-hover and
+ * --accent-active when a theme doesn't specify them explicitly, so theme
+ * switches always refresh those vars from the current card+accent pair.
+ */
+function blendHex(base: string, blend: string, amount: number): string {
+  const a = base.replace(/^#/, "");
+  const b = blend.replace(/^#/, "");
+  const ar = parseInt(a.substring(0, 2), 16);
+  const ag = parseInt(a.substring(2, 4), 16);
+  const ab = parseInt(a.substring(4, 6), 16);
+  const br = parseInt(b.substring(0, 2), 16);
+  const bg = parseInt(b.substring(2, 4), 16);
+  const bb = parseInt(b.substring(4, 6), 16);
+  const r = Math.round(ar + (br - ar) * amount);
+  const g = Math.round(ag + (bg - ag) * amount);
+  const bl = Math.round(ab + (bb - ab) * amount);
+  const hex = (v: number) =>
+    Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0");
+  return "#" + hex(r) + hex(g) + hex(bl);
+}
+
 /**
  * Derive an input hover border color from the theme's HSL values.
  * Blends toward the foreground for a subtle but visible hover effect.
@@ -219,6 +241,37 @@ export function applyTheme(theme: Theme, targetElement?: HTMLElement): void {
     `${hslTheme.hover ?? deriveHoverChannels(theme, hslTheme)} / 0.18`
   );
 
+  // Hover-state tokens (optional, with fallbacks).
+  // --primary-hover: explicit value, else falls back to --primary via styles.css.
+  if (theme.primaryHover) {
+    element.style.setProperty("--primary-hover", hexToHsl(theme.primaryHover));
+  } else {
+    element.style.removeProperty("--primary-hover");
+  }
+  // --accent-hover / --accent-active: always re-derived from the current
+  // card+accent (explicit accentHover wins) so theme switches refresh them.
+  if (theme.card && theme.accent) {
+    const accentHover = theme.accentHover
+      ? theme.accentHover
+      : blendHex(theme.card, theme.accent, 0.08);
+    const accentActive = blendHex(theme.card, theme.accent, 0.15);
+    element.style.setProperty("--accent-hover", hexToHsl(accentHover));
+    element.style.setProperty("--accent-active", hexToHsl(accentActive));
+  }
+
+  // Brand identity gradient (optional). When unset, removeProperty lets the
+  // styles.css :root fallback (primary → chart-2) take over.
+  if (theme.brandGradientFrom) {
+    element.style.setProperty("--brand-from", hexToHsl(theme.brandGradientFrom));
+  } else {
+    element.style.removeProperty("--brand-from");
+  }
+  if (theme.brandGradientTo) {
+    element.style.setProperty("--brand-to", hexToHsl(theme.brandGradientTo));
+  } else {
+    element.style.removeProperty("--brand-to");
+  }
+
   element.style.setProperty("--chart-1", hslTheme.chart1);
   element.style.setProperty("--chart-2", hslTheme.chart2);
   element.style.setProperty("--chart-3", hslTheme.chart3);
@@ -362,6 +415,10 @@ export function areThemesEqual(theme1: Theme, theme2: Theme): boolean {
     "toggleTrackForeground",
     "inputHover",
     "hover",
+    "primaryHover",
+    "accentHover",
+    "brandGradientFrom",
+    "brandGradientTo",
     "chart1",
     "chart2",
     "chart3",