Texto
Tokens de texto — hierarquia de leitura do mais forte ao mais suave, incluindo invertido.
Derivam da escala Neutral. Regras gerais no hub de Tokens.
Boas Práticas
Quando usar
Títulos e ênfase com `--ui-text-highlighted`.
Corpo e labels com `--ui-text`.
Legendas e metadados com `--ui-text-muted` / `--ui-text-dimmed`.
Texto sobre fundos invertidos com `--ui-text-inverted`.
Quando não usar
Texto principal com tokens muted/dimmed.
Combinações texto/fundo que prejudiquem contraste.
Opacidade manual no lugar de tokens alpha de texto.
Tokens
Tokens
| Token | Light | Dark |
|---|---|---|
| --ui-text-dimmed | neutral-400 | neutral-500 |
| --ui-text-muted | neutral-500 | neutral-400 |
| --ui-text-toned | neutral-600 | neutral-300 |
| --ui-text | neutral-700 | neutral-200 |
| --ui-text-highlighted | neutral-900 | White |
| --ui-text-inverted | White | neutral-900 |
Alpha
| Token | Light | Dark |
|---|---|---|
| --ui-text-muted-10 | alpha/500-10 | alpha/400-10 |
| --ui-text-muted-25 | alpha/500-25 | alpha/400-25 |
| --ui-text-highlighted-90 | alpha/900-90 | alpha/900-90 |
Guia de decisão
| Contexto | Token recomendado |
|---|---|
| Títulos, headings, ênfase máxima | --ui-text-highlighted |
| Corpo de texto, labels de formulário | --ui-text |
| Texto de apoio, subtítulos | --ui-text-toned |
| Metadados, timestamps, placeholders | --ui-text-muted |
| Caption, hint, texto auxiliar | --ui-text-dimmed |
| Texto sobre fundo invertido (tooltip, banner) | --ui-text-inverted |
Pareamentos recomendados
| Contexto | Background | Texto |
|---|---|---|
| Conteúdo principal | --ui-bg | --ui-text |
| Card / painel | --ui-bg-elevated | --ui-text |
| Metadado em card | --ui-bg-elevated | --ui-text-muted |
| Heading de seção | --ui-bg | --ui-text-highlighted |
| Tooltip / background invertido | --ui-bg-inverted | --ui-text-inverted |
Os pares são válidos em claro e escuro — cada token resolve automaticamente para a primitiva correta em cada modo. Consulte as páginas de cada família para ver os valores resolvidos.
Onde aparece
| Token | Componentes |
|---|---|
--ui-text-highlighted | UCard (título), UModal (heading), UBreadcrumb (item ativo) |
--ui-text | UButton (label), UInput (valor digitado), USelect (valor), UTable (células) |
--ui-text-toned | UBadge (outline), UAlert (texto secundário) |
--ui-text-muted | UInput (placeholder), UFormField (hint/label), UTable (header), UBreadcrumb |
--ui-text-dimmed | UPagination (itens inativos), estados desabilitados globalmente |
--ui-text-inverted | Tooltip, UBadge (solid neutro), UButton (primary solid) |