components/bits/statusToken#

statusTokens()#

function statusTokens(tone): StatusTokens;

The token set for a tone.

Parameters#

Returns#

StatusTokens

statusToToken()#

function statusToToken(status): StatusTone;

Normalises a backend status word onto a tone.

Parameters#

Returns#

StatusTone

StatusTokens#

Properties#

fg#

fg: string;

Text colour readable on the app ground (NOT on main).

main#

main: string;

Solid fill / dot colour.

onSolid#

onSolid: string;

Ink for text sitting on top of main.

soft#

soft: string;

Tinted background for chips and soft badges.

StatusTone#

type StatusTone = "ok" | "warn" | "error" | "critical" | "info" | "idle";

One status vocabulary for the whole app.

Before this, six near-identical getStatusColor maps lived in component files (the pair in audit/TraceDetails.tsx and audit/SpanDetails.tsx was byte-for-byte identical) and 27 status dots were hand-rolled as a Box with borderRadius: '50%' and whatever colour was nearest to hand. Half of them used MUI palette words, which — before the palette was fixed — were a different red and green from the --status-* ramp the rest of the app paints with.

The tone is the unit of meaning; the CSS custom properties are the unit of paint. Everything in the UI layer should reason in tones.