@odla-ai/ui 0.1.0 → 0.1.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odla-ai/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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/tokens.css

@@ -0,0 +1,98 @@
+/* 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: #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;
+
+  --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: #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;
+}
+
+@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;
+  }
+}

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/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: #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);
+
+  --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;
+}
+
+@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);
+
+    --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;
+  }
+}

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;
+  }
+}