Borda
Tokens de borda — divisores e contornos que delimitam e reforçam hierarquia.
Derivam da escala Neutral. Regras gerais no hub de Tokens.
Boas Práticas
Quando usar
Divisores e contornos padrão com `--ui-border`.
Separadores discretos com `--ui-border-muted`.
Ênfase estrutural com `--ui-border-accented`.
Contornos em superfícies invertidas com `--ui-border-inverted`.
Quando não usar
Bordas com cor fixa fora dos tokens.
`border-accented` em excesso — dilui a hierarquia.
Borda como único indicador de estado (prefira tokens de feedback).
Tokens
Tokens
| Token | Light | Dark |
|---|---|---|
| --ui-border | neutral-200 | neutral-800 |
| --ui-border-muted | neutral-200 | neutral-700 |
| --ui-border-accented | neutral-300 | neutral-700 |
| --ui-border-inverted | neutral-900 | White |
Esta família não possui variantes alpha documentadas.
Guia de decisão
| Contexto | Token recomendado |
|---|---|
| Separador discreto, divisor interno em lista densa | --ui-border-muted |
| Contorno padrão de card, input, container | --ui-border |
| Hover de card, item selecionado, ênfase estrutural | --ui-border-accented |
| Contorno em background invertido (tooltip, banner) | --ui-border-inverted |
Pareamentos recomendados
| Contexto | Background | Borda |
|---|---|---|
| Card / painel padrão | --ui-bg-elevated | --ui-border |
| Separador de linha em tabela ou lista | — | --ui-border-muted |
| Card ou container com hover / foco | --ui-bg-elevated | --ui-border-accented |
| Elemento em background invertido | --ui-bg-inverted | --ui-border-inverted |
| Sidebar / área de apoio | --ui-bg-muted | --ui-border-muted |
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-border-muted | UTable (separadores de linha), UTabs (underline), Forehead |
--ui-border | UCard, UInput, USelect, UTextarea, UModal (divisores internos), CriterionInput |
--ui-border-accented | UInput (foco), UButton (outline hover), UCard (hover) |
--ui-border-inverted | Elementos sobre background invertido — Tooltip, banner |