Initial commit: Modena theme + --chat-* surface tokens

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 16:25:46 +10:00
commit 3a6bca9f2b
2 changed files with 498 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,51 @@
+# lib-theme-modena
+
+Editorial design system theme for Crema. Ports the Modena content-presentation
+patterns (centered article hero, serif body, sibling-margin prose rhythm,
+primary-rail blockquotes, dark code blocks) into a single `theme.css` you
+import like any other Crema theme.
+
+## Use
+
+```css
+/* app/app.css */
+@import "../../lib-theme-modena/theme.css";
+@import "tailwindcss";
+```
+
+That's it. All `@crema/content-ui` consumers (Article, ArticleHeader,
+ArticleMeta, Prose, Pullquote, etc.) automatically pick up the editorial
+look because Modena targets `[data-slot="article"]` and `[data-slot="prose"]`.
+
+## What it provides
+
+- **Standard Crema tokens** — `--background`, `--foreground`, `--primary`,
+  `--card`, `--border`, etc. — so shadcn/lib-* components keep working.
+- **Modena-specific tokens** — `--mod-prose-*`, `--mod-text-*`,
+  `--mod-accent`, `--mod-gray-*`, `--mod-radius-*`, `--mod-space-*`,
+  `--mod-tracking-*` — consumed by `lib-modena-ui` components.
+- **Newsreader** editorial serif (Google Fonts, optical-size enabled)
+  loaded at theme-import time.
+- **Article surface styling** — applies to anything inside
+  `[data-slot="article"]`. Comment bodies and other Prose surfaces outside
+  the article stay neutral.
+
+## Override
+
+Override any token at the app level to brand:
+
+```css
+:root {
+  --mod-accent: oklch(0.62 0.20 30);  /* venetian red */
+}
+```
+
+## Dark mode
+
+Add `class="dark"` to `<html>`. All tokens are remapped.
+
+## Pairs with
+
+- `@crema/content-ui` — article + prose primitives.
+- `lib-modena-ui` — Modena-specific extra components (Callout, Tag, Bookmark,
+  Comparison, Changelog, etc.).