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>
59 lines
2.0 KiB
Markdown
59 lines
2.0 KiB
Markdown
# 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";
|
|
```
|
|
|
|
Load the fonts at the very top of your app's entry CSS (the theme no longer
|
|
`@import`s them — the token contract bans font `@import`s inside `theme.css`):
|
|
|
|
```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 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.).
|