@orangecheck/design 0.28.8 → 0.28.10

package/dist/styles/sigil.css

@@ -1,27 +1,34 @@
 /*
  * oc-sigil — the brand mark as a translucent 3D watermark (aurora depth R3).
  *
- * 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,
+ * A large, see-through extruded relief of the verb's pictogram, sitting behind
+ * the hero and bleeding off a corner. Many thin <use> layers under perspective
+ * + eased translateZ give real depth (a lit front face via the specular leaf,
+ * chromatically-shaded walls, a back that dissolves to TRANSPARENT so the
+ * aurora composites through it); the whole object is composited at a low
+ * `--oc-sigil-opacity` so the field reads through it — present, dimensional,
  * but muted. The drift carries `.oc-ambient` (family oc_motion pause) and
  * freezes under prefers-reduced-motion.
  *
+ * Two registers, switched by `data-oc-theme` on the endpoint custom properties
+ * (--oc-sigil-lift / --oc-sigil-shade / --oc-sigil-ink-base): ember = lit
+ * letterpress relief; cypherpunk skins = unlit crisp echo stack. No hue is
+ * hardcoded — everything is a color-mix() off the skin's own tokens.
+ *
  * 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.
+ * it stays visible (smaller, quieter, re-anchored top-right) on phones.
+ * Position/size/opacity are tunable per-site via the --oc-sigil-* vars.
  *
  * 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.
+ * (The specular leaf's own mask is safe: it is a LEAF svg with no 3D children.)
  */
 
 .oc-sigil {
     position: absolute;
     pointer-events: none;
     contain: layout paint;
-    perspective: 1100px;
+    perspective: 1600px;
     /* 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));
@@ -30,39 +37,101 @@
        rides quieter — a mid-tone terracotta reads with less alpha over a
        near-white page than the same mark does over a dark one. */
     opacity: var(--oc-sigil-opacity, 0.4);
-    /* 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%);
+    /* soft edge fade — the mark dissolves into the field rather than ending in a
+       hard box. The solid core is aimed (per corner) at the hero-interior
+       quadrant that is actually on screen, since corner-bleed pushes the mark's
+       own center off-canvas. On the wrapper, which is safe for preserve-3d. */
+    -webkit-mask-image: radial-gradient(
+        120% 120% at var(--oc-sigil-mask-at, 55% 45%),
+        #000 48%,
+        transparent 90%
+    );
+    mask-image: radial-gradient(
+        120% 120% at var(--oc-sigil-mask-at, 55% 45%),
+        #000 48%,
+        transparent 90%
+    );
 }
 :root.dark .oc-sigil {
     opacity: var(--oc-sigil-opacity, 0.52);
 }
 
+/* Light grounds: form-from-shadow. A warm ink-tinted highlight (never chalk
+   white) so the lit face stays in the mark's hue family. Dark keeps pure white
+   (form-from-light). */
+:root:not(.dark) .oc-sigil {
+    --oc-sigil-lift: color-mix(in oklab, white, var(--oc-sigil-ink, var(--primary)) 30%);
+}
+
+/* ember dark rides the brighter --brand (0.645) instead of --primary (0.55) —
+   ember-scoped only, and via --oc-sigil-ink-base so the www band's explicit
+   --oc-sigil-ink still wins. Bare .dark == ember default; the cypherpunk skins
+   set their own data-oc-theme and must NOT inherit this slot. */
+:root.dark:not([data-oc-theme]) .oc-sigil,
+:root.dark[data-oc-theme='ember'] .oc-sigil {
+    --oc-sigil-ink-base: var(--brand);
+}
+
+/* Cypherpunk register — unlit crisp echo stack. lift = ink (flat front face,
+   auto-neutralizes the specular leaf); shade = transparent (walls FADE rather
+   than darken, so they only ever carry the skin's own ink — no olive, no gray,
+   alpha-correct over the aurora and over gold's cream page). Placed AFTER the
+   light-lift rule at equal specificity so it wins on source order. */
+:root[data-oc-theme='orangecheck'] .oc-sigil,
+:root[data-oc-theme='phosphor'] .oc-sigil,
+:root[data-oc-theme='lightning'] .oc-sigil,
+:root[data-oc-theme='gold'] .oc-sigil {
+    --oc-sigil-lift: var(--oc-sigil-ink, var(--primary));
+    --oc-sigil-shade: transparent;
+}
+
 /* 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. */
