@evinvest/uikit 0.29.4 → 0.31.0

package/dist/primitives/use-floating.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/primitives/use-floating.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nexport type Side = \"top\" | \"right\" | \"bottom\" | \"left\";\nexport type Align = \"start\" | \"center\" | \"end\";\n\nexport interface FloatingResult {\n  floatingRef: React.RefObject<HTMLElement | null>;\n  style: React.CSSProperties;\n  side: Side;\n  align: Align;\n}\n\n// The element sits at its containing block's origin and is moved with the\n// `translate` property, never with `top`/`left`: an absolute box's\n// shrink-to-fit width is \"containing block minus `left`\", so a `w-fit` surface\n// pushed past the viewport's right edge (horizontal scroll, a nested scroller)\n// would collapse to one word per line. `translate` composes with `transform`,\n// so the enter animations (which animate `transform`) are unaffected. The\n// offset never goes through React: `place()` / `sync()` write it straight to\n// the element, so this style prop stays one frozen object.\nconst ABSOLUTE: React.CSSProperties = Object.freeze({ position: \"absolute\", top: 0, left: 0 });\n\nconst POSITIONED = new Set([\"relative\", \"absolute\", \"fixed\", \"sticky\"]);\n\n/**\n * Converts a viewport-relative point into the coordinate space of the\n * floating element's containing block, i.e. the numbers `position: absolute`\n * expects. floating-ui's `strategy: \"absolute\"` does the same walk.\n */\nfunction toContainingBlock(\n  floating: HTMLElement,\n  x: number,\n  y: number,\n): { x: number; y: number; root: boolean } {\n  const parent = floating.offsetParent;\n  const doc = floating.ownerDocument;\n  const root = parent === doc.body || parent === doc.documentElement || parent === null;\n  // `offsetParent` reports `body` even when nothing is positioned; only a\n  // positioned body/html really forms a containing block.\n  const positioned =\n    parent instanceof HTMLElement &&\n    (!root || POSITIONED.has(doc.defaultView?.getComputedStyle(parent).position ?? \"\"));\n  if (!positioned) {\n    const win = doc.defaultView;\n    return { x: x + (win?.scrollX ?? 0), y: y + (win?.scrollY ?? 0), root: true };\n  }\n  const p = parent.getBoundingClientRect();\n  return {\n    x: x - p.left - parent.clientLeft + parent.scrollLeft,\n    y: y - p.top - parent.clientTop + parent.scrollTop,\n    root: false,\n  };\n}\n\ninterface Size2D {\n  width: number;\n  height: number;\n}\n\n// The layout box, not `getBoundingClientRect()`: the latter reports the box\n// mid-animation (`zoom-in-95` scales it to 0.95 on the first frame), which\n// placed a top-side popover 5 % of its height too low, over the anchor.\nfunction layoutSize(el: HTMLElement): Size2D {\n  return { width: el.offsetWidth, height: el.offsetHeight };\n}\n\nfunction viewport(): { vw: number; vh: number } {\n  // `clientWidth` excludes the scrollbar, which the floating element cannot\n  // sit under anyway; jsdom reports 0 there, hence the fallback.\n  const el = document.documentElement;\n  return {\n    vw: el.clientWidth || window.innerWidth,\n    vh: el.clientHeight || window.innerHeight,\n  };\n}\n\n/**\n * Positions a floating element against an anchor with `position: absolute` in\n * the coordinate space of its containing block (the `Portal` puts it in\n * `document.body`, so normally document coordinates) — the dep-light stand-in\n * for `@radix-ui/react-popper` / floating-ui. Supports a preferred\n * `side`/`align`, an `offset`, and a single collision flip onto the opposite\n * side when the preferred side overflows the viewport.\n *\n * Two update modes:\n * - `place()` — full pass (flip + clamp into the viewport) on open, on window\n *   `resize`, and whenever the anchor or the floating element changes size.\n * - `sync()` — re-derives the coordinates from the anchor with the side and\n *   the clamp shift already chosen; runs on every `scroll` (captured on\n *   `window`, so nested scroll containers count too).\n *\n * Because the element is absolutely positioned in the document, a document\n * scroll moves it natively with the page — `sync()` then computes the same\n * numbers and is a no-op — so the overlay never lags behind the compositor.\n * Only a nested scroll container changes the coordinates, and there a frame\n * of lag is acceptable. The side is never revisited on scroll: no jumping.\n * A page that scrolls `body` instead of the document (`html { overflow:\n * hidden } body { overflow: auto }`) is such a nested scroller: correct, but\n * with the frame of lag the `fixed` strategy had.\n *\n * Rust's overlays use CSS-only placement (`data-side`) and do not measure; see\n * the README \"Limitations\".\n */\nexport function useFloating(opts: {\n  anchorRef: React.RefObject<Element | null>;\n  open: boolean;\n  side?: Side;\n  align?: Align;\n  offset?: number;\n}): FloatingResult {\n  const { anchorRef, open, side = \"bottom\", align = \"center\", offset = 4 } = opts;\n  const floatingRef = React.useRef<HTMLElement | null>(null);\n  const [placedSide, setPlacedSide] = React.useState<Side>(side);\n  // The last full placement: the side that won the flip and how far the\n  // viewport clamp pushed the element off its ideal spot. `sync()` reuses both\n  // instead of measuring against the viewport again.\n  const placement = React.useRef<{ side: Side; shiftX: number; shiftY: number }>({\n    side,\n    shiftX: 0,\n    shiftY: 0,\n  });\n\n  React.useLayoutEffect(() => {\n    if (!open) return;\n\n    function ideal(a: DOMRect, f: Size2D, placed: Side): { top: number; left: number } {\n      let top = 0;\n      let left = 0;\n      const vertical = placed === \"top\" || placed === \"bottom\";\n\n      if (placed === \"bottom\") top = a.bottom + offset;\n      else if (placed === \"top\") top = a.top - offset - f.height;\n      else if (placed === \"right\") left = a.right + offset;\n      else left = a.left - offset - f.width;\n\n      if (vertical) {\n        if (align === \"start\") left = a.left;\n        else if (align === \"end\") left = a.right - f.width;\n        else left = a.left + a.width / 2 - f.width / 2;\n      } else {\n        if (align === \"start\") top = a.top;\n        else if (align === \"end\") top = a.bottom - f.height;\n        else top = a.top + a.height / 2 - f.height / 2;\n      }\n      return { top, left };\n    }\n\n    // `contain` keeps the box inside the initial containing block: a box past\n    // the document's edge grows the page (a scrollbar shows for as long as the\n    // overlay is open). `place()` already clamps against the viewport;\n    // `sync()` follows a nested scroller's anchor and only needs this bound.\n    function write(floating: HTMLElement, f: Size2D, top: number, left: number, contain: boolean) {\n      const p = toContainingBlock(floating, left, top);\n      let { x, y } = p;\n      if (contain && p.root) {\n        const icbWidth = floating.ownerDocument.documentElement.clientWidth || window.innerWidth;\n        x = Math.max(0, Math.min(x, icbWidth - f.width));\n        y = Math.max(0, y);\n      }\n      floating.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;\n    }\n\n    function place() {\n      const anchor = anchorRef.current;\n      const floating = floatingRef.current;\n      if (!anchor || !floating) return;\n\n      const a = anchor.getBoundingClientRect();\n      const f = layoutSize(floating);\n      const { vw, vh } = viewport();\n\n      let placed: Side = side;\n      if (side === \"bottom\" && a.bottom + offset + f.height > vh && a.top - offset - f.height > 0)\n        placed = \"top\";\n      else if (side === \"top\" && a.top - offset - f.height < 0 && a.bottom + offset + f.height < vh)\n        placed = \"bottom\";\n      else if (side === \"right\" && a.right + offset + f.width > vw && a.left - offset - f.width > 0)\n        placed = \"left\";\n      else if (side === \"left\" && a.left - offset - f.width < 0 && a.right + offset + f.width < vw)\n        placed = \"right\";\n\n      const { top, left } = ideal(a, f, placed);\n      const clampedLeft = Math.max(offset, Math.min(left, vw - f.width - offset));\n      const clampedTop = Math.max(offset, Math.min(top, vh - f.height - offset));\n\n      placement.current = {\n        side: placed,\n        shiftX: clampedLeft - left,\n        shiftY: clampedTop - top,\n      };\n      write(floating, f, clampedTop, clampedLeft, false);\n      // Only a real change may re-render: this runs on every resize tick.\n      setPlacedSide(prev => (prev === placed ? prev : placed));\n    }\n\n    function sync() {\n      const anchor = anchorRef.current;\n      const floating = floatingRef.current;\n      if (!anchor || !floating) return;\n\n      const a = anchor.getBoundingClientRect();\n      const f = layoutSize(floating);\n      const { side: placed, shiftX, shiftY } = placement.current;\n      const { top, left } = ideal(a, f, placed);\n      write(floating, f, top + shiftY, left + shiftX, true);\n    }\n\n    place();\n    // No rAF: `scroll` already fires at most once per frame, and a synchronous\n    // DOM write from the handler lands in that same frame — rAF would cost one.\n    window.addEventListener(\"scroll\", sync, true);\n    window.addEventListener(\"resize\", place);\n\n    let observer: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== \"undefined\") {\n      observer = new ResizeObserver(place);\n      if (anchorRef.current) observer.observe(anchorRef.current);\n      if (floatingRef.current) observer.observe(floatingRef.current);\n    }\n\n    return () => {\n      window.removeEventListener(\"scroll\", sync, true);\n      window.removeEventListener(\"resize\", place);\n      observer?.disconnect();\n    };\n  }, [open, side, align, offset, anchorRef]);\n\n  return { floatingRef, style: ABSOLUTE, side: placedSide, align };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/primitives/use-floating.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nexport type Side = \"top\" | \"right\" | \"bottom\" | \"left\";\nexport type Align = \"start\" | \"center\" | \"end\";\n\nexport interface FloatingResult {\n  floatingRef: React.RefObject<HTMLElement | null>;\n  style: React.CSSProperties;\n  side: Side;\n  align: Align;\n}\n\n// The element sits at its containing block's origin and is moved with the\n// `translate` property, never with `top`/`left`: an absolute box's\n// shrink-to-fit width is \"containing block minus `left`\", so a `w-fit` surface\n// pushed past the viewport's right edge (horizontal scroll, a nested scroller)\n// would collapse to one word per line. `translate` composes with `transform`,\n// so the enter animations (which animate `transform`) are unaffected. The\n// offset never goes through React: `place()` / `sync()` write it straight to\n// the element, so this style prop stays one frozen object.\nconst ABSOLUTE: React.CSSProperties = Object.freeze({ position: \"absolute\", top: 0, left: 0 });\n\nconst POSITIONED = new Set([\"relative\", \"absolute\", \"fixed\", \"sticky\"]);\n\n/**\n * Converts a viewport-relative point into the coordinate space of the\n * floating element's containing block, i.e. the numbers `position: absolute`\n * expects. floating-ui's `strategy: \"absolute\"` does the same walk.\n */\nfunction toContainingBlock(\n  floating: HTMLElement,\n  x: number,\n  y: number,\n): { x: number; y: number; root: boolean } {\n  const parent = floating.offsetParent;\n  const doc = floating.ownerDocument;\n  const root = parent === doc.body || parent === doc.documentElement || parent === null;\n  // `offsetParent` reports `body` even when nothing is positioned; only a\n  // positioned body/html really forms a containing block.\n  const positioned =\n    parent instanceof HTMLElement &&\n    (!root || POSITIONED.has(doc.defaultView?.getComputedStyle(parent).position ?? \"\"));\n  if (!positioned) {\n    const win = doc.defaultView;\n    return { x: x + (win?.scrollX ?? 0), y: y + (win?.scrollY ?? 0), root: true };\n  }\n  const p = parent.getBoundingClientRect();\n  return {\n    x: x - p.left - parent.clientLeft + parent.scrollLeft,\n    y: y - p.top - parent.clientTop + parent.scrollTop,\n    root: false,\n  };\n}\n\ninterface Size2D {\n  width: number;\n  height: number;\n}\n\n// The layout box, not `getBoundingClientRect()`: the latter reports the box\n// mid-animation (`zoom-in-95` scales it to 0.95 on the first frame), which\n// placed a top-side popover 5 % of its height too low, over the anchor.\nfunction layoutSize(el: HTMLElement): Size2D {\n  return { width: el.offsetWidth, height: el.offsetHeight };\n}\n\n// jsdom has no `getAnimations`; there nothing animates.\nfunction hasRunningAnimationAbove(el: Element): boolean {\n  for (let node = el.parentElement; node; node = node.parentElement) {\n    if (node.getAnimations?.().some((a) => a.playState === \"running\")) return true;\n  }\n  return false;\n}\n\nfunction viewport(): { vw: number; vh: number } {\n  // `clientWidth` excludes the scrollbar, which the floating element cannot\n  // sit under anyway; jsdom reports 0 there, hence the fallback.\n  const el = document.documentElement;\n  return {\n    vw: el.clientWidth || window.innerWidth,\n    vh: el.clientHeight || window.innerHeight,\n  };\n}\n\n/**\n * Positions a floating element against an anchor with `position: absolute` in\n * the coordinate space of its containing block (the `Portal` puts it in\n * `document.body`, so normally document coordinates) — the dep-light stand-in\n * for `@radix-ui/react-popper` / floating-ui. Supports a preferred\n * `side`/`align`, an `offset`, and a single collision flip onto the opposite\n * side when the preferred side overflows the viewport.\n *\n * Two update modes:\n * - `place()` — full pass (flip + clamp into the viewport) on open, on window\n *   `resize`, and whenever the anchor or the floating element changes size.\n * - `sync()` — re-derives the coordinates from the anchor with the side and\n *   the clamp shift already chosen; runs on every `scroll` (captured on\n *   `window`, so nested scroll containers count too).\n *\n * Because the element is absolutely positioned in the document, a document\n * scroll moves it natively with the page — `sync()` then computes the same\n * numbers and is a no-op — so the overlay never lags behind the compositor.\n * Only a nested scroll container changes the coordinates, and there a frame\n * of lag is acceptable. The side is never revisited on scroll: no jumping.\n * A page that scrolls `body` instead of the document (`html { overflow:\n * hidden } body { overflow: auto }`) is such a nested scroller: correct, but\n * with the frame of lag the `fixed` strategy had.\n *\n * Rust's overlays use CSS-only placement (`data-side`) and do not measure; see\n * the README \"Limitations\".\n */\nexport function useFloating(opts: {\n  anchorRef: React.RefObject<Element | null>;\n  open: boolean;\n  side?: Side;\n  align?: Align;\n  offset?: number;\n}): FloatingResult {\n  const { anchorRef, open, side = \"bottom\", align = \"center\", offset = 4 } = opts;\n  const floatingRef = React.useRef<HTMLElement | null>(null);\n  const [placedSide, setPlacedSide] = React.useState<Side>(side);\n  // The last full placement: the side that won the flip and how far the\n  // viewport clamp pushed the element off its ideal spot. `sync()` reuses both\n  // instead of measuring against the viewport again.\n  const placement = React.useRef<{ side: Side; shiftX: number; shiftY: number }>({\n    side,\n    shiftX: 0,\n    shiftY: 0,\n  });\n\n  React.useLayoutEffect(() => {\n    if (!open) return;\n\n    function ideal(a: DOMRect, f: Size2D, placed: Side): { top: number; left: number } {\n      let top = 0;\n      let left = 0;\n      const vertical = placed === \"top\" || placed === \"bottom\";\n\n      if (placed === \"bottom\") top = a.bottom + offset;\n      else if (placed === \"top\") top = a.top - offset - f.height;\n      else if (placed === \"right\") left = a.right + offset;\n      else left = a.left - offset - f.width;\n\n      if (vertical) {\n        if (align === \"start\") left = a.left;\n        else if (align === \"end\") left = a.right - f.width;\n        else left = a.left + a.width / 2 - f.width / 2;\n      } else {\n        if (align === \"start\") top = a.top;\n        else if (align === \"end\") top = a.bottom - f.height;\n        else top = a.top + a.height / 2 - f.height / 2;\n      }\n      return { top, left };\n    }\n\n    // `contain` keeps the box inside the initial containing block: a box past\n    // the document's edge grows the page (a scrollbar shows for as long as the\n    // overlay is open). `place()` already clamps against the viewport;\n    // `sync()` follows a nested scroller's anchor and only needs this bound.\n    function write(floating: HTMLElement, f: Size2D, top: number, left: number, contain: boolean) {\n      const p = toContainingBlock(floating, left, top);\n      let { x, y } = p;\n      if (contain && p.root) {\n        const icbWidth = floating.ownerDocument.documentElement.clientWidth || window.innerWidth;\n        x = Math.max(0, Math.min(x, icbWidth - f.width));\n        y = Math.max(0, y);\n      }\n      floating.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;\n    }\n\n    function place() {\n      const anchor = anchorRef.current;\n      const floating = floatingRef.current;\n      if (!anchor || !floating) return;\n\n      const a = anchor.getBoundingClientRect();\n      const f = layoutSize(floating);\n      const { vw, vh } = viewport();\n\n      let placed: Side = side;\n      if (side === \"bottom\" && a.bottom + offset + f.height > vh && a.top - offset - f.height > 0)\n        placed = \"top\";\n      else if (side === \"top\" && a.top - offset - f.height < 0 && a.bottom + offset + f.height < vh)\n        placed = \"bottom\";\n      else if (side === \"right\" && a.right + offset + f.width > vw && a.left - offset - f.width > 0)\n        placed = \"left\";\n      else if (side === \"left\" && a.left - offset - f.width < 0 && a.right + offset + f.width < vw)\n        placed = \"right\";\n\n      const { top, left } = ideal(a, f, placed);\n      const clampedLeft = Math.max(offset, Math.min(left, vw - f.width - offset));\n      const clampedTop = Math.max(offset, Math.min(top, vh - f.height - offset));\n\n      placement.current = {\n        side: placed,\n        shiftX: clampedLeft - left,\n        shiftY: clampedTop - top,\n      };\n      write(floating, f, clampedTop, clampedLeft, false);\n      // Only a real change may re-render: this runs on every resize tick.\n      setPlacedSide(prev => (prev === placed ? prev : placed));\n    }\n\n    function sync() {\n      const anchor = anchorRef.current;\n      const floating = floatingRef.current;\n      if (!anchor || !floating) return;\n\n      const a = anchor.getBoundingClientRect();\n      const f = layoutSize(floating);\n      const { side: placed, shiftX, shiftY } = placement.current;\n      const { top, left } = ideal(a, f, placed);\n      write(floating, f, top + shiftY, left + shiftX, true);\n    }\n\n    // An anchor inside an entering dialog is measured scaled and shifted by the\n    // dialog's animation (`zoom-in-95`), which places the floating element off\n    // its anchor for good: no resize or scroll follows the animation's end. So\n    // keep re-placing, a frame at a time, until no ancestor animates.\n    let frame = 0;\n    function follow() {\n      frame = 0;\n      place();\n      if (anchorRef.current && hasRunningAnimationAbove(anchorRef.current)) {\n        frame = requestAnimationFrame(follow);\n      }\n    }\n    follow();\n    // No rAF: `scroll` already fires at most once per frame, and a synchronous\n    // DOM write from the handler lands in that same frame — rAF would cost one.\n    window.addEventListener(\"scroll\", sync, true);\n    window.addEventListener(\"resize\", place);\n\n    let observer: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== \"undefined\") {\n      observer = new ResizeObserver(place);\n      if (anchorRef.current) observer.observe(anchorRef.current);\n      if (floatingRef.current) observer.observe(floatingRef.current);\n    }\n\n    return () => {\n      if (frame) cancelAnimationFrame(frame);\n      window.removeEventListener(\"scroll\", sync, true);\n      window.removeEventListener(\"resize\", place);\n      observer?.disconnect();\n    };\n  }, [open, side, align, offset, anchorRef]);\n\n  return { floatingRef, style: ABSOLUTE, side: placedSide, align };\n}\n"],"mappings":"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","names":[]}

