Color() — ui Function Reference

Architecture documentation for the Color() function in color.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ Color() — ui Function Reference

Dependency Diagram

graph TD
  e4eb05c9_2389_12e0_41e4_c7c6e770a6a8["Color()"]
  3e078cfb_4251_05b4_0841_6631d42dc83f["color.tsx"]
  e4eb05c9_2389_12e0_41e4_c7c6e770a6a8 -->|defined in| 3e078cfb_4251_05b4_0841_6631d42dc83f
  style e4eb05c9_2389_12e0_41e4_c7c6e770a6a8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/color.tsx lines 11–54

export function Color({ color }: { color: Color }) {
  const { format } = useColors()
  const { isCopied, copyToClipboard } = useCopyToClipboard()

  return (
    <button
      key={color.hex}
      className="group relative flex aspect-[3/1] w-full flex-1 flex-col gap-2 text-[--text] sm:aspect-[2/3] sm:h-auto sm:w-auto [&>svg]:absolute [&>svg]:right-4 [&>svg]:top-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:opacity-0 [&>svg]:transition-opacity"
      style={
        {
          "--bg": `hsl(${color.hsl})`,
          "--text": color.foreground,
        } as React.CSSProperties
      }
      onClick={() => {
        copyToClipboard(color[format])
        trackEvent({
          name: "copy_color",
          properties: {
            color: color.id,
            value: color[format],
            format,
          },
        })
        toast.success(`Copied ${color[format]} to clipboard.`)
      }}
    >
      {isCopied ? (
        <Check className="group-hover:opacity-100" />
      ) : (
        <Clipboard className="group-hover:opacity-100" />
      )}
      <div className="w-full flex-1 rounded-md bg-[--bg] md:rounded-lg" />
      <div className="flex w-full flex-col items-center justify-center gap-1">
        <span className="hidden font-mono text-xs tabular-nums text-muted-foreground transition-colors group-hover:text-foreground lg:flex">
          {color.className}
        </span>
        <span className="font-mono text-xs tabular-nums text-muted-foreground transition-colors group-hover:text-foreground lg:hidden">
          {color.scale}
        </span>
      </div>
    </button>
  )
}