Caixas de Texto — Padrão Visual da Plataforma

Nada quebra mais a confiança em um produto do que cada tela ter um campo de texto diferente — um com fundo cinza, outro com canto quadrado, outro que nem avisa quando está em foco. No DATTA, toda caixa de texto segue um único padrão, herdado da barra de pesquisa da tela de entrada: você reconhece o campo, sabe onde está o foco e digita com a mesma experiência em qualquer página — do Chat aos consoles de administração.

Padrão canônico

Toda caixa de texto do DATTA (input de texto, textarea, select) segue o visual da barra de pesquisa da plataforma — a caixa da tela de entrada do chat, cuja classe canônica é .chat-input-container:

Propriedade	Valor	Token M3
Fundo	`var(--bg2)`	`--md-surface-container-low`
Borda	`1px solid var(--border)`	`--md-outline-variant`
Cantos	`var(--radius)` (12px)	`--md-shape-md`
Texto	`var(--text)`	`--md-on-surface`
Placeholder	`var(--text3)`	`--md-outline`
Foco	`border-color: var(--accent)` + anel `box-shadow: 0 0 0 3px var(--accent-soft)`	`--md-primary`
Transição	`border-color .15s, box-shadow .15s`	—

css

.exemplo-input{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);transition:border-color .15s,box-shadow .15s}
.exemplo-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.exemplo-input::placeholder{color:var(--text3)}

Onde o padrão é aplicado

Baseline global: a folha de estilos base da plataforma (m3-overrides.css, seção de inputs) estiliza input[type=text|email|password|number|search|url], textarea, select, .field-input e .key-input de todas as páginas que importam o tema padrão (theme.css). Uma página nova sem CSS local de input já nasce conforme — consistência de graça.
Console do Cluster: usa uma cópia própria da mesma folha de estilos — ao alterar a baseline, mantenha a cópia em sincronia.
CSS locais das páginas: regras locais podem adicionar layout (width, flex, padding, fonte mono para inputs técnicos), mas as propriedades de identidade visual (fundo, borda, cantos, foco) DEVEM repetir o padrão canônico.

Variantes aceitas

Barra "hero" destacada (busca central da tela de boas-vindas do chat e do upload): border-color: var(--border2) + box-shadow: var(--shadow-md) sobre a base — a mesma identidade, com mais presença.
Editores inline de título/renome (renomear um dashboard, um pipeline ou uma conversa — ex.: .pb-title-input, .pipeline-name-input, .conv-rename-input): fundo transparente ou compacto com underline/borda accent — não são caixas de texto de formulário.
Inputs técnicos (Cypher/DATTAX/JSON/R): fonte JetBrains Mono mantida; o restante do visual segue o padrão.

Exemplo prático

Ao criar uma página nova com um formulário:

Importe o tema padrão da plataforma no <head> — os campos input, textarea e select já saem com o visual canônico, sem CSS adicional.
Digite no campo e observe o foco: a borda ganha a cor de destaque e um anel suave aparece ao redor — é esse o comportamento esperado em toda a plataforma.
Se o campo for técnico (uma expressão DATTAX, por exemplo), adicione apenas font-family: 'JetBrains Mono' — nada mais muda.

Anti-patterns (rejeitar em review)

Fundo var(--bg) (o chao da pagina), var(--bg3)/var(--bg4) ou cor hardcoded em caixa de texto. O fundo correto e var(--bg2) (--md-surface-container-low): --bg deixou de ser igual a --md-surface e um input pintado com ele some no chao, sem erro nenhum.
border-radius: var(--radius-sm)/var(--radius-xs)/px fixo em caixa de texto.
:focus sem anel accent (só troca de borda) ou com anel hardcoded (rgba(59,130,246,...)).
Estilizar input novo do zero em vez de herdar a baseline da folha de estilos da plataforma.