@orangecheck/design 0.28.1 → 0.28.3

package/dist/styles/sigil.css

@@ -1,22 +1,20 @@
 /*
- * oc-sigil — the brand mark as a deep-set 3D emboss (aurora depth R3).
+ * oc-sigil — the brand mark as a translucent 3D watermark (aurora depth R3).
  *
- * Tier A is pure CSS: 6 stacked <use> copies of the normalized glyph under
- * perspective + translateZ, each an OPAQUE color-mix toward --background
- * (occlusion, not translucency — enclosed counters never moiré, and the
- * contrast ceiling is compiled in: the loudest layer sits 52% toward the
- * background, so worst-frame text contrast holds by construction). The drift
- * is compositor-only transform at aurora energy, carries `.oc-ambient`
- * (inherits the family oc_motion pause), and freezes under
- * prefers-reduced-motion.
+ * A large, see-through extruded relief of the verb's mark, sitting behind the
+ * hero and bleeding off a corner. Many thin <use> layers under perspective +
+ * translateZ give real depth (a lit front face, shadowed walls, a back that
+ * dissolves into --background); the whole object is composited at a low
+ * `--oc-sigil-opacity` so the aurora reads through it — present, dimensional,
+ * but muted. The drift carries `.oc-ambient` (family oc_motion pause) and
+ * freezes under prefers-reduced-motion.
  *
- * PRESERVE-3D FOOTGUN: never put mask / filter / opacity<1 / overflow on
- * .oc-sigil__drift or .oc-sigil__par — any of them silently flattens the
- * stack. The edge fade lives on the OUTER .oc-sigil wrapper, which is safe.
+ * Responsive by default: size is a clamp() so it scales with the viewport, and
+ * it stays visible (smaller, quieter) on phones. Position + size are tunable
+ * per-site via --oc-sigil-size / --oc-sigil-opacity / the corner classes.
  *
- * Two registers, one geometry, switched here in CSS (zero hydration flash):
- * ember (default root) shows the filled letterpress stack; the cypherpunk
- * skins show the wireframe stack instead.
+ * PRESERVE-3D FOOTGUN: opacity/mask/filter/overflow live on the OUTER wrapper
+ * ONLY — never on .oc-sigil__drift / .oc-sigil__par, or the 3D stack flattens.
  */
 
 .oc-sigil {
@@ -24,28 +22,38 @@
     pointer-events: none;
     contain: layout paint;
     perspective: 1100px;
-    /* edge fade on the wrapper (NOT the 3D stack) so the emboss dissolves
-       into the aurora field instead of ending in a hard box */
-    -webkit-mask-image: radial-gradient(120% 120% at 55% 42%, #000 45%, transparent 92%);
-    mask-image: radial-gradient(120% 120% at 55% 42%, #000 45%, transparent 92%);
+    /* responsive footprint — scales with the smaller viewport axis, clamped */
+    width: var(--oc-sigil-size, clamp(240px, 52vmin, 600px));
+    height: var(--oc-sigil-size, clamp(240px, 52vmin, 600px));
+    /* translucent: the whole relief composites at this alpha so the aurora and
+       page read through it (a watermark, not an opaque object) */
+    opacity: var(--oc-sigil-opacity, 0.42);
+    /* soft edge fade so the mark dissolves into the field rather than ending in
+       a hard box (on the wrapper, which is safe for preserve-3d) */
+    -webkit-mask-image: radial-gradient(125% 125% at 55% 45%, #000 42%, transparent 90%);
+    mask-image: radial-gradient(125% 125% at 55% 45%, #000 42%, transparent 90%);
+}
+:root.dark .oc-sigil {
+    opacity: var(--oc-sigil-opacity, 0.5);
 }
 
-/* corner anchors — the bleed crops against the hero's overflow-hidden */
+/* corner anchors — the bleed crops against the hero's overflow-hidden. Offsets
+   are a share of the mark's own size so the crop is consistent at every width. */
 .oc-sigil--bottom-left {
-    left: -8%;
-    bottom: -16%;
+    left: -14%;
+    bottom: -18%;
 }
 .oc-sigil--bottom-right {
-    right: -8%;
-    bottom: -16%;
+    right: -14%;
+    bottom: -18%;
 }
 .oc-sigil--top-left {
-    left: -8%;
-    top: -14%;
+    left: -14%;
+    top: -16%;
 }
 .oc-sigil--top-right {
-    right: -8%;
-    top: -14%;
+    right: -14%;
+    top: -16%;
 }
 
 .oc-sigil__drift {
@@ -65,85 +73,37 @@
 @keyframes oc-sigil-drift {
     0%,
     100% {
-        transform: rotateX(14deg) rotateY(calc(-8deg + var(--oc-sigil-seed, 0deg)));
+        transform: rotateX(19deg) rotateY(calc(-24deg + var(--oc-sigil-seed, 0deg)));
     }
     50% {
-        transform: rotateX(17deg) rotateY(calc(-4deg + var(--oc-sigil-seed, 0deg)));
+        transform: rotateX(25deg) rotateY(calc(-14deg + 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 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%);
+    backface-visibility: hidden;
 }
 
-/* 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;
-}
-
-/* mobile = hidden, full stop — decoration never spends phone-fold real estate */
+/* Phones: stay visible but quieter and pushed further into the corner, so it
+   reads as ambient texture behind single-column content, never a wall behind
+   the copy. (It does NOT vanish — decoration should account for the screen,
+   not abandon it.) */
 @media (max-width: 640px) {
     .oc-sigil {
-        display: none;
+        width: var(--oc-sigil-size-sm, clamp(180px, 62vw, 320px));
+        height: var(--oc-sigil-size-sm, clamp(180px, 62vw, 320px));
+        opacity: var(--oc-sigil-opacity-sm, 0.28);
+    }
+    :root.dark .oc-sigil {
+        opacity: var(--oc-sigil-opacity-sm, 0.34);
     }
 }
 

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.14) {
+    color = `color-mix(in oklab, var(--primary), white ${Math.round((0.14 - t) * 26)}%)`;
+  } else if (t < 0.6) {
+    const k = (t - 0.14) / 0.46;
+    color = `color-mix(in oklab, var(--primary), black ${Math.round(k * 34)}%)`;
+  } else {
+    const k = (t - 0.6) / 0.4;
+    color = `color-mix(in oklab, color-mix(in oklab, var(--primary), black 34%), 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
+        )) }) })
       ]
     }
   );