@orangecheck/design 0.28.8 → 0.28.9

package/dist/tokens.mjs

@@ -954,40 +954,86 @@ var OC_GLYPHS = {
   btc: `<path d="M373 1414V1676H531V1414ZM670 1414V1676H829V1414ZM373 -186V76H531V-186ZM670 -186V76H829V-186ZM129 0V1490H705Q863 1490 972.50 1441Q1082 1392 1139 1305.50Q1196 1219 1196 1103Q1196 1016 1164 951Q1132 886 1074 843Q1016 800 937 779V774Q1024 765 1095.50 721Q1167 677 1210 600.50Q1253 524 1253 416Q1253 293 1194.50 199Q1136 105 1020 52.50Q904 0 731 0ZM391 217H700Q838 217 910.50 272.50Q983 328 983 428Q983 497 950 547.50Q917 598 855.50 626Q794 654 707 654H391ZM391 858H688Q762 858 817 883.50Q872 909 902 956Q932 1003 932 1068Q932 1161 868 1217.50Q804 1274 689 1274H391Z" fill="__INK__" transform="translate(238.3907 806.9912) scale(0.395961 -0.395961)"/>`
 };
 var DEPTH = 22;
-var Z_STEP = 3;
 var LAYERS = Array.from({ length: DEPTH }, (_, i) => i);
