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:
44
README.md
Normal file
44
README.md
Normal 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`.
|
||||
Reference in New Issue
Block a user