@odla-ai/ui 0.1.0 → 0.1.2

package/css/components/chat.css

@@ -58,11 +58,11 @@
 }
 .chat-thinking[open] summary { margin-bottom: 6px; }
 
-/* Tool-call card (ToolUseBlock): name + streamed args. */
+/* Tool-call card (ToolUseBlock): name + streamed args. The accent-colored
+   mono name is the card's signal — no stripe. */
 .chat-tool {
   align-self: stretch;
   border: 1px solid var(--ui-border);
-  border-left: 3px solid var(--ui-chat-tool-accent);
   border-radius: var(--ui-radius-md);
   background: var(--ui-surface);
   padding: 8px 12px;
@@ -85,21 +85,31 @@
   white-space: pre-wrap;
 }
 
-/* Tool-result card (ToolResultBlock); .error for isError results. */
+/* Tool-result card (ToolResultBlock); .error for isError results.
+   Status reads from a leading dot, not an edge stripe. */
 .chat-result {
   align-self: stretch;
   border: 1px solid var(--ui-border);
-  border-left: 3px solid var(--ui-good);
   border-radius: var(--ui-radius-md);
   background: var(--ui-surface-2);
   padding: 8px 12px;
   font-size: var(--ui-text-md);
 }
+.chat-result::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--ui-radius-pill);
+  background: var(--ui-good);
+  margin-right: 8px;
+  vertical-align: 1px;
+}
 .chat-result.error {
-  border-left-color: var(--ui-danger);
   background: var(--ui-danger-soft);
   color: var(--ui-danger);
 }
+.chat-result.error::before { background: var(--ui-danger); }
 
 /* Streaming caret appended during text/thinking deltas. */
 .chat-cursor {

package/llms.txt

@@ -15,6 +15,7 @@ alone. Everything except `dist/` ships as source — read it when in doubt.
 ├── themes/<name>/       # paper, juniper, salt, chalk, clay
 │   ├── theme.json       #   { name, label, description, fonts }
 │   ├── styles.css       #   the theme's own tokens (+ page styling for blog themes)
+│   ├── tokens.css       #   GENERATED tokens-only layer (fonts + custom props, no page styling)
 │   └── ui.css           #   maps the theme's palette onto the --ui-* contract
 ├── fonts/*.css          # remote-@import font stacks (plex, editorial, satoshi, lora, fira-code, system)
 ├── js/                  # buildless ESM: tokens data, theme toggle, palette reader, canvas helpers
@@ -67,9 +68,18 @@ Five bundled themes; metadata in each `theme.json`:
 
 Anatomy: `styles.css` carries the theme's OWN token names (e.g. salt's
 `--accent`, paper's `--panel`); `ui.css` maps them onto `--ui-*`. **Always
-load `ui.css` alongside `styles.css`** or component classes fall back to the
+load `ui.css` alongside the theme** or component classes fall back to the
 neutral defaults instead of the theme's palette.
 
+Which theme file to load:
+- Blog/content sites: `styles.css` (full page styling; blog does this).
+- Apps (dashboards, tools): `tokens.css` (generated fonts+tokens extract —
+  no `html`/`body`/blog-selector styling to fight your layout) + `ui.css`.
+  Runtime theme switching = swap the `tokens.css` + `ui.css` pair, e.g. two
+  managed `<link>` elements (Vite: `import url from
+  "@odla-ai/ui/themes/salt/tokens.css?url"`). paper's `styles.css` is
+  app-safe too (tokens + minimal base) — fine as a static default.
+
 Dark-mode invariant (tested; keep it when editing any theme): dark tokens are
 duplicated on BOTH `[data-theme="dark"]` and
 `@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) }`,

package/odla-ui.css

@@ -729,11 +729,11 @@
 }
 .chat-thinking[open] summary { margin-bottom: 6px; }
 
-/* Tool-call card (ToolUseBlock): name + streamed args. */
+/* Tool-call card (ToolUseBlock): name + streamed args. The accent-colored
+   mono name is the card's signal — no stripe. */
 .chat-tool {
   align-self: stretch;
   border: 1px solid var(--ui-border);
-  border-left: 3px solid var(--ui-chat-tool-accent);
   border-radius: var(--ui-radius-md);
   background: var(--ui-surface);
   padding: 8px 12px;
@@ -756,21 +756,31 @@
   white-space: pre-wrap;
 }
 
-/* Tool-result card (ToolResultBlock); .error for isError results. */
+/* Tool-result card (ToolResultBlock); .error for isError results.
+   Status reads from a leading dot, not an edge stripe. */
 .chat-result {
   align-self: stretch;
   border: 1px solid var(--ui-border);
-  border-left: 3px solid var(--ui-good);
   border-radius: var(--ui-radius-md);
   background: var(--ui-surface-2);
   padding: 8px 12px;
   font-size: var(--ui-text-md);
 }
+.chat-result::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--ui-radius-pill);
+  background: var(--ui-good);
+  margin-right: 8px;
+  vertical-align: 1px;
+}
 .chat-result.error {
-  border-left-color: var(--ui-danger);
   background: var(--ui-danger-soft);
   color: var(--ui-danger);
 }
