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>
61 lines
2.5 KiB
Markdown
61 lines
2.5 KiB
Markdown
# 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:
|
|
|
|
```css
|
|
@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
|
|
|
|
```css
|
|
/* 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:
|
|
|
|
```bash
|
|
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.
|