Liquid Glass Web

O que Liquid Glass Web faz?

Um sistema de design web que adapta o modelo de material Liquid Glass para navegadores. O conteúdo fica em uma camada opaca, e uma camada fina e translúcida de navegação e controles flutua acima dele. É uma adaptação independente das diretrizes públicas da Apple em "Adotando Liquid Glass". Não inclui fontes, símbolos ou ativos da Apple.

O que está nesta skill

Caminho	Uso
assets/tokens.json	Fonte da verdade: cores (temas light, dark, contrast), tipo, espaçamento, raio, tamanho, material, sombra.
assets/tokens.css	Propriedades personalizadas CSS compiladas e classes de tipo. Regenerar com scripts/build_tokens_css.py após alterar tokens.
assets/liquid-glass.css	Estilos de componente (classes lg-*). Independente de framework.
assets/liquid-glass.react.js	Bundle opcional para React 18 expondo window.LG (script clássico; precisa de window.React e window.ReactDOM).
assets/liquid-glass.d.ts	Props dos componentes, como documentação.
assets/example.html	Uma tela completa em HTML puro. Copie sua estrutura.
references/brand-book.md	Princípios, voz, cor, material, tipo, layout, movimento, iconografia, acessibilidade. Leia antes de projetar.
references/html-api.md	Marcação para cada componente sem React.
references/components/<Name>.md	Diretrizes por componente: o que o consumidor fornece, o que fazer e o que não fazer.
scripts/contrast_check.py	Verificação WCAG de cada par de tokens em cada tema, incluindo vidro no pior caso. Sai com código 1 em falha.
scripts/build_tokens_css.py	Compila tokens.json em tokens.css.

Fluxo de trabalho

A. Construir ou reformular uma UI

1. Leia references/brand-book.md e depois os arquivos de componente necessários em references/components/.
2. Copie assets/tokens.css e assets/liquid-glass.css para o projeto e carregue-os nessa ordem. Em projetos React, o bundle ou uma porta da marcação em references/html-api.md funcionam. Em outros frameworks, porte a marcação.
3. Organize duas camadas:
   • Conteúdo: opaco, em canvas e surface. Tudo que as pessoas leem vai aqui.
   • Vidro: apenas navegação e controles, flutuando sobre conteúdo rolável (barra de ferramentas, barra de abas, grupos, menus, folhas médias).
4. Use tokens por nome (var(--accent)). Nunca codifique uma cor, raio ou valor de espaçamento que um token cobre.
5. Execute a lista de verificação abaixo antes de finalizar.

B. Renovar a marca (nova cor de destaque ou neutros)

1. Altere apenas valores em assets/tokens.json. Mantenha os nomes dos tokens, pois o CSS depende deles.
2. Cada cor de destaque alterada precisa de seus acompanhantes em cada tema: accent, on-accent, accent-text, accent-glass, focus-ring. Se a cor de destaque do tema escuro for clara, on-accent deve ser escura.
3. Execute python3 scripts/contrast_check.py assets/tokens.json. Ajuste os valores até que imprima RESULT: PASS. Não enfraqueça os limites.
4. Execute python3 scripts/build_tokens_css.py assets/tokens.json > assets/tokens.css.
5. Mantenha os tokens de vidro (glass-fill, glass-edge, glass-lift, glass-blur) a menos que solicitado. A camada de vidro permanece incolor.

Regras inegociáveis

• Vidro apenas na camada funcional. Nunca em linhas de lista, cartões de conteúdo ou seções de página, e nunca vidro sobre vidro.
• Texto sobre vidro comum usa apenas ink, ink-glass-muted, accent-glass ou critical-glass. Nunca use ink-secondary, accent-text ou critical sobre vidro: eles falham sobre conteúdo escuro ou claro.
• Vidro claro (lg-glass--clear) apenas sobre fotos, vídeos ou mapas, com lg-dim abaixo. Apenas símbolos e rótulos em negrito 19px+ vão sobre ele.
• Um botão prominent por visualização. Todo controle é uma cápsula (radius-full). Raios aninhados são concêntricos: interno = externo − recuo.
• Áreas de toque têm pelo menos target-min (44px). Todo controle apenas com ícone tem um aria-label.
• Um status sempre emparelha um glifo e uma palavra; cor sozinha nunca carrega significado.
• Respeite prefers-reduced-transparency, prefers-contrast e prefers-reduced-motion. O CSS lida com eles; não sobrescreva.
• Não use SF Symbols da Apple, fontes ou logotipos da Apple. A pilha de tipos usa a fonte do sistema do dispositivo; o conjunto de ícones no bundle React é um placeholder original.

Lista de verificação antes de entregar

• Nenhum fundo personalizado atrás das barras; o conteúdo rola sob elas, com o efeito de borda de rolagem lg-edge onde as barras sobrepõem o conteúdo.
• Quantidade de vidro é pequena (barras, grupos, menus, folha). Nada mais é vidro.
• Telas verificadas em data-theme="light", "dark" e "contrast".
• Se os tokens foram alterados: contrast_check.py imprime PASS e tokens.css é regenerado.
• Teclado: todo controle é acessível e mostra o contorno focus-ring.
• Texto: frase inicial maiúscula em ações, Title Case apenas em cabeçalhos de seção de lista, verbo primeiro, sem emoji.