02f7a99374
Adds dark destructive/success/warning overrides, --chart-1..5, --info, subtitle, motion aliases. Font @import moved to README (PostCSS ordering). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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
/* app/app.css */
@import "../../lib-theme-modena/theme.css";
@import "tailwindcss";
Load the fonts at the very top of your app's entry CSS (the theme no longer
@imports them — the token contract bans font @imports inside theme.css):
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,700;1,6..72,400&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");
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 bylib-modena-uicomponents. - 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:
: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.).