package/dist/primitives/use-reduced-motion.js

@@ -0,0 +1,20 @@
+"use client";
+import * as React from "react";
+const QUERY = "(prefers-reduced-motion: reduce)";
+function subscribe(notify) {
+  if (typeof window.matchMedia !== "function") return () => {
+  };
+  const mq = window.matchMedia(QUERY);
+  mq.addEventListener("change", notify);
+  return () => mq.removeEventListener("change", notify);
+}
+function snapshot() {
+  return typeof window.matchMedia === "function" && window.matchMedia(QUERY).matches;
+}
+function useReducedMotion() {
+  return React.useSyncExternalStore(subscribe, snapshot, () => false);
+}
+export {
+  useReducedMotion
+};
+//# sourceMappingURL=use-reduced-motion.js.map

package/dist/primitives/use-reduced-motion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/primitives/use-reduced-motion.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nconst QUERY = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(notify: () => void): () => void {\n  if (typeof window.matchMedia !== \"function\") return () => {};\n  const mq = window.matchMedia(QUERY);\n  mq.addEventListener(\"change\", notify);\n  return () => mq.removeEventListener(\"change\", notify);\n}\n\nfunction snapshot(): boolean {\n  return typeof window.matchMedia === \"function\" && window.matchMedia(QUERY).matches;\n}\n\n/**\n * True when the user asked for less motion. The server and the hydration pass\n * answer false, so markup matches; a reduced-motion client corrects it on the\n * first commit, before anything has animated.\n */\nexport function useReducedMotion(): boolean {\n  return React.useSyncExternalStore(subscribe, snapshot, () => false);\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAEvB,MAAM,QAAQ;AAEd,SAAS,UAAU,QAAgC;AACjD,MAAI,OAAO,OAAO,eAAe,WAAY,QAAO,MAAM;AAAA,EAAC;AAC3D,QAAM,KAAK,OAAO,WAAW,KAAK;AAClC,KAAG,iBAAiB,UAAU,MAAM;AACpC,SAAO,MAAM,GAAG,oBAAoB,UAAU,MAAM;AACtD;AAEA,SAAS,WAAoB;AAC3B,SAAO,OAAO,OAAO,eAAe,cAAc,OAAO,WAAW,KAAK,EAAE;AAC7E;AAOO,SAAS,mBAA4B;AAC1C,SAAO,MAAM,qBAAqB,WAAW,UAAU,MAAM,KAAK;AACpE;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/uikit",
-  "version": "0.29.4",
+  "version": "0.31.0",
   "description": "Dep-light React UI kit: shadcn-semantics components with zero @radix-ui / cva, mirroring the ev_lib::uikit Rust feature. Ships the shared design tokens.",
   "license": "BlueOak-1.0.0",
   "publishConfig": {

package/styles/ev.css

@@ -1,75 +1,307 @@
 /* AUTO-GENERATED by `nix run .#gen` from the repo-root ev.css — do not edit. */
 /* ═══ PALETTE: EV ════════════════════════════════════════════════
  *
- * Zero specificity: EV is the default a brand scope overrides, whatever order
- * the two sheets are imported in.
+ * Three themes, each a zero-specificity rule: a brand scope overrides them
+ * whatever order the sheets are imported in, and later rules here win over
+ * earlier ones on the same element (so the order below is load-bearing).
  *
- * Surface ladder — dark UI reads as unfinished when every plane is the same
- * value, so the steps below are deliberate and measured; keep them apart if you
- * retune. background #070d18 → secondary #0d1526 (1.07:1) → card #16233c (1.24:1
- * vs background) → popover #1d2c49 (1.13:1 vs card) → muted #26375c. Elevation
- * rides the same ladder via --shadow-card / -elevated / -overlay. Card is also
- * pinned from above by a second floor: --primary has to clear 3:1 against it
- * (3.39:1 today), so lifting card one step breaks the tokens test.
+ *   u2 Dark     the default: `:root`, `[data-brand="ev"]`, or a `.dark` wrapper
+ *   u2 Light    a `.light` wrapper (on <html> or on any section)
+ *   Oldschool   `[data-theme="oldschool"]`: the navy look the kit shipped before
+ *               1.0, single-polarity, rounder, with shadows
+ *
+ * Each rule pins every EV-specific token, so a wrapper of one theme nested in
+ * another replaces all of it and leaks nothing. A brand scope is not EV: the
+ * `:not(…)` guard keeps these pins out of a `[data-brand]` subtree (and off the
+ * brand's own element), where the brand's palette and the derived formulas in
+ * theme.css apply instead. Without it a brand's `.light` would inherit EV
+ * Light's hover and borders.
+ *
+ * Surface ladder — the u2 planes sit 1.04–1.14:1 apart, which is the design
+ * (flat, no tinted fills) and under the ~1.2 floor in AGENTS.md. Planes are
+ * separated by a `--border` hairline instead: 1.37–1.46:1 on Dark and 1.35:1 on
+ * Light, measured with the alpha composited onto the plane. Do not lift a plane
+ * to chase the ratio; retune the hairline, and tokens.test.ts will measure it.
+ * Oldschool keeps its own, wider ladder: #070d18 → card #16233c (1.24:1) →
+ * popover #1d2c49 (1.13:1), with --primary held at 3:1 against the popover.
+ *
+ * Where a Figma value failed a floor the nearest passing one is pinned
+ * instead; the comment beside each says which.
  */
-:where(:root, [data-brand="ev"]) {
+
+/* ── u2 Dark ─────────────────────────────────────────────────── */
+:where(:is(:root, [data-brand="ev"], .dark):not([data-brand]:not([data-brand="ev"]), [data-brand]:not([data-brand="ev"]) *)) {
   /* the polarity, for what the platform draws itself (a native <select>'s
    * popup); a custom property so nothing but the kit's opt-ins reads it */
   --scheme: dark;
 
-  /* ── surfaces ────────────────────────────────────────────────── */
+  /* surfaces */
+  --background: #0d0d0f;
+  --card: #151518;
+  --secondary: #1c1c20;
+  --on-secondary: var(--ink);
+  --popover: #252529;
+  --muted: #070709;
+  --hover: #e6e1d30f;
+  --active: #e6e1d31a;
+  --selected: #e6e1d31a;
+  --scrim: #000000a8;
+
+  /* ink: the Figma steps, opaque, so the text floor is measured on the value
+   * that paints (tertiary is 4.53:1 on the popover, the tightest plane) */
+  --ink: #e6e1d3;
+  --ink-mid: #bebab1;
+  --ink-soft: #8d8c87;
+  --ink-faint: #5e5e5b;
+
+  /* lines. --input stays the derived 48 % ink: the control edge owes 3:1 and
+   * Figma has no variable for it. */
+  --border-subtle: #e6e1d314;
+  --border: #e6e1d324;
+  --border-strong: #e6e1d342;
+  --ring: #35a395;
+
+  /* brand and primary. A fill and an ink are different jobs (docs/spec/accents.md):
+   * --primary carries white at 4.62:1 and reads as a shape on every plane (3.30:1
+   * on the popover); --primary-ink is the teal that reads as text (4.96:1 there).
+   * Figma's hover #18998b is 3.52:1 under white, so #127c71 (5.06:1) is pinned. */
+  --brand: #0d1627;
+  --primary: #138377;
+  --on-primary: #ffffff;
+  --primary-ink: #35a395;
+  --primary-hover: #127c71;
+  --primary-border: #35a3958c;
+
+  /* status. Fills carry the dark label (white fails 3:1–3.4:1 on these); the
+   * *-ink values are the ones to use as text. */
+  --positive: #2e9e5c;
+  --on-positive: #0d0d0f;
+  --positive-ink: #4abf76;
+  --accent-trace: #6b7fa0;
+  --on-accent-trace: #0d0d0f;
+  --accent-debug: #35a395;
+  --on-accent-debug: #0d0d0f;
+  --accent-info: #4990d8;
+  --on-accent-info: #0d0d0f;
+  --accent-info-ink: #6ca6e4;
+  --accent-warn: #f5c84e;
+  --on-accent-warn: #0d0d0f;
+  --accent-error: #f05b52;
+  --on-accent-error: #0d0d0f;
+
+  --chart-1: #35a395;
+  --chart-2: #4990d8;
+  --chart-3: #f5c84e;
+  --chart-4: #e68aaf;
+  --chart-5: #2e9e5c;
+  --chart-6: #988eef;
+
+  --button-primary-bg: #e6e1d300;
+  --button-primary-hover: #e6e1d314;
+  --button-primary-border: #e6e1d399;
+  --button-primary-ink: #e6e1d3;
+  --button-danger-bg: #f05b5200;
+  --button-danger-hover: #f05b521a;
+  --button-danger-border: #f05b52;
+  --button-danger-ink: var(--accent-error);
+
+  /* chips are outlines: a transparent fill and the label's hue at 50 % */
+  --chip-neutral-bg: var(--hover);
+  --chip-neutral-border: var(--border);
+  --chip-primary-bg: #35a39500;
+  --chip-primary-border: #35a3958c;
+  --chip-positive-bg: #2e9e5c00;
+  --chip-positive-border: #4abf7680;
+  --chip-info-bg: #4990d800;
+  --chip-info-border: #6ca6e480;
+  --chip-warn-bg: #f5c84e00;
+  --chip-warn-border: #f5c84e80;
+  --chip-error-bg: #f05b5200;
+  --chip-error-border: #f05b5280;
+}
+
+/* ── u2 Light ────────────────────────────────────────────────── */
+:where(.light:not([data-brand]:not([data-brand="ev"]), [data-brand]:not([data-brand="ev"]) *)) {
+  --scheme: light;
+
+  --background: #efebdf;
+  --card: #f6f3eb;
+  --secondary: #fbfaf6;
+  --on-secondary: var(--ink);
+  --popover: #ffffff;
+  --muted: #e6e1d3;
+  --hover: #0d0d0f0d;
+  --active: #0d0d0f17;
+  --selected: #0d0d0f14;
+  --scrim: #00000066;
+
+  --ink: #0d0d0f;
+  --ink-mid: #3d3d41;
+  --ink-soft: #67696c;
+  --ink-faint: #9a9b9e;
+
+  --border-subtle: #0d0d0f14;
+  --border: #0d0d0f24;
+  --border-strong: #0d0d0f47;
+  --ring: #138377;
+
+  --brand: #080e1a;
+  --primary: #138377;
+  --on-primary: #ffffff;
+  --primary-ink: #116f65;
+  --primary-hover: #116f65;
+  --primary-border: #116f658c;
+
+  /* Figma's positive #228a4e carries neither label at 4.5:1 (white 4.36, dark
+   * 4.45), so the fill is one step darker: white reads at 5.01:1. */
+  --positive: #1f7f48;
+  --on-positive: #ffffff;
+  --positive-ink: #1b7943;
+  --accent-trace: #5a6b7c;
+  --on-accent-trace: #ffffff;
+  --accent-debug: #116f65;
+  --on-accent-debug: #ffffff;
+  --accent-info: #2d79c2;
+  --on-accent-info: #ffffff;
+  --accent-info-ink: #25639f;
+  /* Figma's #d8a523 is 1.89:1 on the page plane; warn is text in its own
+   * colour, so it is darkened toward Figma's warn text #846305 until it clears
+   * the non-text 3:1 (3.10:1) */
+  --accent-warn: #a77f12;
+  --on-accent-warn: #0d0d0f;
+  --accent-error: #db3834;
+  --on-accent-error: #ffffff;
+
+  --chart-1: #116f65;
+  --chart-2: #2d79c2;
+  --chart-3: #d8a523;
+  --chart-4: #b74679;
+  --chart-5: #228a4e;
+  --chart-6: #6d5acc;
+
+  --button-primary-bg: #0d0d0f00;
+  --button-primary-hover: #0d0d0f0f;
+  --button-primary-border: #0d0d0fa6;
+  --button-primary-ink: #080e1a;
+  --button-danger-bg: #db383400;
+  --button-danger-hover: #db383414;
+  --button-danger-border: #db3834;
+  --button-danger-ink: var(--accent-error);
+
+  /* the solid hue at 50 % (warning 60 %), where Dark uses the ink's */
+  --chip-neutral-bg: var(--hover);
+  --chip-neutral-border: var(--border);
+  --chip-primary-bg: #13837700;
+  --chip-primary-border: #116f658c;
+  --chip-positive-bg: #228a4e00;
+  --chip-positive-border: #228a4e80;
+  --chip-info-bg: #2d79c200;
+  --chip-info-border: #2d79c280;
+  --chip-warn-bg: #a77f1200;
+  --chip-warn-border: #a77f1299;
+  --chip-error-bg: #db383400;
+  --chip-error-border: #db383480;
+}
+
+/* ── Oldschool ───────────────────────────────────────────────── *
+ * Opt-in. Dark-only, so a `.light` or `.dark` inside it takes these values
+ * too. The surfaces are the ones the kit shipped (they pass every floor in
+ * tokens.test.ts); Figma's raised/overlay #1f2d4b measured 2.96:1 for the fill
+ * and 4.06:1 for tertiary text, so the popover stays #1d2c49. Its ink steps and
+ * --border are the derived formulas for the same reason: Figma's opaque
+ * border #1b2843 is 1.1:1 on the card and would leave the planes unseparated.
+ */
+:where([data-theme="oldschool"], [data-theme="oldschool"] :is(.light, .dark)) {
+  --scheme: dark;
+
+  --brand-font-serif: var(--font-playfair, "Playfair Display");
+  --brand-font-mono: var(--font-inter, "Inter");
+
   --background: #070d18;
   --card: #16233c;
+  --secondary: #0d1526;
+  --on-secondary: var(--ink);
   --popover: #1d2c49;
   --muted: #26375c;
+  --hover: #e6e1d312;
+  --active: #e6e1d31f;
+  --selected: #35a3952e;
+  --scrim: #02050ea3;
 
-  /* ── ink ─────────────────────────────────────────────────────── */
   --ink: #e6e1d3;
+  --ink-mid: color-mix(in srgb, var(--ink) 82%, transparent);
+  --ink-soft: color-mix(in srgb, var(--ink) 60%, transparent);
+  --ink-faint: color-mix(in srgb, var(--ink) 38%, transparent);
 
-  /* ── roles ───────────────────────────────────────────────────── */
-  --brand: #001e4e;
-  /* teal, not the brand navy: navy filled a Button/Switch at ~1.1:1 against
-   * these surfaces, i.e. an invisible control, and consumers hardcoded teal to
-   * get around it. The brand navy still lives in --brand.
-   *
-   * A fill and an ink are different jobs, so the primary role carries two
-   * values (docs/spec/accents.md). --primary-ink is the teal that reads on the
-   * surfaces: 5.85:1 on background, 4.72:1 on card. --primary is the same hue
-   * and chroma one step down in lightness — OKLCH L 0.550 C 0.094 H 183°
-   * against the ink's L 0.630 C 0.101 H 183° — so the CTA carries white:
-   * --on-primary reads on it at 4.63:1, and the fill clears the 3:1 non-text
-   * floor against background (4.20:1), secondary (3.94:1), card (3.39:1) and
-   * popover (3.01:1), so a checked Switch on a Card still reads as one. Muted
-   * is the one surface under the floor (2.54:1); the controls that fill there
-   * carry an on-primary mark, see the spec. Darkening the single value instead
-   * would have dropped every teal label below AA. */
-  --primary: #128377;
+  --border-subtle: #e6e1d312;
+  --border: color-mix(in srgb, var(--ink) 14%, transparent);
+  --border-strong: #2e3e64;
+  --ring: #35a395;
+
+  --brand: #080e1a;
+  --primary: #138377;
   --on-primary: #ffffff;
-  --primary-ink: #2a9d8f;
-  --secondary: #0d1526;
-  --on-secondary: var(--ink);
-  /* valence, not significance: a success reads as good while staying quiet */
-  --positive: #2e9e5b;
+  --primary-ink: #35a395;
+  --primary-hover: #127c71;
+  --primary-border: #35a39500;
+
+  --positive: #2e9e5c;
   --on-positive: #070d18;
+  --positive-ink: #4abf76;
   --accent-trace: #6b7fa0;
   --on-accent-trace: #070d18;
-  --accent-debug: #2a9d8f;
+  --accent-debug: #35a395;
   --on-accent-debug: #070d18;
-  --accent-info: #4a90d9;
+  --accent-info: #4990d8;
   --on-accent-info: #070d18;
-  --accent-warn: #f2c94c;
+  --accent-info-ink: #6ca6e4;
+  --accent-warn: #f5c84e;
   --on-accent-warn: #070d18;
-  /* lifted off the brand red #da251d, which failed AA on a card. This one value
-   * is the fill and the text on a bare surface; on its own 10 % tint (a
-   * destructive menu row) the text is the derived --accent-error-ink, which
-   * EV leaves to the contract: #ec8379, 4.83:1 on that tint over popover. The
-   * vivid brand red is a gitops constant, not a UI token. */
-  --accent-error: #ef5b52;
+  --accent-error: #f05b52;
   --on-accent-error: #070d18;
 
-  --chart-1: #2a9d8f;
-  --chart-2: #2e9e5b;
-  --chart-3: #f2c94c;
-  --chart-4: #e58aae;
-  --chart-5: #4a90d9;
+  --chart-1: #35a395;
+  --chart-2: #4990d8;
+  --chart-3: #f5c84e;
+  --chart-4: #e68aaf;
+  --chart-5: #2e9e5c;
+  --chart-6: #988eef;
+
+  /* filled buttons. The danger label stays dark: white on #f05b52 is 3.32:1. */
+  --button-primary-bg: #138377;
+  --button-primary-hover: #127c71;
+  --button-primary-border: #138377;
+  --button-primary-ink: #ffffff;
+  --button-danger-bg: #f05b52;
+  --button-danger-hover: #f06c61;
+  --button-danger-border: #f05b52;
+  --button-danger-ink: #070d18;
+
+  /* chips are tinted pills with no edge */
+  --chip-neutral-bg: var(--hover);
+  --chip-neutral-border: #e6e1d300;
+  /* Figma tints the accent chip 16 %, which leaves its teal label at 4.03:1 on
+   * the card; 8 % holds 4.56:1 */
+  --chip-primary-bg: #35a39514;
+  --chip-primary-border: #35a39500;
+  --chip-positive-bg: #2e9e5c2e;
+  --chip-positive-border: #4abf7600;
+  --chip-info-bg: #4990d82e;
+  --chip-info-border: #6ca6e400;
+  --chip-warn-bg: #f5c84e29;
+  --chip-warn-border: #f5c84e00;
+  --chip-error-bg: #f05b522e;
+  --chip-error-border: #f06c6100;
+
+  --radius: 0.5rem;
+  --control-radius: 0.375rem;
+  --chip-radius: 9999px;
+  /* the ladder is three tiers, not one drop shadow: on a dark theme the value
+   * steps alone are too close to separate a resting card from a menu from a
+   * modal, so each tier gets its own spread and opacity */
+  --depth-card: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --depth-elevated:
+    0 4px 12px -2px rgb(0 0 0 / 0.4),
+    0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --depth-overlay: 0 16px 48px -12px rgb(0 0 0 / 0.6);
 }