@optilogic/core 1.0.0-beta.9 → 1.0.0

package/src/theme/presets.ts

@@ -40,11 +40,21 @@ export const GREEN_THEME: Theme = {
   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",
 };
 
@@ -79,13 +89,23 @@ export const OPTILOGIC_LEGACY_THEME: Theme = {
   chip: "#B8C5F9",
   chipForeground: "#0C0A5A",
   border: "#D0D0D0",
-  input: "#FFFFFF",
+  input: "#D0D0D0",
   ring: "#5766F2",
+  toggleTrack: "#D0D0D0",
+  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",
   radius: "0.5rem",
 };
 
@@ -122,11 +142,21 @@ export const FUTURISTIC_THEME: Theme = {
   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",
 };
 
@@ -163,11 +193,21 @@ export const NATURE_THEME: Theme = {
   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",
 };
 
@@ -204,11 +244,21 @@ export const SCIFI_THEME: Theme = {
   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",
 };
 
@@ -245,11 +295,21 @@ export const OCEAN_THEME: Theme = {
   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",
 };
 
@@ -286,11 +346,21 @@ export const SUNSET_THEME: Theme = {
   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",
   radius: "0.5rem",
 };
 
@@ -327,11 +397,21 @@ export const FOREST_THEME: Theme = {
   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",
   radius: "0.5rem",
 };
 
@@ -368,11 +448,21 @@ export const CYBERPUNK_THEME: Theme = {
   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",
 };
 
@@ -407,13 +497,23 @@ export const MINIMALIST_LIGHT_THEME: Theme = {
   chip: "#e9ecef",
   chipForeground: "#495057",
   border: "#dee2e6",
-  input: "#ffffff",
+  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",
   radius: "0.5rem",
 };
 
@@ -450,11 +550,21 @@ export const DARK_ELEGANT_THEME: Theme = {
   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",
   radius: "0.5rem",
 };
 

package/src/theme/types.ts

