Dots
An 8 px dot of a tone beside a word: online, live, the color of a site. The dot repeats what the word says; it never says it alone.
Examples
<span class="hstack gap-8"><span class="dot"></span>Offline</span>
<span class="hstack gap-8"><span class="dot dot-primary"></span>Primary</span>
<span class="hstack gap-8"><span class="dot dot-secondary"></span>Secondary</span>
<span class="hstack gap-8"><span class="dot dot-success"></span>Live</span>
<span class="hstack gap-8"><span class="dot dot-danger"></span>Down</span>
<span class="hstack gap-8"><span class="dot dot-warning"></span>Slow</span>
<span class="hstack gap-8"><span class="dot dot-info"></span>Updating</span>Categories
dot-chart-1 to dot-chart-8 take the charts' eight colors, for a category - a site, a team, a kind of job - not a state: the dot beside a name in a legend or a list matches its series in a chart.
<span class="hstack gap-8"><span class="dot dot-chart-1"></span>Main Island</span>
<span class="hstack gap-8"><span class="dot dot-chart-2"></span>South Bay</span>
<span class="hstack gap-8"><span class="dot dot-chart-3"></span>West Bay</span>
<span class="hstack gap-8"><span class="dot dot-chart-4"></span>Hill Town</span>
<span class="hstack gap-8"><span class="dot dot-chart-5"></span>East Bay</span>
<span class="hstack gap-8"><span class="dot dot-chart-6"></span>Beach Town</span>
<span class="hstack gap-8"><span class="dot dot-chart-7"></span>Harbor Town</span>
<span class="hstack gap-8"><span class="dot dot-chart-8"></span>Turtle Cove</span>Live
dot-live breathes while its data-state="running" - a job at work, a stream on air - and is still at any other state, and always with reduced motion. The word beside it says the state.
<span class="hstack gap-8"><span class="dot dot-live dot-primary" data-state="running"></span>Importing</span>
<span class="hstack gap-8"><span class="dot dot-live dot-success" data-state="done"></span>Imported</span>Accessibility
- A dot has no name; the word beside it carries the meaning. In forced colors every dot is drawn in the text color, so the word is what tells them apart.
- Dots print with their colors.
Tokens
From css/components/dot.css, which declares no custom property of its own.
It reads the theme's --redz-text-faint, --redz-primary, --redz-secondary, --redz-success, --redz-danger, --redz-warning, --redz-info, --redz-color, --redz-chart-1, --redz-chart-2, --redz-chart-3, --redz-chart-4, --redz-chart-5, --redz-chart-6, --redz-chart-7, --redz-chart-8.