58707e5b62
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>
42 lines
1.8 KiB
Markdown
42 lines
1.8 KiB
Markdown
# lib-theme-hearth
|
|
|
|
**Evening warmth, dark-first.** Hearth is built on the contrarian warm-consumer
|
|
thesis that consumer warmth is not daylight — it's evening: reading by a fire,
|
|
lamplight, the phone at 9pm. Dark mode is the theme's native identity — deep
|
|
umber/espresso surfaces (never blue-gray, never black) that step lighter as they
|
|
come forward like objects catching firelight, with a candle-glow amber primary
|
|
carrying dark ink. Light mode is the morning after: a chroma-free off-white with
|
|
warm espresso ink and the same ember accent, deliberately outside the
|
|
saturated-AI cream band. A single slate-teal info counterpoint keeps the palette
|
|
from suffocating; motion is slow-blink calm (350ms base, decelerate-heavy).
|
|
|
|
## Dark-first
|
|
|
|
Consuming apps should **default this theme to dark mode** (and still respect an
|
|
explicit user toggle). Light mode is fully defined and contract-passing, but it
|
|
is the secondary register — the theme's identity lives in `.dark`.
|
|
|
|
## Fonts
|
|
|
|
Load from the consuming app's entry CSS (very top, before anything else):
|
|
|
|
```css
|
|
@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@400;500;600;700&family=Nunito+Sans:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
|
|
```
|
|
|
|
- **Bitter** (400/500/600/700) — `--font-heading`, warm slab-serif headings
|
|
- **Nunito Sans** (400/600/700) — `--font-sans`, highly legible body
|
|
- **JetBrains Mono** (400/500) — `--font-mono`, code
|
|
|
|
Per the token contract, `theme.css` never `@import`s fonts itself.
|
|
|
|
## Validation
|
|
|
|
```bash
|
|
node ../create-crema-app/scripts/validate-theme.mjs theme.css
|
|
```
|
|
|
|
Passes the Crema token contract v1: full Tier-1 token set in both modes, all
|
|
contrast floors met (including dark-mode `--muted-foreground` on `--card` at
|
|
7.68:1), inert glass stubs, springs aliased to standard eases.
|