3d. Material — vidro e metal

Para quem lê sem ter visto a conversa. Em 2026-09-12 o Rafael escreveu que as telas feitas com o DS estavam "muito básicas, botões, barras, menus etc. ta faltando alguma coisa" e pediu pesquisa sobre "liquid Glass metalizado em DS de grandes empresas" com dois exemplos para comparar. A pesquisa (13 fontes datadas) e o par de telas estão em 09-pesquisa/material-vidro-metal-2026-09-12/; o veredito dele, verbatim, no MANIFESTO §204: V-1 = B (adotar a proposta inteira), V-2 opacidade 80 % claro · 72 % escuro · desfoque 18 px · movimento ligado, V-3 fundo com luz · barra superior em vidro · rail em metal · cartões em vidro · botões primários em metal · números KPI com brilho · barras e pílulas com luz · micro-movimento (a sidebar NÃO foi marcada e fica opaca — MA-P4, exposta a veto). Esta seção é o que a F10.1 do roadmap entrega: a camada vira tokens, para o gerador de cada tela emitir o material a partir deles (F10.4) — nunca CSS copiado (regra da casa: uma fonte).

Mesma marca. Cor, tipografia e logo continuam os do DS. Aqui só muda material (translucidez, desfoque, luz de borda, acabamento metálico), profundidade (sombras em camadas, fundo com luz) e movimento (dois micro-movimentos, desligáveis).

⚠ Token existir não é permissão de uso — é o que permite MEDIR. A folha do gate declarou "não medi" o contraste efetivo de texto sobre vidro (MA-P1): o instrumento da casa lê o fundo por CSS e um fundo de vidro é composição de pixel. A F10.3 entrega a régua rasterizada (renderiza, apaga o texto, amostra os pixels atrás de cada caixa de texto, mede o pior pixel contra a tinta declarada) e bloqueia a aplicação: nenhuma tela do acervo consome --seed-mat-* até a régua medir. HV1-c do seed-componentes.md §71: "quem cria um fundo novo cria a obrigação de medir o contraste sobre ele."

Os 18 tokens (grupo semantic.mat do JSON) e os 2 derivados do gêmeo#

Como se compõe (a receita que a F10.4 emite do token, por peça):

• Vidro (barra superior, cartão, pílula): background: var(--seed-mat-glass) · backdrop-filter: var(--seed-mat-glass-filter) · box-shadow: 0 0 0 1px var(--seed-mat-glass-border), var(--seed-mat-glass-shadow) (no sobrevoo, -hover). O grão (--seed-mat-grain) entra como camada por cima em mix-blend-mode: soft-light.
• Metal do rail: background: var(--seed-mat-grain), var(--seed-mat-metal-specular), var(--seed-mat-metal-sheen), var(--seed-mat-metal-curve), var(--seed-rail-background) · box-shadow: var(--seed-mat-metal-edge). ⚠ v1.26 (F10.5, 2026-09-13): a luz do topo do metal-sheen caiu de 30 % para 8 % (some a 18 % da altura). A F10.4 mediu o rail do shell, cujo item ATIVO ocupa a primeira posição — a pílula clara cobria a faixa mais clara da luz e o pior rótulo branco ("Compras", 4,73) estava na terceira; nas sete telas seguintes o primeiro rótulo é branco e media 3,25 a 4,27 (12 medições, piso 4,5), e o shell com a pílula removida por variante reprova igual (3,62). Foi ponto cego da primeira medição, não mudança de gosto: a regra de contraste do metal (abaixo, e MA2 do §93) já proibia luz onde há texto.
• Metal da ação primária: a cor continua o token de ação; background-image: var(--seed-mat-metal-action) · box-shadow: var(--seed-mat-metal-action-edge).
• Fundo com luz: background: var(--seed-mat-canvas) na casca da aplicação.
• Calibração: --seed-mat-metal é o único botão, com o render e a régua na mesa. ⚠ Errata v1.25 (medida na F10.4, 2026-09-12): esta linha dizia "a F10.4 pode sobrescrevê-lo no escopo de um componente" — não basta: o var() dentro do valor de uma custom property é resolvido no elemento onde ela é declarada (o :root), não onde é consumida; --seed-mat-metal-sheen já nasce com o multiplicador resolvido em 1, e um .rail { --seed-mat-metal: .7 } não alcança nada (a régua devolveu os mesmos números em 1, 0,7 e 0,4 até o conserto). A calibração por peça reemite no escopo os tokens que multiplicam pelo botão, com o texto lido do gêmeo — é o que 06-validacao/ferramentas/material_bloco.py (calibracao_metal()) faz. A alternativa de declarar esses tokens em * em vez de :root (o var() resolveria por elemento) foi descartada: sairia da paridade G2, que lê o :root.

Regra de contraste do metal (vai ao canon na F10.2): o gradiente metálico só vai do token para o lado escuro onde há texto. Motivo medido: a tinta branca sobre action-primary já mede 4,60 no claro, que é o piso — clarear qualquer extremo reprovaria (CP20: a tinta passa nos dois extremos, não na média).

Os fallbacks — regra escrita E executável#

A pesquisa manda respeitar todo estado de sistema (a Apple recuou três vezes em um ano por legibilidade; a Microsoft desliga o acrílico em economia de bateria; NN/g 2025). Aqui a regra vive no gêmeo CSS, no próprio token, então nenhum consumidor precisa lembrar de escrever a media query:

O seletor dos blocos de fallback é :root, :root[data-theme]: cobre os três estados de tema (sem atributo, claro forçado, escuro forçado) com especificidade igual ou maior que a dos blocos de tema, e vence por vir depois no arquivo.

O que NÃO entrou, e por quê#

• O "escovado" de 1 px da v1 do estudo (traço repetido a cada 2 px): virava moiré quando a tela era vista em escala e listra visível a 100 % — foi o que ele viu no gate ("cria várias linhas verticais paralelas"). Textura de período fixo em pixel não sobrevive a escala; grão aleatório e reflexo contínuo sobrevivem (MA-P5).
• O 20 % de metal que ele deixou no controle: era reação ao defeito acima, não preferência — ele mesmo escreveu "acredito que testes e medições vc vai achar o que é melhor para cada caso". --seed-mat-metal nasce em 1 e a calibração por peça é da F10.4.
• Os hex do fundo do estudo (#E9F1F4 → #DDE8EE no claro, #0B1419 → #08100E no escuro): não existem na paleta. O canvas é derivado de token em todas as paradas (§14.1: valor que não está no canônico não se cria). A diferença de tom vai à mesa no gate visual da F10.4, com o render.
• Um token de "luz" (--mat-luz do estudo): ele deixou em 100 % e a intensidade está dentro do canvas; um multiplicador a mais seria botão sem decisão.