lib-theme-phosphor: initial import (calm-pro/dense-utility set, 2026-07)
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>
This commit is contained in:
41
README.md
Normal file
41
README.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# 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
|
||||
```
|
||||
Reference in New Issue
Block a user