lib-theme-solarium: 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>
This commit is contained in:
60
README.md
Normal file
60
README.md
Normal file
@@ -0,0 +1,60 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user