@rokkit/ui 1.3.4 → 1.3.6

package/src/utils/palette.ts

@@ -1,750 +0,0 @@
-/**
- * Palette Utilities
- *
- * Functions for color manipulation, shade generation, and runtime palette application.
- */
-
-// =============================================================================
-// Types
-// =============================================================================
-
-export interface RGB {
-	r: number
-	g: number
-	b: number
-}
-
-export interface HSL {
-	h: number
-	s: number
-	l: number
-}
-
-export interface OKLCH {
-	L: number
-	C: number
-	H: number
-}
-
-export type ColorSpace = 'rgb' | 'hsl' | 'oklch'
-
-export type ShadeKey =
-	| '50'
-	| '100'
-	| '200'
-	| '300'
-	| '400'
-	| '500'
-	| '600'
-	| '700'
-	| '800'
-	| '900'
-	| '950'
-
-export type Shades = Record<ShadeKey, string>
-
-export type ColorRole =
-	| 'primary'
-	| 'secondary'
-	| 'accent'
-	| 'surface'
-	| 'success'
-	| 'warning'
-	| 'danger'
-	| 'info'
-
-/**
- * Mapping of color roles to Tailwind color names or hex values
- */
-export type ColorMapping = Partial<Record<ColorRole, string>>
-
-// =============================================================================
-// Color Conversion Utilities
-// =============================================================================
-
-/**
- * Convert hex color to RGB
- */
-export function hexToRgb(hex: string): RGB {
-	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-	if (!result) {
-		throw new Error(`Invalid hex color: ${hex}`)
-	}
-	return {
-		r: parseInt(result[1], 16),
-		g: parseInt(result[2], 16),
-		b: parseInt(result[3], 16)
-	}
-}
-
-/**
- * Convert RGB to hex color
- */
-export function rgbToHex(rgb: RGB): string {
-	const toHex = (n: number) => {
-		const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16)
-		return hex.length === 1 ? `0${hex}` : hex
-	}
-	return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`
-}
-
-/**
- * Convert RGB to HSL
- */
-interface NormalizedRGB {
-	r: number
-	g: number
-	b: number
-}
-
-function computeHue(norm: NormalizedRGB, max: number, d: number): number {
-	const { r, g, b } = norm
-	if (max === r) return ((g - b) / d + (g < b ? 6 : 0)) / 6
-	if (max === g) return ((b - r) / d + 2) / 6
-	return ((r - g) / d + 4) / 6
-}
-
-export function rgbToHsl(rgb: RGB): HSL {
-	const norm: NormalizedRGB = { r: rgb.r / 255, g: rgb.g / 255, b: rgb.b / 255 }
-
-	const max = Math.max(norm.r, norm.g, norm.b)
-	const min = Math.min(norm.r, norm.g, norm.b)
-	const l = (max + min) / 2
-
-	if (max === min) return { h: 0, s: 0, l: l * 100 }
-
-	const d = max - min
-	const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
-	const h = computeHue(norm, max, d)
-
-	return { h: h * 360, s: s * 100, l: l * 100 }
-}
-
-function normalizeT(t: number): number {
-	if (t < 0) return t + 1
-	if (t > 1) return t - 1
-	return t
-}
-
-function hue2rgb(p: number, q: number, t: number): number {
-	const tt = normalizeT(t)
-	if (tt < 1 / 6) return p + (q - p) * 6 * tt
-	if (tt < 1 / 2) return q
-	if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6
-	return p
-}
-
-/**
- * Convert HSL to RGB
- */
-export function hslToRgb(hsl: HSL): RGB {
-	const h = hsl.h / 360
-	const s = hsl.s / 100
-	const l = hsl.l / 100
-
-	if (s === 0) {
-		const val = Math.round(l * 255)
-		return { r: val, g: val, b: val }
-	}
-
-	const q = l < 0.5 ? l * (1 + s) : l + s - l * s
-	const p = 2 * l - q
-
-	return {
-		r: Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
-		g: Math.round(hue2rgb(p, q, h) * 255),
-		b: Math.round(hue2rgb(p, q, h - 1 / 3) * 255)
-	}
-}
-
-/**
- * Convert hex to HSL
- */
-export function hexToHsl(hex: string): HSL {
-	return rgbToHsl(hexToRgb(hex))
-}
-
-/**
- * Convert HSL to hex
- */
-export function hslToHex(hsl: HSL): string {
-	return rgbToHex(hslToRgb(hsl))
-}
-
-// =============================================================================
-// OKLCH Conversion Utilities
-// =============================================================================
-
-function srgbToLinear(c: number): number {
-	const s = c / 255
-	return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)
-}
-
-function linearToSrgb(c: number): number {
-	const s = c <= 0.0031308 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - 0.055
-	return Math.round(Math.max(0, Math.min(255, s * 255)))
-}
-
-// CSS Color Level 4 matrices (via XYZ D65) for round-trip precision.
-const SRGB_TO_XYZ: [number, number, number][] = [
-	[0.4123907993, 0.3575843394, 0.1804807884],
-	[0.2126390059, 0.7151686788, 0.0721923154],
-	[0.0193308187, 0.1191947798, 0.9505321522]
-]
-const XYZ_TO_LMS: [number, number, number][] = [
-	[0.8189330101, 0.3618667424, -0.1288597137],
-	[0.0329845436, 0.9293118715, 0.0361456387],
-	[0.0482003018, 0.2643662691, 0.633851707]
-]
-const LMS3_TO_OKLAB: [number, number, number][] = [
-	[0.2104542553, 0.793617785, -0.0040720468],
-	[1.9779984951, -2.428592205, 0.4505937099],
-	[0.0259040371, 0.7827717662, -0.808675766]
-]
-const OKLAB_TO_LMS3: [number, number, number][] = [
-	[1.0, 0.3963377774, 0.2158037573],
-	[1.0, -0.1055613458, -0.0638541728],
-	[1.0, -0.0894841775, -1.291485548]
-]
-const LMS_TO_XYZ: [number, number, number][] = [
-	[1.2270138511, -0.5577999807, 0.281256149],
-	[-0.0405801784, 1.1122568696, -0.0716766787],
-	[-0.0763812845, -0.4214819784, 1.5861632204]
-]
-const XYZ_TO_SRGB: [number, number, number][] = [
-	[3.2409699419, -1.5373831776, -0.4986107603],
-	[-0.9692436363, 1.8759675015, 0.0415550574],
-	[0.0556300797, -0.2039769589, 1.0569715142]
-]
-
-function matMul(m: [number, number, number][], v: number[]): number[] {
-	return m.map((row) => row[0] * v[0] + row[1] * v[1] + row[2] * v[2])
-}
-
-/**
- * Convert RGB to OKLCH (via XYZ D65 for precision)
- */
-export function rgbToOklch(rgb: RGB): OKLCH {
-	const lin = [srgbToLinear(rgb.r), srgbToLinear(rgb.g), srgbToLinear(rgb.b)]
-	const xyz = matMul(SRGB_TO_XYZ, lin)
-	const lms = matMul(XYZ_TO_LMS, xyz)
-	const lms3 = [Math.cbrt(lms[0]), Math.cbrt(lms[1]), Math.cbrt(lms[2])]
-	const [L, a, b] = matMul(LMS3_TO_OKLAB, lms3)
-
-	const C = Math.sqrt(a * a + b * b)
-	let H = (Math.atan2(b, a) * 180) / Math.PI
-	if (H < 0) H += 360
-
-	return { L, C, H }
-}
-
-/**
- * Convert OKLCH to RGB (via XYZ D65 for precision)
- */
-export function oklchToRgb(oklch: OKLCH): RGB {
-	const hRad = (oklch.H * Math.PI) / 180
-	const lab = [oklch.L, oklch.C * Math.cos(hRad), oklch.C * Math.sin(hRad)]
-
-	const lms3 = matMul(OKLAB_TO_LMS3, lab)
-	const lms = [lms3[0] ** 3, lms3[1] ** 3, lms3[2] ** 3]
-	const xyz = matMul(LMS_TO_XYZ, lms)
-	const lin = matMul(XYZ_TO_SRGB, xyz)
-
-	return {
-		r: linearToSrgb(lin[0]),
-		g: linearToSrgb(lin[1]),
-		b: linearToSrgb(lin[2])
-	}
-}
-
-/**
- * Convert hex to OKLCH
- */
-export function hexToOklch(hex: string): OKLCH {
-	return rgbToOklch(hexToRgb(hex))
-}
-
-/**
- * Convert OKLCH to hex
- */
-export function oklchToHex(oklch: OKLCH): string {
-	return rgbToHex(oklchToRgb(oklch))
-}
-
-// =============================================================================
-// Shade Generation
-// =============================================================================
-
-/**
- * Generate Tailwind-like shades from a base hex color
- * The input color is used as the 500 shade
- */
-export function generateShades(hex: string): Shades {
-	const hsl = hexToHsl(hex)
-
-	// Shade configuration: [saturation multiplier, target lightness]
-	// Lighter shades have higher lightness, lower saturation
-	// Darker shades have lower lightness, slightly higher saturation
-	const shadeConfig: Record<ShadeKey, [number, number]> = {
-		'50': [0.9, 97],
-		'100': [0.92, 94],
-		'200': [0.94, 86],
-		'300': [0.96, 75],
-		'400': [0.98, 60],
-		'500': [1.0, hsl.l], // Keep original lightness
-		'600': [1.02, Math.max(hsl.l * 0.82, 25)],
-		'700': [1.04, Math.max(hsl.l * 0.65, 20)],
-		'800': [1.06, Math.max(hsl.l * 0.5, 15)],
-		'900': [1.08, Math.max(hsl.l * 0.35, 12)],
-		'950': [1.12, Math.max(hsl.l * 0.22, 8)]
-	}
-
-	const shades: Partial<Shades> = {}
-
-	for (const [shade, [satMult, lightness]] of Object.entries(shadeConfig)) {
-		const newHsl: HSL = {
-			h: hsl.h,
-			s: Math.min(100, hsl.s * satMult),
-			l: lightness
-		}
-		shades[shade as ShadeKey] = hslToHex(newHsl)
-	}
-
-	return shades as Shades
-}
-
-/**
- * Check if a string is a valid hex color
- */
-export function isHexColor(value: string): boolean {
-	return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value)
-}
-
-// =============================================================================
-// Tailwind Colors (Built-in Presets)
-// =============================================================================
-
-export const tailwindColors: Record<string, Shades> = {
-	slate: {
-		'50': '#f8fafc',
-		'100': '#f1f5f9',
-		'200': '#e2e8f0',
-		'300': '#cbd5e1',
-		'400': '#94a3b8',
-		'500': '#64748b',
-		'600': '#475569',
-		'700': '#334155',
-		'800': '#1e293b',
-		'900': '#0f172a',
-		'950': '#020617'
-	},
-	gray: {
-		'50': '#f9fafb',
-		'100': '#f3f4f6',
-		'200': '#e5e7eb',
-		'300': '#d1d5db',
-		'400': '#9ca3af',
-		'500': '#6b7280',
-		'600': '#4b5563',
-		'700': '#374151',
-		'800': '#1f2937',
-		'900': '#111827',
-		'950': '#030712'
-	},
-	zinc: {
-		'50': '#fafafa',
-		'100': '#f4f4f5',
-		'200': '#e4e4e7',
-		'300': '#d4d4d8',
-		'400': '#a1a1aa',
-		'500': '#71717a',
-		'600': '#52525b',
-		'700': '#3f3f46',
-		'800': '#27272a',
-		'900': '#18181b',
-		'950': '#09090b'
-	},
-	neutral: {
-		'50': '#fafafa',
-		'100': '#f5f5f5',
-		'200': '#e5e5e5',
-		'300': '#d4d4d4',
-		'400': '#a3a3a3',
-		'500': '#737373',
-		'600': '#525252',
-		'700': '#404040',
-		'800': '#262626',
-		'900': '#171717',
-		'950': '#0a0a0a'
-	},
-	stone: {
-		'50': '#fafaf9',
-		'100': '#f5f5f4',
-		'200': '#e7e5e4',
-		'300': '#d6d3d1',
-		'400': '#a8a29e',
-		'500': '#78716c',
-		'600': '#57534e',
-		'700': '#44403c',
-		'800': '#292524',
-		'900': '#1c1917',
-		'950': '#0c0a09'
-	},
-	red: {
-		'50': '#fef2f2',
-		'100': '#fee2e2',
-		'200': '#fecaca',
-		'300': '#fca5a5',
-		'400': '#f87171',
-		'500': '#ef4444',
-		'600': '#dc2626',
-		'700': '#b91c1c',
-		'800': '#991b1b',
-		'900': '#7f1d1d',
-		'950': '#450a0a'
-	},
-	orange: {
-		'50': '#fff7ed',
-		'100': '#ffedd5',
-		'200': '#fed7aa',
-		'300': '#fdba74',
-		'400': '#fb923c',
-		'500': '#f97316',
-		'600': '#ea580c',
-		'700': '#c2410c',
-		'800': '#9a3412',
-		'900': '#7c2d12',
-		'950': '#431407'
-	},
-	amber: {
-		'50': '#fffbeb',
-		'100': '#fef3c7',
-		'200': '#fde68a',
-		'300': '#fcd34d',
-		'400': '#fbbf24',
-		'500': '#f59e0b',
-		'600': '#d97706',
-		'700': '#b45309',
-		'800': '#92400e',
-		'900': '#78350f',
-		'950': '#451a03'
-	},
-	yellow: {
-		'50': '#fefce8',
-		'100': '#fef9c3',
-		'200': '#fef08a',
-		'300': '#fde047',
-		'400': '#facc15',
-		'500': '#eab308',
-		'600': '#ca8a04',
-		'700': '#a16207',
-		'800': '#854d0e',
-		'900': '#713f12',
-		'950': '#422006'
-	},
-	lime: {
-		'50': '#f7fee7',
-		'100': '#ecfccb',
-		'200': '#d9f99d',
-		'300': '#bef264',
-		'400': '#a3e635',
-		'500': '#84cc16',
-		'600': '#65a30d',
-		'700': '#4d7c0f',
-		'800': '#3f6212',
-		'900': '#365314',
-		'950': '#1a2e05'
-	},
-	green: {
-		'50': '#f0fdf4',
-		'100': '#dcfce7',
-		'200': '#bbf7d0',
-		'300': '#86efac',
-		'400': '#4ade80',
-		'500': '#22c55e',
-		'600': '#16a34a',
-		'700': '#15803d',
-		'800': '#166534',
-		'900': '#14532d',
-		'950': '#052e16'
-	},
-	emerald: {
-		'50': '#ecfdf5',
-		'100': '#d1fae5',
-		'200': '#a7f3d0',
-		'300': '#6ee7b7',
-		'400': '#34d399',
-		'500': '#10b981',
-		'600': '#059669',
-		'700': '#047857',
-		'800': '#065f46',
-		'900': '#064e3b',
-		'950': '#022c22'
-	},
-	teal: {
-		'50': '#f0fdfa',
-		'100': '#ccfbf1',
-		'200': '#99f6e4',
-		'300': '#5eead4',
-		'400': '#2dd4bf',
-		'500': '#14b8a6',
-		'600': '#0d9488',
-		'700': '#0f766e',
-		'800': '#115e59',
-		'900': '#134e4a',
-		'950': '#042f2e'
-	},
-	cyan: {
-		'50': '#ecfeff',
-		'100': '#cffafe',
-		'200': '#a5f3fc',
-		'300': '#67e8f9',
-		'400': '#22d3ee',
-		'500': '#06b6d4',
-		'600': '#0891b2',
-		'700': '#0e7490',
-		'800': '#155e75',
-		'900': '#164e63',
-		'950': '#083344'
-	},
-	sky: {
-		'50': '#f0f9ff',
-		'100': '#e0f2fe',
-		'200': '#bae6fd',
-		'300': '#7dd3fc',
-		'400': '#38bdf8',
-		'500': '#0ea5e9',
-		'600': '#0284c7',
-		'700': '#0369a1',
-		'800': '#075985',
-		'900': '#0c4a6e',
-		'950': '#082f49'
-	},
-	blue: {
-		'50': '#eff6ff',
-		'100': '#dbeafe',
-		'200': '#bfdbfe',
-		'300': '#93c5fd',
-		'400': '#60a5fa',
-		'500': '#3b82f6',
-		'600': '#2563eb',
-		'700': '#1d4ed8',
-		'800': '#1e40af',
-		'900': '#1e3a8a',
-		'950': '#172554'
-	},
-	indigo: {
-		'50': '#eef2ff',
-		'100': '#e0e7ff',
-		'200': '#c7d2fe',
-		'300': '#a5b4fc',
-		'400': '#818cf8',
-		'500': '#6366f1',
-		'600': '#4f46e5',
-		'700': '#4338ca',
-		'800': '#3730a3',
-		'900': '#312e81',
-		'950': '#1e1b4b'
-	},
-	violet: {
-		'50': '#f5f3ff',
-		'100': '#ede9fe',
-		'200': '#ddd6fe',
-		'300': '#c4b5fd',
-		'400': '#a78bfa',
-		'500': '#8b5cf6',
-		'600': '#7c3aed',
-		'700': '#6d28d9',
-		'800': '#5b21b6',
-		'900': '#4c1d95',
-		'950': '#2e1065'
-	},
-	purple: {
-		'50': '#faf5ff',
-		'100': '#f3e8ff',
-		'200': '#e9d5ff',
-		'300': '#d8b4fe',
-		'400': '#c084fc',
-		'500': '#a855f7',
-		'600': '#9333ea',
-		'700': '#7e22ce',
-		'800': '#6b21a8',
-		'900': '#581c87',
-		'950': '#3b0764'
-	},
-	fuchsia: {
-		'50': '#fdf4ff',
-		'100': '#fae8ff',
-		'200': '#f5d0fe',
-		'300': '#f0abfc',
-		'400': '#e879f9',
-		'500': '#d946ef',
-		'600': '#c026d3',
-		'700': '#a21caf',
-		'800': '#86198f',
-		'900': '#701a75',
-		'950': '#4a044e'
-	},
-	pink: {
-		'50': '#fdf2f8',
-		'100': '#fce7f3',
-		'200': '#fbcfe8',
-		'300': '#f9a8d4',
-		'400': '#f472b6',
-		'500': '#ec4899',
-		'600': '#db2777',
-		'700': '#be185d',
-		'800': '#9d174d',
-		'900': '#831843',
-		'950': '#500724'
-	},
-	rose: {
-		'50': '#fff1f2',
-		'100': '#ffe4e6',
-		'200': '#fecdd3',
-		'300': '#fda4af',
-		'400': '#fb7185',
-		'500': '#f43f5e',
-		'600': '#e11d48',
-		'700': '#be123c',
-		'800': '#9f1239',
-		'900': '#881337',
-		'950': '#4c0519'
-	}
-}
-
-/**
- * Get shades for a color (either Tailwind preset or custom hex)
- */
-export function getShades(color: string): Shades {
-	if (isHexColor(color)) {
-		return generateShades(color)
-	}
-	const preset = tailwindColors[color.toLowerCase()]
-	if (preset) {
-		return preset
-	}
-	throw new Error(`Unknown color: ${color}. Must be a hex color or Tailwind color name.`)
-}
-
-// =============================================================================
-// Runtime Palette Application
-// =============================================================================
-
-/**
- * Format a hex color as CSS variable components for the given color space.
- */
-function formatComponents(hex: string, colorSpace: ColorSpace): string {
-	switch (colorSpace) {
-		case 'hsl': {
-			const hsl = hexToHsl(hex)
-			return `${Math.round(hsl.h)} ${Math.round(hsl.s)}% ${Math.round(hsl.l)}%`
-		}
-		case 'oklch': {
-			const oklch = hexToOklch(hex)
-			const L = Math.round(oklch.L * 10000) / 10000
-			const C = Math.round(oklch.C * 10000) / 10000
-			const H = Math.round(oklch.H * 100) / 100
-			return `${L} ${C} ${H}`
-		}
-		case 'rgb':
-		default: {
-			const rgb = hexToRgb(hex)
-			return `${rgb.r},${rgb.g},${rgb.b}`
-		}
-	}
-}
-
-/**
- * Apply a color palette to the document root
- * Sets CSS variables for each color role and shade
- */
-export function applyPalette(
-	mapping: Partial<Record<ColorRole, string>>,
-	element: HTMLElement = document.documentElement,
-	colorSpace: ColorSpace = 'rgb'
-): void {
-	for (const [role, color] of Object.entries(mapping)) {
-		if (!color) continue
-
-		const shades = getShades(color)
-
-		for (const [shade, hex] of Object.entries(shades)) {
-			element.style.setProperty(`--color-${role}-${shade}`, formatComponents(hex, colorSpace))
-		}
-
-		// Also set the default (500) as the base color variable
-		element.style.setProperty(`--color-${role}`, formatComponents(shades['500'], colorSpace))
-	}
-}
-
-const DEFAULT_PALETTE_ROLES: ColorRole[] = [
-	'primary',
-	'secondary',
-	'accent',
-	'surface',
-	'success',
-	'warning',
-	'danger',
-	'info'
-]
-
-const ALL_SHADE_KEYS: ShadeKey[] = [
-	'50',
-	'100',
-	'200',
-	'300',
-	'400',
-	'500',
-	'600',
-	'700',
-	'800',
-	'900',
-	'950'
-]
-
-/**
- * Remove custom palette CSS variables (reset to theme defaults)
- */
-export function resetPalette(
-	roles: ColorRole[] = DEFAULT_PALETTE_ROLES,
-	element: HTMLElement = document.documentElement
-): void {
-	for (const role of roles) {
-		element.style.removeProperty(`--color-${role}`)
-		for (const shade of ALL_SHADE_KEYS) {
-			element.style.removeProperty(`--color-${role}-${shade}`)
-		}
-	}
-}
-
-/**
- * Save palette to localStorage. SSR-safe.
- */
-export function savePalette(key: string, mapping: Partial<Record<ColorRole, string>>): void {
-	if (typeof localStorage === 'undefined') return
-	localStorage.setItem(key, JSON.stringify(mapping))
-}
-
-/**
- * Load palette from localStorage. SSR-safe.
- */
-export function loadPalette(key: string): Partial<Record<ColorRole, string>> | null {
-	if (typeof localStorage === 'undefined') return null
-	const stored = localStorage.getItem(key)
-	if (stored) {
-		try {
-			return JSON.parse(stored)
-		} catch {
-			return null
-		}
-	}
-	return null
-}
-
-/**
- * Get list of available Tailwind color names
- */
-export function getTailwindColorNames(): string[] {
-	return Object.keys(tailwindColors)
-}