Barra do Extract — Um Formato Só de Botão
Uma barra de ferramentas com três formatos de botão não parece "rica": parece montada por pessoas diferentes que não se falaram. E o problema não é só de gosto — botões de alturas diferentes na mesma fileira ficam visivelmente desalinhados, porque centralizar itens de tamanhos distintos não os iguala.
No , a barra do topo — a mesma no editor Avançado, no Assistente e na tela de preparação de dados — tem um formato de controle só e uma linha só.
O controle canônico
Todo item da barra é uma pílula: cantos totalmente arredondados, texto de 12px em negrito, ícone de 14px à esquerda quando houver, e 32px de altura (44px em telas de toque). A referência é o par Assistente / Avançado, o seletor que já tinha esse formato.
| Propriedade | Valor | Token M3 |
|---|---|---|
| Altura | var(--tb-alt) — 32px, 44px no mobile | — |
| Cantos | 999px (pílula) | — |
| Texto | 12px / peso 700 | --md-on-surface |
| Fundo (comum) | var(--bg2) | --md-surface-container-low |
| Borda (comum) | 1.5px solid var(--border) | --md-outline-variant |
| Fundo (primário) | var(--accent) | --md-primary |
| Texto (primário) | var(--md-on-primary) | --md-on-primary |
| Destrutivo | texto e borda em var(--red) | --md-error |
| Desabilitado | opacity:.4 + sem resposta ao clique | — |
.toolbar-btn{height:var(--tb-alt);padding:0 12px;border-radius:999px;font-size:12px;font-weight:700;border:1.5px solid var(--border);background:var(--bg2);color:var(--text)}
.toolbar-btn.primary{background:var(--accent);color:var(--md-on-primary);border-color:var(--accent)}Três famílias que viraram uma
| Antes | Agora |
|---|---|
| Assistente / Avançado — pílula segmentada, item ativo preenchido | mantido: virou a referência |
| BATCH / STREAM — pílula contornada, paleta e altura próprias | mesmo segmentado; o modo contínuo se distingue pela cor do item ativo (verde), não pela forma |
| Ações (Organizar, Desfazer, Refazer, Versões, Validar, Salvar, Agendar, Executar) — retângulos de canto médio, 13px | pílula, 12px, mesma altura dos demais |
Os selos de estado do pacote (ACTIVE, PAUSED, DRAFT) e o selo de pacote aberto seguem a mesma altura e a mesma forma: não são botões, mas dividem a fileira, e um selo mais baixo desalinharia tudo à direita dele.
Uma linha, sempre
A barra não quebra em duas fileiras. Quando o conteúdo não cabe:
- o nome do pacote encolhe primeiro (com reticências, nunca corte no meio da palavra);
- abaixo de 1600px de largura, os enfeites saem — o logotipo, o ícone de colaboradores e o traço separador. Nenhum deles é controle ou informação do pacote, e é isso que garante que Executar, o botão primário, continue visível;
- só então a barra rola na horizontal. Rolar mantém tudo alcançável; cortar, não — e o que o corte escondia eram justamente os botões da direita, os de ação.
Em telas de toque a barra continua em uma linha, com rolagem horizontal e alvos de 44px.
A regra que sustenta isso
As regras da barra vivem em uma folha de estilos só, extract-toolbar.css, e nenhuma página redefine botão de barra no CSS local.
Foi a violação dessa regra que produziu os três formatos: o mesmo bloco de CSS estava copiado em três lugares — as duas páginas do Extract e a folha do modo Assistente — e as cópias divergiram em altura, em raio de canto e em tamanho de fonte. Uma delas ainda usava seletor mais específico que as outras, então corrigir um lado nunca chegava no outro.
Ao criar uma tela nova que tenha barra de ferramentas do Extract: importe a folha compartilhada e use .toolbar, .toolbar-btn, .modo-switch e .toolbar-chip. Se faltar uma variante, acrescente-a na folha compartilhada — nunca como exceção local.
Veja também
- Padrão de caixas de texto
- Redesign 2026 — identidade visual
- Guia do DATTA Extract