Verge — Registro de superfície `expressive` (entrada/auth espaçosa), aditivo

⚠️ RETIRADO em 2026-06-14 (no mesmo dia da ratificação)

Este RFC propôs um registro de densidade expressive (card de entrada sempre largo 960px, duas colunas, ação pill) pra casar o login do Google. Implementado, validado lado-a-lado e então retirado quando a comparação responsiva (divisor arrastado em várias larguras, a pedido do owner) revelou que o card do Google não é sempre largo — é responsivo: single-column compacto (~480px) em ≤896px e two-column (cresce ~840→900px) em ≥960px. Um registro "sempre espaçoso" + pill divergia do Google exatamente na meia-janela (onde o Google é single-column).

Substituído por: paridade responsiva direta no pkg/authui — um DOM que faz reflow single↔two-column no ponto de flip do Google (~900px), com a única divergência deliberada sendo a forma do botão (retângulo abaulado Verge, não pill). Sem data-density, sem tokens --exp-*. Normativo agora: themes/verge.kmd §R10 (reescrita). O floating-label (R10.4 da §R10 / ID-230) é a única peça desta proposta que sobreviveu.

O conteúdo abaixo fica como registro histórico da deliberação (as medições de R1 ainda são referência útil), mas não é normativo.

Resumo

Propõe adicionar ao Verge um registro de superfície expressive — um conjunto aditivo de tokens de geometria (largura de container generosa, ritmo vertical espaçado, escala de display maior, ação primária ancorada e — opção R6 — um raio pill escopado) para superfícies de entrada/onboarding (login, consent, signup, splash de produto). NÃO é um re-skin global: a densidade compacta-Adwaita da Verge (R3 da verge.kmd) permanece o default de toda UI de trabalho. O expressive é um peer opt-in da densidade default, do mesmo jeito que o design-RFC-012 adicionou sunken como peer da elevação.

A pergunta que originou este RFC: *"é possível ajustar o Verge pra contemplar as características do card de login do Google?". *Recomendação: SIM, via registro aditivo expressive — NÃO via override ad-hoc no CSS do login (drift), NEM via re-skin global da Verge (destrói a identidade Adwaita, R2 abaixo).*A própria verge.kmd R1 já reconhece "Expressive" como registro de linguagem de design (linha de evolução do Material: 1→2→3→Expressive→You); este RFC dá à Verge o seu.

R1 — Motivação (medido)

Comparação medida Google × Koder na tela de login identifier-first (ID-225), ambos full-width, dark, pt-BR (capturas em services/foundation/id/engine/_reference/parity-comparison/):

A geometria do Google é o que dá a sensação "espaçosa/premium" de entrada. A identidade (corradiifonte) é o que não queremos copiar — a Verge é, por definição (R1/R3 da verge.kmd), o "não-Material".

R2 — Por que NÃO inverter / re-skinar a Verge

A R1 da verge.kmd posiciona a Verge como a camada visual Koder em contraste direto com o Material; a R3 a ancora em Adwaita-compacto de propósito. Tornar a Verge globalmente espaçosa apagaria sua tese e teria blast-radius = toda UI Koder (koderkit + koderweb_kit + todas as superfícies) por causa de uma classe de telas de entrada. Viola D1 (abstração/escopo correto) e D10 (conformância) da architecture-quality.kmd. Rejeitado. O caminho correto é aditivo (como o design-RFC-012 fez com sunken).

R3 — O registro expressive (proposta de tokens)

Tokens NOVOS, escopados ao registro (prefixo --exp-), consumidos só por superfícies que optam por data-density="expressive" (ou classe .is-expressive). A densidade default da Verge fica inalterada.

[data-density="expressive"] {
  
  --exp-card-max:        960px;   
  --exp-card-pad:        56px;    
  --exp-col-gap:         64px;    
  --exp-col-left:        360px;   

  
  --exp-display:         2.25rem; 
  --exp-display-lh:      1.15;
  --exp-display-weight:  400;     

  
  --exp-action-anchor:   end;     

}

Decisões abertas pra ratificação (owner)

• R3.a — Largura: --exp-card-max = 960 (recomendado, generoso sem extremo)

  ou 1040 (paridade literal com o Google)?

• R6 — Botão pill: o registro expressive adota um --exp-radius-action: 9999px

  (pill, como o Material Expressive faz) só para a ação primária dessas superfícies, ou mantém o --radius-btn Verge (12px)? Pill é coerente com o nome "expressive" e NÃO força pills em nenhuma outra superfície.

• R3.b — Ação ancorada: adotar o padrão Google de ação primária *ottom-right

  do card*(--exp-action-anchor: end), ou manter a ação inline na coluna direita?

R4 — Abrangência

expressive é uma capacidade Verge disponível para qualquer superfície de entrada/onboarding. Consumidores iniciais: telas de auth do Koder ID (loginconsentsignupMFA, via `pkgauthui`). Aplicável também a splash/entrada de produtos. Não se aplica a UI de trabalho (listas, editores, dashboards) — essas ficam na densidade default.

R5 — Propagação (mecanismo já existente)

Tokens entram na hierarquia de tokens do KDS (design-RFC-007 seed→map→alias) e são distribuídos cross-language (design-RFC-006) — koder_web_kit [data-style="verge"] ganha o bloco [data-density="expressive"]; o authui/static/css/auth.css (que inlina os tokens Verge) passa a consumir --exp-* na .auth-split. Zero override local; tudo vira token.

R6 — Versionamento

expressive é aditivo — não bumpa Verge para v2 (não muda o default). Entra como capacidade de superfície da Verge v1, documentada numa nova regra da verge.kmd (§R-expressive) + esta RFC. Reversível: remover o bloco [data-density="expressive"] volta tudo ao default compacto.

Plano de implementação (pós-ratificação)

1. Adicionar §R-expressive à themes/verge.kmd + o bloco de tokens (valores

   ratificados em R3.aR6R3.b).

2. Propagar via KDS (seedmapalias + cross-language) → koder_web_kit.
3. Aplicar data-density="expressive" nas telas pkg/authui (auth split) +

   consumir --exp-*; título display, largura, ação ancorada/pill conforme ratificado.

4. Build + deploy oauth/gateway; medir headless contra o Google de novo (fechar a

   paridade de geometria de verdade); atualizar _reference/parity-comparison.

Acceptance

• Verge ganha um registro expressive aditivo, default compacto inalterado.
• A tela de login consome os tokens (sem override) e, medida contra o Google,

  bate na geometria (larguraritmodisplay/ação) mantendo identidade Verge.

• Tokens propagados via KDS (não hardcode no authui).

Status

ratified (2026-06-14, rodrigo@koder.dev) com as recomendações: R3.a=960px, R6pill (só ação primária expressive), R3.bação ancorada bottom-right. Implementado em verge.kmd §R10 + authui (ID-227).