d1e3727587
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>
45 lines
2.2 KiB
Markdown
45 lines
2.2 KiB
Markdown
# 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`.
|