+.chat-result.error::before { background: var(--ui-danger); }
 
 /* Streaming caret appended during text/thinking deltas. */
 .chat-cursor {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odla-ai/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "The odla design system: semantic CSS design tokens, five themes (paper, juniper, salt, chalk, clay), class-scoped component styles, canvas chart helpers, and optional React/Preact form components. CSS and JS helpers ship as source; only /components is compiled.",
   "license": "MIT",
   "type": "module",

package/themes/chalk/tokens.css

@@ -0,0 +1,99 @@
+/* chalk/tokens.css — GENERATED from styles.css by scripts/gen-css.mjs; do not edit.
+   The theme's tokens-only layer (fonts + custom properties, no page styling)
+   for app consumers — pair with ui.css. Blog sites use styles.css instead. */
+
+@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Instrument+Sans:wght@500;700&family=JetBrains+Mono:wght@300;400;500&family=Spectral:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap");
+
+:root {
+  --bg: #f4f1ea;
+  --grid-line: rgba(70, 90, 120, 0.07);
+  --grid-major: rgba(70, 90, 120, 0.13);
+  --vignette: transparent;
+  --text: #23252b;
+  --text-dim: rgba(35, 37, 43, 0.62);
+  --text-faint: rgba(35, 37, 43, 0.4);
+  --accent: #a55f28;
+  --accent-border: rgba(165, 95, 40, 0.35);
+  --accent-glow: rgba(165, 95, 40, 0.08);
+  --accent-2: #0a7d99;
+  --border: rgba(35, 37, 43, 0.14);
+
+  --code-bg: rgba(35, 37, 43, 0.045);
+  --code-text: #2b2d33;
+  --hl-keyword: #a55f28;
+  --hl-string: #0a7d99;
+  --hl-comment: #8b8677;
+  --hl-number: #a3790f;
+  --hl-title: #23252b;
+  --hl-attr: #3d6f8e;
+  --hl-type: #0d6e86;
+  --hl-meta: #8c6a3f;
+  --hl-addition: #15803d;
+  --hl-deletion: #b91c1c;
+
+  --font-display: "Cormorant Garamond", serif;
+  --font-body: "Spectral", Georgia, serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-wordmark: "Instrument Sans", sans-serif;
+
+  --max-width: 760px;
+  --header-width: var(--max-width);
+}
+
+[data-theme="dark"] {
+  --bg: #0f1014;
+  --grid-line: rgba(255, 255, 255, 0.025);
+  --grid-major: rgba(255, 255, 255, 0.045);
+  --vignette: rgba(0, 0, 0, 0.6);
+  --text: rgba(235, 230, 220, 0.92);
+  --text-dim: rgba(235, 230, 220, 0.55);
+  --text-faint: rgba(235, 230, 220, 0.4);
+  --accent: #c47a3a;
+  --accent-border: rgba(196, 122, 58, 0.35);
+  --accent-glow: rgba(196, 122, 58, 0.08);
+  --accent-2: #0ea5c9;
+  --border: rgba(235, 230, 220, 0.12);
+
+  --code-bg: rgba(235, 230, 220, 0.04);
+  --code-text: rgba(235, 230, 220, 0.88);
+  --hl-keyword: #c47a3a;
+  --hl-string: #6cc9e0;
+  --hl-comment: rgba(235, 230, 220, 0.42);
+  --hl-number: #d4a017;
+  --hl-title: #ebe6dc;
+  --hl-attr: #8cd2eb;
+  --hl-type: #45b8d4;
+  --hl-meta: rgba(220, 180, 145, 0.8);
+  --hl-addition: #22c55e;
+  --hl-deletion: #ef4444;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #0f1014;
+    --grid-line: rgba(255, 255, 255, 0.025);
+    --grid-major: rgba(255, 255, 255, 0.045);
+    --vignette: rgba(0, 0, 0, 0.6);
+    --text: rgba(235, 230, 220, 0.92);
+    --text-dim: rgba(235, 230, 220, 0.55);
+    --text-faint: rgba(235, 230, 220, 0.4);
+    --accent: #c47a3a;
+    --accent-border: rgba(196, 122, 58, 0.35);
+    --accent-glow: rgba(196, 122, 58, 0.08);
+    --accent-2: #0ea5c9;
+    --border: rgba(235, 230, 220, 0.12);
+
+    --code-bg: rgba(235, 230, 220, 0.04);
+    --code-text: rgba(235, 230, 220, 0.88);
+    --hl-keyword: #c47a3a;
+    --hl-string: #6cc9e0;
+    --hl-comment: rgba(235, 230, 220, 0.42);
+    --hl-number: #d4a017;
+    --hl-title: #ebe6dc;
+    --hl-attr: #8cd2eb;
+    --hl-type: #45b8d4;
+    --hl-meta: rgba(220, 180, 145, 0.8);
+    --hl-addition: #22c55e;
+    --hl-deletion: #ef4444;
+  }
+}

