3d. Material — vidro e metal

Em uma frase: Os 18 tokens da camada de material e os dois derivados; --seed-mat-metal é o único botão de calibração, e ele se resolve onde é DECLARADO.

Vocabulário desta seção: derivado

O que esta seção NÃO cobre: Onde vidro e metal vão, e onde não vão, é o seed-componentes §93; aqui vivem só os valores. — se é disto que você precisa, não preencha em silêncio: gere o pedido de cobertura (https://ds.seed.eng.br/pedidos/).

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 21 tokens (grupo semantic.mat do JSON) e os 3 derivados do gêmeo#

(Eram 18 e 2 até a folha 11 de 2026-10-18; os três últimos tokens e o terceiro derivado estão nas quatro linhas marcadas "folha 11" e no bloco logo abaixo da tabela.)

Folha 11 (2026-10-18) — vidro mais espesso no topo e vidro sobre imagem. O estudo MA-P8 (Liquid Glass da Apple × SEED, 2026-10-18) levou seis propostas à folha 11; o veredito dele, verbatim: MA1 = "a" — "sim — uma linha no gerador do material; no claro, o link da barra sai de 4,00 e as reprovações vão de 1 a 0"; MA2 = "a" — "sim, 92 % e véu 35 %"; MA3 = "b" (a borda de luz P1 fica para depois); MA4 = "b" (a borda de rolagem P3 e a régua de cantos P6 ficam para depois). O que mudou nos tokens:

• P2 (espessura): a tinta do vidro passa a ser um gradiente vertical de --seed-mat-glass-thick (alfa + 10 pontos, teto 100 %) no topo até --seed-mat-glass a 45 % da altura (a geometria é constante do material_bloco.py). O V-2 dele (80 % / 72 %) continua sendo o mínimo — a tinta só fica mais densa. Nos fallbacks (sem backdrop-filter, reduzir transparência, mais contraste) o alfa vai a 100 % e o min() segura o teto.
• P5 (sobre imagem): dois pares por tema: véu 0 % no claro e piso 82 % no claro (decisão da sessão, exposta a veto, 2026-10-18: o estudo mediu o claro sem a Montserrat embutida e achou que a P4 bastava; com a fonte real, a cobaia do DS dava 1 texto a 4,48 no claro com o vidro em 80 % — 81 % → 4,53 · 82 % → 4,66 · 84 % → 4,80; §93.4 do seed-componentes.md, "Terceira aplicação") e, no escuro, véu de 35 % na imagem e piso de 92 % no vidro. O piso entra por max(var(--seed-mat-glass-alpha), var(--seed-mat-glass-alpha-midia)) reemitido no escopo da peça (errata da v1.25: o var() resolve onde é declarado) — e o max() deixa o 100 % dos fallbacks vencer. Calibração do estudo (régua RC, prancha, 27 textos): 86/88/90/92 % × véu 35/45 %; 92 % / 35 % é a de menor custo visual com pior texto ≥ 4,6 (4,61). Sem a P2, o piso precisaria de 96 %.
• Como uma tela declara "vidro sobre imagem" é regra do canon (§93, cláusula MA13): data-mat-midia no elemento que pinta a imagem, data-mat-sobre="midia" em cada peça de vidro sobre ela.
• P4 (tinta de marca forte em todo vidro) não tem token novo: é o remapeamento da MA9 estendido à barra e à sidebar.

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) (desde a folha 11, 2026-10-18, na barra, na sidebar e no cartão: linear-gradient(180deg, var(--seed-mat-glass-thick) 0%, var(--seed-mat-glass) 45%) — P2; a pílula segue com a tinta do estado em --seed-mat-glass-alpha) · 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.