\n AI-powered theme generation for shadcn/ui. Click the Tinte button\n below to start customizing.\n
\n\n Generate themes with AI\n
\n\n Explore tinte.dev community\n
\n\n Edit colors & CSS directly\n
\n\n {input.concept}\n
\n )}\n\n ☀️ Light\n
\n\n 🌙 Dark\n
\n\n {input.fonts.sans} • {input.fonts.mono}\n
\n )}\n \n );\n }\n\n case \"output-available\": {\n const result = part.output as any;\n\n if (!result?.light || !result?.dark) {\n return null;\n }\n\n return (\n\n {result.concept}\n
\n\n ☀️ Light\n
\n\n 🌙 Dark\n
\n\n {result.fonts.sans} • {result.fonts.mono} • Radius:{\" \"}\n {result.radius?.lg || \"0.5rem\"}\n
\n )}\n\n\n {part.errorText}\n
\n \n );\n }\n }\n\n return null;\n })}\n \n \n );\n};\n", "type": "registry:component" }, { "path": "registry/default/blocks/tinte/tinte-editor/lib/tinte-to-shadcn.ts", "content": "import { formatHex, formatHsl, oklch, parse, rgb } from \"culori\";\n\n// ============================================================================\n// TINTE THEME TYPES (Flexoki-inspired continuous scale)\n// ============================================================================\n\nexport interface TinteBlock {\n bg: string;\n bg_2: string;\n ui: string;\n ui_2: string;\n ui_3: string;\n tx_3: string;\n tx_2: string;\n tx: string;\n pr: string;\n sc: string;\n ac_1: string;\n ac_2: string;\n ac_3: string;\n}\n\nexport interface TinteTheme {\n light: TinteBlock;\n dark: TinteBlock;\n fonts?: {\n sans: string;\n serif: string;\n mono: string;\n };\n radius?: {\n sm: string;\n md: string;\n lg: string;\n xl: string;\n };\n shadows?: {\n color: string;\n opacity: string;\n offsetX: string;\n offsetY: string;\n blur: string;\n spread: string;\n };\n}\n\n// ============================================================================\n// PALETTE GENERATOR (Tailwind 50-950 ramps from single color)\n// ============================================================================\n\ninterface PaletteColor {\n name: string;\n value: string;\n}\n\nfunction toOklch(color: string): { l: number; c: number; h: number } {\n const oklchColor = oklch(color);\n if (!oklchColor) throw new Error(\"Invalid color\");\n\n return {\n l: oklchColor.l || 0,\n c: oklchColor.c || 0,\n h: oklchColor.h || 0,\n };\n}\n\nfunction oklchToRgb(\n l: number,\n c: number,\n h: number,\n): { r: number; g: number; b: number } {\n const rgbColor = rgb({ mode: \"oklch\", l, c, h });\n if (!rgbColor) throw new Error(\"Invalid OKLCH values\");\n\n return {\n r: rgbColor.r || 0,\n g: rgbColor.g || 0,\n b: rgbColor.b || 0,\n };\n}\n\nfunction rgbToHex(rgbColor: { r: number; g: number; b: number }): string {\n return formatHex({ mode: \"rgb\", ...rgbColor });\n}\n\nfunction interpolate(start: number, end: number, factor: number): number {\n return start + (end - start) * factor;\n}\n\nfunction findBestShadePosition(baseColor: string): number {\n const baseOklch = toOklch(baseColor);\n const targetLuminances = [\n 0.985, 0.967, 0.922, 0.87, 0.708, 0.556, 0.439, 0.371, 0.269, 0.205, 0.145,\n ];\n\n let bestIndex = 0;\n let minDifference = Math.abs(targetLuminances[0] - baseOklch.l);\n\n for (let i = 1; i < targetLuminances.length; i++) {\n const difference = Math.abs(targetLuminances[i] - baseOklch.l);\n if (difference < minDifference) {\n minDifference = difference;\n bestIndex = i;\n }\n }\n\n return bestIndex;\n}\n\nfunction generateTailwindPalette(baseColor: string): PaletteColor[] {\n const stops = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];\n const baseOklch = toOklch(baseColor);\n const basePosition = findBestShadePosition(baseColor);\n\n const lightEndpoint = {\n l: 0.985,\n c: Math.max(0.002, baseOklch.c * 0.05),\n h: baseOklch.h,\n };\n const darkEndpoint = {\n l: 0.145,\n c: Math.max(0.02, baseOklch.c * 0.6),\n h: baseOklch.h,\n };\n\n const palette: PaletteColor[] = [];\n\n for (let i = 0; i < stops.length; i++) {\n let interpolatedColor: { l: number; c: number; h: number };\n\n if (i === basePosition) {\n interpolatedColor = baseOklch;\n } else if (i < basePosition) {\n const factor = (basePosition - i) / basePosition;\n interpolatedColor = {\n l: interpolate(baseOklch.l, lightEndpoint.l, factor),\n c: interpolate(baseOklch.c, lightEndpoint.c, factor * 0.8),\n h: baseOklch.h,\n };\n } else {\n const factor = (i - basePosition) / (stops.length - 1 - basePosition);\n interpolatedColor = {\n l: interpolate(baseOklch.l, darkEndpoint.l, factor),\n c: interpolate(baseOklch.c, darkEndpoint.c, factor * 0.9),\n h: baseOklch.h,\n };\n }\n\n const rgbColor = oklchToRgb(\n interpolatedColor.l,\n interpolatedColor.c,\n interpolatedColor.h,\n );\n const hex = rgbToHex(rgbColor);\n\n palette.push({\n name: stops[i].toString(),\n value: hex,\n });\n }\n\n return palette;\n}\n\n// ============================================================================\n// TINTE TO SHADCN CONVERSION\n// ============================================================================\n\nconst DEFAULT_FONTS = {\n \"font-sans\": \"Inter, system-ui, sans-serif\",\n \"font-serif\": \"Georgia, serif\",\n \"font-mono\": \"JetBrains Mono, monospace\",\n};\n\nconst DEFAULT_BASE = {\n \"radius-sm\": \"0.25rem\",\n \"radius-md\": \"0.5rem\",\n \"radius-lg\": \"0.75rem\",\n \"radius-xl\": \"1rem\",\n radius: \"0.5rem\",\n};\n\nconst DEFAULT_SHADOWS = {\n \"shadow-color\": \"#000000\",\n \"shadow-opacity\": \"0.1\",\n \"shadow-offset-x\": \"0px\",\n \"shadow-offset-y\": \"2px\",\n \"shadow-blur\": \"4px\",\n \"shadow-spread\": \"0px\",\n};\n\ntype ThemeMode = \"light\" | \"dark\";\n\nconst ANCHORS = {\n light: { primary: 600, border: 200, muted: 100, mutedFg: 600, accent: 300 },\n dark: { primary: 400, border: 800, muted: 900, mutedFg: 300, accent: 700 },\n} as const;\n\nconst clamp01 = (v: number) => Math.max(0, Math.min(1, v));\n\nconst L = (hex: string) => {\n const c = rgb(hex);\n if (!c) return 0;\n const lin = (x: number) =>\n x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;\n return 0.2126 * lin(c.r) + 0.7152 * lin(c.g) + 0.0722 * lin(c.b);\n};\n\nconst contrast = (a: string, b: string) => {\n const la = L(a),\n lb = L(b);\n const lighter = Math.max(la, lb),\n darker = Math.min(la, lb);\n return (lighter + 0.05) / (darker + 0.05);\n};\n\nconst bestTextFor = (bg: string) => {\n const w = \"#ffffff\",\n k = \"#000000\";\n return contrast(w, bg) >= contrast(k, bg) ? w : k;\n};\n\nconst tweakL = (hex: string, dL: number) => {\n const c = oklch(hex);\n if (!c) return hex;\n return formatHex({\n mode: \"oklch\" as const,\n l: clamp01(c.l + dL),\n c: Math.max(0, c.c),\n h: c.h,\n });\n};\n\nfunction buildNeutralRamp(block: TinteBlock): string[] {\n const seed = block.ui || block.ui_2 || block.ui_3 || block.bg || \"#808080\";\n return generateTailwindPalette(seed).map((s) => s.value);\n}\n\nfunction buildRamp(seed?: string): string[] {\n return generateTailwindPalette(seed || \"#64748b\").map((s) => s.value);\n}\n\nconst pick = (ramp: string[], step: number) => {\n const idx = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].indexOf(\n step,\n );\n return ramp[Math.max(0, idx)];\n};\n\nconst surface = (bg: string, mode: ThemeMode, delta = 0.02) => {\n return tweakL(bg, mode === \"light\" ? +delta : -delta);\n};\n\nfunction computeShadowVars(\n tokens: Record