+   are a share of the mark's own size so the crop is consistent at every width;
+   the mask core is aimed at the on-screen interior quadrant per corner. */
 .oc-sigil--bottom-left {
     left: -14%;
     bottom: -18%;
+    --oc-sigil-mask-at: 70% 30%;
 }
 .oc-sigil--bottom-right {
     right: -14%;
     bottom: -18%;
+    --oc-sigil-mask-at: 30% 30%;
 }
 .oc-sigil--top-left {
     left: -14%;
     top: -16%;
+    --oc-sigil-mask-at: 70% 68%;
 }
 .oc-sigil--top-right {
     right: -14%;
     top: -16%;
+    --oc-sigil-mask-at: 30% 68%;
+}
+
+/* Band deboss preset — emboss the § into a full-bleed brand band. A taller,
+   right-weighted mask keeps the full glyph spine top-to-bottom; walls sink into
+   the band's own --brand (tone-on-tone deboss, no gray fringe). The consumer
+   supplies --oc-sigil-ink (e.g. --brand-foreground). Ships in the package so
+   band consumers don't rediscover it. Under a cypherpunk skin the register
+   block above wins --oc-sigil-shade (transparent) — the band then follows that
+   skin's echo look, which is intentional. */
+.oc-sigil--band {
+    --oc-sigil-mask-at: 62% 50%;
+    --oc-sigil-shade: var(--brand);
+    -webkit-mask-image: radial-gradient(
+        150% 185% at var(--oc-sigil-mask-at),
+        #000 55%,
+        transparent 95%
+    );
+    mask-image: radial-gradient(150% 185% at var(--oc-sigil-mask-at), #000 55%, transparent 95%);
 }
 
 .oc-sigil__drift {
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
-    animation: oc-sigil-drift 30s ease-in-out infinite;
+    animation: oc-sigil-drift 48s ease-in-out infinite;
 }
 
 .oc-sigil__par {
@@ -72,19 +141,28 @@
     transform: rotateX(var(--oc-sigil-rx, 0deg)) rotateY(var(--oc-sigil-ry, 0deg));
 }
 
+/* Shallow, art-directed rest (the 0% frame is what reduced-motion freezes at):
+   a ~5° breathing arc that never revisits the old steep -24° wall-dominant
+   extreme. Reads the per-slug seed on both axes. */
 @keyframes oc-sigil-drift {
     0%,
     100% {
-        transform: rotateX(19deg) rotateY(calc(-24deg + var(--oc-sigil-seed, 0deg)));
+        transform: rotateX(calc(14deg + var(--oc-sigil-seed-x, 0deg)))
+            rotateY(calc(-17deg + var(--oc-sigil-seed, 0deg)));
     }
-    50% {
-        transform: rotateX(25deg) rotateY(calc(-14deg + var(--oc-sigil-seed, 0deg)));
+    38% {
+        transform: rotateX(calc(17deg + var(--oc-sigil-seed-x, 0deg)))
+            rotateY(calc(-12deg + var(--oc-sigil-seed, 0deg)));
+    }
+    72% {
+        transform: rotateX(calc(15deg + var(--oc-sigil-seed-x, 0deg)))
+            rotateY(calc(-21deg + 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
+/* Layers are absolutely stacked; their eased translateZ + color ramp (the 3D
+   relief) are computed per-layer in the component so depth is tunable in one
+   place. The mark is the pictogram (tile frame stripped), extruded into a slab
    that recolors per skin via currentColor. */
 .oc-sigil__layer {
     position: absolute;
@@ -94,15 +172,26 @@
     backface-visibility: hidden;
 }
 
+/* Directional key light: a single upper-left catch on the front plane,
+   consistent with the negative resting yaw. One stated light across all corners
+   (do not flip per corner). Mask on this LEAF only — preserve-3d safe. */
+.oc-sigil__spec {
+    -webkit-mask-image: linear-gradient(135deg, #000 10%, transparent 55%);
+    mask-image: linear-gradient(135deg, #000 10%, transparent 55%);
+}
+
 /* Phones: single-column heroes stack tall, so a bottom anchor buries the mark
    below the fold. Re-anchor to the TOP-RIGHT corner (clear of a left-aligned
-   headline) so it lands in the first viewport, and keep it quiet. This wins on
-   specificity + source order over the desktop corner classes above. */
+   headline) so it lands in the first viewport, aim the mask core at the visible
+   quadrant, and hold a presence floor (light was sitting at the rejected
+   "barely visible" edge). Wins on specificity + source order over the desktop
+   corner classes above. */
 @media (max-width: 640px) {
     .oc-sigil {
         width: var(--oc-sigil-size-sm, clamp(170px, 56vw, 300px));
         height: var(--oc-sigil-size-sm, clamp(170px, 56vw, 300px));
-        opacity: var(--oc-sigil-opacity-sm, 0.28);
+        opacity: var(--oc-sigil-opacity-sm, 0.34);
+        --oc-sigil-mask-at: 32% 66%;
     }
     :root.dark .oc-sigil {
         opacity: var(--oc-sigil-opacity-sm, 0.42);
@@ -111,7 +200,7 @@
     .oc-sigil--bottom-right,
     .oc-sigil--top-left,
     .oc-sigil--top-right {
-        inset: -5% -24% auto auto; /* top-right, cropped off the right edge */
+        inset: -4% -18% auto auto; /* top-right, gentler crop keeps the mark's identity */
     }
 }
 

package/dist/tokens.d.mts

@@ -98,8 +98,9 @@ interface OcSigilProps {
     glyph: OcGlyphSlug;
     corner?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
     parallax?: boolean;
+    band?: boolean;
     className?: string;
 }
-declare function OcSigil({ glyph, corner, parallax, className }: OcSigilProps): react_jsx_runtime.JSX.Element;
+declare function OcSigil({ glyph, corner, parallax, band, className, }: OcSigilProps): react_jsx_runtime.JSX.Element;
 
 export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_GLYPHS, OC_GLYPH_CANVAS, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, type OcAppearanceMenuProps, OcAurora, type OcAuroraProps, type OcGlyphSlug, type OcMotion, type OcSceneRGB, type OcSceneTokens, OcSigil, type OcSigilProps, type OcTheme, OcThemeBridge, type OcThemeId, OcThemePicker, type OcThemePickerProps, OcThemeProvider, type OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, normalizeHue, readOcSceneTokens, resolveTheme, subscribeOcTheme, useOcMotion, useOcSkin };

package/dist/tokens.d.ts

@@ -98,8 +98,9 @@ interface OcSigilProps {
     glyph: OcGlyphSlug;
     corner?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
     parallax?: boolean;
+    band?: boolean;
     className?: string;
 }
-declare function OcSigil({ glyph, corner, parallax, className }: OcSigilProps): react_jsx_runtime.JSX.Element;
+declare function OcSigil({ glyph, corner, parallax, band, className, }: OcSigilProps): react_jsx_runtime.JSX.Element;
 
 export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_GLYPHS, OC_GLYPH_CANVAS, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, type OcAppearanceMenuProps, OcAurora, type OcAuroraProps, type OcGlyphSlug, type OcMotion, type OcSceneRGB, type OcSceneTokens, OcSigil, type OcSigilProps, type OcTheme, OcThemeBridge, type OcThemeId, OcThemePicker, type OcThemePickerProps, OcThemeProvider, type OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, normalizeHue, readOcSceneTokens, resolveTheme, subscribeOcTheme, useOcMotion, useOcSkin };

package/dist/tokens.js

@@ -956,40 +956,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 = react.useId();
   const id = react.useMemo(() => `oc-sigil-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [rawId]);
   const parRef = react.useRef(null);
-  const seed = react.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 = react.useMemo(() => sub(OC_GLYPHS[glyph]), [glyph]);
+  const mark = react.useMemo(() => prepare(glyph, OC_GLYPHS[glyph]), [glyph]);
+  const relief = FILL.has(glyph) ? 30 : 48;
+  const [seedY, seedX] = SEED[glyph];
   react.useEffect(() => {
     if (!parallax) return;
     const el = parRef.current;
@@ -1004,16 +1050,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 = () => {
@@ -1034,20 +1080,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__ */ 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
-        )) }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oc-sigil__drift oc-ambient", children: /* @__PURE__ */ jsxRuntime.jsxs("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, relief),
+              children: /* @__PURE__ */ jsxRuntime.jsx("use", { href: `#${id}-mark` })
+            },
+            n
+          )),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("use", { href: `#${id}-mark` })
+            }
+          )
+        ] }) })
       ]
     }
   );