CremaUIStudio/lib-theme-hearth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
lib-theme-hearth/README.md
jules 58707e5b62 lib-theme-hearth: initial import (warm-consumer set, 2026-07) 
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>
2026-07-07 22:35:56 +10:00

1.8 KiB
Raw Permalink Blame History

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

@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 @imports fonts itself.

Validation

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.