Roadmap
s11. F10 — Material: vidro e metal
seed-ds-roadmap.md v2.53 · §s11seção 12 de 16s11-f10-material-vidro-e-metal-aberta-em-2026-09-12.md · MD5 ceb94011Título completo no canon: F10 — Material: vidro e metal ⚪ ABERTA em 2026-09-12 (veredito dele V-1 = B, MANIFESTO §204)
Por que existe. Pedido dele em 2026-09-12, verbatim: "Estou achando as telas criadas com o DS muito basicas, botoes, barras, menus etc. ta faltando alguma coisa. Faça uma pesquisa profunda sobre aplicação de liquid Glass metalizado em DS de grandes empresas, ou algo parecido. e gere 2 exemplos, um com o DS atual e outro com a aplicação das melhorias para eu comparar." A pesquisa e o par de telas estão em
09-pesquisa/material-vidro-metal-2026-09-12/(pesquisa.md · material.css · compositor.py); o diagnóstico medido: um material só para navegação e conteúdo, fundo sem luz, luz só no hero, estados chapados, quase nenhum movimento. Ele decidiu B — adotar a proposta inteira (mesma marca; muda material, profundidade e movimento), com o alcance marcado em 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 como é hoje (peça opaca) — aplicado como marcado, exposto a veto (MA-P4).
O que a pesquisa manda cuidar (fontes datadas no pesquisa.md): vidro é da camada de navegação, nunca do conteúdo denso (Apple, Fluent); opacidade ≥ 0,7 sobre fundo que não se controla (convenção de mercado); todo estado de sistema respeitado (sem
backdrop-filter, reduzir transparência, mais contraste, reduzir movimento → sólido/parado); a Apple recuou três vezes em um ano por legibilidade; Microsoft desliga acrílico em economia de bateria. E o que a folha não mediu: contraste efetivo sobre vidro (orender-contraste.mjsaborta em fundo composto) e custo de GPU no ERP real.
| brick | entrega | governa | custo declarado | estado |
|---|---|---|---|---|
| F10.1 | Tokens de material: --seed-mat-* no seed-tokens.json (DTCG) + gêmeo CSS + seed-tokens.md (v1.24): opacidade do vidro por tema, desfoque, saturação, especular, borda de vidro, sombras de vidro em camadas, luz do fundo, curvas do metal; e os fallbacks como regra escrita |
V-2 dele (80 % · 72 % · 18 px); piso ≥ 0,7 | 0,5 sessão | ✅ 2026-09-12 — 18 tokens no grupo semantic.mat (+2 derivados só do gêmeo: --seed-mat-glass, --seed-mat-glass-filter); seed-tokens.md v1.24 §3d; fallbacks executáveis no gêmeo (sem backdrop-filter, reduced-transparency, contrast: more, reduced-motion); adição pura — paridade-tokens.py 110 PASS · 0 FAIL, gêmeo 330 → 350 variáveis; o fundo com luz é derivado da rampa turquesa (os hex do estudo não existem na paleta e não entraram); o 20 % de metal do gate não virou valor (MA-P5). MANIFESTO §205 |
| F10.2 | Canon: seção "Material" no seed-componentes.md (a numerar depois da última viva) — onde vai vidro (barra superior, cartões, pílulas), onde vai metal (rail, ação primária, avatar), o que fica opaco (sidebar, tabela, lista densa, conteúdo), o fundo com luz, movimento com função e desligável, os fallbacks; regra de contraste do metal: gradiente só do token para o lado escuro |
pesquisa §1; CP20 (a tinta passa nos dois extremos) | 0,5 sessão | ✅ 2026-09-12 — seed-componentes.md v1.48 §93 "MATERIAL — vidro e metal", decisões MA1–MA12 (onde vai vidro · onde vai metal · o que fica opaco, sidebar inclusive · fundo com luz só na casca, mantendo surface-subtle declarado · micro-movimento desligável · fallbacks no token · régua RC obrigatória · emissão pelo módulo único · tinta de marca no vidro = -strong · nenhuma textura de período fixo · calibração por peça · alcance declarado), receitas por peça, medições da primeira aplicação e calibrações registradas; estado emitido · em gate (F10.4). Na mesma edição: errata E-CF-06 no §46 e a pendência SH-P9. MANIFESTO §206 |
| F10.3 | Régua: contraste rasterizado sobre vidro — renderiza a tela, apaga o texto (cor transparente), amostra os pixels atrás de cada caixa de texto e mede o pior pixel contra a tinta declarada; entra no rito (fechar.sh) para toda tela com data-material |
"quem cria um fundo novo cria a obrigação de medir o contraste sobre ele" (HV1) | 1 sessão | ✅ 2026-09-12 — 06-validacao/contraste/contraste-raster.mjs (contrato RC: duas capturas, com e sem texto; máscara de glifo por diferença, cobertura ≥ 0,5; pior pixel contra a tinta) + guardas/guarda-material.py no fechar.sh (9ª guarda) + cobaia provas/contraste-raster/ com placar escrito antes (reprova 1,22 e 3,38 exatos). Provada no canon: tela-painel 298/299 textos passam, pior pixel 4,60 = o mesmo par do contraste-composicao.mjs; tela-shell acusou o que nenhuma régua via — o rótulo do item ativo do rail vaza 1 px da pílula sobre o gradiente (2,08 → MA-P6). A MA-P1 foi medida (ver a tabela de pendências). Bloqueio da promoção a canon levantado; a F10.4 roda a régua em toda tela que ganhar data-material |
| F10.4 | Aplicação, lote 1: shell §46 + painel §48 pelos GERADORES (gen-shell.py, gen-painel.py), a camada de material emitida do token (nunca CSS copiado); régua F10.3 verde; gate visual nos dois temas |
V-3 | 0,5 sessão | 🔵 entregue em 2026-09-12, em aprovação — nasce 06-validacao/ferramentas/material_bloco.py (módulo único: tokens --seed-mat-* medidos no gêmeo, fallbacks extraídos verbatim, receita por peça); gen-shell.py v0.9 e gen-painel.py v0.16 emitem a camada e declaram data-material="vidro-metal" — as duas telas entram na régua RC do rito: 0 texto abaixo do piso nos dois temas (shell 71/71 · painel 298/298 claro e 299/299 escuro). O caminho até o zero mudou quatro coisas: MA-P6 consertado no gerador; a tinta de marca no vidro remapeada para text-brand-strong (9 textos em 4,42–4,49 → passam); tokens v1.25 (a luz do canvas escuro cai de 40/26 para 26/18 % — o micro-rótulo do KPI media 4,41); e a calibração por escopo, que não fazia nada (o var() resolve onde é declarado), passou a reemitir os tokens no escopo. Suítes próprias verdes (suite-shell 72·0, render-shell 34·0, suite-painel 146·0, render-painel 37·0, render-edicao 142·0, render-contraste 6·0, colisão 4·0, valor-gêmeo 2·0, forced-colors 4·0, TP1 2·0). Gate visual dele: folha com as duas telas nos dois temas, a calibração do rail (1 · 0,7 · 0,4 medidos: 4,73 · 5,38 · 5,86) e a sidebar (MA-P4) — endereço no MANIFESTO §206 e na memória da sessão. Vira ✅ com o veredito. MANIFESTO §206 |
| F10.5 | Aplicação, lote 2: as outras 7 telas com gerador (chat, gantt, lista/tabela, quadro, detalhe/referência, site); lote 3: as 7 telas SEM gerador (atividade, autenticação, busca, configurações, documento, onboarding) só depois do gerador delas (VT-P1/P3) |
regra §14.4 (edita-se o gerador) | 1 sessão + o brick VT | ⚪ |
| F10.6 | Vitrine e registry: página /material/ gerada (regra + render vivo + controles), @seed/theme ganha a camada, skill seed-ds herda por geração; desempenho medido em máquina de campo numa lista longa (MA-P2) antes de liberar vidro fora do chrome |
MK23 (qualquer IA acha, lê, cita, usa) | 0,5 sessão | ⚪ |
Pendências da fase (nascem aqui, com código):
| código | origem | o que é | dono | estado |
|---|---|---|---|---|
| MA-P1 | folha do gate, §4 "não medi" | contraste efetivo sobre vidro não foi medido por instrumento; a proposta NÃO vira canon sem a régua F10.3. MEDIDA em 2026-09-12 pela régua da F10.3 nos dois quadros do estudo (1180 × 800, 42 textos por tema, pior pixel atrás de cada glifo): sobre vidro e luz nenhum texto cai abaixo do piso em nenhum tema. O custo do material está nos rótulos brancos do rail sob o reflexo do metal — Projetos 7,47 → 4,79 · Obras 6,59 → 4,79 · Compras 7,26 → 5,17 · Finanças 7,06 → 5,42 (piso 4,5: margem de 0,29) — e no KPI com tinta em gradiente (13,72 → 7,53, piso 3,0). 27 de 42 textos perdem contraste no claro e 26 no escuro, todos acima do piso. O único FAIL (Comercial 2,08 → 2,67) é pré-existente do canon (MA-P6). Registro com as tabelas: 09-pesquisa/material-vidro-metal-2026-09-12/regua-raster-2026-09-12.md |
sessão | ✅ medida · o reflexo do rail (metal-sheen a 30 % no topo) é a primeira calibração da F10.4 |
| MA-P2 | pesquisa (Microsoft: acrílico é GPU-intensivo) | custo de backdrop-filter no ERP real (dezenas de cartões numa lista longa) não medido; vidro fora do chrome espera a medição em máquina de campo |
sessão | ⚪ aberta |
| MA-P3 | F10.5 | 7 das 16 telas de referência não têm gerador (VT-P1/P3): a camada de material não pode entrar nelas sem antes nascer o gerador |
sessão · prioridade dele | ⚪ aberta |
| MA-P4 | V-3 dele | a sidebar não foi marcada em "onde aplicar"; fica opaca como hoje. Se foi esquecimento, uma palavra dele a inclui | ele | ⚪ exposta a veto |
| MA-P5 | V-2 dele | o "escovado" do rail (traço de 1 px repetido) virava moiré ao escalar — ele baixou o metal a 20 % por isso. Consertado em 2026-09-12 (o traço saiu; textura por grão + reflexo); a calibração final do metal por peça é da F10.4, com o render na mesa | sessão | ✅ consertada no estudo · calibração na F10.4 |
| MA-P6 | régua F10.3 aplicada ao canon (tela-shell.html, 2026-09-12) |
o rótulo do item ativo do rail ("Comercial", 11 px/800, caixa alta) vaza 1 px da pílula arredondada sobre o gradiente do rail: um pixel de glifo com cobertura total mede 2,08 (turquesa-900 sobre #006A60) — 0,4 % dos pixels do rótulo, nos dois temas. Invisível para o contraste-composicao.mjs (a pílula pinta cor opaca e a rota "cor declarada" não olha pixel). Evidência: 09-pesquisa/material-vidro-metal-2026-09-12/evidencia-raster/rail-comercial-1px-6x.png. Conserto em gen-shell.py (pílula mais larga, ou rótulo menor) no lote 1 da F10.4, que já toca o shell — nunca no HTML |
sessão | ✅ fechada em 2026-09-12 (F10.4): medido antes de mexer — "COMERCIAL" a 800 media 71,5 px num item de 72 px (o papel micro passou a 11 px na v1.14 e a conta do SH3 era de 9 px); conserto no gen-shell.py v0.9 (o rótulo consome o tracking do papel, −0,2 px → 67,7 px; max-width: 72px como rede), errata E-CF-06 no §46; régua RC: shell sem texto abaixo do piso nos dois temas; render-shell 34·0 |
| SH-P9 | F10.4 (medição do MA-P6) | o shell e o painel pedem font-weight: 800 (rótulo ativo do rail, KPI, botão da solução, sujeito do hero) e os moldes só carregam Montserrat 400/500/600/700 — não há ExtraBold em 03-assets/fontes/montserrat/: o navegador sintetiza o 800 a partir do 700 (medido: 700 e 800 têm o mesmo avanço, 69,52 px). A guarda TP1 não vê (mede se as faces declaradas carregam, não se os pesos pedidos têm face). Saídas com custo no §46 do seed-componentes.md v1.48: (a) trazer o ExtraBold e re-medir o rail; (b) baixar os 800 para 700 |
sessão · veredito dele | ⚪ aberta |