@protolabsai/ui 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -35,6 +35,7 @@
     "@radix-ui/react-popover": "^1.1.16",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "culori": "^4.0.2",
     "@protolabsai/design": "0.5.0"
   },
   "peerDependencies": {
@@ -44,6 +45,7 @@
   "devDependencies": {
     "@storybook/react": "^10.4.1",
     "@storybook/react-vite": "^10.4.1",
+    "@types/culori": "^4.0.1",
     "@vitejs/plugin-react": "^4.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/src/styles/theming.css

@@ -116,7 +116,8 @@
   border: none;
   border-radius: calc(var(--pl-radius) - 1px);
 }
-.pl-theme-row__swatch--static {
+.pl-theme-row__swatch--none {
+  border-color: transparent;
   cursor: default;
 }
 .pl-theme-row__label {

package/src/theming.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { converter, formatHex, formatRgb, parse } from "culori";
 import tokens from "@protolabsai/design/tokens.json";
 import { Button } from "./primitives";
 import { cx } from "./internal";
@@ -54,7 +55,59 @@ const prettyLabel = (v: string) =>
     .trim()
     .replace(/\b\w/g, (c) => c.toUpperCase()) || v.replace(/^--pl-/, "");
 
-const isHex6 = (val: string) => /^#[0-9a-f]{6}$/i.test(val.trim());
+// ── Color format handling — every color token is pickable; a pick is written
+// back in the token's OWN format (hex / rgb(a) / hsl / oklch / oklab), alpha kept.
+const toRgb = converter("rgb");
+const toHsl = converter("hsl");
+const toOklch = converter("oklch");
+const toOklab = converter("oklab");
+const round = (n: number, d: number) => Math.round(n * 10 ** d) / 10 ** d;
+
+/** A token value culori can read as a color (vs a length like radius/border-width). */
+const isColor = (val: string) => !!parse(val);
+
+/** Hex for the native `<input type="color">` (drops alpha, sRGB-clamped — display only). */
+function toSwatchHex(val: string): string {
+  const c = parse(val);
+  return c ? formatHex(c) : "#000000";
+}
+
+function formatOf(val: string): "hex" | "rgb" | "hsl" | "oklch" | "oklab" | "other" {
+  const v = val.trim().toLowerCase();
+  if (v.startsWith("#")) return "hex";
+  if (v.startsWith("rgb")) return "rgb";
+  if (v.startsWith("hsl")) return "hsl";
+  if (v.startsWith("oklch")) return "oklch";
+  if (v.startsWith("oklab")) return "oklab";
+  return "other";
+}
+
+/** Reproject a freshly-picked hex into `original`'s color format, preserving its alpha. */
+function reformat(pickedHex: string, original: string): string {
+  const picked = parse(pickedHex);
+  if (!picked) return pickedHex;
+  const alpha = parse(original)?.alpha;
+  const hasA = alpha != null && alpha < 1;
+  const aTail = hasA ? ` / ${alpha}` : "";
+  switch (formatOf(original)) {
+    case "rgb":
+      return formatRgb({ ...toRgb(picked), alpha: hasA ? alpha : undefined });
+    case "hsl": {
+      const h = toHsl(picked);
+      return `hsl(${round(h.h ?? 0, 1)} ${round((h.s ?? 0) * 100, 1)}% ${round((h.l ?? 0) * 100, 1)}%${aTail})`;
+    }
+    case "oklch": {
+      const o = toOklch(picked);
+      return `oklch(${round(o.l ?? 0, 4)} ${round(o.c ?? 0, 4)} ${round(o.h ?? 0, 2)}${aTail})`;
+    }
+    case "oklab": {
+      const o = toOklab(picked);
+      return `oklab(${round(o.l ?? 0, 4)} ${round(o.a ?? 0, 4)} ${round(o.b ?? 0, 4)}${aTail})`;
+    }
+    default:
+      return formatHex(picked);
+  }
+}
 
 // ── Presets ─────────────────────────────────────────────────────────────────────
 export type ThemePreset = {
@@ -294,20 +347,20 @@ export function ThemePanel({
               <legend className="pl-theme-group__legend">{g.label}</legend>
               {vars.map((v) => {
                 const val = valueOf(v);
-                const hex = isHex6(val);
+                const color = isColor(val);
                 const changed = v in overrides;
                 return (
                   <label key={v} className={cx("pl-theme-row", changed && "pl-theme-row--changed")}>
-                    {hex ? (
+                    {color ? (
                       <input
                         type="color"
                         className="pl-theme-row__swatch"
-                        value={val}
-                        onInput={(e) => setVar(v, (e.target as HTMLInputElement).value)}
+                        value={toSwatchHex(val)}
+                        onInput={(e) => setVar(v, reformat((e.target as HTMLInputElement).value, val))}
                         aria-label={prettyLabel(v)}
                       />
                     ) : (
-                      <span className="pl-theme-row__swatch pl-theme-row__swatch--static" style={{ background: val }} aria-hidden />
+                      <span className="pl-theme-row__swatch pl-theme-row__swatch--none" aria-hidden />
                     )}
                     <span className="pl-theme-row__label" title={v}>
                       {prettyLabel(v)}