Show and copy oklch value

Author: philipp-spiess

package.json

@@ -17,7 +17,6 @@
     "@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",

pnpm-lock.yaml

@@ -8,21 +8,16 @@ 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",
-);
+let styles = await fs.readFile(path.join(__dirname, "../../node_modules/tailwindcss/theme.css"), "utf-8");
 
-const colors: Record<string, Record<string, string>> = {};
-for (const line of styles.split("\n")) {
+let colors: Record<string, Record<string, string>> = {};
+for (let line of styles.split("\n")) {
   if (line.startsWith("  --color-")) {
-    const [key, value] = line
-      .split(":")
-      .map((part) => part.trim().replace(";", ""));
-    const match = key.match(/^--color-([a-z]+)-(\d+)$/);
+    let [key, value] = line.split(":").map((part) => part.trim().replace(";", ""));
+    let match = key.match(/^--color-([a-z]+)-(\d+)$/);
 
     if (match) {
-      const [, group, shade] = match;
+      let [, group, shade] = match;
 
       if (!colors[group]) {
         colors[group] = {};
@@ -51,12 +46,10 @@ 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) => (
-              <Color key={i} name={key} shade={shade} />
+              <Color key={i} name={key} shade={shade} value={shades[shade]} />
             ))}
           </div>
         </React.Fragment>

src/components/color-palette.tsx

@@ -1,86 +1,49 @@
 "use client";
 
-import { oklch2hex } from "colorizr";
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import clsx from "clsx";
-import {
-  Button,
-  Tooltip,
-  TooltipPanel,
-  TooltipTrigger,
-} from "@headlessui/react";
+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);
+export function Color({ name, shade, value }: { name: string; shade: string; value: string }) {
+  const panelRef = useRef<HTMLDivElement>(null);
 
   const colorVariableName = `--color-${name}-${shade}`;
 
-  const copyHexToClipboard = () => {
-    if (!buttonRef.current) {
+  function copyHexToClipboard(e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    let panel = panelRef.current;
+    if (!panel) {
       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);
+    let prevValue = panel.innerText;
+    navigator.clipboard.writeText(value);
+    panel.innerText = "Copied to clipboard!";
+    setTimeout(() => {
+      panel.innerText = prevValue;
     }, 1300);
-
-    return () => clearTimeout(timeout);
-  }, [justCopied]);
+  }
 
   return (
-    <Tooltip as="div" showDelayMs={100} hideDelayMs={0} className="relative">
+    <Tooltip as="div" showDelayMs={100} hideDelayMs={0} className="contents">
       <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",
+            "aspect-1/1 w-full rounded-sm outline -outline-offset-1 outline-black/10 sm:rounded-md dark:outline-white/10",
           )}
         />
       </TooltipTrigger>
       <TooltipPanel
         as="div"
         anchor="top"
+        ref={panelRef}
         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"}
+        {value}
       </TooltipPanel>
     </Tooltip>
   );
-  /*
-  
-  */
 }