@lovett/ui 0.0.3 → 0.0.5

package/dist/tokens.css

@@ -0,0 +1,579 @@
+/*
+ * @lovett/ui — design tokens
+ *
+ * Ported from brand-ai-extension/webapp/src/index.css
+ *   tag : v-pre-workspace-intake-phase1
+ *   sha : 172dd010fee808bcd03795119ba888206da5bafd
+ *
+ * Note: in the source repo, tokens live in `webapp/src/index.css`. PRD §7.2
+ * still references `webapp/src/styles/tokens.css` — that path does not exist
+ * in source. Flagged in Phase 1 completion report as a PRD-correction.
+ *
+ * This file contains ONLY token declarations (`:root` + `[data-theme="light"]`).
+ * Component CSS utilities the primitives consume (`.ds-card-surface`,
+ * `.btn`, `.input-shell`, etc.) live in `./styles.css`.
+ *
+ * Token discipline (CLAUDE.md §4 is the human-readable source of truth;
+ * `packages/eslint-config/index.js` mirrors the internal list for ESLint
+ * enforcement; ADR-008 Decision 7 makes these three a hard-gate parity check).
+ *
+ *   PUBLIC tokens (apps may use freely):
+ *     • Brand:     --accent, --accent-hover, --accent-muted,
+ *                  --accent-subtle, --accent-glow
+ *     • Hierarchy: --hierarchy-red, --hierarchy-red-dark,
+ *                  --hierarchy-red-darkest, --hierarchy-red-shadow,
+ *                  --hierarchy-outline, --hierarchy-slate,
+ *                  --hierarchy-on-base
+ *                  (theme-INDEPENDENT; fixed in both themes because
+ *                   the hierarchy SVG overlay sits on an always-light
+ *                   OSM basemap regardless of UI theme)
+ *     • Text:      --foreground, --text-secondary, --text-tertiary,
+ *                  --text-muted, --muted-foreground
+ *     • Semantic:  --success(-bg), --warning(-bg), --info(-bg),
+ *                  --destructive(-foreground)
+ *     • Folder:    --folder-red/amber/emerald/teal/blue/violet/pink/
+ *                  slate/ink (categorical palette for folder accents)
+ *     • 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,
+ *                  --dur-fast, --dur-base, --dur-slow,
+ *                  --transition, --transition-slow (legacy)
+ *     • Controls:  --ctrl-sm/md/lg (32 / 40 / 48 — Button/Input heights)
+ *     • Focus:     --ring-focus, --ring-error
+ *     • Shadow:    --shadow-sm/md/lg/xl/2xl, --shadow-glow
+ *     • Visual utilities (generic, not surface-specific):
+ *         --border, --border-strong   (divider / separator lines)
+ *         --surface-overlay, --surface-overlay-soft/strong/stronger
+ *                                     (hover backgrounds, badge fills)
+ *         --surface-on-accent         (thumb / knob surface on accent-
+ *                                      colored backgrounds — switches,
+ *                                      sliders, badges-on-accent)
+ *         --muted                     (muted fill for ghost UI)
+ *         --header-height             (sticky AppHeader height — referenced
+ *                                      by sticky chip bars; same value lives
+ *                                      in src/lib/layout.ts for JS callsites)
+ *         --section-scroll-offset     (in-page anchor scroll-margin)
+ *         --prose-narrow, --prose-wide (reading-width caps)
+ *         --inset-highlight           (top-edge highlight strip; tokenized to
+ *                                      avoid copy-pasting the rgba into many
+ *                                      boxShadow strings)
+ *         --font-sans                 (default font stack)
+ *
+ *   INTERNAL tokens (primitives only — ESLint-enforced):
+ *     • Background / surface tokens consumed by specific primitives:
+ *         --background, --bg-card, --bg-card-hover, --bg-surface,
+ *         --bg-elevated, --bg-input, --bg-input-hover, --page-bg,
+ *         --main-content-bg, --main-content-border, --card, --card-foreground,
+ *         --popover, --popover-foreground, --canvas-placement-bg
+ *     • <Card> internals: --border-card, --card-foot-bg,
+ *                         --card-shadow-rest, --card-shadow-hover,
+ *                         --card-frame-bg, --tray-bg, --tray-inset, --radius-tray
+ *     • <Input> internals: --border-input, --input
+ *     • <Modal> internals: --modal-overlay
+ *     • Sidebar internals (only <Sidebar/> reads these): --sidebar-bg,
+ *         --sidebar-surface, --sidebar-surface-hover, --sidebar-surface-active,
+ *         --sidebar-text, --sidebar-text-bright, --sidebar-text-dim,
+ *         --sidebar-border, --sidebar-section-label, --sidebar-rail,
+ *         --sidebar-width, --sidebar-collapsed-width
+ *     • Toast internals (only <Toaster/> reads these): --toast-bg,
+ *         --toast-text, --toast-border
+ *     • shadcn legacy aliases primitives may still rely on:
+ *         --secondary, --secondary-foreground
+ *     • Legacy brand aliases kept working for existing pages:
+ *         --primary, --primary-hover, --primary-foreground, --ring
+ */
+
+:root {
+  /* ============================================================
+     BRAND ACCENT (red)  — PUBLIC
+     ============================================================ */
+  --accent: 207 14 15;
+  --accent-hover: 227 26 27;
+  --accent-muted: 207 14 15 / 0.12;
+  --accent-subtle: 207 14 15 / 0.06;
+  --accent-glow: 207 14 15 / 0.25;
+
+  /* ============================================================
+     HIERARCHY MAP PALETTE — PUBLIC, theme-INDEPENDENT.
+     The hierarchy SVG overlay sits on top of an always-light OSM
+     basemap regardless of UI theme. These tokens are fixed in both
+     light and dark mode so the overlay reads consistently. Sourced
+     from zip-search src/index.css:95-211 (hierarchy block).
+     ============================================================ */
+
+  /* Brand-red ladder — used by state pills, stacked NE callouts,
+     drilled-state outlines, connector lines, hover/selected states. */
+  --hierarchy-red: 231 12 7;          /* primary fill */
+  --hierarchy-red-dark: 184 9 5;      /* hover fill, selected stroke */
+  --hierarchy-red-darkest: 139 7 4;   /* selected fill */
+  --hierarchy-red-shadow: 75 3 2;     /* near-black; selected stacked-pill stroke */
+
+  /* Slate ladder — default outlines + context-state polygon + label fills. */
+  --hierarchy-outline: 71 85 105;     /* slate-600; default outline stroke */
+  --hierarchy-slate: 100 116 139;     /* slate-500; context-state polygon + label fill */
+
+  /* White triplet — for the translucent default state-polygon fill. */
+  --hierarchy-on-base: 255 255 255;
+
+  /* Legacy brand aliases — kept working for existing primitive code paths.
+     INTERNAL: lenses/routes/components should use --accent / --foreground. */
+  --primary: var(--accent);
+  --primary-hover: var(--accent-hover);
+  --primary-foreground: 255 255 255;
+  --ring: var(--accent);
+
+  /* ============================================================
+     DARK THEME SURFACES  — INTERNAL (primitives only)
+     ============================================================ */
+  --background: 9 9 11;
+  --foreground: 244 244 245;
+  --bg-surface: 17 17 19;
+  --bg-elevated: 24 24 27;
+  --bg-card: 20 20 22;
+  --bg-card-hover: 26 26 29;
+  --bg-input: 15 15 17;
+
+  --card: 20 20 22;
+  --card-foreground: 244 244 245;
+  --popover: 24 24 27;
+  --popover-foreground: 244 244 245;
+
+  --muted: 39 39 42;
+  --muted-foreground: 161 161 170;
+  --text-secondary: 161 161 170;
+  --text-tertiary: 113 113 122;
+  --text-muted: 82 82 91;
+
+  --secondary: 39 39 42;
+  --secondary-foreground: 244 244 245;
+
+  --border: 255 255 255 / 0.08;
+  --border-strong: 255 255 255 / 0.14;
+  --input: 39 39 42;
+
+  /* Semantic — PUBLIC */
+  --success: 16 185 129;
+  --success-bg: 16 185 129 / 0.12;
+  --warning: 245 158 11;
+  --warning-bg: 245 158 11 / 0.12;
+  --info: 59 130 246;
+  --info-bg: 59 130 246 / 0.12;
+  --destructive: 239 68 68;
+  --destructive-foreground: 255 255 255;
+
+  /* Folder palette — PUBLIC. Categorical accents for Asset folders
+     (ADR-035). Tuned brighter here so they read on near-black cards;
+     the light theme block below carries darker, more saturated values.
+     Folders store a colour KEY ('red' | 'amber' | …), never a hex. */
+  --folder-red: 239 68 68;
+  --folder-amber: 245 158 11;
+  --folder-emerald: 16 185 129;
+  --folder-teal: 20 184 166;
+  --folder-blue: 59 130 246;
+  --folder-violet: 139 92 246;
+  --folder-pink: 236 72 153;
+  --folder-slate: 148 163 184;
+  --folder-ink: 203 213 225;
+
+  /* ============================================================
+     SIDEBAR — INTERNAL (only <Sidebar/> reads these)
+     ============================================================ */
+  --sidebar-bg: 10 10 11;
+  --sidebar-surface: 255 255 255 / 0.04;
+  --sidebar-surface-hover: 255 255 255 / 0.08;
+  --sidebar-surface-active: 207 14 15 / 0.15;
+  --sidebar-text: 161 161 170;
+  --sidebar-text-bright: 244 244 245;
+  --sidebar-text-dim: 113 113 122;
+  --sidebar-border: 255 255 255 / 0.06;
+  --sidebar-section-label: 82 82 91;
+  --sidebar-rail: 255 255 255 / 0.08;
+  --sidebar-width: 260px;
+  --sidebar-collapsed-width: 56px;
+
+  /* ============================================================
+     LAYOUT  — PUBLIC (generic visual utilities)
+     ============================================================ */
+  --header-height: 56px;
+  --section-scroll-offset: 120px;
+  --prose-narrow: 32.5rem;
+  --prose-wide: 42rem;
+  --inset-highlight: 255 255 255 / 0.05;
+
+  /* Bullet primitives — PUBLIC (generic visual utilities).
+     Used by atoms.ListItem + lens bullet markers (e.g. value-section).
+     `--bullet-offset-y` is the marginTop needed to optically center a
+     `--bullet-size` dot against a line of `text-[13px]` body copy with
+     line-height 1.5. If a future callsite needs a different alignment
+     (e.g. larger text, looser leading), override `marginTop` per-callsite
+     rather than introducing a per-context token. */
+  --bullet-size: 5px;
+  --bullet-offset-y: 7px;
+
+  /* Recessed card footer strip — INTERNAL (<Card.Foot>) */
+  --card-foot-bg: 255 255 255 / 0.025;
+
+  /* Card surface — INTERNAL (<Card>) */
+  --border-card: 255 255 255 / 0.08;
+  --card-shadow-rest:
+    0 1px 2px rgb(0 0 0 / 0.20);
+  --card-shadow-hover:
+    0 4px 12px rgb(0 0 0 / 0.28);
+
+  /* Card-tray — INTERNAL (<Card.Tray>) */
+  --tray-bg: 24 24 27;
+  --tray-inset: 10px;
+  --radius-tray: var(--radius-md);
+
+  /* Card frame — INTERNAL (outer .ds-card-surface bg in framed mode) */
+  --card-frame-bg: 20 20 22;
+
+  /* ============================================================
+     CALCULATOR SHELL v2 — INTERNAL (ADR-076 D7). Consumed only by
+     the v2 primitives (CalculatorShellV2 header, StatRow tiles) and
+     the recessed .ds-card-tray. rgb triples / shadow lists, no hex.
+     ============================================================ */
+  /* Near-black brand surface — v2 header + StatRow tiles. The only
+     heavy-black surface in the kit (ADR-076 D4); black is reserved
+     for the header and StatRow tiles, nowhere else. The prototype's
+     #0a0a0b hex is non-compliant, so this is an rgb triple. */
+  --brand-ink: 0 0 0;
+  /* v2 shell card elevation — multi-layer drop shadow + top-edge
+     inner highlight (the "read depth as quality" ladder). */
+  --shell-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.05),
+    0 4px 12px rgb(0 0 0 / 0.35),
+    0 16px 48px rgb(0 0 0 / 0.45);
+  /* Recessed-tray shadow — the bright inner tray reads as inset. */
+  --tray-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18);
+
+  /* ============================================================
+     MAIN CONTENT AREA — INTERNAL (layout primitives only)
+     ============================================================ */
+  --main-content-bg: 10 10 11;
+  --main-content-border: 255 255 255 / 0.08;
+
+  /* ============================================================
+     RADIUS SCALE  — PUBLIC
+     ============================================================ */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-2xl: 24px;
+  --radius-full: 9999px;
+  --radius: 0.5rem; /* legacy alias */
+
+  /* ============================================================
+     SHADOWS  — PUBLIC
+     ============================================================ */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
+  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.35);
+  --shadow-glow: 0 0 20px rgb(207 14 15 / 0.25);
+
+  /* Transitions — PUBLIC (legacy bundled motion; --dur and --ease are preferred). */
+  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  /* Monospace stack — added 2026-05-18 per ADR-023 D17.
+   * JetBrains Mono is loaded from Google Fonts in apps/<app>/index.html
+   * (added per pre-batch coordination commit). Falls back to platform
+   * monospaces if the @font-face fails. Used by tabular numeric data
+   * in keywords table (Phase 8), SEMSpec ad-strength / CPC / search
+   * volume columns (Phase 12), and any other tabular-data surfaces.
+   * Consume via Tailwind `font-mono` utility (resolves to this stack). */
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+
+  /* ============================================================
+     LIGHT-MODE-READY ADDITIONS (dark values; light overrides below)
+     ============================================================ */
+  --surface-overlay-soft: 255 255 255 / 0.04;
+  --surface-overlay: 255 255 255 / 0.06;
+  --surface-overlay-strong: 255 255 255 / 0.10;
+  --surface-overlay-stronger: 255 255 255 / 0.16;
+
+  --page-bg: 5 5 6;
+  --bg-input-hover: 19 19 22;
+  --modal-overlay: 0 0 0 / 0.65;
+
+  /* `--surface-on-accent` — PUBLIC (Phase Sidebar-E MIN-1, ADR-049).
+   * The "thumb on a colored track" surface: switch thumbs, slider
+   * knobs, badge fills sitting on accent-colored backgrounds. Both
+   * themes default to pure white because thumbs read as white against
+   * red accents in either light or dark mode — the alternative is a
+   * theme-aware off-white that buys nothing. Kept as a public token
+   * (rather than a raw `white` literal) so the boundary lint can
+   * enforce it and so a future redesign can re-tune both themes from
+   * one place. Consumers wrap as `rgb(var(--surface-on-accent))`. */
+  --surface-on-accent: 255 255 255;
+
+  --border-input: 255 255 255 / 0.10;
+
+  --shadow-xl: 0 16px 40px rgb(0 0 0 / 0.55);
+  --shadow-2xl: 0 24px 60px rgb(0 0 0 / 0.60);
+
+  --ring-focus: 0 0 0 3px rgb(207 14 15 / 0.25);
+  --ring-error: 0 0 0 3px rgb(239 68 68 / 0.25);
+
+  --radius-xs: 6px;
+
+  --ctrl-sm: 32px;
+  --ctrl-md: 40px;
+  --ctrl-lg: 48px;
+
+  /* Spacing scale (4px base) — PUBLIC */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+
+  /* Motion — PUBLIC */
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --dur-fast: 140ms;
+  --dur-base: 240ms;
+  --dur-slow: 420ms;
+
+  /* Toast — INTERNAL (only <Toaster/> reads these) */
+  --toast-bg: 17 17 19;
+  --toast-text: 244 244 245;
+  --toast-border: 255 255 255 / 0.10;
+
+  /* Canvas placement bg — INTERNAL (placement primitive) */
+  --canvas-placement-bg: 17 17 19;
+}
+
+/* ============================================================
+   LIGHT THEME OVERRIDES
+   Only the flip + re-tune tokens land here; sidebar / toast /
+   radii / spacing / motion all stay invariant on :root.
+
+   THREE-MODE SYSTEM (2026-05-26): three values for data-theme:
+     dark   — :root defaults (everything dark)
+     light  — full light theme (this block + sidebar light overrides)
+     combo  — light surfaces + DARK sidebar
+   "combo" inherits the dark --sidebar-* from :root by NOT redeclaring
+   them. The shared light surface tokens are gathered under the
+   combined `[data-theme="light"], [data-theme="combo"]` selector
+   below; the --sidebar-* overrides sit in a `[data-theme="light"]`-
+   only block immediately after.
+   ============================================================ */
+[data-theme="light"], [data-theme="combo"] {
+  /* Brand accent — base stays, hover darkens, glow softens */
+  --accent-hover: 178 8 9;
+  --accent-muted: 207 14 15 / 0.10;
+  --accent-subtle: 207 14 15 / 0.05;
+  --accent-glow: 207 14 15 / 0.20;
+
+  /* Light-mode neutral palette (2026-05-18, iteration 2) — owner
+   * iterated from "kill the steel undertone" → "still too gray; push
+   * as close to pure #FFF without quite touching it." Page surface is
+   * now 254/254/254 (one unit shy of pure white, perfectly neutral).
+   * Cards stay 255 — fill delta is just 1 unit, so card chrome leans
+   * almost entirely on --border-card (0.07). If cards visually
+   * disappear, bump --border-card. Hover/muted/input-hover stay
+   * darker on purpose so state changes remain visible. */
+  --background: 254 254 254;
+  --foreground: 17 17 19;
+  --bg-surface: 254 254 254;
+  --bg-elevated: 255 255 255;
+  --bg-card: 255 255 255;
+  --bg-card-hover: 244 244 244;
+  --bg-input: 255 255 255;
+  --bg-input-hover: 253 253 253;
+
+  --card: 255 255 255;
+  --card-foreground: 17 17 19;
+  --popover: 255 255 255;
+  --popover-foreground: 17 17 19;
+
+  --muted: 245 245 245;
+  --muted-foreground: 82 82 91;
+  --text-secondary: 82 82 91;
+  /* --text-tertiary stays from :root */
+  --text-muted: 161 161 170;
+
+  --secondary: 244 244 245;
+  --secondary-foreground: 17 17 19;
+
+  --border: 0 0 0 / 0.12;
+  --border-strong: 0 0 0 / 0.20;
+  /* 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
+   * white-on-white the prior border was too subtle. */
+  --border-input: 0 0 0 / 0.22;
+  --input: 244 244 245;
+
+  --success: 5 150 105;
+  --success-bg: 5 150 105 / 0.10;
+  /* `--warning` and the folder palette are intentionally split out
+     to a `[data-theme="light"]`-only block below — combo mode keeps
+     the brighter `:root` values so group-card colors stay readable
+     against the dark `--sidebar-bg` it inherits. */
+  --info: 37 99 235;
+  --info-bg: 37 99 235 / 0.10;
+  --destructive: 220 38 38;
+
+  --surface-overlay-soft: 0 0 0 / 0.03;
+  --surface-overlay: 0 0 0 / 0.05;
+  --surface-overlay-strong: 0 0 0 / 0.08;
+  --surface-overlay-stronger: 0 0 0 / 0.12;
+
+  --page-bg: 254 254 254;
+  --modal-overlay: 0 0 0 / 0.40;
+  /* `--surface-on-accent` stays white in light mode too — see :root
+   * comment. Declared here for symmetry / future-proofing. */
+  --surface-on-accent: 255 255 255;
+
+  --shadow-sm:  0 1px 2px rgb(0 0 0 / 0.06);
+  --shadow-md:  0 4px 12px rgb(0 0 0 / 0.08);
+  --shadow-lg:  0 8px 25px rgb(0 0 0 / 0.10);
+  --shadow-xl:  0 16px 40px rgb(0 0 0 / 0.12);
+  --shadow-2xl: 0 24px 60px rgb(0 0 0 / 0.16);
+  --shadow-glow: 0 0 20px rgb(207 14 15 / 0.20);
+
+  --ring-focus: 0 0 0 3px rgb(207 14 15 / 0.20);
+  --ring-error: 0 0 0 3px rgb(220 38 38 / 0.18);
+
+  /* Match --page-bg (254/254/254). Was 241/245/249 (slate) — that's
+   * what was actually painting "the steely background" the owner
+   * flagged; --page-bg is the body, but MainLayout's content area
+   * paints with this token. Both must move together. */
+  --main-content-bg: 254 254 254;
+  --main-content-border: 0 0 0 / 0.10;
+
+  --canvas-placement-bg: 241 245 249;
+
+  --card-foot-bg: 248 250 252;
+
+  --tray-bg: 255 255 255;
+
+  --card-frame-bg: 248 250 252;
+
+  /* Calculator Shell v2 — light overrides (ADR-076 D7). */
+  --brand-ink: 20 20 23;
+  --shell-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.8),
+    0 2px 6px rgb(0 0 0 / 0.06),
+    0 16px 40px rgb(0 0 0 / 0.10);
+  --tray-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+
+  /* Bumped from 0.07 → 0.12 (matches public --border) — when --page-bg
+   * moved to 254 (near-white) and --bg-card stayed 255, cards lost their
+   * fill-contrast affordance. The border now does the visual work, same
+   * opacity as Button secondary border (the "Generate from URL" look the
+   * owner called the gold standard). */
+  --border-card: 0 0 0 / 0.12;
+  --card-shadow-rest:
+    inset 0 1px 0 rgb(255 255 255 / 0.7),
+    0 1px 2px rgb(0 0 0 / 0.06),
+    0 4px 10px rgb(0 0 0 / 0.06);
+  --card-shadow-hover:
+    inset 0 1px 0 rgb(255 255 255 / 0.7),
+    0 2px 4px rgb(0 0 0 / 0.07),
+    0 8px 24px rgb(0 0 0 / 0.09);
+
+}
+
+/* ============================================================
+   SIDEBAR — INTERNAL (only <Sidebar/> reads these)
+   Light-theme overrides — Phase Sidebar-E (ADR-049 D7 + Phase E).
+   The rail should still read as a "distinct surface" from
+   --main-content-bg in light mode, just inverted: a slightly-
+   tinted light background with darker borders + text. Values
+   below were tuned against the dark-theme reference:
+     dark --sidebar-bg = 10 10 11        (near-black)
+     dark --sidebar-border = white/0.06  (faint white hairline)
+   Light analogue:
+     --sidebar-bg = 244 244 248          (cool off-white, one step
+                                          darker than --bg-card so
+                                          the rail still reads as
+                                          a step DOWN from --main-
+                                          content-bg's 254/254/254)
+     --sidebar-border = 0/0.10           (matches public --border)
+   `--sidebar-text*` and `--sidebar-surface-*` track the public
+   text + overlay scale in the same direction as the dark values,
+   just polarity-flipped.
+
+   This block is `[data-theme="light"]`-ONLY — `combo` mode keeps
+   the dark `--sidebar-*` values from :root so the sidebar stays
+   dark even though the rest of the shell is light.
+   ============================================================ */
+[data-theme="light"] {
+  --sidebar-bg: 244 244 248;
+  --sidebar-surface: 0 0 0 / 0.04;
+  --sidebar-surface-hover: 0 0 0 / 0.08;
+  --sidebar-surface-active: 207 14 15 / 0.10;
+  --sidebar-text: 82 82 91;
+  --sidebar-text-bright: 17 17 19;
+  --sidebar-text-dim: 113 113 122;
+  --sidebar-border: 0 0 0 / 0.10;
+  --sidebar-section-label: 113 113 122;
+  --sidebar-rail: 0 0 0 / 0.08;
+
+  /* ============================================================
+     SEMANTIC + FOLDER PALETTE — light-only overrides.
+     Owner directive 2026-05-27: combo mode (dark sidebar + light
+     shell) was rendering group cards in the rail with the
+     light-mode darker/saturated folder palette painted on a still-
+     dark --sidebar-bg → low contrast, hard to see the category
+     color. Splitting these out so combo inherits the brighter
+     `:root` values (designed for dark substrate) keeps the rail
+     readable. Trade-off: in combo mode, asset folders rendering on
+     the light main-content area use the brighter `:root` tokens
+     too — they read slightly less optimal on white but stay
+     visible. Sidebar visibility is the primary affordance in combo.
+     ============================================================ */
+  --warning: 217 119 6;
+  --warning-bg: 217 119 6 / 0.10;
+  --folder-red: 207 14 15;
+  --folder-amber: 217 119 6;
+  --folder-emerald: 5 150 105;
+  --folder-teal: 13 148 136;
+  --folder-blue: 29 78 216;
+  --folder-violet: 124 58 237;
+  --folder-pink: 219 39 119;
+  --folder-slate: 71 85 105;
+  --folder-ink: 15 23 42;
+}
+
+/* ============================================================
+   META-PREVIEW PLATFORM-CHROME TOKENS (theme-INDEPENDENT)
+   ------------------------------------------------------------
+   The `@lovett/ui/meta-previews` renderers reproduce real
+   Facebook / Instagram / Messenger UI, which is always-light
+   regardless of the workspace theme — exactly like the
+   `--hierarchy-*` palette above. They consume these as inline
+   `var(--color-*)` values (full colours, NOT rgb-triplets), so
+   they live as plain custom properties here rather than in the
+   light/dark theme blocks.
+
+   Promotion gap fix (ADR-060 D12 follow-through): the renderers
+   referenced `var(--color-surface-50/100/200)` + a `meta-blue`
+   colour that were never defined when the previews were promoted
+   out of the prototype (docs/prototype/meta/preview-package). The
+   values below are the prototype's Tailwind-config colours (see
+   the package README "Tailwind config" block), restoring pixel
+   fidelity. `--color-meta-ink` is the always-dark preview-surface
+   base text (formerly the lens-local `--mc-fb-text`).
+
+   These are platform-chrome and exempt substrate (packages/ui),
+   so the hex literals are permitted here and nowhere in apps/.
+   ============================================================ */
+:root {
+  --color-meta-blue: #1877f2;
+  --color-meta-ink: #050505;
+  --color-surface-50: #fafafa;
+  --color-surface-100: #f4f4f5;
+  --color-surface-200: #e4e4e7;
+}

