Components

Status

A status word first, colour second (Due, Delayed, alerts). --pill adds a tinted background.

Live example

Rendered with the real classes from /site/chitransit.css, light (left) and dark (right).

Due Delayed Scheduled.ct-status--good · --warn · --muted

OKErrorAlert.ct-status--pill

Code

<span class="ct-status ct-status--good">Due</span> <span class="ct-status ct-status--warn">Delayed</span> <span class="ct-status ct-status--muted">Scheduled</span>
<span class="ct-status ct-status--pill ct-status--good">OK</span><span class="ct-status ct-status--pill ct-status--warn">Error</span><span class="ct-status ct-status--pill ct-status--alert">Alert</span>

Tokens

From tokens/components.tokens.json. Override one instance by setting the property without the ct- prefix.

Custom property	Value	Alias
`--ct-status-font-weight`	`var(--weight-bold)`	`{weight.bold}`
`--ct-status-pill-font-size`	`var(--fs-cap)`	`{type.cap}`
`--ct-status-pill-height`	`22px`
`--ct-status-pill-padding-x`	`var(--space-8)`	`{space.s8}`
`--ct-status-pill-radius`	`var(--radius-pill)`	`{radius.pill}`
`--ct-status-pill-tint`	`.14`

Usage

Do

Lead with the word: Due, Delayed, an alert. Colour reinforces it.
Use --pill for a tinted background in dense rows.

Don't

Don't use colour alone for status, and never a line colour.

Accessibility

The status word is the accessible text; the dot is decorative.