2026-08-23 18:32:09 +02:00
|
|
|
|
# lvl0/ui
|
2026-08-23 15:35:37 +02:00
|
|
|
|
|
2026-08-23 18:32:09 +02:00
|
|
|
|
The shared visual style for lvl0 projects — palette, glow utilities, and the seven-segment
|
|
|
|
|
|
display font. Published as `@lvl0/ui`.
|
|
|
|
|
|
|
|
|
|
|
|
Red-on-black terminal aesthetic: monospace type, square corners, thick borders, and CRT-style
|
|
|
|
|
|
glow. This repository is the source of truth. Before it existed the style lived as three
|
|
|
|
|
|
divergent copies across `incr`, `buckets`, and `buckets-budget`, reverse-engineered from each
|
|
|
|
|
|
other — read the values here rather than from another project.
|
|
|
|
|
|
|
|
|
|
|
|
> **Status:** early. The package is not published yet; see the open issues.
|
|
|
|
|
|
|
|
|
|
|
|
## Palette
|
|
|
|
|
|
|
|
|
|
|
|
Defined as Tailwind 4 `@theme` tokens. Use the token names rather than raw `red-*` steps so a
|
|
|
|
|
|
palette change lands in one place.
|
|
|
|
|
|
|
|
|
|
|
|
| Token | Value | Role |
|
|
|
|
|
|
|---|---|---|
|
|
|
|
|
|
| `--color-primary` | `oklch(0.637 0.237 25.331)` | House red. Text, active borders, focus states, glow source. |
|
|
|
|
|
|
| `--color-bordeaux` | `oklch(0.258 0.092 26.042)` | Secondary. Dividers, resting borders, recessed chrome. |
|
|
|
|
|
|
| `--color-background` | `oklch(0.1 0 0)` | Near-black page ground |
|
|
|
|
|
|
| `--color-card` | `oklch(0.12 0 0)` | Raised surface |
|
|
|
|
|
|
| `--color-muted` | `oklch(0.2 0 0)` | Muted surface |
|
|
|
|
|
|
| `--color-muted-foreground` | `oklch(0.5 0.1 25)` | Muted text |
|
|
|
|
|
|
| `--color-destructive` | `oklch(0.577 0.245 27.325)` | Destructive actions |
|
|
|
|
|
|
| `--radius` | `0` | Square corners throughout |
|
|
|
|
|
|
|
|
|
|
|
|
Chart colours `--chart-1` … `--chart-5` are also defined.
|
|
|
|
|
|
|
|
|
|
|
|
**Primary or bordeaux?** Primary for anything active or foreground: text, focused inputs, the
|
|
|
|
|
|
borders of things you can click. Bordeaux for structure: dividers, the resting state of an
|
|
|
|
|
|
input border, panel outlines. An element commonly moves from bordeaux to primary on focus.
|
|
|
|
|
|
|
|
|
|
|
|
## Utilities
|
|
|
|
|
|
|
|
|
|
|
|
| Class | Use |
|
|
|
|
|
|
|---|---|
|
|
|
|
|
|
| `.glow-red` | Box-shadow bloom in primary, with `:hover` and `:focus` steps |
|
|
|
|
|
|
| `.glow-red-text` | Two-layer text-shadow, for headings without a border |
|
|
|
|
|
|
| `.glow-bordeaux` | Softer bloom, for bordeaux-bordered elements |
|
|
|
|
|
|
| `.glow-bordeaux-line` | Two-layer variant for 1–2px rules |
|
|
|
|
|
|
| `.scrollbar-red` | Themed scrollbar, Firefox and WebKit |
|
|
|
|
|
|
| `.font-digital` | Seven-segment face — **numerals only** |
|
|
|
|
|
|
|
|
|
|
|
|
Three rules that are not obvious from the values:
|
|
|
|
|
|
|
|
|
|
|
|
- **`.glow-red` haloes a box, not text.** On a borderless heading it smudges around the
|
|
|
|
|
|
element's invisible box. Use `.glow-red-text` there.
|
|
|
|
|
|
- **`.glow-bordeaux` emits primary-tinted light, not bordeaux.** Bordeaux at `oklch(0.258 …)`
|
|
|
|
|
|
is too dark to bloom against a near-black ground, so a bordeaux halo is invisible. Dim
|
|
|
|
|
|
element, brighter glow — as CRT phosphor behaves.
|
|
|
|
|
|
- **A single wide shadow on a hairline just fades out.** `.glow-bordeaux-line` uses a tight
|
|
|
|
|
|
core plus a wider spill so a 2px rule reads as lit.
|
|
|
|
|
|
|
|
|
|
|
|
## Font
|
|
|
|
|
|
|
|
|
|
|
|
`fonts/7segment.woff` — 7-Segment by [Jan Bobrowski](http://torinak.com/7segment), version 3.0,
|
|
|
|
|
|
licensed under the [SIL Open Font License 1.1](fonts/OFL.txt).
|
|
|
|
|
|
|
|
|
|
|
|
The OFL permits bundling and redistribution provided the licence text travels with the font.
|
|
|
|
|
|
**`fonts/OFL.txt` must ship wherever `7segment.woff` does** — including in the published npm
|
|
|
|
|
|
tarball. Do not move one without the other.
|
|
|
|
|
|
|
|
|
|
|
|
Licence verified 2026-08-23 from two independent sources: the font's own `name` table
|
|
|
|
|
|
(ID 13 `LicenseDesc` = "SIL OFL", ID 9 `Designer` = "Jan Bobrowski") and the designer's page.
|
|
|
|
|
|
|
|
|
|
|
|
Letters render poorly in a seven-segment face. Use it for digits — counters, lengths, readouts
|
|
|
|
|
|
— and set everything else in `font-mono`.
|
|
|
|
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
|
|
|
|
|
|
|
Once published:
|
|
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
|
@import 'tailwindcss';
|
|
|
|
|
|
@import '@lvl0/ui';
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## Licence
|
|
|
|
|
|
|
|
|
|
|
|
MIT — see [LICENSE](LICENSE). Deliberately different from the AGPL-3.0 used across the other
|
|
|
|
|
|
lvl0 repositories: this package is meant to be imported, and AGPL's copyleft would attach to
|
|
|
|
|
|
any consuming work. The bundled font keeps its own OFL terms.
|