package/themes/clay/styles.css

@@ -1,39 +1,40 @@
 /* ══════════════════════════════════════════════════════════════
-   CLAY — warm, light editorial shell
-   Iowan Old Style serif titles · system sans body · terracotta
-   Light: sand paper, white panels, clay accent, warm hairlines.
-   Dark: warm charcoal, embered terracotta — never pure black.
+   CLAY — red-earth editorial shell
+   Iowan Old Style serif titles · system sans body · iron-oxide red
+   Light: rosy sand, warm cream panels, brick accent, ochre/olive.
+   Dark: kiln-fired umber, glowing ember accent — never pure black.
    Zero external font requests: system stacks only.
    ══════════════════════════════════════════════════════════════ */
 
 /* ─── Tokens ─── */
 :root {
-  --bg: #f6f1e9;
-  --panel: #ffffff;
-  --panel-raised: #f1ebe0;
-  --border: #e4dac9;
-  --text: #2c2722;
-  --muted: #6f655a;
-  --faint: #a99d8c;
-  --accent: #a8572e;
-  --accent-deep: #8c4623;
-  --accent-dim: rgba(168, 87, 46, 0.1);
-  --good: #5f7d52;
-  --warn: #b08433;
-  --shadow: 0 1px 2px rgba(44, 39, 34, 0.03);
-
-  --code-bg: #f1ebe0;
-  --code-text: #3a332b;
-  --hl-keyword: #a8572e;
-  --hl-string: #5f7d52;
-  --hl-comment: #a99d8c;
-  --hl-number: #b08433;
-  --hl-title: #2c2722;
-  --hl-attr: #5f7da8;
-  --hl-type: #7d5fa8;
-  --hl-meta: #8a6d9e;
-  --hl-addition: #5f7d52;
-  --hl-deletion: #a8402e;
+  --bg: #f1e6db;
+  --panel: #fbf6ef;
+  --panel-raised: #eadccd;
+  --border: #ddcab7;
+  --text: #322620;
+  --muted: #71594a;
+  --faint: #a58a75;
+  --accent: #9c3b1f;
+  --accent-deep: #7f2f18;
+  --accent-dim: rgba(156, 59, 31, 0.1);
+  --good: #6a7d4d;
+  --warn: #a4722a;
+  --danger: #a52833;
+  --shadow: 0 1px 2px rgba(50, 38, 32, 0.04);
+
+  --code-bg: #eadccd;
+  --code-text: #3c2d23;
+  --hl-keyword: #9c3b1f;
+  --hl-string: #6a7d4d;
+  --hl-comment: #a58a75;
+  --hl-number: #a4722a;
+  --hl-title: #322620;
+  --hl-attr: #4e6b8e;
+  --hl-type: #7b568e;
+  --hl-meta: #8c6a80;
+  --hl-addition: #6a7d4d;
+  --hl-deletion: #a52833;
 
   --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
@@ -43,62 +44,64 @@
 }
 
 [data-theme="dark"] {
-  --bg: #211d19;
-  --panel: #2a251f;
-  --panel-raised: #332d26;
-  --border: #3e362c;
-  --text: #ece5da;
-  --muted: #b3a794;
-  --faint: #857a6a;
-  --accent: #d07a4d;
-  --accent-deep: #de8f66;
-  --accent-dim: rgba(208, 122, 77, 0.14);
-  --good: #8aa87c;
-  --warn: #c9a25a;
-  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-
-  --code-bg: #2a251f;
-  --code-text: #ddd5c8;
-  --hl-keyword: #d07a4d;
-  --hl-string: #8aa87c;
-  --hl-comment: #857a6a;
-  --hl-number: #c9a25a;
-  --hl-title: #ece5da;
-  --hl-attr: #8ba3c7;
-  --hl-type: #a78bc9;
-  --hl-meta: #ab8fbd;
-  --hl-addition: #8aa87c;
-  --hl-deletion: #d0684d;
+  --bg: #1d1310;
+  --panel: #291b15;
+  --panel-raised: #33221a;
+  --border: #4a3126;
+  --text: #f4e7dc;
+  --muted: #c2a48f;
+  --faint: #8f7261;
+  --accent: #e26a3f;
+  --accent-deep: #ef8560;
+  --accent-dim: rgba(226, 106, 63, 0.16);
+  --good: #93ad7b;
+  --warn: #d2a052;
+  --danger: #e25549;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+
+  --code-bg: #291b15;
+  --code-text: #e8d6c7;
+  --hl-keyword: #e26a3f;
+  --hl-string: #93ad7b;
+  --hl-comment: #8f7261;
+  --hl-number: #d2a052;
+  --hl-title: #f4e7dc;
+  --hl-attr: #93a9c9;
+  --hl-type: #b18fcd;
+  --hl-meta: #b092bb;
+  --hl-addition: #93ad7b;
+  --hl-deletion: #e25549;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --bg: #211d19;
-    --panel: #2a251f;
-    --panel-raised: #332d26;
-    --border: #3e362c;
-    --text: #ece5da;
-    --muted: #b3a794;
-    --faint: #857a6a;
-    --accent: #d07a4d;
-    --accent-deep: #de8f66;
-    --accent-dim: rgba(208, 122, 77, 0.14);
-    --good: #8aa87c;
-    --warn: #c9a25a;
-    --shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-
-    --code-bg: #2a251f;
-    --code-text: #ddd5c8;
-    --hl-keyword: #d07a4d;
-    --hl-string: #8aa87c;
-    --hl-comment: #857a6a;
-    --hl-number: #c9a25a;
-    --hl-title: #ece5da;
-    --hl-attr: #8ba3c7;
-    --hl-type: #a78bc9;
-    --hl-meta: #ab8fbd;
-    --hl-addition: #8aa87c;
-    --hl-deletion: #d0684d;
+    --bg: #1d1310;
+    --panel: #291b15;
+    --panel-raised: #33221a;
+    --border: #4a3126;
+    --text: #f4e7dc;
+    --muted: #c2a48f;
+    --faint: #8f7261;
+    --accent: #e26a3f;
+    --accent-deep: #ef8560;
+    --accent-dim: rgba(226, 106, 63, 0.16);
+    --good: #93ad7b;
+    --warn: #d2a052;
+    --danger: #e25549;
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+
+    --code-bg: #291b15;
+    --code-text: #e8d6c7;
+    --hl-keyword: #e26a3f;
+    --hl-string: #93ad7b;
+    --hl-comment: #8f7261;
+    --hl-number: #d2a052;
+    --hl-title: #f4e7dc;
+    --hl-attr: #93a9c9;
+    --hl-type: #b18fcd;
+    --hl-meta: #b092bb;
+    --hl-addition: #93ad7b;
+    --hl-deletion: #e25549;
   }
 }
 

