caee7f6672
One of four divergent candidates for the operator/console theme family (successor to Skyrise for developer-product screens). Dense/pro type register, keyboard-first focus treatment, tabular numerals, coarse-pointer 44px touch floor, neutral code chips, dark card separation per house sweep. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
42 lines
2.0 KiB
Markdown
42 lines
2.0 KiB
Markdown
# lib-theme-phosphor
|
|
|
|
**Terminal heritage, dark-first.** Phosphor's dark mode is its native identity: deep charcoal
|
|
with a barely-there green undertone (never blue-gray, never pure black), cards stepping
|
|
*lighter* off the background, and hairline light-alpha borders doing all the separation work —
|
|
the elevation ladder exists but is whisper-quiet. One phosphor-green accent
|
|
(`oklch(0.75 0.16 148)` carrying dark ink in dark mode; deepened to `oklch(0.45 0.12 150)`
|
|
under white labels in light mode) is spent on the primary action, focus, and selection only.
|
|
Light mode is the "paper terminal": warm-white paper, deep green-charcoal ink. Success is teal
|
|
(hue 178) so state-green never collides with action-green. Dense/pro register, radius
|
|
0.375rem, instant-feeling motion (100/180/280/400ms, springs aliased — no bounce),
|
|
keyboard-first focus (2px offset phosphor outline on buttons, flush 1px ring on inputs),
|
|
tabular numerals on tables and via the `.num` class.
|
|
|
|
Built as one of four candidates for the calm-pro / dense-utility family (operator, console,
|
|
and admin surfaces; Skyrise successor for developer-product screens).
|
|
|
|
## Fonts
|
|
|
|
The signature is **IBM Plex Mono for headings** (weight 500/600, slightly tight tracking) over
|
|
**IBM Plex Sans** body, with Plex Mono again for code. Mono headings run wide, so the display
|
|
ramp is deliberately modest.
|
|
|
|
Per the Crema token contract, `theme.css` does **not** `@import` fonts. The consuming app must
|
|
load them at the very top of its entry CSS (`app/app.css`):
|
|
|
|
```css
|
|
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
|
|
```
|
|
|
|
Stacks (already wired in `theme.css`):
|
|
|
|
- `--font-sans` / `--body-family`: `"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
|
|
- `--font-heading` / `--heading-family`: `"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace`
|
|
- `--font-mono`: same mono stack as headings
|
|
|
|
## Validate
|
|
|
|
```bash
|
|
node create-crema-app/scripts/validate-theme.mjs lib-theme-phosphor/theme.css
|
|
```
|