@sabrenski/spire-ui 0.0.1

package/src/styles/tokens.css

@@ -0,0 +1,183 @@
+:root {
+  /* Spacing Scale (8pt grid) */
+  --space-0: 0;
+  --space-1: 0.25rem;  /* 4px */
+  --space-2: 0.5rem;   /* 8px */
+  --space-3: 0.75rem;  /* 12px */
+  --space-4: 1rem;     /* 16px */
+  --space-5: 1.25rem;  /* 20px */
+  --space-6: 1.5rem;   /* 24px */
+  --space-8: 2rem;     /* 32px */
+  --space-10: 2.5rem;  /* 40px */
+  --space-12: 3rem;    /* 48px */
+
+  /* OKLCH Color Primitives - Stone (Warm neutral, Hue ~60) */
+  --color-stone-50: oklch(0.985 0.004 60);
+  --color-stone-100: oklch(0.970 0.007 60);
+  --color-stone-200: oklch(0.923 0.01 60);
+  --color-stone-300: oklch(0.865 0.016 60);
+  --color-stone-400: oklch(0.706 0.027 60);
+  --color-stone-500: oklch(0.553 0.027 60);
+  --color-stone-600: oklch(0.444 0.024 60);
+  --color-stone-700: oklch(0.374 0.022 60);
+  --color-stone-800: oklch(0.268 0.018 60);
+  --color-stone-900: oklch(0.216 0.016 60);
+  --color-stone-950: oklch(0.147 0.014 60);
+
+  /* OKLCH Color Primitives - Indigo (Rich primary, Hue ~275) */
+  --color-indigo-50: oklch(0.962 0.018 275);
+  --color-indigo-100: oklch(0.930 0.034 275);
+  --color-indigo-200: oklch(0.870 0.065 275);
+  --color-indigo-300: oklch(0.785 0.115 275);
+  --color-indigo-400: oklch(0.673 0.182 275);
+  --color-indigo-500: oklch(0.585 0.233 275);
+  --color-indigo-600: oklch(0.511 0.262 275);
+  --color-indigo-700: oklch(0.457 0.24 275);
+  --color-indigo-800: oklch(0.398 0.195 275);
+  --color-indigo-900: oklch(0.359 0.144 275);
+
+  /* Semantic Primary Color (defaults to indigo, overridden by moods) */
+  --color-primary-50: oklch(0.962 0.018 275);
+  --color-primary-100: oklch(0.930 0.034 275);
+  --color-primary-200: oklch(0.870 0.065 275);
+  --color-primary-300: oklch(0.785 0.115 275);
+  --color-primary-400: oklch(0.673 0.182 275);
+  --color-primary-500: oklch(0.585 0.233 275);
+  --color-primary-600: oklch(0.511 0.262 275);
+  --color-primary-700: oklch(0.457 0.240 275);
+  --color-primary-800: oklch(0.398 0.195 275);
+  --color-primary-900: oklch(0.359 0.144 275);
+
+  /* OKLCH Color Primitives - Teal (Success, Hue ~180) */
+  --color-teal-50: oklch(0.984 0.014 180);
+  --color-teal-100: oklch(0.953 0.051 180);
+  --color-teal-500: oklch(0.704 0.14 180);
+  --color-teal-600: oklch(0.6 0.13 180);
+  --color-teal-700: oklch(0.511 0.096 180);
+
+  /* OKLCH Color Primitives - Coral (Destructive, Hue ~20) */
+  --color-coral-50: oklch(0.975 0.014 20);
+  --color-coral-100: oklch(0.945 0.038 20);
+  --color-coral-500: oklch(0.63 0.19 20);
+  --color-coral-600: oklch(0.56 0.195 20);
+  --color-coral-700: oklch(0.49 0.17 20);
+
+  /* OKLCH Color Primitives - Amber (Warning, Hue ~70) */
+  --color-amber-50: oklch(0.987 0.022 80);
+  --color-amber-100: oklch(0.962 0.055 80);
+  --color-amber-500: oklch(0.769 0.16 70);
+  --color-amber-600: oklch(0.666 0.15 55);
+
+  /* Neutral */
+  --color-white: oklch(1 0 0);
+  --color-black: oklch(0 0 0);
+
+  /* Typography - Inter preferred, with quality fallbacks */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+
+  /* Text Sizes */
+  --text-xs: 0.75rem;    /* 12px */
+  --text-sm: 0.875rem;   /* 14px */
+  --text-base: 0.9375rem; /* 15px */
+  --text-md: 1rem;       /* 16px */
+  --text-lg: 1.125rem;   /* 18px */
+  --text-xl: 1.25rem;    /* 20px */
+
+  /* Heading Sizes */
+  --heading-md: 1rem;      /* 16px */
+  --heading-lg: 1.25rem;   /* 20px */
+  --heading-xl: 1.5rem;    /* 24px */
+  --heading-2xl: 1.875rem; /* 30px */
+  --heading-3xl: 2.25rem;  /* 36px */
+  --heading-4xl: 3rem;     /* 48px */
+
+  /* Icon Sizes (standalone) */
+  --icon-xs: 0.75rem;  /* 12px */
+  --icon-sm: 1rem;     /* 16px */
+  --icon-md: 1.25rem;  /* 20px */
+  --icon-lg: 1.5rem;   /* 24px */
+  --icon-xl: 2rem;     /* 32px */
+
+  /* Spinner Sizes */
+  --spinner-xs: 1rem;    /* 16px */
+  --spinner-sm: 1.5rem;  /* 24px */
+  --spinner-md: 2rem;    /* 32px */
+  --spinner-lg: 2.5rem;  /* 40px */
+  --spinner-xl: 3rem;    /* 48px */
+
+  /* Input/Button Heights (consistent across all form controls) */
+  --input-height-xs: 1.5rem;   /* 24px */
+  --input-height-sm: 1.75rem;  /* 28px */
+  --input-height-md: 2rem;     /* 32px */
+  --input-height-lg: 2.25rem;  /* 36px */
+  --input-height-xl: 2.5rem;   /* 40px */
+
+  /* Line Heights */
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+
+  /* Font Weights */
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+
+  /* Border Radius - slightly softer for modern feel */
+  --radius-none: 0;
+  --radius-sm: 0.25rem;  /* 4px */
+  --radius-md: 0.5rem;   /* 8px */
+  --radius-lg: 0.625rem; /* 10px */
+  --radius-xl: 0.875rem; /* 14px */
+  --radius-2xl: 1.25rem; /* 20px */
+  --radius-full: 9999px;
+
+  /* Shadows (soft, subtle - using oklch for consistency) */
+  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.03);
+  --shadow-md: 0 2px 4px -1px oklch(0 0 0 / 0.04), 0 1px 2px -1px oklch(0 0 0 / 0.03);
+  --shadow-lg: 0 4px 8px -2px oklch(0 0 0 / 0.05), 0 2px 4px -2px oklch(0 0 0 / 0.03);
+  --shadow-xl: 0 8px 16px -4px oklch(0 0 0 / 0.06), 0 4px 6px -4px oklch(0 0 0 / 0.04);
+  --shadow-2xl: 0 16px 32px -8px oklch(0 0 0 / 0.08), 0 8px 12px -6px oklch(0 0 0 / 0.05);
+
+  /* Motion: Durations */
+  --duration-fast: 150ms;    /* Tooltips, toggles, hover states */
+  --duration-normal: 200ms;  /* Dropdowns, popovers */
+  --duration-slow: 300ms;    /* Modals, drawers */
+
+  /* Motion: Easings */
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);   /* Standard Material easing */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);          /* Accelerate */
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);         /* Decelerate */
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Snappy - fast start, soft landing */
+  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy - slight overshoot */
+
+  /* Legacy aliases (deprecated, use --duration-*) */
+  --transition-fast: var(--duration-fast);
+  --transition-base: var(--duration-normal);
+  --transition-slow: var(--duration-slow);
+
+  /* Breakpoints (for reference - CSS can't use vars in media queries) */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* Container Max-Widths */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+
+  /* Z-Index Scale */
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-fixed: 300;
+  --z-modal-backdrop: 400;
+  --z-modal: 500;
+  --z-popover: 600;
+  --z-tooltip: 700;
+}

