lib-theme-harbor: 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:
jules
2026-07-07 22:35:56 +10:00
commit d1e3727587
2 changed files with 448 additions and 0 deletions

44
README.md Normal file
View File

@@ -0,0 +1,44 @@
# lib-theme-harbor
Cool neutral, warm spark. The most neutral of the warm-consumer set: the entire surface is a
calm, faintly-**cool** light grey (morning harbor light on soft slate — a whisper of blue-grey
that reads as clean neutral, never cream, never enterprise blue), and all the warmth is carried
by a single **honey/amber** accent spent surgically on the primary action, selection, and focus.
Grey stone warmed by lamplight. Light + dark. Built for me.sky-ai.com back-of-house.
- **Surface:** faintly-cool light grey `--background` (`oklch(0.975 0.005 248)`); clean white
cards, hairline-separated. Ink is a deep, very-slightly-cool charcoal.
- **Accent:** one honey/amber primary (`oklch(0.8 0.14 78)`) with **dark ink on top** (the
bright-swatch / dark-ink pairing) — the sole warmth, ≤10% of the surface.
- **Status:** `warning` is pulled toward amber-**orange** (hue 52) and set darker than the honey
primary (hue 78) so the two never read as the same swatch.
- **Dark:** harbor at night — deep cool-neutral charcoal (`oklch(0.2 0.008 252)`, not pure black,
never warm-brown), amber glowing warm against it.
- **Shape:** crisp `--radius: 0.75rem`; low, neutral cool shadows; product-fast motion (base
280ms), springs aliased to the standard eases.
- **Type:** crisp modern-neutral — Inter Tight (text) + Geist (headings) + Geist Mono (code).
## Fonts
Themes must not `@import` fonts (breaks PostCSS ordering — see the Crema token contract). The
**consuming app** loads them at the top of its entry CSS via this Google Fonts URL:
```
https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Inter+Tight:wght@400;500;600;700&display=swap
```
## Usage
Consumed by the **Studio** lab as a sibling. The consuming app imports `theme.css` (or, in
Studio, `scripts/build-themes.mjs` copies it to `public/themes/harbor.css`). Dark mode is
class-based (`.dark`); the app owns the toggle and should respect `prefers-color-scheme` on first
load.
## Validation
```bash
node ../create-crema-app/scripts/validate-theme.mjs theme.css
```
Passes the Crema v1 token contract: every Tier-1 token present in both modes, all contrast floors
met, no font `@import`, no root `font-size`.