@optilogic/core 1.0.0-beta.17 → 1.0.0-beta.18

package/src/theme/presets.ts

@@ -40,6 +40,9 @@ export const GREEN_THEME: Theme = {
   border: "#243630",
   input: "#243630",
   ring: "#6FCF97",
+  toggleTrack: "#354840",
+  toggleTrackForeground: "#E6F5EC",
+  inputHover: "#6FCF97",
   chart1: "#6FCF97",
   chart2: "#8FE3B0",
   chart3: "#9DB8A8",
@@ -79,8 +82,11 @@ 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",
@@ -122,6 +128,9 @@ export const FUTURISTIC_THEME: Theme = {
   border: "#1e293b",
   input: "#1e293b",
   ring: "#6366f1",
+  toggleTrack: "#334155",
+  toggleTrackForeground: "#e0e7ff",
+  inputHover: "#6366f1",
   chart1: "#6366f1",
   chart2: "#8b5cf6",
   chart3: "#a855f7",
@@ -163,6 +172,9 @@ export const NATURE_THEME: Theme = {
   border: "#243824",
   input: "#243824",
   ring: "#4caf50",
+  toggleTrack: "#3d5a3d",
+  toggleTrackForeground: "#e8f5e9",
+  inputHover: "#4caf50",
   chart1: "#4caf50",
   chart2: "#66bb6a",
   chart3: "#81c784",
@@ -204,6 +216,9 @@ export const SCIFI_THEME: Theme = {
   border: "#30363d",
   input: "#21262d",
   ring: "#00d9ff",
+  toggleTrack: "#30363d",
+  toggleTrackForeground: "#c9d1d9",
+  inputHover: "#00d9ff",
   chart1: "#00d9ff",
   chart2: "#ff00ff",
   chart3: "#00ff88",
@@ -245,6 +260,9 @@ export const OCEAN_THEME: Theme = {
   border: "#1e3a5f",
   input: "#1e3a5f",
   ring: "#2196f3",
+  toggleTrack: "#264a6e",
+  toggleTrackForeground: "#e3f2fd",
+  inputHover: "#2196f3",
   chart1: "#2196f3",
   chart2: "#00bcd4",
   chart3: "#03a9f4",
@@ -286,6 +304,9 @@ export const SUNSET_THEME: Theme = {
   border: "#241424",
   input: "#241424",
   ring: "#ff6b35",
+  toggleTrack: "#3d2a3d",
+  toggleTrackForeground: "#ffe0e6",
+  inputHover: "#ff6b35",
   chart1: "#ff6b35",
   chart2: "#c44569",
   chart3: "#f7931e",
@@ -327,6 +348,9 @@ export const FOREST_THEME: Theme = {
   border: "#1b5e20",
   input: "#1a2e1a",
   ring: "#2e7d32",
+  toggleTrack: "#2d4a2d",
+  toggleTrackForeground: "#e8f5e9",
+  inputHover: "#2e7d32",
   chart1: "#2e7d32",
   chart2: "#388e3c",
   chart3: "#43a047",
@@ -368,6 +392,9 @@ export const CYBERPUNK_THEME: Theme = {
   border: "#1a1a2e",
   input: "#16213e",
   ring: "#ff00ff",
+  toggleTrack: "#2a2a4e",
+  toggleTrackForeground: "#f0f0f0",
+  inputHover: "#ff00ff",
   chart1: "#ff00ff",
   chart2: "#00ffff",
   chart3: "#00ff88",
@@ -407,8 +434,11 @@ 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",
@@ -450,6 +480,9 @@ export const DARK_ELEGANT_THEME: Theme = {
   border: "#2d2d2d",
   input: "#1e1e1e",
   ring: "#bb86fc",
+  toggleTrack: "#3d3d3d",
+  toggleTrackForeground: "#e0e0e0",
+  inputHover: "#bb86fc",
   chart1: "#bb86fc",
   chart2: "#03dac6",
   chart3: "#4caf50",

package/src/theme/types.ts

@@ -54,6 +54,11 @@ 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
@@ -61,6 +66,9 @@ export interface Theme {
   chart4: string; // --chart-4
   chart5: string; // --chart-5
 
+  /** Disabled state */
+  disabledOpacity?: string; // --disabled-opacity (default: 0.5)
+
   /** Border radius */
   radius?: string; // --radius (default: 0.5rem)
 }
@@ -105,6 +113,9 @@ 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;
@@ -138,6 +149,9 @@ type ThemeColorFields = {
   border: string;
   input: string;
   ring: string;
+  toggleTrack?: string;
+  toggleTrackForeground?: string;
+  inputHover?: string;
   chart1: string;
   chart2: string;
   chart3: string;

package/src/theme/utils.ts

@@ -85,6 +85,11 @@ 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),
@@ -93,6 +98,20 @@ export function themeToHsl(theme: Theme): ThemeHSL {
   };
 }
 
+/**
+ * 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,12 +154,31 @@ 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);
 
+  if (theme.disabledOpacity) {
+    element.style.setProperty("--disabled-opacity", theme.disabledOpacity);
+  }
+
   if (theme.radius) {
     element.style.setProperty("--radius", theme.radius);
   }
@@ -254,6 +292,9 @@ export function areThemesEqual(theme1: Theme, theme2: Theme): boolean {
     "border",
     "input",
     "ring",
+    "toggleTrack",
+    "toggleTrackForeground",
+    "inputHover",
     "chart1",
     "chart2",
     "chart3",
@@ -307,3 +348,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;
+}