package/themes/clay/theme.json

@@ -1,6 +1,6 @@
 {
   "name": "clay",
   "label": "Clay",
-  "description": "Warm, light editorial shell. Sand paper background, terracotta accent, Iowan Old Style serif titles over a system sans body, hairline borders, soft warm shadows. Zero external font requests. Warm-charcoal dark mode. Drawn from agnacl.",
+  "description": "Red-earth editorial shell. Rosy sand background, iron-oxide brick accent, Iowan Old Style serif titles over a system sans body, hairline borders, soft warm shadows. Zero external font requests. Kiln-fired umber dark mode with a glowing ember accent. Diverged from its agnacl roots to stand apart from paper.",
   "fonts": "System stacks only (Iowan Old Style / Palatino serif, system sans, system mono)"
 }

package/themes/clay/tokens.css

@@ -0,0 +1,101 @@
+/* clay/tokens.css — GENERATED from styles.css by scripts/gen-css.mjs; do not edit.
+   The theme's tokens-only layer (fonts + custom properties, no page styling)
+   for app consumers — pair with ui.css. Blog sites use styles.css instead. */
+
+:root {
+  --bg: #f1e6db;
+  --panel: #fbf6ef;
+  --panel-raised: #eadccd;
+  --border: #ddcab7;
+  --text: #322620;
+  --muted: #71594a;
+  --faint: #a58a75;
+  --accent: #9c3b1f;
+  --accent-deep: #7f2f18;
+  --accent-dim: rgba(156, 59, 31, 0.1);
+  --good: #6a7d4d;
+  --warn: #a4722a;
+  --danger: #a52833;
+  --shadow: 0 1px 2px rgba(50, 38, 32, 0.04);
+
+  --code-bg: #eadccd;
+  --code-text: #3c2d23;
+  --hl-keyword: #9c3b1f;
+  --hl-string: #6a7d4d;
+  --hl-comment: #a58a75;
+  --hl-number: #a4722a;
+  --hl-title: #322620;
+  --hl-attr: #4e6b8e;
+  --hl-type: #7b568e;
+  --hl-meta: #8c6a80;
+  --hl-addition: #6a7d4d;
+  --hl-deletion: #a52833;
+
+  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+
+  --max-width: 44rem;
+}
+
+[data-theme="dark"] {
+  --bg: #1d1310;
+  --panel: #291b15;
+  --panel-raised: #33221a;
+  --border: #4a3126;
+  --text: #f4e7dc;
+  --muted: #c2a48f;
+  --faint: #8f7261;
+  --accent: #e26a3f;
+  --accent-deep: #ef8560;
+  --accent-dim: rgba(226, 106, 63, 0.16);
+  --good: #93ad7b;
+  --warn: #d2a052;
+  --danger: #e25549;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+
+  --code-bg: #291b15;
+  --code-text: #e8d6c7;
+  --hl-keyword: #e26a3f;
+  --hl-string: #93ad7b;
+  --hl-comment: #8f7261;
+  --hl-number: #d2a052;
+  --hl-title: #f4e7dc;
+  --hl-attr: #93a9c9;
+  --hl-type: #b18fcd;
+  --hl-meta: #b092bb;
+  --hl-addition: #93ad7b;
+  --hl-deletion: #e25549;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #1d1310;
+    --panel: #291b15;
+    --panel-raised: #33221a;
+    --border: #4a3126;
+    --text: #f4e7dc;
+    --muted: #c2a48f;
+    --faint: #8f7261;
+    --accent: #e26a3f;
+    --accent-deep: #ef8560;
+    --accent-dim: rgba(226, 106, 63, 0.16);
+    --good: #93ad7b;
+    --warn: #d2a052;
+    --danger: #e25549;
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+
+    --code-bg: #291b15;
+    --code-text: #e8d6c7;
+    --hl-keyword: #e26a3f;
+    --hl-string: #93ad7b;
+    --hl-comment: #8f7261;
+    --hl-number: #d2a052;
+    --hl-title: #f4e7dc;
+    --hl-attr: #93a9c9;
+    --hl-type: #b18fcd;
+    --hl-meta: #b092bb;
+    --hl-addition: #93ad7b;
+    --hl-deletion: #e25549;
+  }
+}

