19a5d978a3
Includes the 2026-07-07 UX sweep: neutral inline-code chips (accent reserved for actions/links/focus), dark-mode card/popover lightness lift for visible surface separation, 44px touch-target floor on coarse pointers, card-title pinned to a named ramp role. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
lib-theme-solarium
Botanical sunroom. Morning light through a glass room full of plants — humid air, leaf shadows, citrus on the table. Solarium is FRESH-warm, not baked-warm: surfaces are a pale green-amber leaf-light (hue ~120, never the cream/sand band), ink is deep green-charcoal, the primary is a deepened fern carrying warm-white labels at 7.5:1, and a single apricot accent supplies the consumer-warm note. Dark mode is the sunroom at night — deep green-charcoal (never blue-gray), a luminous fern primary with dark-ink labels, and the apricot dimmed to lamp glow. Organic-large radius (1.25rem), soft green-tinted daylight shadows, buoyant-but-calm motion (~300ms base, decelerating entries, gentle springs).
Fonts
Fonts are loaded by the consuming app, not by theme.css (see the Crema token
contract). Add this at the very top of the app's entry CSS (app/app.css), before any
other statement:
@import url("https://fonts.googleapis.com/css2?family=Gantari:wght@500;600;700&family=Figtree:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
| Role | Family | Weights |
|---|---|---|
--font-heading |
Gantari | 500, 600, 700 |
--font-sans |
Figtree | 400, 500, 600 |
--font-mono |
JetBrains Mono | 400, 500 |
Usage
/* app/app.css — after the fonts @import, under CREMA:SOURCES conventions */
@import "../../lib-theme-solarium/theme.css";
Class-based .dark toggles dark mode (the app owns the toggle). No glass — the
--glass-* tokens are inert stubs (0px / 100% / 1 / 1).
Contract
Token contract v1 (create-crema-app/TOKEN_CONTRACT.md). Validate with:
node ../create-crema-app/scripts/validate-theme.mjs theme.css
Passing as of 2026-07-07: all Tier-1 tokens present in both modes, all contrast floors met (foreground/background exceeds the 7:1 target in light and dark), no ban violations.
Palette notes
- Primary
oklch(0.42 0.11 145)— mid-L fern deepened until warm-white text clears 7:1; mid-lightness greens under white labels fail 4.5:1, so the brand green sinks rather than the label darkening. - Success shifts to emerald (h160, dark-ink label) so status green stays distinguishable from the fern primary (h145).
- Accent is the one warm pop — apricot tint surface with a rust-apricot label in light; a deep apricot lamp-glow surface in dark.
- Charts: fern / apricot / sky / orchid / citrus-gold, hues ≥60° apart with adjacent-index lightness variation.