package/package.json

@@ -1,28 +1,30 @@
 {
   "name": "@lovett/ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
-  "publishConfig": {
-    "access": "restricted"
-  },
   "type": "module",
   "description": "Design system primitives, tokens, layouts, and patterns for the Lovett portfolio.",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./tokens.css": "./src/tokens.css",
-    "./styles.css": "./src/styles.css"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./styles.css": "./dist/styles.css"
+  },
+  "publishConfig": {
+    "access": "restricted"
   },
   "files": [
+    "dist",
     "src",
     "README.md"
   ],
-  "scripts": {
-    "lint": "eslint .",
-    "typecheck": "tsc --noEmit -p tsconfig.json",
-    "build": "echo 'no-op (source-only consumption in v0)'"
-  },
   "peerDependencies": {
     "lucide-react": "^0.469.0",
     "react": "^19.0.0",
@@ -36,6 +38,7 @@
     "eslint": "^9.17.0",
     "lucide-react": "^0.469.0",
     "react-router-dom": "^7.1.0",
+    "tsup": "^8.5.1",
     "typescript": "^5.7.2"
   },
   "dependencies": {
@@ -49,5 +52,12 @@
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0"
-  }
-}
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "build": "tsup",
+    "clean": "rm -rf dist"
+  },
+  "module": "./dist/index.js"
+}