@lovett/ui 0.0.10 → 0.1.0

package/dist/theme-v2.css

@@ -0,0 +1,228 @@
+/*
+ * @lovett/ui — v2 theme, SCOPED.
+ *
+ * GENERATED. Regenerate with:
+ *   python3 scripts/figma/emit-theme.py <corpus> --out packages/ui/src/theme-v2.css
+ *
+ * Opt in by putting `data-ds="v2"` on any element. Everything inside it
+ * renders on the v2 palette, including existing @lovett/ui primitives —
+ * they read the same token names, which now resolve to different values.
+ * Nothing outside the scope changes.
+ *
+ * Derived from a 13-kit Figma corpus; see docs/design-system/figma-corpus/.
+ * The direction is Vertex Lab: pure-white trays, near-neutral greys, a
+ * navy-tinted ink used as a SURFACE and not only as text.
+ *
+ * The semantic reassignment is the load-bearing change:
+ *   --accent       red    brand identity and the primary action, nothing else
+ *   --success      green  save, publish, approve, live
+ *   --destructive  AMBER  destructive. No longer red.
+ *   --warning      gold   caution
+ *   --info         violet
+ *
+ * Consequence worth knowing before adopting: amber is a weaker danger
+ * signal than red, so destructive actions must carry an icon and an
+ * explicit verb. Colour alone no longer does that work.
+ */
+
+[data-ds="v2"] {
+  /* ── Surfaces ─────────────────────────────────────────────── */
+  /* The frame/tray step is 2.1 pts — ratified as `medium`. Both being
+     white removes the distinction the card pattern is built on. */
+  --page-bg: 240 241 242;
+  --background: 240 241 242;
+  --main-content-bg: 240 241 242;
+  --bg-surface: 248 248 249;
+  --surface-frame: 248 248 249;
+  --card-frame-bg: 248 248 249;
+  --bg-card: 255 255 255;
+  --card: 255 255 255;
+  --tray-bg: 255 255 255;
+  --bg-elevated: 255 255 255;
+  --surface-raised: 255 255 255;
+  --popover: 255 255 255;
+  --bg-input: 255 255 255;
+  --bg-card-hover: 250 251 252;
+  --bg-input-hover: 250 251 252;
+  --muted: 246 247 248;
+  --canvas-placement-bg: 246 247 248;
+
+  /* ── Ink ──────────────────────────────────────────────────── */
+  /* Navy-tinted, not black. Vertex uses #1c274c 6,522 times — far too
+     many for text: it is a panel colour, so it gets a full ramp. */
+  --ink-15: 253 253 253;
+  --ink-25: 250 251 254;
+  --ink-30: 247 248 252;
+  --ink-40: 241 245 253;
+  --ink-60: 235 241 254;
+  --ink-50: 243 247 255;
+  --ink-100: 229 237 254;
+  --ink-200: 207 217 238;
+  --ink-300: 182 193 217;
+  --ink-400: 150 163 191;
+  --ink-500: 119 134 165;
+  --ink-600: 93 108 140;
+  --ink-700: 70 82 109;
+  --ink-800: 48 58 80;
+  --ink-900: 27 35 51;
+  --ink-950: 11 16 28;
+  --foreground: 11 16 28;
+  --card-foreground: 11 16 28;
+  --popover-foreground: 11 16 28;
+  --text-secondary: 93 108 140;
+  --muted-foreground: 93 108 140;
+  --text-tertiary: 119 134 165;
+  --text-muted: 150 163 191;
+  --secondary: 246 247 248;
+  --secondary-foreground: 11 16 28;
+
+  /* ── Borders ──────────────────────────────────────────────── */
+  /* Structure only. Depth is shadow — a hard hairline on a depth
+     surface reads as a form field. Inputs keep theirs deliberately. */
+  --border: 0 0 0 / 0.05;
+  --border-strong: 0 0 0 / 0.10;
+  --border-card: 0 0 0 / 0.06;
+  --border-input: 0 0 0 / 0.12;
+  --main-content-border: 0 0 0 / 0.06;
+  --input: 246 247 248;
+
+  /* ── Brand ────────────────────────────────────────────────── */
+  /* --accent is the AA-safe action red (4.77:1 with white). The bright
+     step is 4.01:1 and cannot carry a white label, so it is exposed
+     separately for accents, marks, charts and active fills. */
+  --accent: 221 40 34;
+  --accent-bright: 228 70 58;
+  --accent-hover: 201 17 17;
+  --accent-muted: 228 70 58 / 0.10;
+  --accent-subtle: 228 70 58 / 0.05;
+  --accent-glow: 228 70 58 / 0.22;
+  --primary: 221 40 34;
+  --primary-hover: 201 17 17;
+  --primary-foreground: 255 255 255;
+  --ring: 221 40 34;
+  --brand-15: 253 253 253;
+  --brand-25: 252 251 250;
+  --brand-30: 252 247 246;
+  --brand-40: 255 242 240;
+  --brand-60: 254 237 234;
+  --brand-50: 255 244 242;
+  --brand-100: 253 231 228;
+  --brand-200: 253 204 196;
+  --brand-300: 254 166 154;
+  --brand-400: 251 114 99;
+  --brand-500: 228 70 58;
+  --brand-600: 201 17 17;
+  --brand-700: 157 8 9;
+  --brand-800: 114 4 4;
+  --brand-900: 72 2 2;
+  --brand-950: 41 0 0;
+
+  /* ── Semantic — REASSIGNED ────────────────────────────────── */
+  --success: 13 128 75;
+  --success-bg: 6 160 93 / 0.12;
+  --warning: 100 80 1;
+  --warning-bg: 161 131 18 / 0.14;
+  /* Amber. The collision between a red brand and a red danger state
+     cannot be solved by moving the hue — every credible danger red
+     sits within a few degrees of the brand. Moving the MEANING can. */
+  --destructive: 115 71 9;
+  --destructive-bg: 187 116 2 / 0.14;
+  --destructive-foreground: 255 255 255;
+  --info: 130 62 210;
+  --info-bg: 155 97 235 / 0.12;
+
+  /* ── Categorical series ───────────────────────────────────── */
+  /* Constant lightness so no series outranks another; chroma tuned per
+     hue so each is equally vivid rather than equally saturated. */
+  --series-1: 226 74 62;
+  --series-2: 153 100 229;
+  --series-3: 9 160 93;
+  --series-4: 186 116 4;
+  --series-5: 2 137 234;
+  --series-6: 14 154 148;
+  --series-7: 212 73 150;
+  --series-8: 113 149 3;
+
+  /* ── Elevation ────────────────────────────────────────────── */
+  --shadow-sm: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04);
+  --shadow-md: 0 0 0 1px oklch(0 0 0 / 0.06), 0 2px 4px -2px oklch(0 0 0 / 0.08), 0 4px 10px -2px oklch(0 0 0 / 0.06);
+  --shadow-lg: 0 0 0 1px oklch(0 0 0 / 0.06), 0 6px 16px -4px oklch(0 0 0 / 0.12);
+  --shadow-xl: 0 0 0 1px oklch(0 0 0 / 0.06), 0 12px 32px -8px oklch(0 0 0 / 0.18);
+  --shadow-2xl: 0 0 0 1px oklch(0 0 0 / 0.06), 0 24px 56px -12px oklch(0 0 0 / 0.24);
+  --shadow-glow: 0 0 20px oklch(0 0 0 / 0);
+  --card-shadow-rest: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04), inset 0 1px 0 0 oklch(1 0 0 / 0.9);
+  --card-shadow-hover: 0 0 0 1px oklch(0 0 0 / 0.08), 0 2px 4px -1px oklch(0 0 0 / 0.08), 0 6px 14px -2px oklch(0 0 0 / 0.08), inset 0 1px 0 0 oklch(1 0 0 / 0.9);
+  --inset-highlight: 255 255 255 / 0.9;
+  --modal-overlay: 0 0 0 / 0.32;
+  /* Solid, matching the base theme — a 3px translucent halo measures ~1.4:1
+     against its surface, under the 3:1 WCAG 2.2 SC 2.4.11 asks of a focus
+     indicator. See the note on --ring-focus in tokens.css. */
+  --ring-focus: 0 0 0 2px rgb(var(--accent));
+  --ring-error: 0 0 0 2px rgb(var(--destructive));
+}
+
+/*
+ * Dark. Derived by SELECTING different steps from the same OKLCH ramps,
+ * not by inverting the light values — mechanical inversion is what
+ * produces muddy dark modes. The ink ramp supplies the surfaces here,
+ * which is the same navy that supplies the text in light.
+ */
+[data-ds="v2"][data-theme="dark"] {
+  --page-bg: 11 16 28;
+  --background: 11 16 28;
+  --main-content-bg: 11 16 28;
+  --bg-surface: 27 35 51;
+  --surface-frame: 27 35 51;
+  --card-frame-bg: 27 35 51;
+  --bg-card: 48 58 80;
+  --card: 48 58 80;
+  --tray-bg: 48 58 80;
+  --bg-elevated: 70 82 109;
+  --surface-raised: 70 82 109;
+  --popover: 70 82 109;
+  --bg-input: 27 35 51;
+  --bg-card-hover: 70 82 109;
+  --bg-input-hover: 48 58 80;
+  --muted: 48 58 80;
+  --canvas-placement-bg: 27 35 51;
+  --foreground: 250 251 252;
+  --card-foreground: 250 251 252;
+  --popover-foreground: 250 251 252;
+  --text-secondary: 192 193 195;
+  --muted-foreground: 192 193 195;
+  --text-tertiary: 162 163 165;
+  --text-muted: 133 134 136;
+  --secondary: 48 58 80;
+  --secondary-foreground: 250 251 252;
+  --border: 255 255 255 / 0.08;
+  --border-strong: 255 255 255 / 0.14;
+  --border-card: 255 255 255 / 0.08;
+  --border-input: 255 255 255 / 0.14;
+  --main-content-border: 255 255 255 / 0.08;
+  /* Accents brighten in dark — the light-mode steps go muddy on a dark
+     surface because the surrounding lightness has moved. */
+  --accent: 228 70 58;
+  --accent-bright: 251 114 99;
+  --accent-hover: 251 114 99;
+  --primary: 228 70 58;
+  --primary-hover: 251 114 99;
+  --success: 80 188 126;
+  --warning: 190 160 64;
+  --destructive: 218 145 55;
+  --info: 181 134 254;
+  --success-bg: 6 160 93 / 0.16;
+  --warning-bg: 161 131 18 / 0.16;
+  --destructive-bg: 187 116 2 / 0.16;
+  --info-bg: 155 97 235 / 0.16;
+  /* Layered depth shadows are invisible on dark; a single ring reads. */
+  --shadow-sm: 0 0 0 1px oklch(1 0 0 / 0.08);
+  --shadow-md: 0 0 0 1px oklch(1 0 0 / 0.08), 0 4px 12px oklch(0 0 0 / 0.4);
+  --shadow-lg: 0 0 0 1px oklch(1 0 0 / 0.08), 0 8px 24px oklch(0 0 0 / 0.5);
+  --shadow-xl: 0 0 0 1px oklch(1 0 0 / 0.10), 0 16px 40px oklch(0 0 0 / 0.55);
+  --shadow-2xl: 0 0 0 1px oklch(1 0 0 / 0.10), 0 24px 60px oklch(0 0 0 / 0.6);
+  --card-shadow-rest: 0 0 0 1px oklch(1 0 0 / 0.08);
+  --card-shadow-hover: 0 0 0 1px oklch(1 0 0 / 0.14);
+  --inset-highlight: 255 255 255 / 0.05;
+  --modal-overlay: 0 0 0 / 0.7;
+  --ring-focus: 0 0 0 2px rgb(var(--accent));
+}

