"use client" import React, { useCallback, useState } from "react" import { Check, Copy, Lock, LockOpen, Palette, RefreshCw } from "lucide-react" import { motion } from "motion/react" import { Poline, positionFunctions } from "poline" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import ColorPicker from "../ui/color-picker" type ColorScheme = { [key: string]: string } export function ColorPickerDemo() { const [colorScheme, setColorScheme] = useState({ background: "0 0% 100%", foreground: "240 10% 3.9%", card: "0 0% 100%", "card-foreground": "240 10% 3.9%", popover: "0 0% 100%", "popover-foreground": "240 10% 3.9%", primary: "240 5.9% 10%", "primary-foreground": "0 0% 98%", secondary: "240 4.8% 95.9%", "secondary-foreground": "240 5.9% 10%", muted: "240 4.8% 95.9%", "muted-foreground": "240 3.8% 46.1%", accent: "240 4.8% 95.9%", "accent-foreground": "240 5.9% 10%", destructive: "0 84.2% 60.2%", "destructive-foreground": "0 0% 98%", border: "240 5.9% 90%", input: "240 5.9% 90%", ring: "240 5.9% 10%", }) const [lockedColor, setLockedColor] = useState(null) const [copied, setCopied] = useState(false) const generateHarmoniousColors = useCallback(() => { let anchorColors: [number, number, number][] = [] if (lockedColor) { const [h, s, l] = colorScheme[lockedColor].split(" ").map(parseFloat) anchorColors.push([h, s / 100, l / 100]) } while (anchorColors.length < 3) { anchorColors.push([Math.random() * 360, 0.7, 0.5]) } const poline = new Poline({ numPoints: 20, anchorColors, positionFunctionX: positionFunctions.sinusoidalPosition, positionFunctionY: positionFunctions.quadraticPosition, positionFunctionZ: positionFunctions.linearPosition, }) const newColorScheme = { ...colorScheme } const colors = poline.colorsCSS Object.keys(newColorScheme).forEach((key, index) => { if (key !== lockedColor) { const color = colors[index % colors.length] const [h, s, l] = color.match(/\d+(\.\d+)?/g)?.map(Number) || [0, 0, 0] let adjustedLightness = l if (key.includes("foreground")) { adjustedLightness = Math.min(l - 30, 20) } else if (key === "background") { adjustedLightness = Math.max(l + 30, 90) } else if (key === "border" || key === "input") { adjustedLightness = Math.min(Math.max(l, 70), 90) } newColorScheme[key] = `${h.toFixed(1)} ${s.toFixed( 1 )}% ${adjustedLightness.toFixed(1)}%` } }) setColorScheme(newColorScheme) }, [colorScheme, lockedColor]) const resetColors = useCallback(() => { setColorScheme({ background: "0 0% 100%", foreground: "240 10% 3.9%", card: "0 0% 100%", "card-foreground": "240 10% 3.9%", popover: "0 0% 100%", "popover-foreground": "240 10% 3.9%", primary: "240 5.9% 10%", "primary-foreground": "0 0% 98%", secondary: "240 4.8% 95.9%", "secondary-foreground": "240 5.9% 10%", muted: "240 4.8% 95.9%", "muted-foreground": "240 3.8% 46.1%", accent: "240 4.8% 95.9%", "accent-foreground": "240 5.9% 10%", destructive: "0 84.2% 60.2%", "destructive-foreground": "0 0% 98%", border: "240 5.9% 90%", input: "240 5.9% 90%", ring: "240 5.9% 10%", }) setLockedColor(null) }, []) const copyColorScheme = useCallback(() => { const cssVariables = Object.entries(colorScheme) .map(([key, value]) => `--${key}: ${value};`) .join("\n ") const fullCss = `@layer base { :root { ${cssVariables} } }` navigator.clipboard.writeText(fullCss) setCopied(true) setTimeout(() => setCopied(false), 2000) }, [colorScheme]) const getContrastColor = useCallback((color: string) => { const [, , lightness] = color.split(" ").map(parseFloat) return lightness > 50 ? "0 0% 0%" : "0 0% 100%" }, []) const toggleLock = useCallback((key: string) => { setLockedColor((prev) => (prev === key ? null : key)) }, []) return (

{Object.entries(colorScheme).map(([key, value]) => (

{key}

{ const [h, s, l] = newColor .match(/\d+(\.\d+)?/g) ?.map(Number) || [0, 0, 0] setColorScheme({ ...colorScheme, [key]: `${h.toFixed(1)} ${s.toFixed(1)}% ${l.toFixed( 1 )}%`, }) }} />

))}

Color Preview

Experience your color palette in action. This preview showcases your selected colors.

{Object.entries(colorScheme).map(([key, value]) => (

{key}

Click to copy

))}

) }

color-picker

Source Code