package/themes/clay/ui.css

@@ -1,6 +1,6 @@
 /* clay/ui.css — maps clay onto the @odla-ai/ui token contract.
-   Load alongside styles.css. Pure var() aliases track dark mode for free;
-   any LITERAL value must be overridden identically in BOTH dark blocks. */
+   Load alongside styles.css. Every alias is var()-based (or constant),
+   so dark mode tracks automatically — no dark blocks needed here. */
 :root {
   --ui-bg: var(--bg);
   --ui-surface: var(--panel);
@@ -18,8 +18,8 @@
   --ui-good-soft: color-mix(in srgb, var(--good) 13%, transparent);
   --ui-warn: var(--warn);
   --ui-warn-soft: color-mix(in srgb, var(--warn) 13%, transparent);
-  --ui-danger: #b3402e;
-  --ui-danger-soft: color-mix(in srgb, var(--ui-danger) 11%, transparent);
+  --ui-danger: var(--danger);
+  --ui-danger-soft: color-mix(in srgb, var(--danger) 11%, transparent);
   --ui-code-bg: var(--code-bg);
   --ui-code-text: var(--code-text);
   --ui-shadow: var(--shadow);
@@ -28,13 +28,3 @@
   --ui-font-mono: var(--mono);
   --ui-font-display: var(--serif);
 }
-
-[data-theme="dark"] {
-  --ui-danger: #d0684d;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --ui-danger: #d0684d;
-  }
-}

package/themes/juniper/tokens.css