package/dist/tokens.css

@@ -33,6 +33,14 @@
  *                  --destructive(-bg, -foreground)
  *     • Folder:    --folder-red/amber/emerald/teal/blue/violet/pink/
  *                  slate/ink (categorical palette for folder accents)
+ *     • Series:    --series-1…8 (categorical CHART palette; ADR-146 D2.
+ *                  theme-INDEPENDENT, and the SLOT ORDER IS LOAD-BEARING
+ *                  — see the block near the end of this file before
+ *                  "tidying" it)
+ *     • Chart:     --chart-grid, --chart-axis, --chart-band (chart
+ *                  structure — gridlines, the darker baseline rule, and
+ *                  the hover band; ADR-146 D3. Theme-tuned, and all
+ *                  three ALREADY CARRY ALPHA — never add a second one)
  *     • Spacing:   --space-1…12 (4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48)
  *     • Radius:    --radius-xs/sm/md/lg/xl/2xl/full, --radius (legacy)
  *     • Motion:    --ease-out, --ease-spring, --ease-in-out,
@@ -95,6 +103,14 @@
   --accent-muted: 207 14 15 / 0.12;
   --accent-subtle: 207 14 15 / 0.06;
   --accent-glow: 207 14 15 / 0.25;
+  /* Text-selection highlight. PUBLIC, and a full colour (not a triple) so
+     `::selection { background: var(--selection-bg) }` is valid at :root.
+     `@lovett/shell` ships that exact global rule while defining the
+     variable only inside `.cs-frame`; unset at the root, `background`
+     computed to transparent and every selection in the app was invisible
+     (ADR-145 amendment, 2026-09-04). Neutral blue like a native selection,
+     not the accent — the accent earns impact from scarcity. */
+  --selection-bg: rgb(var(--info) / 0.34);
   /* Ink ON an accent fill. PUBLIC, and theme-independent because --accent is:
      the brand red does not change between light and dark, so its foreground
      must not either. Measures 5.64:1 on --accent.
@@ -180,6 +196,34 @@
 
   --border: 255 255 255 / 0.08;
   --border-strong: 255 255 255 / 0.14;
+
+  /* ============================================================
+     CHART STRUCTURE — PUBLIC, theme-tuned (ADR-146 D3).
+     The greys a chart needs that are NOT a card border, plus the
+     hover-band fill. This is the "structure is required, not banned"
+     layer of the data-display recipe (CLAUDE.md §2): gridlines and a
+     baseline are what make a plot legible, and deleting them is the
+     flat/floating defect, not a cleanup.
+
+     --chart-axis IS DELIBERATELY DARKER THAN --chart-grid. The
+     baseline rule must outrank the gridlines. Every chart in the
+     Metoric kit draws it that way (#111111 baseline vs #dfe1e6 grid)
+     and it is the single detail that does most for chart legibility.
+     It lives as its own token precisely so it cannot drift back to
+     "same grey as the grid".
+
+     ALL THREE ALREADY CARRY AN ALPHA — they composite onto whichever
+     panel they sit on, so the panel stays opaque and the structure
+     stays translucent. Consume as `rgb(var(--chart-grid))` and NEVER
+     as `rgb(var(--chart-grid) / 0.5)`: a second alpha expands to
+     `rgb(255 255 255 / 0.07 / 0.5)`, which is invalid CSS and is
+     SILENTLY DISCARDED. `__tests__/token-shape.test.ts` fails on
+     exactly that shape.
+     ============================================================ */
+  --chart-grid: 255 255 255 / 0.07;
+  --chart-axis: 255 255 255 / 0.22;
+  --chart-band: 255 255 255 / 0.05;
+
   /* Semantic — PUBLIC */
   --success: 16 185 129;
   --success-bg: 16 185 129 / 0.12;
