@orangecheck/design 0.28.1 → 0.28.2

package/dist/styles/sigil.css

@@ -65,79 +65,23 @@
 @keyframes oc-sigil-drift {
     0%,
     100% {
-        transform: rotateX(14deg) rotateY(calc(-8deg + var(--oc-sigil-seed, 0deg)));
+        transform: rotateX(20deg) rotateY(calc(-26deg + var(--oc-sigil-seed, 0deg)));
     }
     50% {
-        transform: rotateX(17deg) rotateY(calc(-4deg + var(--oc-sigil-seed, 0deg)));
+        transform: rotateX(26deg) rotateY(calc(-16deg + var(--oc-sigil-seed, 0deg)));
     }
 }
 
+/* Layers are absolutely stacked; their translateZ + color ramp (the 3D relief)
+   are computed per-layer in the component so depth is tunable in one place. The
+   mark is always the OUTLINE form (the tile drops away), extruded into a solid
+   slab that recolors per skin via currentColor. */
 .oc-sigil__layer {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
-}
-/* opaque relief ramp — the back layers are the extrusion wall dissolving into
-   the page background; the FRONT FACE (layer-5) is a defined --primary
-   silhouette so the mark reads even where it sits over a same-hue aurora bloom
-   (the ember-first minimum-visibility floor). The ramp endpoints ARE the
-   compiled-in visibility floor + contrast ceiling; because the layers are
-   opaque, the front face occludes the aurora within the glyph rather than
-   tinting through it, and only the perspective-spread bevel behind it fades. */
-.oc-sigil__layer-0 {
-    transform: translateZ(0px);
-    color: color-mix(in oklab, var(--primary), var(--background) 92%);
-}
-.oc-sigil__layer-1 {
-    transform: translateZ(4px);
-    color: color-mix(in oklab, var(--primary), var(--background) 84%);
-}
-.oc-sigil__layer-2 {
-    transform: translateZ(8px);
-    color: color-mix(in oklab, var(--primary), var(--background) 72%);
-}
-.oc-sigil__layer-3 {
-    transform: translateZ(12px);
-    color: color-mix(in oklab, var(--primary), var(--background) 56%);
-}
-.oc-sigil__layer-4 {
-    transform: translateZ(16px);
-    color: color-mix(in oklab, var(--primary), var(--background) 40%);
-}
-.oc-sigil__layer-5 {
-    transform: translateZ(20px);
-    color: color-mix(in oklab, var(--primary), var(--background) 22%);
-}
-
-/* register switch — filled letterpress under ember (the bare-root default),
-   wireframe under the four cypherpunk skins; both stacks are in the markup so
-   the swap is pure CSS (no hydration flash, no JS) */
-.oc-sigil__use-wire {
-    display: none;
-}
-:root[data-oc-theme='orangecheck'] .oc-sigil__use-filled,
-:root[data-oc-theme='phosphor'] .oc-sigil__use-filled,
-:root[data-oc-theme='lightning'] .oc-sigil__use-filled,
-:root[data-oc-theme='gold'] .oc-sigil__use-filled {
-    display: none;
-}
-:root[data-oc-theme='orangecheck'] .oc-sigil__use-wire,
-:root[data-oc-theme='phosphor'] .oc-sigil__use-wire,
-:root[data-oc-theme='lightning'] .oc-sigil__use-wire,
-:root[data-oc-theme='gold'] .oc-sigil__use-wire {
-    display: inline;
-}
-/* wireframe stack thins to fewer visible planes — terminal register */
-:root[data-oc-theme='orangecheck'] .oc-sigil__layer-1,
-:root[data-oc-theme='orangecheck'] .oc-sigil__layer-3,
-:root[data-oc-theme='phosphor'] .oc-sigil__layer-1,
-:root[data-oc-theme='phosphor'] .oc-sigil__layer-3,
-:root[data-oc-theme='lightning'] .oc-sigil__layer-1,
-:root[data-oc-theme='lightning'] .oc-sigil__layer-3,
-:root[data-oc-theme='gold'] .oc-sigil__layer-1,
-:root[data-oc-theme='gold'] .oc-sigil__layer-3 {
-    display: none;
+    backface-visibility: hidden;
 }
 
 /* mobile = hidden, full stop — decoration never spends phone-fold real estate */

package/dist/tokens.js

@@ -955,7 +955,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");
 }
@@ -968,8 +987,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 = react.useMemo(() => sub(OC_GLYPHS[glyph], "currentColor", "currentColor"), [glyph]);
-  const wire = react.useMemo(() => sub(OC_GLYPHS[glyph], "none", "currentColor"), [glyph]);
+  const mark = react.useMemo(() => sub(OC_GLYPHS[glyph], "none", "currentColor"), [glyph]);
   react.useEffect(() => {
     if (!parallax) return;
     const el = parRef.current;
@@ -1017,14 +1035,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__ */ jsxRuntime.jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("g", { id: `${id}-filled`, dangerouslySetInnerHTML: { __html: filled } }),
-          /* @__PURE__ */ jsxRuntime.jsx("g", { id: `${id}-wire`, dangerouslySetInnerHTML: { __html: wire } })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oc-sigil__drift oc-ambient", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: parRef, className: "oc-sigil__par", children: LAYERS.map((n) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 1024 1024", className: `oc-sigil__layer oc-sigil__layer-${n}`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("use", { className: "oc-sigil__use-filled", href: `#${id}-filled` }),
-          /* @__PURE__ */ jsxRuntime.jsx("use", { className: "oc-sigil__use-wire", href: `#${id}-wire` })
-        ] }, n)) }) })
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("g", { id: `${id}-mark`, dangerouslySetInnerHTML: { __html: mark } }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oc-sigil__drift oc-ambient", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: parRef, className: "oc-sigil__par", children: LAYERS.map((n) => /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            viewBox: "0 0 1024 1024",
+            className: "oc-sigil__layer",
+            style: layerStyle(n),
+            children: /* @__PURE__ */ jsxRuntime.jsx("use", { href: `#${id}-mark` })
+          },
+          n
+        )) }) })
       ]
     }
   );