@@ -54,12 +54,27 @@ export interface Theme {
   input: string; // --input
   ring: string; // --ring (focus ring)
 
+  /** Interactive control colors (optional, with fallbacks) */
+  toggleTrack?: string; // --toggle-track (switch track bg when off; fallback: muted)
+  toggleTrackForeground?: string; // --toggle-track-foreground (switch thumb when off; fallback: background)
+  inputHover?: string; // --input-hover (form control border on hover; fallback: derived)
+
   /** Chart colors */
   chart1: string; // --chart-1
   chart2: string; // --chart-2
   chart3: string; // --chart-3
   chart4: string; // --chart-4
   chart5: string; // --chart-5
+  chart6: string; // --chart-6
+  chart7: string; // --chart-7
+  chart8: string; // --chart-8
+  chart9: string; // --chart-9
+  chart10: string; // --chart-10
+  chart11: string; // --chart-11
+  chart12: string; // --chart-12
+
+  /** Disabled state */
+  disabledOpacity?: string; // --disabled-opacity (default: 0.5)
 
   /** Border radius */
   radius?: string; // --radius (default: 0.5rem)
@@ -105,11 +120,21 @@ export interface ThemeHSL extends Omit<Theme, keyof ThemeColorFields> {
   border: string;
   input: string;
   ring: string;
+  toggleTrack?: string;
+  toggleTrackForeground?: string;
+  inputHover?: string;
   chart1: string;
   chart2: string;
   chart3: string;
   chart4: string;
   chart5: string;
+  chart6: string;
+  chart7: string;
+  chart8: string;
+  chart9: string;
+  chart10: string;
+  chart11: string;
+  chart12: string;
 }
 
 type ThemeColorFields = {
@@ -138,11 +163,21 @@ type ThemeColorFields = {
   border: string;
   input: string;
   ring: string;
+  toggleTrack?: string;
+  toggleTrackForeground?: string;
+  inputHover?: string;
   chart1: string;
   chart2: string;
   chart3: string;
   chart4: string;
   chart5: string;
+  chart6: string;
+  chart7: string;
+  chart8: string;
+  chart9: string;
+  chart10: string;
+  chart11: string;
+  chart12: string;
 };
 
 /**

package/src/theme/utils.ts

@@ -85,14 +85,40 @@ export function themeToHsl(theme: Theme): ThemeHSL {
     border: hexToHsl(theme.border),
     input: hexToHsl(theme.input),
     ring: hexToHsl(theme.ring),
+    toggleTrack: theme.toggleTrack ? hexToHsl(theme.toggleTrack) : undefined,
+    toggleTrackForeground: theme.toggleTrackForeground
+      ? hexToHsl(theme.toggleTrackForeground)
+      : undefined,
+    inputHover: theme.inputHover ? hexToHsl(theme.inputHover) : undefined,
     chart1: hexToHsl(theme.chart1),
     chart2: hexToHsl(theme.chart2),
     chart3: hexToHsl(theme.chart3),
     chart4: hexToHsl(theme.chart4),
     chart5: hexToHsl(theme.chart5),
+    chart6: hexToHsl(theme.chart6),
+    chart7: hexToHsl(theme.chart7),
+    chart8: hexToHsl(theme.chart8),
+    chart9: hexToHsl(theme.chart9),
+    chart10: hexToHsl(theme.chart10),
+    chart11: hexToHsl(theme.chart11),
+    chart12: hexToHsl(theme.chart12),
   };
 }
 
+/**
+ * Derive an input hover border color from the theme's HSL values.
+ * Blends toward the foreground for a subtle but visible hover effect.
+ */
+function deriveInputHoverHsl(hslTheme: ThemeHSL): string {
+  const parts = hslTheme.foreground.split(/\s+/);
+  if (parts.length >= 3) {
+    const h = parts[0];
+    const s = parts[1];
+    return `${h} ${s} 50%`;
+  }
+  return hslTheme.foreground;
+}
+
 /**
  * Apply a theme to the DOM
  *
@@ -135,11 +161,37 @@ export function applyTheme(theme: Theme, targetElement?: HTMLElement): void {
   element.style.setProperty("--border", hslTheme.border);
   element.style.setProperty("--input", hslTheme.input);
   element.style.setProperty("--ring", hslTheme.ring);
+
+  // Interactive control tokens (with fallbacks)
+  element.style.setProperty(
+    "--toggle-track",
+    hslTheme.toggleTrack ?? hslTheme.muted
+  );
+  element.style.setProperty(
+    "--toggle-track-foreground",
+    hslTheme.toggleTrackForeground ?? hslTheme.background
+  );
+  element.style.setProperty(
+    "--input-hover",
+    hslTheme.inputHover ?? deriveInputHoverHsl(hslTheme)
+  );
+
   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);
+  element.style.setProperty("--chart-6", hslTheme.chart6);
+  element.style.setProperty("--chart-7", hslTheme.chart7);
+  element.style.setProperty("--chart-8", hslTheme.chart8);
+  element.style.setProperty("--chart-9", hslTheme.chart9);
+  element.style.setProperty("--chart-10", hslTheme.chart10);
+  element.style.setProperty("--chart-11", hslTheme.chart11);
+  element.style.setProperty("--chart-12", hslTheme.chart12);
+
+  if (theme.disabledOpacity) {
+    element.style.setProperty("--disabled-opacity", theme.disabledOpacity);
+  }
 
   if (theme.radius) {
     element.style.setProperty("--radius", theme.radius);
@@ -195,6 +247,13 @@ export function validateTheme(theme: unknown): theme is Theme {
     "chart3",
     "chart4",
     "chart5",
+    "chart6",
+    "chart7",
+    "chart8",
+    "chart9",
+    "chart10",
+    "chart11",
+    "chart12",
   ];
 
   for (const field of requiredFields) {
@@ -254,11 +313,21 @@ export function areThemesEqual(theme1: Theme, theme2: Theme): boolean {
     "border",
     "input",
     "ring",
+    "toggleTrack",
+    "toggleTrackForeground",
+    "inputHover",
     "chart1",
     "chart2",
     "chart3",
     "chart4",
     "chart5",
+    "chart6",
+    "chart7",
+    "chart8",
+    "chart9",
+    "chart10",
+    "chart11",
+    "chart12",
   ];
 
   for (const field of colorFields) {
@@ -307,3 +376,165 @@ export function importTheme(jsonString: string): {
     };
   }
 }
+
+// ---------------------------------------------------------------------------
+// Contrast validation utilities
+// ---------------------------------------------------------------------------
+
+/**
+ * Parse a hex color string into linear-light sRGB components (0-1).
+ */
+function hexToLinearRgb(hex: string): [number, number, number] {
+  hex = hex.replace(/^#/, "");
+  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 toLinear = (c: number) =>
+    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+
+  return [toLinear(r), toLinear(g), toLinear(b)];
+}
+
+/**
+ * Calculate WCAG 2.x relative luminance for a hex color.
+ * @see https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+ */
+export function getRelativeLuminance(hex: string): number {
+  const [r, g, b] = hexToLinearRgb(hex);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/**
+ * Calculate the WCAG contrast ratio between two hex colors.
+ * Returns a value >= 1, where 1 means no contrast and 21 is maximum.
+ * @see https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
+ */
+export function getContrastRatio(hex1: string, hex2: string): number {
+  const l1 = getRelativeLuminance(hex1);
+  const l2 = getRelativeLuminance(hex2);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+export interface ContrastWarning {
+  pair: [string, string];
+  pairLabels: [string, string];
+  ratio: number;
+  required: number;
+  level: "fail" | "AA-large" | "AA";
+}
+
+/**
+ * Validate contrast ratios for critical color pairs in a theme.
+ *
+ * WCAG 2.1 requirements:
+ * - **3:1** minimum for UI components and large text (AA)
+ * - **4.5:1** minimum for normal text (AA)
+ *
+ * Returns an array of warnings for pairs that fall below the recommended
+ * minimums. An empty array means all checked pairs pass.
+ */
+export function validateThemeContrast(theme: Theme): ContrastWarning[] {
+  const warnings: ContrastWarning[] = [];
+
+  const uiPairs: {
+    a: string;
+    b: string;
+    labelA: string;
+    labelB: string;
+    minRatio: number;
+  }[] = [
+    // Text on background
+    {
+      a: theme.foreground,
+      b: theme.background,
+      labelA: "foreground",
+      labelB: "background",
+      minRatio: 4.5,
+    },
+    // Primary button text on primary bg
+    {
+      a: theme.primaryForeground,
+      b: theme.primary,
+      labelA: "primaryForeground",
+      labelB: "primary",
+      minRatio: 4.5,
+    },
+    // Accent foreground on accent
+    {
+      a: theme.accentForeground,
+      b: theme.accent,
+      labelA: "accentForeground",
+      labelB: "accent",
+      minRatio: 4.5,
+    },
+    // Input border vs background (UI component boundary — 3:1)
+    {
+      a: theme.input,
+      b: theme.background,
+      labelA: "input",
+      labelB: "background",
+      minRatio: 3,
+    },
+    // Toggle track vs background (UI component — 3:1)
+    {
+      a: theme.toggleTrack ?? theme.muted,
+      b: theme.background,
+      labelA: "toggleTrack",
+      labelB: "background",
+      minRatio: 3,
+    },
+    // Toggle thumb vs track (UI component — 3:1)
+    {
+      a: theme.toggleTrackForeground ?? theme.background,
+      b: theme.toggleTrack ?? theme.muted,
+      labelA: "toggleTrackForeground",
+      labelB: "toggleTrack",
+      minRatio: 3,
+    },
+    // Border vs background (UI component boundary — 3:1)
+    {
+      a: theme.border,
+      b: theme.background,
+      labelA: "border",
+      labelB: "background",
+      minRatio: 3,
+    },
+    // Muted foreground on muted bg
+    {
+      a: theme.mutedForeground,
+      b: theme.muted,
+      labelA: "mutedForeground",
+      labelB: "muted",
+      minRatio: 4.5,
+    },
+    // Destructive foreground on destructive bg
+    {
+      a: theme.destructiveForeground,
+      b: theme.destructive,
+      labelA: "destructiveForeground",
+      labelB: "destructive",
+      minRatio: 4.5,
+    },
+  ];
+
+  for (const { a, b, labelA, labelB, minRatio } of uiPairs) {
+    const ratio = getContrastRatio(a, b);
+    if (ratio < minRatio) {
+      let level: ContrastWarning["level"] = "fail";
+      if (ratio >= 3) level = "AA-large";
+
+      warnings.push({
+        pair: [a, b],
+        pairLabels: [labelA, labelB],
+        ratio: Math.round(ratio * 100) / 100,
+        required: minRatio,
+        level,
+      });
+    }
+  }
+
+  return warnings;
+}