Components
Chip
Small labels: route type, change type, metadata. Variants: --muted, --accent, --solid, --outline, --good, --warn, --alert.
Live example
Rendered with the real classes from /site/chitransit.css, light (left) and dark (right).
Train
.ct-chipBus
.ct-chip--mutedfeat
.ct-chip--accentrelease
.ct-chip--solidapp
.ct-chip--outlineperffixbreaking
.ct-chip--good · --warn · --alertCode
<span class="ct-chip">Train</span>
<span class="ct-chip ct-chip--muted">Bus</span>
<span class="ct-chip ct-chip--accent">feat</span>
<span class="ct-chip ct-chip--solid">release</span>
<span class="ct-chip ct-chip--outline">app</span>
<span class="ct-chip ct-chip--good">perf</span><span class="ct-chip ct-chip--warn">fix</span><span class="ct-chip ct-chip--alert">breaking</span>Tokens
From tokens/components.tokens.json. Override one instance by setting the property without the ct- prefix.
| Custom property | Value | Alias |
|---|---|---|
--ct-chip-background | var(--card-2) | {colors.card2} |
--ct-chip-color | var(--ink) | {colors.ink} |
--ct-chip-font-size | 12px | |
--ct-chip-font-weight | var(--weight-semibold) | {weight.semibold} |
--ct-chip-height | 22px | |
--ct-chip-outline-width | var(--size-focus-ring-width) | {size.focusRingWidth} |
--ct-chip-padding-x | var(--space-8) | {space.s8} |
--ct-chip-radius | var(--radius-chip) | {radius.chip} |
Usage
Do
- Use chips for small metadata labels: route type, change type.
- Pick a variant for emphasis:
--muted,--accent,--solid,--outline.
Don't
- Don't use a status variant (
--good,--warn,--alert) without a status word. - Don't use line colours on chips; line colour means a line.
Accessibility
- Chips are static text. Interactive filters use the route toggle or segmented control.