@orangecheck/design 0.28.0 → 0.28.2

package/dist/tokens.mjs

@@ -953,7 +953,26 @@ var OC_GLYPHS = {
   analytics: `<g transform="scale(42.666667 42.666667)"><rect x="3" y="3" width="18" height="18" fill="__FG__"/><path d="M6 17 L10 12 L14 15 L18 8" fill="none" stroke="__INK__" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter"/><rect x="16.6" y="6.6" width="2.8" height="2.8" fill="__INK__"/></g>`,
   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="__FG__" transform="translate(238.3907 806.9912) scale(0.395961 -0.395961)"/>`
 };
-var LAYERS = [0, 1, 2, 3, 4, 5];
+var DEPTH = 22;
+var Z_STEP = 3;
+var LAYERS = Array.from({ length: DEPTH }, (_, i) => i);
+function layerStyle(i) {
+  const t = i / (DEPTH - 1);
+  let color;
+  if (t < 0.12) {
+    color = `color-mix(in oklab, var(--primary), white ${Math.round((0.12 - t) * 60)}%)`;
+  } else if (t < 0.62) {
+    const k = (t - 0.12) / 0.5;
+    color = `color-mix(in oklab, var(--primary), black ${Math.round(k * 42)}%)`;
+  } else {
+    const k = (t - 0.62) / 0.38;
+    color = `color-mix(in oklab, color-mix(in oklab, var(--primary), black 42%), var(--background) ${Math.round(k * 100)}%)`;
+  }
+  return {
+    transform: `translateZ(${-i * Z_STEP}px)`,
+    color
+  };
+}
 function sub(markup, fg, ink) {
   return markup.split("__FG__").join(fg).split("__INK__").join(ink).split("__BG__").join("none");
 }
@@ -966,8 +985,7 @@ function OcSigil({ glyph, corner = "bottom-left", parallax = true, className })
     for (const ch of glyph) h = h * 31 + ch.charCodeAt(0) | 0;
     return (h % 7 - 3) * 1.5;
   }, [glyph]);
-  const filled = useMemo(() => sub(OC_GLYPHS[glyph], "currentColor", "currentColor"), [glyph]);
-  const wire = useMemo(() => sub(OC_GLYPHS[glyph], "none", "currentColor"), [glyph]);
+  const mark = useMemo(() => sub(OC_GLYPHS[glyph], "none", "currentColor"), [glyph]);
   useEffect(() => {
     if (!parallax) return;
     const el = parRef.current;
@@ -1015,14 +1033,17 @@ function OcSigil({ glyph, corner = "bottom-left", parallax = true, className })
       className: cn("oc-sigil", `oc-sigil--${corner}`, className),
       style: { "--oc-sigil-seed": `${seed}deg` },
       children: [
-        /* @__PURE__ */ jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, "aria-hidden": "true", children: /* @__PURE__ */ jsxs("defs", { children: [
-          /* @__PURE__ */ jsx("g", { id: `${id}-filled`, dangerouslySetInnerHTML: { __html: filled } }),
-          /* @__PURE__ */ jsx("g", { id: `${id}-wire`, dangerouslySetInnerHTML: { __html: wire } })
-        ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "oc-sigil__drift oc-ambient", children: /* @__PURE__ */ jsx("div", { ref: parRef, className: "oc-sigil__par", children: LAYERS.map((n) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 1024 1024", className: `oc-sigil__layer oc-sigil__layer-${n}`, children: [
-          /* @__PURE__ */ jsx("use", { className: "oc-sigil__use-filled", href: `#${id}-filled` }),
-          /* @__PURE__ */ jsx("use", { className: "oc-sigil__use-wire", href: `#${id}-wire` })
-        ] }, n)) }) })
+        /* @__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
+        )) }) })
       ]
     }
   );