Text
Atombeta@macaw-ds/ui · since 0.1.0Renders text in a named typographic role and tone. Every string on screen goes through it; nothing else sets font size or colour.
Contract
From the manifest's a11y block: what assistive technology sees, and every key the component handles.
- Role
- none (inherits the element's role: heading, paragraph, label, time). The HTML role attribute passes through.
- Focusable
- No. Interactive children keep their own focus.
- Accessible name
- Not applicable; Text is content. For label, the name is the text and it names the control via htmlFor.
- Notes
- Pick `as` for document structure first; use `role` for size. Screen readers navigate by heading level, not by font size.
- Do not convey status by tone alone; pair a tone with words or an icon with a label.
| Keys | Behaviour |
|---|---|
Not interactive; no keyboard handling. | |
Motion
This component does not animate or transition, so there is nothing to reduce.
Contrast
Computed at build time from the token values, against the background each colour is paired with.
| Token | On | Light | Dark |
|---|---|---|---|
| fg.primary | surface.layer-1 | 19.67:1 AAA | 18.84:1 AAA |
| fg.secondary | surface.layer-1 | 10.00:1 AAA | 13.28:1 AAA |
| fg.muted | surface.layer-1 | 6.53:1 AA | 6.33:1 AA |
| fg.numeric | surface.layer-1 | 20.45:1 AAA | 19.67:1 AAA |
| fg.inverse | surface.inverse | 19.67:1 AAA | 18.84:1 AAA |
| status.success-fg | status.success-bg | 9.23:1 AAA | 11.70:1 AAA |
| status.warning-fg | status.warning-bg | 8.69:1 AAA | 11.91:1 AAA |
| status.critical-fg | status.critical-bg | 9.38:1 AAA | 11.09:1 AAA |
| status.info-fg | status.info-bg | 9.04:1 AAA | 11.54:1 AAA |
| status.accent-fg | status.accent-bg | 9.47:1 AAA | 11.54:1 AAA |