@@ -0,0 +1,84 @@
+/* juniper/tokens.css — GENERATED from styles.css by scripts/gen-css.mjs; do not edit.
+   The theme's tokens-only layer (fonts + custom properties, no page styling)
+   for app consumers — pair with ui.css. Blog sites use styles.css instead. */
+
+@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap");
+
+:root {
+  --bg: #eaeaea;
+  --surface: #f5f5f5;
+  --text: #0a0a0a;
+  --text-secondary: #666666;
+  --accent: #250653;
+  --accent-2: #324444;
+  --border: #d9d9d9;
+
+  --code-bg: #f5f5f5;
+  --code-text: #24292e;
+  --hl-keyword: #581c87;
+  --hl-string: #1a7f4b;
+  --hl-comment: #6e6e6e;
+  --hl-number: #0f5132;
+  --hl-title: #250653;
+  --hl-attr: #92400e;
+  --hl-type: #324444;
+  --hl-meta: #92400e;
+  --hl-addition: #15803d;
+  --hl-deletion: #b91c1c;
+
+  --font-sans: Helvetica, "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
+  --font-body: "Lora", Georgia, serif;
+  --font-titles: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
+
+  --max-width: 42rem;
+  --header-width: var(--max-width);
+}
+
+[data-theme="dark"] {
+  --bg: #0a1a0a;
+  --surface: #1a1a1a;
+  --text: #e5e5e5;
+  --text-secondary: #a3a3a3;
+  --accent: #d3c5fc;
+  --accent-2: #581c87;
+  --border: #262626;
+
+  --code-bg: #1a1a1a;
+  --code-text: #d6d6d6;
+  --hl-keyword: #d3c5fc;
+  --hl-string: #9ae6b4;
+  --hl-comment: #8a8a8a;
+  --hl-number: #86d7b6;
+  --hl-title: #ede9fe;
+  --hl-attr: #a78bfa;
+  --hl-type: #99d6c0;
+  --hl-meta: #d8b48a;
+  --hl-addition: #7bc98a;
+  --hl-deletion: #ef8783;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #0a1a0a;
+    --surface: #1a1a1a;
+    --text: #e5e5e5;
+    --text-secondary: #a3a3a3;
+    --accent: #d3c5fc;
+    --accent-2: #581c87;
+    --border: #262626;
+
+    --code-bg: #1a1a1a;
+    --code-text: #d6d6d6;
+    --hl-keyword: #d3c5fc;
+    --hl-string: #9ae6b4;
+    --hl-comment: #8a8a8a;
+    --hl-number: #86d7b6;
+    --hl-title: #ede9fe;
+    --hl-attr: #a78bfa;
+    --hl-type: #99d6c0;
+    --hl-meta: #d8b48a;
+    --hl-addition: #7bc98a;
+    --hl-deletion: #ef8783;
+  }
+}

package/themes/paper/styles.css

@@ -2,7 +2,8 @@
    PAPER — warm paper dashboard shell
    IBM Plex Sans UI · IBM Plex Mono data · terracotta accent
    Light: white panels on parchment, clay accent (Atlas scheme).
-   Dark: warm charcoal, embered terracotta — never pure black.
+   Dark: deep warm charcoal with clearly raised panels and a bright
+   ember accent — warm but crisp, never muddy, never pure black.
    Fonts load separately via @odla-ai/ui/fonts/plex.css.
    Unlike the blog themes, paper is tokens + base only: components
    come from the ui class sheets, layout from the app.
@@ -43,66 +44,66 @@
 }
 
 [data-theme="dark"] {
-  --bg: #211d19;
-  --panel: #2a251f;
-  --panel-2: #332d26;
-  --border: #3e362c;
-  --text: #ece5da;
-  --muted: #b3a794;
-  --faint: #857a6a;
-  --accent: #d07a4d;
-  --accent-deep: #de8f66;
-  --accent-dim: rgba(208, 122, 77, 0.14);
-  --good: #8aa87c;
-  --good-dim: rgba(138, 168, 124, 0.16);
-  --warn: #c9a25a;
-  --danger: #d0684d;
-  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.3);
+  --bg: #191613;
+  --panel: #242019;
+  --panel-2: #2e2820;
+  --border: #40372a;
+  --text: #f2ecdf;
+  --muted: #b9ad99;
+  --faint: #877c6a;
+  --accent: #e08547;
+  --accent-deep: #ec9c68;
+  --accent-dim: rgba(224, 133, 71, 0.16);
+  --good: #97b984;
+  --good-dim: rgba(151, 185, 132, 0.16);
+  --warn: #dcae57;
+  --danger: #e06a4a;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
 
-  --code-bg: #2a251f;
-  --code-text: #ddd5c8;
-  --hl-keyword: #d07a4d;
-  --hl-string: #8aa87c;
-  --hl-comment: #857a6a;
-  --hl-number: #c9a25a;
-  --hl-title: #ece5da;
-  --hl-attr: #8ba3c7;
-  --hl-type: #a78bc9;
-  --hl-meta: #ab8fbd;
-  --hl-addition: #8aa87c;
-  --hl-deletion: #d0684d;
+  --code-bg: #242019;
+  --code-text: #e4dbc9;
+  --hl-keyword: #e08547;
+  --hl-string: #97b984;
+  --hl-comment: #877c6a;
+  --hl-number: #dcae57;
+  --hl-title: #f2ecdf;
+  --hl-attr: #94adcf;
+  --hl-type: #b295d2;
+  --hl-meta: #b499c5;
+  --hl-addition: #97b984;
+  --hl-deletion: #e06a4a;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --bg: #211d19;
-    --panel: #2a251f;
-    --panel-2: #332d26;
-    --border: #3e362c;
-    --text: #ece5da;
-    --muted: #b3a794;
-    --faint: #857a6a;
-    --accent: #d07a4d;
-    --accent-deep: #de8f66;
-    --accent-dim: rgba(208, 122, 77, 0.14);
-    --good: #8aa87c;
-    --good-dim: rgba(138, 168, 124, 0.16);
-    --warn: #c9a25a;
-    --danger: #d0684d;
-    --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.3);
+    --bg: #191613;
+    --panel: #242019;
+    --panel-2: #2e2820;
+    --border: #40372a;
+    --text: #f2ecdf;
+    --muted: #b9ad99;
+    --faint: #877c6a;
+    --accent: #e08547;
+    --accent-deep: #ec9c68;
+    --accent-dim: rgba(224, 133, 71, 0.16);
+    --good: #97b984;
+    --good-dim: rgba(151, 185, 132, 0.16);
+    --warn: #dcae57;
+    --danger: #e06a4a;
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
 
