Cada tabela do catálogo na versão AdsTable, com dados de exemplo. A casca é a mesma: cor, borda, raio e a fonte de 14px no cabeçalho e na célula.
Decisões
Duas variantes, a mesma casca. Muda a zebra. Cor, borda, raio e fonte não mudam de uma tabela para outra.
Cabeçalho
Fundo neutral-100 (#F0F3F6). Texto secondary, 14px bold — o mesmo --ads-font-size-xxs da célula, com --ads-font-weight-bold.
Célula
Fundo surface-card. Texto secondary, 14px regular (--ads-font-size-xxs, --ads-line-height-md). O nome da linha é bold em text-primary, no mesmo tamanho.
Coluna fixa
column-pinning do UTable, com a largura igual ao size. Primeira coluna à esquerda e ação ou total à direita, conforme a tabela.
Célula preenchida
O fundo ocupa o td inteiro (data-cell-fill), com os tokens de faixa: button-secondary ou warning-100. Não é um chip dentro da célula.
Borda
1px em border-subtle em todo lugar, inclusive entre células e no topo do rodapé. borders: lines (só horizontal) ou grid (horizontal e vertical).
Nível
Propriedade depth. Ligada, a linha vai de neutral-200 a neutral-100 e surface-main. Desligada, fica surface-card.
Busca
AdsTableToolbar: título à esquerda, AdsSearchInput e o slot de AdsFilterSelect à direita.
Raio
radius-md (12px). Dentro de AdsCard, framed false: o card já é a moldura.
Zebra
Só na Grade. Linha par em surface-main. A Lista não listra.
Lista
Loja
Status
Total
Loja Centro
Concluída
100,3%
Loja Batel
Concluída
105%
Loja Joinville
Pendente
95%
Grade
Loja
Status
Total
Loja Centro
Concluída
100,3%
Loja Batel
Concluída
105%
Loja Joinville
Pendente
95%
Seleção, árvore, mapa de calor e edição na linha são conteúdo da célula, não uma terceira casca. O papel da categoria usa AdsFilterSelect. Cabeçalho e célula usam o mesmo 14px (--ads-font-size-xxs); o cabeçalho é bold. Coluna fixa e célula preenchida continuam nas tabelas que já tinham isso.
Inventário
As treze tabelas em produção e a variante que cada uma passa a usar. O AdsTable implementa as duas.