# Diálogo de vidro escuro — borda angular, brilhos que atravessam peças translúcidas

Aprendido em 2026-09-24 replicando em vetor o diálogo de permissões "Just a
minute..." que no arquivo `<figma-ds>` existia só como imagem
1199×900 (nó `218:39`); réplica em `226:38`. Spec e scripts em
`~/Documents/Profissional/replicas/nash-ds-permission-dialog/`. Renderizado e
visto lado a lado com a referência; diferença média de 4,2/255 no cartão.

- **A borda de 1 px que muda de cor é um degradê angular amostrado no
  perímetro.** Andar o contorno arredondado, pegar o pixel mais claro na
  normal e virar 146 paradas: topo claro à esquerda, azul embaixo, menta e
  verde nos lados, tudo numa pintura só. No Figma a posição 0 fica à direita
  e cresce no sentido horário, no espaço normalizado do nó.
- **Brilho é gaussiana 2D ajustada no excesso do canal.** Para o verde,
  `G − (R+B)/2` isola o brilho da luz neutra; uma busca em grade dá centro,
  σx, σy e amplitude, e a amplitude vira alfa pela cor da fonte (a chave
  `#22AE31`). Pintado como degradê radial com 11 paradas gaussianas (raio =
  3σ), sem desfoque de camada.
- **Luz em platô com cantos cheios é separável.** Perfis horizontais iguais
  em alturas diferentes denunciam f(x)·g(y); faixa horizontal com máscara
  vertical de alfa reproduz. O radial elíptico errou os cantos em 5 níveis.
- **Peça cuja cor muda com o fundo é branco com alfa.** O ladrilho do
  microfone esverdeava e o da câmera não; com branco 6% o brilho verde passa
  por ele e fecha a diferença. Sombra sob peça translúcida pede
  `showShadowBehindNode: false`, ou escurece o miolo.
- **Correlação acha a fonte e o tamanho; o peso sai da massa de tinta.** Be
  Vietnam Pro ganhou entre 50 famílias renderizadas no próprio Figma. A
  correlação preferiu Medium nos rótulos; a massa deu Regular, e a espessura
  da haste do título (5,05 px) deu SemiBold. No cartão "Chart" a mesma medida
  subiu um peso: o método decide, a direção depende da fonte.
- **Glifo mais largo na fonte original se compensa com espaçamento por
  letra.** Medir o início de cada glifo contra a referência e aplicar
  `setRangeLetterSpacing` só nas letras que empurram as seguintes.
- **Conota**: verde só no que está ligado, e ele vaza pra borda como luz;
  azul só na ação que avança; o resto é vidro fosco sem cor.