-function layerStyle(i) {
+var FILL = /* @__PURE__ */ new Set(["orangecheck", "btc", "vote"]);
+var INK = "var(--oc-sigil-ink, var(--oc-sigil-ink-base, var(--primary)))";
+var LIFT = "var(--oc-sigil-lift, white)";
+var SHADE = `var(--oc-sigil-shade, color-mix(in oklab, black, ${INK} 30%))`;
+function layerStyle(i, relief) {
   const t = i / (DEPTH - 1);
-  const ink = "var(--oc-sigil-ink, var(--primary))";
-  const bg = "var(--oc-sigil-bg, var(--background))";
   let color;
   if (t < 0.14) {
-    color = `color-mix(in oklab, ${ink}, white ${Math.round((0.14 - t) * 26)}%)`;
-  } else if (t < 0.6) {
-    const k = (t - 0.14) / 0.46;
-    color = `color-mix(in oklab, ${ink}, black ${Math.round(k * 34)}%)`;
+    color = `color-mix(in oklab, ${INK}, ${LIFT} ${Math.round((0.14 - t) / 0.14 * 18)}%)`;
+  } else if (t < 0.55) {
+    const k = (t - 0.14) / 0.41;
+    color = `color-mix(in oklab, ${INK}, ${SHADE} ${Math.round(k * 45)}%)`;
   } else {
-    const k = (t - 0.6) / 0.4;
-    color = `color-mix(in oklab, color-mix(in oklab, ${ink}, black 34%), ${bg} ${Math.round(k * 100)}%)`;
+    const k = (t - 0.55) / 0.45;
+    color = `color-mix(in oklab, color-mix(in oklab, ${INK}, ${SHADE} 45%), transparent ${Math.round(Math.pow(k, 1.3) * 100)}%)`;
   }
-  return {
-    transform: `translateZ(${-i * Z_STEP}px)`,
-    color
-  };
+  return { transform: `translateZ(${(-Math.pow(t, 1.4) * relief).toFixed(1)}px)`, color };
 }
-function sub(markup) {
-  return markup.split("__INK__").join("currentColor").split("__BG__").join("none").split("__FG__").join("none");
+var TILE = /* @__PURE__ */ new Set(["stamp", "pledge", "cosign", "me", "fleet", "docs"]);
+var FOCUS = {
+  stamp: "translate(512 512) scale(1.5) translate(-512 -512)",
+  // anchor-cross
+  pledge: "translate(512 512) scale(1.7) translate(-491 -512)",
+  // ₱ mark, recentered
+  cosign: "translate(512 512) scale(1.35) translate(-512 -512)",
+  // two figures
+  me: "translate(512 512) scale(1.45) translate(-512 -544)",
+  // bust, recentered down
+  fleet: "translate(512 512) scale(1.5) translate(-512 -512)",
+  // play + bar
+  docs: "translate(512 512) scale(1.4) translate(-512 -512)",
+  // text lines
+  vote: "translate(512 512) scale(0.92) translate(-512 -542)",
+  // tall bars, nudged down
+  btc: "translate(512 512) scale(1.25) translate(-512 -512)"
+  // ₿
+};
+function normSw(w) {
+  return w < 1.3 ? 1.3 : w > 1.8 ? 1.7 : w;
 }
-function OcSigil({ glyph, corner = "bottom-left", parallax = true, className }) {
+function prepare(glyph, markup) {
+  let m = markup.split("__INK__").join("currentColor").split("__BG__").join("none").split("__FG__").join("none");
+  if (TILE.has(glyph)) {
+    m = m.replace(/<rect x="6" y="6" width="12" height="12"[^>]*\/>/, "");
+  }
+  m = m.replace(/stroke-width="([\d.]+)"/g, (_, w) => `stroke-width="${normSw(parseFloat(w))}"`);
+  const focus = FOCUS[glyph];
+  return focus ? `<g transform="${focus}">${m}</g>` : m;
+}
+var SEED = {
+  attest: [-7, 2],
+  lock: [-4, -2],
+  vote: [6, 0],
+  stamp: [2, -2],
+  agent: [-2, 3],
+  pledge: [5, 2],
+  chat: [-6, -1],
+  cosign: [1, -3],
+  vault: [4, 1],
+  me: [-3, 2],
+  fleet: [7, -2],
+  docs: [0, 0],
+  analytics: [-5, 1],
+  btc: [4, 3],
+  orangecheck: [0, 0]
+};
+function OcSigil({
+  glyph,
+  corner = "bottom-left",
+  parallax = true,
+  band = false,
+  className
+}) {
   const rawId = useId();
   const id = useMemo(() => `oc-sigil-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [rawId]);
   const parRef = useRef(null);
-  const seed = useMemo(() => {
-    let h = 0;
-    for (const ch of glyph) h = h * 31 + ch.charCodeAt(0) | 0;
-    return (h % 7 - 3) * 1.5;
-  }, [glyph]);
-  const mark = useMemo(() => sub(OC_GLYPHS[glyph]), [glyph]);
+  const mark = useMemo(() => prepare(glyph, OC_GLYPHS[glyph]), [glyph]);
+  const relief = FILL.has(glyph) ? 30 : 48;
+  const [seedY, seedX] = SEED[glyph];
   useEffect(() => {
     if (!parallax) return;
     const el = parRef.current;
@@ -1002,16 +1048,16 @@ function OcSigil({ glyph, corner = "bottom-left", parallax = true, className })
     const allowed = () => !prm.matches && document.documentElement.getAttribute("data-oc-motion") !== "off";
     const onMove = (e) => {
       if (!allowed()) return;
-      tx = (e.clientX / innerWidth - 0.5) * 10;
-      ty = (e.clientY / innerHeight - 0.5) * -10;
+      tx = Math.tanh((e.clientX / innerWidth - 0.5) * 2 * 1.2) * 5;
+      ty = Math.tanh((e.clientY / innerHeight - 0.5) * 2 * 1.2) * -5;
       if (!raf) raf = requestAnimationFrame(step);
     };
     const step = () => {
       raf = 0;
-      cx += (tx - cx) * 0.06;
-      cy += (ty - cy) * 0.06;
-      el.style.setProperty("--oc-sigil-ry", `${Math.max(-5, Math.min(5, cx)).toFixed(2)}deg`);
-      el.style.setProperty("--oc-sigil-rx", `${Math.max(-5, Math.min(5, cy)).toFixed(2)}deg`);
+      cx += (tx - cx) * 0.045;
+      cy += (ty - cy) * 0.045;
+      el.style.setProperty("--oc-sigil-ry", `${cx.toFixed(2)}deg`);
+      el.style.setProperty("--oc-sigil-rx", `${cy.toFixed(2)}deg`);
       if (Math.abs(tx - cx) + Math.abs(ty - cy) > 0.05) raf = requestAnimationFrame(step);
     };
     const onPrm = () => {
@@ -1032,20 +1078,37 @@ function OcSigil({ glyph, corner = "bottom-left", parallax = true, className })
     "div",
     {
       "aria-hidden": "true",
-      className: cn("oc-sigil", `oc-sigil--${corner}`, className),
-      style: { "--oc-sigil-seed": `${seed}deg` },
+      className: cn("oc-sigil", `oc-sigil--${corner}`, band && "oc-sigil--band", className),
+      style: {
+        "--oc-sigil-seed": `${seedY}deg`,
+        "--oc-sigil-seed-x": `${seedX}deg`
+      },
       children: [
         /* @__PURE__ */ jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, "aria-hidden": "true", children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("g", { id: `${id}-mark`, dangerouslySetInnerHTML: { __html: mark } }) }) }),
-        /* @__PURE__ */ jsx("div", { className: "oc-sigil__drift oc-ambient", children: /* @__PURE__ */ jsx("div", { ref: parRef, className: "oc-sigil__par", children: LAYERS.map((n) => /* @__PURE__ */ jsx(
-          "svg",
-          {
-            viewBox: "0 0 1024 1024",
-            className: "oc-sigil__layer",
-            style: layerStyle(n),
-            children: /* @__PURE__ */ jsx("use", { href: `#${id}-mark` })
-          },
-          n
-        )) }) })
+        /* @__PURE__ */ jsx("div", { className: "oc-sigil__drift oc-ambient", children: /* @__PURE__ */ jsxs("div", { ref: parRef, className: "oc-sigil__par", children: [
+          LAYERS.map((n) => /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: "0 0 1024 1024",
+              className: "oc-sigil__layer",
+              style: layerStyle(n, relief),
+              children: /* @__PURE__ */ jsx("use", { href: `#${id}-mark` })
+            },
+            n
+          )),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: "0 0 1024 1024",
+              className: "oc-sigil__layer oc-sigil__spec",
+              style: {
+                transform: "translateZ(1.5px)",
+                color: `color-mix(in oklab, ${INK}, ${LIFT} 45%)`
+              },
+              children: /* @__PURE__ */ jsx("use", { href: `#${id}-mark` })
+            }
+          )
+        ] }) })
       ]
     }
   );