@evinvest/uikit 0.18.0 → 0.20.0

package/styles/theme.css

@@ -0,0 +1,470 @@
+/* AUTO-GENERATED by `nix run .#gen` from the repo-root theme.css — do not edit. */
+/*
+ * Toast (sonner) and Drawer enter/exit motion, shared by both ports. Imported by the token
+ * sheets so the lifecycle ships with the theme contract.
+ */
+
+/* ── Toast stacking (Sonner-style), shared by both ports via data-stack ──────
+   Both `ev_lib::uikit` (Dioxus) and `@evinvest/uikit` (React) set data-stack on the
+   toaster and drive the same machine: toasts are absolutely stacked at the
+   pinned edge, pile up collapsed (front three peeking, each lifted + scaled by
+   --index and clamped to --front-height), and spread to --offset on hover /
+   keyboard focus (pure CSS — no JS state). Vars: the toaster sets --front-height
+   + --gap; each toast sets --index, --z-index, --offset, --initial-height. React
+   measures real heights; Dioxus can't (host-only), so it feeds a constant height
+   — collapse is exact, expansion is uniform. The enter is a keyframe (plays on
+   DOM insertion, so it works in both ports without a JS mount flip),
+   `data-state=closed` slides out, and the node is dropped on the transitionend. */
+
+[data-slot="toaster"][data-stack] [data-slot="toast"] {
+  position: absolute;
+  --y: translateY(0);
+  opacity: 1;
+  z-index: var(--z-index, 1);
+  transform: var(--y) translateX(var(--swipe-x, 0px));
+  /* a plain easeOut (no overshoot) so a restack settles instead of bouncing
+     back past its slot */
+  transition:
+    transform 350ms cubic-bezier(0.21, 0.8, 0.4, 1),
+    opacity 350ms,
+    height 350ms;
+  /* the enter is a keyframe (plays on DOM insertion in both ports — no JS mount
+     flip, whose pre-paint timing the Dioxus effect couldn't drive). It animates
+     the independent `translate` property, NOT `transform`, so it *composes* with
+     the stack transform instead of overriding it: a toast pushed back mid-enter
+     keeps repositioning smoothly instead of fighting the keyframe (rapid-fire
+     lag). */
+  animation: ev-toast-enter 350ms cubic-bezier(0.21, 0.8, 0.4, 1) backwards;
+}
+@keyframes ev-toast-enter {
+  from {
+    opacity: 0;
+    translate: 0 var(--enter-y, 100%);
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+/* pin to the toaster's edge; set the lift sign + the off-screen enter offset */
+[data-slot="toaster"][data-stack][data-y-position="bottom"] [data-slot="toast"] {
+  bottom: 0;
+  --lift: -1;
+  --enter-y: 100%;
+}
+[data-slot="toaster"][data-stack][data-y-position="top"] [data-slot="toast"] {
+  top: 0;
+  --lift: 1;
+  --enter-y: -100%;
+}
+
+/* closing: slide back off + fade out; the node is dropped on its transitionend */
+[data-slot="toaster"][data-stack] [data-slot="toast"][data-state="closed"] {
+  --y: translateY(var(--enter-y));
+  opacity: 0;
+}
+
+/* collapsed: back toasts lift + shrink by depth, clamp to the front height */
+[data-slot="toaster"][data-stack]
+  [data-slot="toast"][data-state="open"][data-front="false"] {
+  --y: translateY(calc(var(--lift) * var(--gap) * var(--index)))
+    scale(calc(1 - var(--index) * 0.05));
+  height: var(--front-height);
+}
+[data-slot="toaster"][data-stack] [data-slot="toast"][data-front="false"] > * {
+  opacity: 0;
+  transition: opacity 300ms;
+}
+/* only the front three show while collapsed */
+[data-slot="toaster"][data-stack] [data-slot="toast"][data-visible="false"] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* expanded (hover / keyboard focus): spread to the offset, real height, content
+   + overflow back */
+[data-slot="toaster"][data-stack]:hover [data-slot="toast"][data-state="open"],
+[data-slot="toaster"][data-stack]:focus-within
+  [data-slot="toast"][data-state="open"] {
+  --y: translateY(calc(var(--lift) * var(--offset)));
+  height: var(--initial-height);
+}
+[data-slot="toaster"][data-stack]:hover [data-slot="toast"] > *,
+[data-slot="toaster"][data-stack]:focus-within [data-slot="toast"] > *,
+[data-slot="toaster"][data-stack]:hover [data-slot="toast"][data-visible="false"],
+[data-slot="toaster"][data-stack]:focus-within
+  [data-slot="toast"][data-visible="false"] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* a transparent strip over the gap so the hover area stays contiguous between
+   spread toasts (otherwise the pointer falls through the gap and it collapses) */
+[data-slot="toaster"][data-stack] [data-slot="toast"]::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: calc(var(--gap) + 1px);
+}
+[data-slot="toaster"][data-stack][data-y-position="bottom"]
+  [data-slot="toast"]::after {
+  bottom: 100%;
+}
+[data-slot="toaster"][data-stack][data-y-position="top"]
+  [data-slot="toast"]::after {
+  top: 100%;
+}
+
+/* 1:1 finger tracking during a swipe — kill the transition */
+[data-slot="toaster"][data-stack] [data-slot="toast"][data-swiping="true"] {
+  transition: none;
+}
+
+/* auto-dismiss without a host timer: a no-op "life" animation runs for --life,
+   then its `animationend` fires (the toast closes itself). Hovering/focusing the
+   stack pauses just that animation (animation-play-state's 2nd slot), so the
+   countdown holds — and resumes with the elapsed time preserved — while the
+   enter (1st slot) keeps running. Persistent toasts set data-autodismiss=false,
+   so they get no life animation. (The React port uses setTimeout instead.) */
+@keyframes ev-toast-life {
+  from {
+    --ev-life: 0;
+  }
+  to {
+    --ev-life: 1;
+  }
+}
+[data-slot="toaster"][data-stack]
+  [data-slot="toast"][data-autodismiss="true"][data-state="open"] {
+  animation:
+    ev-toast-enter 350ms cubic-bezier(0.21, 0.8, 0.4, 1) backwards,
+    ev-toast-life var(--life) linear;
+}
+[data-slot="toaster"][data-stack]:hover
+  [data-slot="toast"][data-autodismiss="true"],
+[data-slot="toaster"][data-stack]:focus-within
+  [data-slot="toast"][data-autodismiss="true"] {
+  animation-play-state: running, paused;
+}
+
+/* reduced motion: opacity-only enter + near-instant transform (still fires
+   transitionend, so exit removal works), no height animation */
+@keyframes ev-toast-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="toaster"][data-stack] [data-slot="toast"] {
+    transition:
+      transform 1ms linear,
+      opacity 200ms;
+    animation: ev-toast-fade-in 200ms;
+  }
+  /* keep the auto-dismiss life animation under reduced motion */
+  [data-slot="toaster"][data-stack]
+    [data-slot="toast"][data-autodismiss="true"][data-state="open"] {
+    animation:
+      ev-toast-fade-in 200ms,
+      ev-toast-life var(--life) linear;
+  }
+}
+
+/* ── Drawer (Vaul-style) motion, shared by both ports via data-slot ──────────
+   Both ports render the panel as [data-slot="drawer-content"] with
+   data-vaul-drawer-direction + data-state, and the scrim as
+   [data-slot="drawer-overlay"] with data-state. The enter is a keyframe (plays
+   on DOM insertion — no JS mount flip, same reason as the toast above) on the
+   independent `translate` property, so it composes with the `transform` the
+   React port writes while a finger drags the panel. Closing flips
+   data-state=closed: `transform` transitions to the off-screen edge and the
+   node is dropped on that transitionend. A drag sets data-dragging on the panel
+   and the scrim to kill their transitions for 1:1 finger tracking, then clears
+   it on release so the same transition either snaps the panel home or (with
+   data-state=closed in the same frame) carries it off from where the finger
+   left it. Timing is Vaul's: 500ms cubic-bezier(0.32, 0.72, 0, 1) both ways.
+
+   touch-action:none on the panel keeps the browser from turning a touch into a
+   page pan (which would pointercancel the drag). It does NOT reach into a
+   scroll container nested in the panel — that one keeps native touch scrolling,
+   and the React port only starts a drag from it when it sits at its top. So
+   the scrollable region of a drawer belongs INSIDE the panel, not on it. */
+
+[data-slot="drawer-content"] {
+  --ev-drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
+  touch-action: none;
+  will-change: transform;
+  transition: transform 500ms var(--ev-drawer-ease);
+  animation: ev-drawer-enter 500ms var(--ev-drawer-ease) backwards;
+}
+[data-slot="drawer-content"][data-vaul-drawer-direction="bottom"] {
+  --ev-drawer-from: 0 100%;
+  --ev-drawer-out: translate3d(0, 100%, 0);
+}
+[data-slot="drawer-content"][data-vaul-drawer-direction="top"] {
+  --ev-drawer-from: 0 -100%;
+  --ev-drawer-out: translate3d(0, -100%, 0);
+}
+[data-slot="drawer-content"][data-vaul-drawer-direction="left"] {
+  --ev-drawer-from: -100% 0;
+  --ev-drawer-out: translate3d(-100%, 0, 0);
+}
+[data-slot="drawer-content"][data-vaul-drawer-direction="right"] {
+  --ev-drawer-from: 100% 0;
+  --ev-drawer-out: translate3d(100%, 0, 0);
+}
+@keyframes ev-drawer-enter {
+  from {
+    translate: var(--ev-drawer-from, 0 100%);
+  }
+  to {
+    translate: 0 0;
+  }
+}
+[data-slot="drawer-content"][data-state="closed"] {
+  transform: var(--ev-drawer-out, translate3d(0, 100%, 0));
+}
+
+/* the over-drag away from the edge is dampened but still moves the panel, so
+   the panel's own background extends past its docked edge to cover the gap */
+[data-slot="drawer-content"]::after {
+  content: "";
+  position: absolute;
+  background: inherit;
+  pointer-events: none;
+}
+[data-slot="drawer-content"][data-vaul-drawer-direction="bottom"]::after {
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+[data-slot="drawer-content"][data-vaul-drawer-direction="top"]::after {
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+[data-slot="drawer-content"][data-vaul-drawer-direction="left"]::after {
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+[data-slot="drawer-content"][data-vaul-drawer-direction="right"]::after {
+  left: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[data-slot="drawer-overlay"] {
+  touch-action: none;
+  will-change: opacity;
+  transition: opacity 500ms cubic-bezier(0.32, 0.72, 0, 1);
+  animation: ev-drawer-fade-in 500ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
+}
+@keyframes ev-drawer-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+[data-slot="drawer-overlay"][data-state="closed"] {
+  opacity: 0;
+}
+
+/* 1:1 finger tracking during a drag — kill the transitions */
+[data-slot="drawer-content"][data-dragging="true"],
+[data-slot="drawer-overlay"][data-dragging="true"] {
+  transition: none;
+}
+
+/* a mouse drag would otherwise start a text selection alongside the panel */
+@media (hover: hover) and (pointer: fine) {
+  [data-slot="drawer-content"] {
+    user-select: none;
+  }
+}
+
+/* reduced motion: fade only. The transform transition stays (1ms) so its
+   transitionend still fires and the closing node is still dropped. */
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="drawer-content"] {
+    transition:
+      transform 1ms linear,
+      opacity 200ms;
+    animation: ev-drawer-fade-in 200ms;
+  }
+  [data-slot="drawer-content"][data-state="closed"] {
+    opacity: 0;
+  }
+  [data-slot="drawer-overlay"] {
+    transition: opacity 200ms;
+    animation: ev-drawer-fade-in 200ms;
+  }
+}
+
+/* ═══ CONTRACT ═══════════════════════════════════════════════════ */
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+
+  /* Depth has to be a ladder, not a single 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 + opacity. */
+  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.30);
+  --shadow-elevated:
+    0 4px 12px -2px rgb(0 0 0 / 0.40),
+    0 2px 4px -2px rgb(0 0 0 / 0.30);
+  --shadow-overlay: 0 16px 48px -12px rgb(0 0 0 / 0.60);
+
+  /* The families are parameters: a brand scope sets `--brand-font-sans`,
+   * `--brand-font-display` and `--brand-font-mono` (evinvest-palette writes
+   * them from a brand file's [fonts]); `font-serif` is the display role under
+   * its older name. Unset, each falls through to EV: next/font (landing) sets
+   * `--font-inter` / `--font-playfair`, a Rust consumer `@font-face`s the same
+   * families itself. Every leading var() carries its own fallback — an
+   * undefined one would invalidate the whole `font-family` and drop the
+   * browser to its default, so it must never resolve to guaranteed-invalid.
+   * `inline` puts the var() chain in the utility itself, so it resolves on
+   * the element and a brand scope re-fonts its subtree. */
+  --font-sans: var(--brand-font-sans, var(--font-inter, "Inter")), ui-sans-serif, system-ui, sans-serif;
+  --font-serif: var(--brand-font-display, var(--font-playfair, "Playfair Display")), ui-serif, Georgia, serif;
+  --font-mono: var(--brand-font-mono, var(--font-inter, "Inter")), ui-monospace, monospace;
+  --font-display: var(--brand-font-display, var(--font-playfair, "Playfair Display")), ui-serif, Georgia, serif;
+
+  /* The colour contract: every `--color-X: var(--X)` below is a name a palette
+   * owes, except the derived ones in the next rule. `evinvest-palette` reads
+   * this block as the list, so there is no second copy of it to drift. */
+
+  /* surfaces */
+  --color-background: var(--background);
+  --color-card: var(--card);
+  --color-popover: var(--popover);
+  --color-muted: var(--muted);
+  --color-hover: var(--hover);
+
+  /* ink — hierarchy, loudest first */
+  --color-ink: var(--ink);
+  --color-ink-mid: var(--ink-mid);
+  --color-ink-soft: var(--ink-soft);
+
+  /* lines */
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* roles */
+  --color-brand: var(--brand);
+  --color-primary: var(--primary);
+  --color-on-primary: var(--on-primary);
+  --color-primary-ink: var(--primary-ink);
+  --color-secondary: var(--secondary);
+  --color-on-secondary: var(--on-secondary);
+  --color-positive: var(--positive);
+  --color-on-positive: var(--on-positive);
+  --color-accent-trace: var(--accent-trace);
+  --color-on-accent-trace: var(--on-accent-trace);
+  --color-accent-debug: var(--accent-debug);
+  --color-on-accent-debug: var(--on-accent-debug);
+  --color-accent-info: var(--accent-info);
+  --color-on-accent-info: var(--on-accent-info);
+  --color-accent-warn: var(--accent-warn);
+  --color-on-accent-warn: var(--on-accent-warn);
+  --color-accent-error: var(--accent-error);
+  --color-on-accent-error: var(--on-accent-error);
+
+  /* charts — distinguishable hues carrying no significance */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+}
+
+/* Derived from the palette, and redeclared on every scope a palette can be
+ * declared on. A var() inside a custom property is resolved where it is
+ * declared and the result is what inherits — declared on `:root` alone, a brand
+ * scope would change the text and keep EV's borders, hover and focus ring.
+ * Zero specificity, so a palette that sets one of these outright wins. */
+:where(:root, .dark, .light, [data-brand]) {
+  /* the menu-item tint: a surface state, so it is named for the state */
+  --hover: color-mix(in srgb, var(--ink) 8%, transparent);
+  --ink-mid: color-mix(in srgb, var(--ink) 82%, transparent);
+  /* the most-used secondary text token, so it has to clear AA on its own */
+  --ink-soft: color-mix(in srgb, var(--ink) 65%, transparent);
+  --border: color-mix(in srgb, var(--ink) 14%, transparent);
+  --input: color-mix(in srgb, var(--ink) 20%, transparent);
+  --ring: var(--primary-ink);
+}
+
+/* Geometry. A `[data-brand]` scope is a theme root of its own, so it restarts
+ * from these defaults (and from the scale-ups below) rather than inheriting
+ * whatever an ancestor computed — `--control-radius` in particular is derived
+ * from `--radius` and has to be recomputed wherever `--radius` may change. */
+:where(:root, [data-brand]) {
+  --radius: 0.375rem; /* 6px on mobile; bumped to 8px ≥ sm (see @media below) */
+  /* control geometry, so a consumer reshapes every button/input at once */
+  --control-radius: calc(var(--radius) - 2px);
+  --control-py: 0.5rem;
+  /* the Xl (call-to-action) button reads all three */
+  --control-px: 2rem;
+  --control-text: 1rem;
+  /* multiplies the display type scale (uikit <Display>) */
+  --display-scale: 1;
+  /* the vertical rhythm of a full-bleed <Section>; `tight` is the sub-page one */
+  --band-py: 2.25rem;
+  --band-py-tight: 2rem;
+
+  --sidebar-width: 14rem;
+
+  /* page container — responsive gutter + max width (uikit <Container>) */
+  --page-max: 90rem; /* 1440px */
+  --page-px: 1rem; /* 16px — mobile gutter, scales up below */
+
+  /* ── the mark ────────────────────────────────────────────────── *
+   * `--brand-mark` (a url() at your own SVG) and `--brand-aspect` (its ratio)
+   * are what `<Logo>` masks. Deliberately undefined: the kit ships no artwork,
+   * and a default here would put EV's crown on somebody else's 404. Undeclared,
+   * `mask-image` is invalid at computed-value time and the mark paints as a
+   * solid block — loud, which is the point. Declare both beside the palette:
+   *
+   *   --brand-mark: url("/assets/logo.svg");
+   *   --brand-aspect: 387 / 335;
+   */
+}
+
+:root {
+  /* shell offset — viewport space reserved by whatever shell hosts the app.
+     Standalone apps get 0; a hosting shell overrides on :root. Size
+     viewport-bound surfaces with calc(100dvh - var(--ev-shell-offset, 0px)). */
+  --ev-shell-offset: 0px;
+}
+
+/* Mobile-first scale-ups: roomier gutters + slightly larger radii on bigger
+   viewports. Lives here (not per-component) so every consumer scales alike. */
+@media (min-width: 640px) {
+  :where(:root, [data-brand]) {
+    --radius: 0.5rem;
+    --page-px: 1.5rem;
+  }
+}
+
+@media (min-width: 768px) {
+  :where(:root, [data-brand]) {
+    --band-py: 4rem;
+    --band-py-tight: 3.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  :where(:root, [data-brand]) {
+    --page-px: 3rem;
+  }
+}