Tabelas
Especificação de tabelas com sistema de opacidade relativa sobre slate. Funciona nos três modos sem ajustes.
Princípio
Tabelas usam opacidade relativa sobre slate em vez de cores fixas. Slate é escuro no modo claro e claro no modo escuro — qualquer percentual de opacidade gera contraste proporcional ao contexto.
Um único token com 3 níveis de profundidade (7%, 3%, 0%) que se adapta automaticamente. Zero configuração por modo.
Regras de aplicação
Nunca usar cores fixas
bg-white, bg-frost, bg-g10 proibidos em faixas alternadas e headers. Sempre opacidade sobre slate.
Última linha sem divisor
Aplicar last:border-b-0 para remover o divisor inferior da última linha.
Faixas começam com a mais escura
Linhas pares (0, 2, 4...) recebem bg-slate/[0.03], ímpares ficam transparentes.
Header hierarquicamente menor
Usa text-g60 (cinza secundário) em vez de text-slate, subordinando ao conteúdo.
WCAG condicional
Coluna WCAG só aparece se pelo menos um token tiver propriedade ratio. Tokens sem ratio exibem '—'.
Border-collapse
Usar border-collapse na <table> para evitar gaps duplos entre divisores.
Estrutura de camadas
| Camada | Token | Opacidade | Propósito |
|---|---|---|---|
| Container (borda) | slate/10 | 10% | Delimita a tabela, sutil mas visível |
| Header (fundo) | slate/[0.07] | 7% | Distingue cabeçalho do corpo |
| Faixa zebra (pares) | slate/[0.03] | 3% | Guia horizontal de leitura |
| Linhas ímpares | transparente | 0% | Herda fundo do card/página |
| Divisor entre linhas | slate/[0.06] | 6% | Separa linhas sem peso visual |
Tipografia
| Elemento | Font size | Peso | Cor |
|---|---|---|---|
| Cabeçalho (<th>) | 16px (text-base) | 600 (Semibold) | text-g60 |
| Célula de corpo (<td>) | 16px (text-base) | 400 (Regular) | text-slate |
| Célula de código / hex | 14px (text-sm) | 400 mono | text-g60 |
Espaçamento
| Propriedade | Valor | Observação |
|---|---|---|
| Padding de célula | px-5 py-3.5 (20px × 14px) | Mais respiro que 16×12 |
| Border radius container | 16px (rounded-2xl) | Token Large (§5) |
| Gap preview de cor | 12px (gap-3) | Entre swatch e label |
Referência CSS (Tailwind)
<div class="rounded-2xl overflow-x-auto border border-slate/10">
<table class="w-full text-base border-collapse">
<thead>
<tr class="bg-slate/[0.07]">
<th class="text-left px-5 py-3.5 text-base font-semibold text-g60 border-b border-slate/10">
Coluna
</th>
</tr>
</thead>
<tbody>
<tr class="bg-slate/[0.03] border-b border-slate/[0.06] last:border-b-0">
<td class="px-5 py-3.5 text-slate">Conteúdo</td>
</tr>
<tr class="border-b border-slate/[0.06] last:border-b-0">
<td class="px-5 py-3.5 text-slate">Conteúdo</td>
</tr>
</tbody>
</table>
</div>