-    --code-bg: #2a251f;
-    --code-text: #ddd5c8;
-    --hl-keyword: #d07a4d;
-    --hl-string: #8aa87c;
-    --hl-comment: #857a6a;
-    --hl-number: #c9a25a;
-    --hl-title: #ece5da;
-    --hl-attr: #8ba3c7;
-    --hl-type: #a78bc9;
-    --hl-meta: #ab8fbd;
-    --hl-addition: #8aa87c;
-    --hl-deletion: #d0684d;
+    --code-bg: #242019;
+    --code-text: #e4dbc9;
+    --hl-keyword: #e08547;
+    --hl-string: #97b984;
+    --hl-comment: #877c6a;
+    --hl-number: #dcae57;
+    --hl-title: #f2ecdf;
+    --hl-attr: #94adcf;
+    --hl-type: #b295d2;
+    --hl-meta: #b499c5;
+    --hl-addition: #97b984;
+    --hl-deletion: #e06a4a;
   }
 }
 

package/themes/paper/tokens.css

@@ -0,0 +1,100 @@
+/* paper/tokens.css — GENERATED from styles.css by scripts/gen-css.mjs; do not edit.
+   The theme's tokens-only layer (fonts + custom properties, no page styling)
+   for app consumers — pair with ui.css. Blog sites use styles.css instead. */
+
+:root {
+  --bg: #f6f1e9;
+  --panel: #ffffff;
+  --panel-2: #f1ebe0;
+  --border: #e4dac9;
+  --text: #2c2722;
+  --muted: #6f655a;
+  --faint: #a99d8c;
+  --accent: #a8572e;
+  --accent-deep: #8c4623;
+  --accent-dim: rgba(168, 87, 46, 0.1);
+  --good: #5f7d52;
+  --good-dim: rgba(95, 125, 82, 0.12);
+  --warn: #b08433;
+  --danger: #b3402e;
+  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  --shadow: 0 1px 2px rgba(44, 39, 34, 0.04), 0 8px 24px rgba(44, 39, 34, 0.06);
+
+  --code-bg: #f1ebe0;
+  --code-text: #3a332b;
+  --hl-keyword: #a8572e;
+  --hl-string: #5f7d52;
+  --hl-comment: #a99d8c;
+  --hl-number: #b08433;
+  --hl-title: #2c2722;
+  --hl-attr: #5f7da8;
+  --hl-type: #7d5fa8;
+  --hl-meta: #8a6d9e;
+  --hl-addition: #5f7d52;
+  --hl-deletion: #a8402e;
+}
+
+[data-theme="dark"] {
+  --bg: #191613;
+  --panel: #242019;
+  --panel-2: #2e2820;
+  --border: #40372a;
+  --text: #f2ecdf;
+  --muted: #b9ad99;
+  --faint: #877c6a;
+  --accent: #e08547;
+  --accent-deep: #ec9c68;
+  --accent-dim: rgba(224, 133, 71, 0.16);
+  --good: #97b984;
+  --good-dim: rgba(151, 185, 132, 0.16);
+  --warn: #dcae57;
+  --danger: #e06a4a;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
+
+  --code-bg: #242019;
+  --code-text: #e4dbc9;
+  --hl-keyword: #e08547;
+  --hl-string: #97b984;
+  --hl-comment: #877c6a;
+  --hl-number: #dcae57;
+  --hl-title: #f2ecdf;
+  --hl-attr: #94adcf;
+  --hl-type: #b295d2;
+  --hl-meta: #b499c5;
+  --hl-addition: #97b984;
+  --hl-deletion: #e06a4a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #191613;
+    --panel: #242019;
+    --panel-2: #2e2820;
+    --border: #40372a;
+    --text: #f2ecdf;
+    --muted: #b9ad99;
+    --faint: #877c6a;
+    --accent: #e08547;
+    --accent-deep: #ec9c68;
+    --accent-dim: rgba(224, 133, 71, 0.16);
+    --good: #97b984;
+    --good-dim: rgba(151, 185, 132, 0.16);
+    --warn: #dcae57;
+    --danger: #e06a4a;
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
+
+    --code-bg: #242019;
+    --code-text: #e4dbc9;
+    --hl-keyword: #e08547;
+    --hl-string: #97b984;
+    --hl-comment: #877c6a;
+    --hl-number: #dcae57;
+    --hl-title: #f2ecdf;
+    --hl-attr: #94adcf;
+    --hl-type: #b295d2;
+    --hl-meta: #b499c5;
+    --hl-addition: #97b984;
+    --hl-deletion: #e06a4a;
+  }
+}