@@ -460,6 +504,7 @@
 [data-theme="light"], [data-theme="combo"] {
   /* Brand accent — base stays, hover darkens, glow softens */
   --accent-hover: 178 8 9;
+  --selection-bg: rgb(var(--info) / 0.24);
   /* Brand red passes on a light card (5.64:1) — see the :root note. */
   --accent-ink: var(--accent);
   /* Solved against the DARKEST tint these inks land on, not the lightest.
@@ -518,6 +563,14 @@
 
   --border: 0 0 0 / 0.12;
   --border-strong: 0 0 0 / 0.20;
+
+  /* Chart structure — see the :root block for the reasoning. The same
+     two invariants hold in light: --chart-axis stays darker than
+     --chart-grid, and all three already carry their alpha. */
+  --chart-grid: 0 0 0 / 0.08;
+  --chart-axis: 0 0 0 / 0.24;
+  --chart-band: 0 0 0 / 0.04;
+
   /* Bumped from 0.16 → 0.22 — inputs on a white --bg-input (above) sitting
    * inside a Card (--bg-card = 255 / same as input) need a stronger border
    * to delineate. The 0.16 value worked when --bg-input was slate-tinted; on
@@ -804,3 +857,71 @@
   --media-on-scrim: 255 255 255 / 0.88;
   --media-overlay-btn: 255 255 255 / 0.14;
 }
+
+/* ============================================================
+   CATEGORICAL SERIES PALETTE (theme-INDEPENDENT) — PUBLIC
+   ------------------------------------------------------------
+   The chart series palette (ADR-146 D2). Hues carried over from
+   `theme-v2.css`, which designed them at constant lightness ~0.62
+   and then never shipped a consumer.
+
+   THEME-INDEPENDENT ON PURPOSE, and verified rather than assumed:
+   lightness 0.62 sits inside BOTH the light band (0.43-0.77) and the
+   dark band (0.48-0.67), and all eight clear 3:1 against #ffffff,
+   against --surface-frame (#f7f7f9) and against dark --surface-card
+   (#1b1b1e). Same precedent as --hierarchy-* and --platform-* above:
+   one block, no light/dark override.
+
+   BARE TRIPLES. The call site owns the alpha — a line is
+   `rgb(var(--series-1))` and the area under it is
+   `rgb(var(--series-1) / 0.12)`. A baked-in alpha would expand to
+   `rgb(2 137 234 / 0.3 / 0.12)`, which is invalid and silently
+   dropped, and it would make the token un-shareable between the two
+   uses.
+
+   ------------------------------------------------------------
+   THE SLOT ORDER IS LOAD-BEARING. DO NOT "TIDY" IT.
+   ------------------------------------------------------------
+   The order was chosen by measurement (the dataviz skill's
+   validate_palette.js, adjacent-pair list, both modes), not by eye.
+   The order declared in theme-v2.css FAILS — teal against pink is
+   ΔE 1.2 for a deuteranope. This order passes all five checks in
+   both themes: worst adjacent pair ΔE 13.2 deutan / 21.0 normal,
+   identical light and dark. Re-ordering the slots breaks that, and
+   nothing in the build will tell you.
+
+   Three placements are deliberate:
+     • BLUE IS SLOT 1, not red. Slot 1 is the single-series default,
+       so a red slot 1 would paint every one-series chart in the
+       brand accent and destroy accent scarcity. Blue carries no
+       product meaning.
+     • RED IS SLOT 8. Red is reserved for --accent and
+       --destructive. It only enters a chart at eight series, where
+       the reader has bigger problems. It stays in the palette so
+       the eight-slot contract holds rather than being deleted.
+     • GREEN (slot 2) AND RED (slot 8) ARE FAR APART, so a
+       two-series chart never accidentally reads as pass/fail.
+
+   THE SCATTER / ALL-PAIRS CAP. Forms where any two marks can touch
+   — scatter, bubble, choropleth, small multiples — take the harder
+   all-pairs test, which no ordering of these eight can pass. Those
+   forms use ONLY slots 1, 6 and 7 (blue / amber / teal: verified
+   all-pairs in both modes, worst ΔE 14.8, all five checks PASS) and
+   CAP AT THREE SERIES. A fourth folds into "Other" or facets into
+   small multiples. Never generate a ninth hue.
+
+   Resolution is a frozen literal lookup in the primitive, never a
+   constructed name (ADR-146 D8): `--series-${i}` that misses yields
+   an undefined property, which makes rgb() invalid, which the
+   browser discards in silence with every gate still green.
+   ============================================================ */
+:root {
+  --series-1: 2 137 234;    /* blue   */
+  --series-2: 9 160 93;     /* green  */
+  --series-3: 153 100 229;  /* violet */
+  --series-4: 113 149 3;    /* olive  */
+  --series-5: 212 73 150;   /* pink   */
+  --series-6: 186 116 4;    /* amber  */
+  --series-7: 14 154 148;   /* teal   */
+  --series-8: 226 74 62;    /* red    */
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lovett/ui",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "private": false,
   "type": "module",
   "description": "Design system primitives, tokens, layouts, and patterns for the Lovett portfolio.",
@@ -55,6 +55,13 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@tiptap/core": "3.31.3",
+    "@tiptap/extension-mention": "3.31.3",
+    "@tiptap/extension-placeholder": "3.31.3",
+    "@tiptap/markdown": "3.31.3",
+    "@tiptap/pm": "3.31.3",
+    "@tiptap/react": "3.31.3",
+    "@tiptap/starter-kit": "3.31.3",
     "clsx": "^2.1.1",
     "mammoth": "^1.12.0",
     "react-markdown": "^10.1.0",