@evinvest/uikit 0.30.0 → 0.31.0

package/styles/theme.css

@@ -2,7 +2,7 @@
 /*
  * Toast (sonner) and Drawer enter/exit motion, the reduced-motion fade for Sheet and
  * the dialogs, the entrances (rise / stagger / settled / skeleton) and the app-shell
- * markers, shared by both ports. Imported by the token
+ * markers, the chat caret and the docked aside, shared by both ports. Imported by the token
  * sheets so the lifecycle ships with the theme contract.
  */
 
@@ -449,7 +449,198 @@
     opacity: 0;
   }
 }
+/* ── Chat: streaming text, caret, thinking dots, entrances ───────────────────
+   Streamed words (`chat-word`, from ChatStreamText) fade in from a 2px blur with
+   a small rise; each is an inline-block so `translate` applies, and the space
+   between words stays outside it so lines still wrap normally. The caret trails a
+   bubble that is still receiving text (`data-streaming`) and pulses instead of
+   blinking; once streaming ends the bubble keeps `data-caret`, so the caret fades
+   out by transition. The assistant's text sits a little dimmer while it arrives
+   and settles to full ink when it is done. Turns, markers and attachments fade in
+   as they mount; the log fades its top edge once scrolled, and the jump button
+   fades with its state. A docked aside is mounted and unmounted by its owner, so
+   it only has an enter: it slides in from the edge it docks to. Everything falls
+   back under reduced motion. */
+@keyframes ev-word-in {
+  from {
+    opacity: 0;
+    filter: blur(2px);
+    translate: 0 3px;
+  }
+}
+[data-slot="chat-word"] {
+  display: inline-block;
+  animation: ev-word-in var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out) backwards;
+}
+
+[data-slot="chat-bubble"][data-variant="assistant"] {
+  transition: opacity var(--ev-dur-slow, 400ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="chat-bubble"][data-variant="assistant"][data-streaming] {
+  opacity: 0.86;
+}
+
+[data-slot="chat-bubble"][data-caret]::after {
+  content: "";
+  display: inline-block;
+  width: 0.5em;
+  height: 1em;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  background: var(--ink-mid);
+  opacity: 0;
+  transition: opacity var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="chat-bubble"][data-streaming]::after {
+  animation: ev-caret-pulse 1.4s var(--ev-ease-in-out, ease-in-out) infinite;
+}
+@keyframes ev-caret-pulse {
+  0%,
+  100% {
+    opacity: 0.15;
+  }
+  50% {
+    opacity: 0.9;
+  }
+}
+
+[data-slot="chat-typing"] {
+  animation: ev-enter-fade var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out) backwards;
+}
+[data-slot="chat-typing"] [data-still] {
+  display: none;
+}
+[data-slot="chat-typing"] [data-dot] {
+  animation: ev-typing-wave 1.2s var(--ev-ease-in-out, ease-in-out) infinite;
+}
+[data-slot="chat-typing"] [data-dot]:nth-child(2) {
+  animation-delay: 160ms;
+}
+[data-slot="chat-typing"] [data-dot]:nth-child(3) {
+  animation-delay: 320ms;
+}
+@keyframes ev-typing-wave {
+  0%,
+  60%,
+  100% {
+    opacity: 0.25;
+  }
+  30% {
+    opacity: 1;
+  }
+}
+
+@keyframes ev-chat-in {
+  from {
+    opacity: 0;
+    filter: blur(3px);
+    translate: 0 10px;
+  }
+}
+@keyframes ev-chat-in-user {
+  from {
+    opacity: 0;
+    filter: blur(3px);
+    translate: 0 10px;
+    scale: 0.98;
+  }
+}
+@keyframes ev-chat-part-in {
+  from {
+    opacity: 0;
+    translate: 0 4px;
+  }
+}
+[data-slot="chat-message"][data-enter="rise"] {
+  animation: ev-chat-in var(--ev-dur-slow, 400ms) var(--ev-ease-out, ease-out) var(--enter-delay, 0ms) backwards;
+}
+[data-slot="chat-message"][data-role="user"][data-enter="rise"] {
+  transform-origin: right bottom;
+  animation-name: ev-chat-in-user;
+}
+[data-slot="chat-marker"],
+[data-slot="chat-attachment"] {
+  animation: ev-chat-part-in var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out) backwards;
+}
+
+@property --ev-chat-fade {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+[data-slot="chat-log"] {
+  mask-image: linear-gradient(to bottom, transparent, black var(--ev-chat-fade));
+  transition: --ev-chat-fade var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="chat-log"][data-scrolled] {
+  --ev-chat-fade: 28px;
+}
+[data-chat-jump] {
+  transition:
+    opacity var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out),
+    translate var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out);
+}
+[data-chat-jump="hidden"] {
+  opacity: 0;
+  translate: 0 6px;
+  pointer-events: none;
+}
+
+[data-slot="aside-panel"][data-mode="docked"] {
+  --ev-aside-from: 24px;
+  animation: ev-aside-enter var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out) backwards;
+}
+[data-slot="aside-panel"][data-mode="docked"][data-side="left"] {
+  --ev-aside-from: -24px;
+}
+@keyframes ev-aside-enter {
+  from {
+    opacity: 0;
+    transform: translateX(var(--ev-aside-from));
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
+  [data-slot="chat-word"] {
+    animation: ev-enter-fade 1ms backwards;
+    /* beats the per-word stagger delay set inline */
+    animation-delay: 0ms !important;
+  }
+  [data-slot="chat-bubble"][data-variant="assistant"],
+  [data-slot="chat-bubble"][data-caret]::after,
+  [data-slot="chat-log"] {
+    transition: none;
+  }
+  [data-slot="chat-bubble"][data-variant="assistant"][data-streaming] {
+    opacity: 1;
+  }
+  [data-slot="chat-bubble"][data-streaming]::after {
+    animation: none;
+    opacity: 0.6;
+  }
+  [data-slot="chat-typing"],
+  [data-slot="chat-typing"] [data-dot] {
+    animation: none;
+  }
+  [data-slot="chat-typing"] [data-dot] {
+    display: none;
+  }
+  [data-slot="chat-typing"] [data-still] {
+    display: inline;
+  }
+  [data-slot="chat-message"][data-enter="rise"],
+  [data-slot="chat-message"][data-role="user"][data-enter="rise"],
+  [data-slot="chat-marker"],
+  [data-slot="chat-attachment"] {
+    animation: ev-enter-fade var(--ev-dur-fast, 180ms) linear backwards;
+  }
+  [data-chat-jump] {
+    transition: opacity var(--ev-dur-fast, 180ms) linear;
+    translate: none;
+  }
+  [data-slot="aside-panel"][data-mode="docked"] {
+    animation-name: ev-enter-fade;
+  }
   [data-enter="rise"],
   [data-enter="stagger"] > *,
   [data-slot="settled"][data-state="revealed"] {
@@ -474,29 +665,47 @@
   --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
+  /* The names stay, the values are per theme: u2 is flat (`--depth-*` is a
+   * zero shadow), Oldschool brings the ladder back in ev.css. */
+  --shadow-card: var(--depth-card);
+  --shadow-elevated: var(--depth-elevated);
+  --shadow-overlay: var(--depth-overlay);
+
+  /* Type scale: size / line-height in pairs, the Figma text styles. */
+  --text-caption: 0.6875rem;
+  --text-caption--line-height: 0.875rem;
+  --text-body-s: 0.75rem;
+  --text-body-s--line-height: 1rem;
+  --text-body: 0.8125rem;
+  --text-body--line-height: 1.125rem;
+  --text-body-l: 0.875rem;
+  --text-body-l--line-height: 1.25rem;
+  --text-h3: 0.875rem;
+  --text-h3--line-height: 1.25rem;
+  --text-h2: 1.5rem;
+  --text-h2--line-height: 1.875rem;
+  --text-h1: 2rem;
+  --text-h1--line-height: 2.375rem;
+  --text-figure-m: 1.25rem;
+  --text-figure-m--line-height: 1.5rem;
+  --text-figure-l: 1.75rem;
+  --text-figure-l--line-height: 2rem;
+
+  /* The families are parameters, apart from the colour contract: a brand scope
+   * sets `--brand-font-sans`, `--brand-font-serif` and `--brand-font-mono`
+   * (evinvest-palette writes them from a brand file's [fonts]). `serif` is the
+   * second face (headings, figures, wordmarks, italic accents), not necessarily
+   * one with serifs. Unset, each falls through to EV's: Inter, Inter Tight and
+   * JetBrains Mono (Oldschool sets its own, see ev.css). next/font (landing)
+   * sets `--font-inter` / `--font-inter-tight` / `--font-jetbrains-mono` /
+   * `--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;
+  --font-serif: var(--brand-font-serif, var(--font-inter-tight, "Inter Tight")), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--brand-font-mono, var(--font-jetbrains-mono, "JetBrains Mono")), ui-monospace, monospace;
 
   /* 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
@@ -508,14 +717,20 @@
   --color-popover: var(--popover);
   --color-muted: var(--muted);
   --color-hover: var(--hover);
+  --color-active: var(--active);
+  --color-selected: var(--selected);
+  --color-scrim: var(--scrim);
 
   /* ink — hierarchy, loudest first */
   --color-ink: var(--ink);
   --color-ink-mid: var(--ink-mid);
   --color-ink-soft: var(--ink-soft);
+  --color-ink-faint: var(--ink-faint);
 
   /* lines */
+  --color-border-subtle: var(--border-subtle);
   --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
   --color-input: var(--input);
   --color-ring: var(--ring);
 
@@ -524,21 +739,47 @@
   --color-primary: var(--primary);
   --color-on-primary: var(--on-primary);
   --color-primary-ink: var(--primary-ink);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-border: var(--primary-border);
   --color-secondary: var(--secondary);
   --color-on-secondary: var(--on-secondary);
   --color-positive: var(--positive);
   --color-on-positive: var(--on-positive);
+  --color-positive-ink: var(--positive-ink);
   --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-info-ink: var(--accent-info-ink);
   --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);
-  --color-accent-error-ink: var(--accent-error-ink);
+
+  /* component faces: derived below, pinned per theme by EV, so `bg-button-primary-bg`
+   * and `border-chip-error-border` are real utilities the class merge understands */
+  --color-button-primary-bg: var(--button-primary-bg);
+  --color-button-primary-hover: var(--button-primary-hover);
+  --color-button-primary-border: var(--button-primary-border);
+  --color-button-primary-ink: var(--button-primary-ink);
+  --color-button-danger-bg: var(--button-danger-bg);
+  --color-button-danger-hover: var(--button-danger-hover);
+  --color-button-danger-border: var(--button-danger-border);
+  --color-button-danger-ink: var(--button-danger-ink);
+  --color-chip-neutral-bg: var(--chip-neutral-bg);
+  --color-chip-neutral-border: var(--chip-neutral-border);
+  --color-chip-primary-bg: var(--chip-primary-bg);
+  --color-chip-primary-border: var(--chip-primary-border);
+  --color-chip-positive-bg: var(--chip-positive-bg);
+  --color-chip-positive-border: var(--chip-positive-border);
+  --color-chip-info-bg: var(--chip-info-bg);
+  --color-chip-info-border: var(--chip-info-border);
+  --color-chip-warn-bg: var(--chip-warn-bg);
+  --color-chip-warn-border: var(--chip-warn-border);
+  --color-chip-error-bg: var(--chip-error-bg);
+  --color-chip-error-border: var(--chip-error-border);
 
   /* charts — distinguishable hues carrying no significance */
   --color-chart-1: var(--chart-1);
@@ -546,42 +787,98 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
 }
 
 /* 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);
+ * Zero specificity, so a palette that sets one of these outright wins. These
+ * are the formulas a brand file gets; EV pins its own per theme in ev.css. */
+:where(:root, .dark, .light, [data-brand], [data-theme]) {
+  /* surface states: the menu-item tint, the pressed tint, the chosen row */
+  --hover: color-mix(in srgb, var(--ink) 6%, transparent);
+  --active: color-mix(in srgb, var(--ink) 10%, transparent);
+  --selected: color-mix(in srgb, var(--ink) 10%, transparent);
+  /* behind a modal layer; black on either polarity keeps the page readable
+   * through it without tinting the brand */
+  --scrim: color-mix(in srgb, black 50%, 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);
-  /* a divider: decoration, so it stays quiet */
+  --ink-soft: color-mix(in srgb, var(--ink) 60%, transparent);
+  /* disabled only: exempt from the text floor because nothing can be done with it */
+  --ink-faint: color-mix(in srgb, var(--ink) 38%, transparent);
+  /* three steps of line: a row rule, a divider, and a panel edge. Decoration,
+   * so they stay quiet; none of them is a control edge (see --input) */
+  --border-subtle: color-mix(in srgb, var(--ink) 8%, transparent);
   --border: color-mix(in srgb, var(--ink) 14%, transparent);
+  --border-strong: color-mix(in srgb, var(--ink) 26%, transparent);
   /* the only edge an unfilled control has, so it owes the non-text 3:1 on every
    * surface (lib#154). One mix serves both polarities; light is the binding
    * side — ink over white needs ~47% to clear it, dark lands near 4:1. */
   --input: color-mix(in srgb, var(--ink) 48%, transparent);
   --ring: var(--primary-ink);
-  /* the error role as text on its own 10 % tint — a destructive menu row
-   * (lib#166). The fill alone read 3.76:1 there on EV and 2.48:1 on a dark
-   * brand; 30 % of the ink pulls it toward whichever polarity the text needs.
-   * Derived rather than required so a brand file that predates it still
-   * renders; one that misses the floor pins its own (docs/spec/accents.md). */
-  --accent-error-ink: color-mix(in srgb, var(--accent-error) 70%, var(--ink));
+  --primary-hover: color-mix(in srgb, var(--primary) 95%, black);
+  --primary-border: color-mix(in srgb, var(--primary-ink) 55%, transparent);
+  /* the quiet status roles as text on a surface: a fill is a shape, and as text
+   * it reads far below AA on a light plane. warn and error have none: they are
+   * text in their own colour (docs/spec/accents.md). 60 % of the role toward
+   * the ink is the fallback for a brand that pins nothing. */
+  --positive-ink: color-mix(in srgb, var(--positive) 60%, var(--ink));
+  --accent-info-ink: color-mix(in srgb, var(--accent-info) 60%, var(--ink));
+}
+
+/* Component faces built from the palette. Derived like the rule above (a brand
+ * file owes none of them and may pin any), but kept in a rule of their own: the
+ * same scopes, listed in another order so the contract reader finds one rule
+ * per selector. */
+:where([data-theme], [data-brand], .light, .dark, :root) {
+  /* primary is an outline button, danger the same in the error role */
+  --button-primary-bg: transparent;
+  --button-primary-hover: var(--hover);
+  --button-primary-border: color-mix(in srgb, var(--ink) 60%, transparent);
+  --button-primary-ink: var(--ink);
+  --button-danger-bg: transparent;
+  --button-danger-hover: color-mix(in srgb, var(--accent-error) 10%, transparent);
+  --button-danger-border: var(--accent-error);
+  --button-danger-ink: var(--accent-error);
+
+  /* chips (Badge, status pills). The source is the colour the label wears, so
+   * the edge and the label are one hue; --chip-fill and --chip-edge are in the
+   * geometry. */
+  --chip-neutral-bg: var(--hover);
+  --chip-neutral-border: var(--border);
+  --chip-primary-bg: color-mix(in srgb, var(--primary-ink) var(--chip-fill), transparent);
+  --chip-primary-border: color-mix(in srgb, var(--primary-ink) var(--chip-edge), transparent);
+  --chip-positive-bg: color-mix(in srgb, var(--positive-ink) var(--chip-fill), transparent);
+  --chip-positive-border: color-mix(in srgb, var(--positive-ink) var(--chip-edge), transparent);
+  --chip-info-bg: color-mix(in srgb, var(--accent-info-ink) var(--chip-fill), transparent);
+  --chip-info-border: color-mix(in srgb, var(--accent-info-ink) var(--chip-edge), transparent);
+  --chip-warn-bg: color-mix(in srgb, var(--accent-warn) var(--chip-fill), transparent);
+  --chip-warn-border: color-mix(in srgb, var(--accent-warn) var(--chip-edge), transparent);
+  --chip-error-bg: color-mix(in srgb, var(--accent-error) var(--chip-fill), transparent);
+  --chip-error-border: color-mix(in srgb, var(--accent-error) var(--chip-edge), transparent);
 }
 
 /* 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. */
+ * whatever an ancestor computed. */
 :where(:root, [data-brand]) {
-  --radius: 0.375rem; /* 6px on mobile; bumped to 8px ≥ sm (see @media below) */
+  --radius: 0.375rem; /* panels and menus */
   /* control geometry, so a consumer reshapes every button/input at once */
-  --control-radius: calc(var(--radius) - 2px);
+  --control-radius: 0.25rem;
+  --chip-radius: 0.25rem;
+  /* how much of its ink a chip's fill and edge take, for a brand that pins
+   * nothing: an outline by default, a tint where a theme raises the fill */
+  --chip-fill: 0%;
+  --chip-edge: 50%;
+  /* u2 is flat: depth is surface steps and hairlines. Never `none` — inside
+   * Tailwind's comma-separated box-shadow list it invalidates the whole
+   * declaration, and the focus ring goes with it. */
+  --depth-card: 0 0 #0000;
+  --depth-elevated: 0 0 #0000;
+  --depth-overlay: 0 0 #0000;
   --control-py: 0.5rem;
   /* the Xl (call-to-action) button reads all three */
   --control-px: 2rem;
@@ -637,11 +934,10 @@
   --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. */
+/* Mobile-first scale-ups: roomier gutters 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;
   }
 }