package/themes/salt/tokens.css

@@ -0,0 +1,140 @@
+/* salt/tokens.css — GENERATED from styles.css by scripts/gen-css.mjs; do not edit.
+   The theme's tokens-only layer (fonts + custom properties, no page styling)
+   for app consumers — pair with ui.css. Blog sites use styles.css instead. */
+
+@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap");
+
+@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap");
+
+@font-face {
+  font-family: "Cormorant Garamond";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format("woff2");
+  unicode-range: U+0030-0039;
+}
+
+@font-face {
+  font-family: "Cormorant Garamond";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format("woff2");
+  unicode-range: U+0030-0039;
+}
+
+@font-face {
+  font-family: "Cormorant Garamond";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format("woff2");
+  unicode-range: U+0030-0039;
+}
+
+@font-face {
+  font-family: "Cormorant Garamond";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format("woff2");
+  unicode-range: U+0030-0039;
+}
+
+@font-face {
+  font-family: "Cormorant Garamond";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyJU44g9vKiM1sORYSiWeAsLN997_Il2xMEbK0UPg.woff2) format("woff2");
+  unicode-range: U+0030-0039;
+}
+
+:root {
+  --bg: #FBF8F2;
+  --surface: #F4EFE6;
+  --text: #2F3E34;
+  --text-body: #4A5E50;
+  --text-secondary: #7E8E84;
+  --accent: #D16B4F;
+  --accent-hover: #E07A5E;
+  --accent-2: #1A8F7D;
+  --warm: #C4A47E;
+  --border: rgba(47, 62, 52, 0.12);
+
+  --code-bg: #F4EFE6;
+  --code-text: #3A4A40;
+  --hl-keyword: #C15A40;
+  --hl-string: #177E6E;
+  --hl-comment: #8A9A8F;
+  --hl-number: #C87F5A;
+  --hl-title: #2F3E34;
+  --hl-attr: #3D5A99;
+  --hl-type: #14675B;
+  --hl-meta: #A08050;
+  --hl-addition: #5F7D52;
+  --hl-deletion: #B0492F;
+
+  --font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-serif: "Cormorant Garamond", Garamond, Georgia, serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+
+  --tracking-widest: 0.14em;
+  --max-width: 44rem;
+  --header-width: var(--max-width);
+}
+
+[data-theme="dark"] {
+  --bg: #1F2823;
+  --surface: #2A362F;
+  --text: #F0EDE7;
+  --text-body: #B8C4BB;
+  --text-secondary: #8A9E90;
+  --accent: #E07A5E;
+  --accent-hover: #EE8D72;
+  --accent-2: #2FAE99;
+  --warm: #C4A47E;
+  --border: rgba(240, 237, 231, 0.12);
+
+  --code-bg: #26312B;
+  --code-text: #D8DFD8;
+  --hl-keyword: #E07A5E;
+  --hl-string: #4FC3AE;
+  --hl-comment: #7E8E84;
+  --hl-number: #D9A87E;
+  --hl-title: #F0EDE7;
+  --hl-attr: #9FB4E0;
+  --hl-type: #7CCFC0;
+  --hl-meta: #C4A47E;
+  --hl-addition: #8FB07F;
+  --hl-deletion: #E8907B;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #1F2823;
+    --surface: #2A362F;
+    --text: #F0EDE7;
+    --text-body: #B8C4BB;
+    --text-secondary: #8A9E90;
+    --accent: #E07A5E;
+    --accent-hover: #EE8D72;
+    --accent-2: #2FAE99;
+    --warm: #C4A47E;
+    --border: rgba(240, 237, 231, 0.12);
+
+    --code-bg: #26312B;
+    --code-text: #D8DFD8;
+    --hl-keyword: #E07A5E;
+    --hl-string: #4FC3AE;
+    --hl-comment: #7E8E84;
+    --hl-number: #D9A87E;
+    --hl-title: #F0EDE7;
+    --hl-attr: #9FB4E0;
+    --hl-type: #7CCFC0;
+    --hl-meta: #C4A47E;
+    --hl-addition: #8FB07F;
+    --hl-deletion: #E8907B;
+  }
+}