# 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 ```html Offline Primary Secondary Live Down Slow Updating ``` ### 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](chart.md). ```html Main Island South Bay West Bay Hill Town East Bay Beach Town Harbor Town Turtle Cove ``` ### 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. ```html Importing Imported ``` ## 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`](https://github.com/redz-tech/REDZ.UI/blob/main/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`.