Files

jules 3a6bca9f2b 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

1.6 KiB

Raw Blame History

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";

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:

: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.).

1.6 KiB Raw Blame History