# lvl0/ui

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.