feat: ability to copy colors in v4 docs

package.json

@@ -17,6 +17,7 @@
     "@tailwindcss/postcss": "4.0.0",
     "@types/mdx": "^2.0.13",
     "clsx": "^2.1.1",
+    "colorizr": "^3.0.7",
     "dedent": "^1.5.3",
     "fathom-client": "^3.7.2",
     "feed": "^4.2.2",

src/components/color-palette.tsx

@@ -3,16 +3,22 @@ import path from "node:path";
 
 import { fileURLToPath } from "node:url";
 import React from "react";
+import { Color } from "./color";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const styles = await fs.readFile(path.join(__dirname, "../../node_modules/tailwindcss/theme.css"), "utf-8");
+const styles = await fs.readFile(
+  path.join(__dirname, "../../node_modules/tailwindcss/theme.css"),
+  "utf-8",
+);
 
-let colors: Record<string, Record<string, string>> = {};
-for (let line of styles.split("\n")) {
+const colors: Record<string, Record<string, string>> = {};
+for (const line of styles.split("\n")) {
   if (line.startsWith("  --color-")) {
-    const [key, value] = line.split(":").map((part) => part.trim().replace(";", ""));
+    const [key, value] = line
+      .split(":")
+      .map((part) => part.trim().replace(";", ""));
     const match = key.match(/^--color-([a-z]+)-(\d+)$/);
 
     if (match) {
@@ -45,14 +51,12 @@ export function ColorPalette() {
       </div>
       {Object.entries(colors).map(([key, shades]) => (
         <React.Fragment key={key}>
-          <p className="font-medium text-gray-950 capitalize sm:pr-12 dark:text-white">{key}</p>
+          <p className="font-medium text-gray-950 capitalize sm:pr-12 dark:text-white">
+            {key}
+          </p>
           <div className="grid grid-cols-11 gap-1.5 sm:gap-4">
             {Object.keys(shades).map((shade, i) => (
-              <div
-                key={i}
-                style={{ backgroundColor: `var(--color-${key}-${shade})` }}
-                className="aspect-1/1 rounded-sm outline -outline-offset-1 outline-black/10 sm:rounded-md dark:outline-white/10"
-              />
+              <Color key={i} name={key} shade={shade} />
             ))}
           </div>
         </React.Fragment>

src/components/color.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { oklch2hex } from "colorizr";
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import {
+  Button,
+  Tooltip,
+  TooltipPanel,
+  TooltipTrigger,
+} from "@headlessui/react";
+
+export function Color({ name, shade }: { name: string; shade: string }) {
+  const [justCopied, setJustCopied] = useState(false);
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const colorVariableName = `--color-${name}-${shade}`;
+
+  const copyHexToClipboard = () => {
+    if (!buttonRef.current) {
+      return;
+    }
+
+    const styleValue = buttonRef.current
+      .computedStyleMap()
+      .get(colorVariableName);
+
+    if (!styleValue) {
+      return;
+    }
+
+    const oklchWithCSSFunctionalNotation = styleValue.toString();
+
+    // oklch(0.808 0.114 19.571) to 0.808 0.114 19.571
+    const oklch = oklchWithCSSFunctionalNotation.slice(6, -1);
+
+    // 0.808 0.114 19.571 to [0.808, 0.114, 19.571]
+    const oklchTuple = oklch.split(" ").map(Number) as [number, number, number];
+
+    const hex = oklch2hex(oklchTuple);
+
+    navigator.clipboard.writeText(hex);
+
+    setJustCopied(true);
+  };
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (!justCopied) {
+        return;
+      }
+
+      setJustCopied(false);
+    }, 1300);
+
+    return () => clearTimeout(timeout);
+  }, [justCopied]);
+
+  return (
+    <Tooltip as="div" showDelayMs={100} hideDelayMs={0} className="relative">
+      <TooltipTrigger>
+        <Button
+          ref={buttonRef}
+          type="button"
+          onClick={copyHexToClipboard}
+          onTouchEnd={copyHexToClipboard}
+          style={{ backgroundColor: `var(${colorVariableName})` }}
+          className={clsx(
+            "h-full w-full cursor-pointer aspect-1/1 rounded-sm outline -outline-offset-1 outline-black/10 sm:rounded-md dark:outline-white/10 flex items-center justify-center",
+          )}
+        />
+      </TooltipTrigger>
+      <TooltipPanel
+        as="div"
+        anchor="top"
+        className="pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0"
+      >
+        {justCopied ? "Copied!" : "Click to copy"}
+      </TooltipPanel>
+    </Tooltip>
+  );
+  /*
+
+  */
+}