# 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 ``. 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.).