package/src/utils/color.ts

@@ -0,0 +1,277 @@
+export interface RGB {
+  r: number // 0-255
+  g: number // 0-255
+  b: number // 0-255
+}
+
+export interface HSV {
+  h: number // 0-360
+  s: number // 0-1
+  v: number // 0-1
+}
+
+export interface OKLCH {
+  l: number // 0-1 (lightness)
+  c: number // 0-0.4+ (chroma)
+  h: number // 0-360 (hue)
+}
+
+export interface RGBA extends RGB {
+  a: number // 0-1
+}
+
+export interface HSVA extends HSV {
+  a: number // 0-1
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max)
+}
+
+export function hexToRgb(hex: string): RGB {
+  const cleaned = hex.replace(/^#/, '')
+  const expanded = cleaned.length === 3
+    ? cleaned.split('').map(c => c + c).join('')
+    : cleaned
+
+  const num = parseInt(expanded, 16)
+  return {
+    r: (num >> 16) & 255,
+    g: (num >> 8) & 255,
+    b: num & 255
+  }
+}
+
+export function rgbToHex(rgb: RGB): string {
+  const toHex = (n: number) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0')
+  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`
+}
+
+export function rgbToHsv(rgb: RGB): HSV {
+  const r = rgb.r / 255
+  const g = rgb.g / 255
+  const b = rgb.b / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const delta = max - min
+
+  let h = 0
+  if (delta !== 0) {
+    if (max === r) {
+      h = ((g - b) / delta) % 6
+    } else if (max === g) {
+      h = (b - r) / delta + 2
+    } else {
+      h = (r - g) / delta + 4
+    }
+    h = Math.round(h * 60)
+    if (h < 0) h += 360
+  }
+
+  const s = max === 0 ? 0 : delta / max
+  const v = max
+
+  return { h, s, v }
+}
+
+export function hsvToRgb(hsv: HSV): RGB {
+  const { h, s, v } = hsv
+  const c = v * s
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+  const m = v - c
+
+  let r = 0, g = 0, b = 0
+
+  if (h >= 0 && h < 60) {
+    r = c; g = x; b = 0
+  } else if (h >= 60 && h < 120) {
+    r = x; g = c; b = 0
+  } else if (h >= 120 && h < 180) {
+    r = 0; g = c; b = x
+  } else if (h >= 180 && h < 240) {
+    r = 0; g = x; b = c
+  } else if (h >= 240 && h < 300) {
+    r = x; g = 0; b = c
+  } else {
+    r = c; g = 0; b = x
+  }
+
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255)
+  }
+}
+
+export function hexToHsv(hex: string): HSV {
+  return rgbToHsv(hexToRgb(hex))
+}
+
+export function hsvToHex(hsv: HSV): string {
+  return rgbToHex(hsvToRgb(hsv))
+}
+
+function linearToSrgb(c: number): number {
+  return c <= 0.0031308
+    ? c * 12.92
+    : 1.055 * Math.pow(c, 1 / 2.4) - 0.055
+}
+
+function srgbToLinear(c: number): number {
+  return c <= 0.04045
+    ? c / 12.92
+    : Math.pow((c + 0.055) / 1.055, 2.4)
+}
+
+export function oklabToLinearRgb(L: number, a: number, b: number): { r: number; g: number; b: number } {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b
+  const s_ = L - 0.0894841775 * a - 1.2914855480 * b
+
+  const l = l_ * l_ * l_
+  const m = m_ * m_ * m_
+  const s = s_ * s_ * s_
+
+  return {
+    r: +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    g: -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    b: -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s
+  }
+}
+
+export function linearRgbToOklab(r: number, g: number, b: number): { L: number; a: number; b: number } {
+  const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b
+  const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b
+  const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b
+
+  const l_ = Math.cbrt(l)
+  const m_ = Math.cbrt(m)
+  const s_ = Math.cbrt(s)
+
+  return {
+    L: 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_,
+    a: 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_,
+    b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_
+  }
+}
+
+export function oklchToRgb(oklch: OKLCH): RGB {
+  const { l, c, h } = oklch
+  const hRad = (h * Math.PI) / 180
+  const a = c * Math.cos(hRad)
+  const b = c * Math.sin(hRad)
+
+  const linear = oklabToLinearRgb(l, a, b)
+
+  return {
+    r: clamp(Math.round(linearToSrgb(linear.r) * 255), 0, 255),
+    g: clamp(Math.round(linearToSrgb(linear.g) * 255), 0, 255),
+    b: clamp(Math.round(linearToSrgb(linear.b) * 255), 0, 255)
+  }
+}
+
+export function rgbToOklch(rgb: RGB): OKLCH {
+  const r = srgbToLinear(rgb.r / 255)
+  const g = srgbToLinear(rgb.g / 255)
+  const b = srgbToLinear(rgb.b / 255)
+
+  const lab = linearRgbToOklab(r, g, b)
+
+  const c = Math.sqrt(lab.a * lab.a + lab.b * lab.b)
+  let h = (Math.atan2(lab.b, lab.a) * 180) / Math.PI
+  if (h < 0) h += 360
+
+  return {
+    l: lab.L,
+    c,
+    h: c < 0.0001 ? 0 : h
+  }
+}
+
+export function hsvToOklch(hsv: HSV): OKLCH {
+  return rgbToOklch(hsvToRgb(hsv))
+}
+
+export function oklchToHsv(oklch: OKLCH): HSV {
+  return rgbToHsv(oklchToRgb(oklch))
+}
+
+export function formatRgb(rgb: RGB, alpha?: number): string {
+  if (alpha !== undefined && alpha < 1) {
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`
+  }
+  return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
+}
+
+export function formatOklch(oklch: OKLCH, alpha?: number): string {
+  const l = (oklch.l * 100).toFixed(1)
+  const c = oklch.c.toFixed(3)
+  const h = oklch.h.toFixed(0)
+
+  if (alpha !== undefined && alpha < 1) {
+    return `oklch(${l}% ${c} ${h} / ${alpha})`
+  }
+  return `oklch(${l}% ${c} ${h})`
+}
+
+export function parseColorString(color: string): { hsv: HSV; alpha: number; format: 'hex' | 'rgb' | 'oklch' } | null {
+  const trimmed = color.trim().toLowerCase()
+
+  // Hex format
+  if (trimmed.startsWith('#')) {
+    const hex = trimmed.slice(1)
+    if (/^[0-9a-f]{3}$/.test(hex) || /^[0-9a-f]{6}$/.test(hex)) {
+      return { hsv: hexToHsv(trimmed), alpha: 1, format: 'hex' }
+    }
+    if (/^[0-9a-f]{8}$/.test(hex)) {
+      const alpha = parseInt(hex.slice(6, 8), 16) / 255
+      return { hsv: hexToHsv('#' + hex.slice(0, 6)), alpha, format: 'hex' }
+    }
+    return null
+  }
+
+  // RGB/RGBA format
+  const rgbMatch = trimmed.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/)
+  if (rgbMatch) {
+    const rgb: RGB = {
+      r: clamp(parseInt(rgbMatch[1], 10), 0, 255),
+      g: clamp(parseInt(rgbMatch[2], 10), 0, 255),
+      b: clamp(parseInt(rgbMatch[3], 10), 0, 255)
+    }
+    const alpha = rgbMatch[4] ? clamp(parseFloat(rgbMatch[4]), 0, 1) : 1
+    return { hsv: rgbToHsv(rgb), alpha, format: 'rgb' }
+  }
+
+  // OKLCH format: oklch(L% C H) or oklch(L% C H / A)
+  const oklchMatch = trimmed.match(/^oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)\s*(?:\/\s*([\d.]+))?\s*\)$/)
+  if (oklchMatch) {
+    const l = parseFloat(oklchMatch[1]) / (oklchMatch[1].includes('%') ? 1 : 100)
+    const oklch: OKLCH = {
+      l: clamp(l > 1 ? l / 100 : l, 0, 1),
+      c: clamp(parseFloat(oklchMatch[2]), 0, 0.5),
+      h: parseFloat(oklchMatch[3]) % 360
+    }
+    const alpha = oklchMatch[4] ? clamp(parseFloat(oklchMatch[4]), 0, 1) : 1
+    return { hsv: oklchToHsv(oklch), alpha, format: 'oklch' }
+  }
+
+  return null
+}
+
+export function formatColor(hsv: HSV, alpha: number, format: 'hex' | 'rgb' | 'oklch'): string {
+  switch (format) {
+    case 'hex': {
+      const hex = hsvToHex(hsv)
+      if (alpha < 1) {
+        const alphaHex = Math.round(alpha * 255).toString(16).padStart(2, '0')
+        return hex + alphaHex
+      }
+      return hex
+    }
+    case 'rgb':
+      return formatRgb(hsvToRgb(hsv), alpha)
+    case 'oklch':
+      return formatOklch(hsvToOklch(hsv), alpha)
+  }
+}