Fundamentos

Vidro

Um desenho, três níveis. Onde vidro entra e onde nunca entra.

Comparar#

Mesmo fundo, mesmo desenho, três níveis de transparência. Escolha um e ele vale para barra, busca, popover, toast, sidebar e dock no produto inteiro.

Conta, CNPJ, ID…LiquidadoPIX

Pendente

Liquidado

Falhou

Base

branco 56→40% · blur 32 · sat 200%

Lê a cor de trás, não a forma. Mais sóbrio, mais corporativo.

Conta, CNPJ, ID…LiquidadoPIX

Pendente

Liquidado

Falhou

Mediano

branco 40→24% · blur 24 · sat 220%

A forma de trás aparece borrada. Brilho na quina superior.

Conta, CNPJ, ID…LiquidadoPIX

Pendente

Liquidado

Falhou

Intenso

branco 20→8% · blur 14 · sat 250%

Quase líquido: vê-se o que está atrás. Borda e brilho seguram a leitura.

Liquidado · 30 dias

R$ 809k

O dado fica no papel. O vidro ao lado só navega.

Mercado Aurora
PG-24A7-96F844
R$ 26,3 mil
Liquidado
Ótica Bela Vista
PG-24A7-724AA0
R$ 1,1 mil
Em análise
Farmácia Norte
PG-24A7-BAAEBC
R$ 10,3 mil
Pendente

Esta documentação também muda

O botão grava o nível no cookie hb-glass, a mesma chave do produto. A sidebar, a busca e os popovers desta página seguem na hora. Também dá para trocar no rodapé da sidebar.

Onde entra e onde nunca entra#

Vidro aqui

Barra de topo e cabeçalho móvel
Busca global e paleta de comandos
Popover de filtro e menu
Toast
Sidebar e dock (vidro noturno)

Nunca aqui

Tabela, formulário ou qualquer dado que precise ser lido com atenção
Diálogo de decisão (é papel sobre scrim)
Sobre foto sem scrim
Empilhado sobre outro vidro

Classes#

.hb-glass

Vidro claro. Barra, busca, popover, toast.

.hb-night-glass

Graffiti em vidro. Sidebar, dock.

.hb-glass-night

Vidro sobre noite. Chip e botão dentro da sidebar.

.hb-lens

Borda de luz azul nas quinas. Exige pai posicionado.

.hb-scrim

Véu de Graffiti com desfoque atrás de diálogo.

.hb-glass--base | --medio | --intenso

Fixa um nível num elemento, para comparar lado a lado.

tsx

<html data-glass="medio">          {/* nível global: base (padrão) | medio | intenso */}

<header className="hb-glass hb-lens">…</header>
<aside className="hb-night-glass">…</aside>
<div className="hb-glass hb-glass--intenso">só este</div>

Especificação#

Um desenho, dez variáveis. Os valores vêm de tokens (glass.base|medio|intenso.*).

Variáveis de vidro por nível
Variável	O que faz	base	medio	intenso
--g-top	Branco no topo (0–1)	0.56	0.4	0.2
--g-bottom	Canvas na base (0–1)	0.4	0.24	0.08
--g-blur	Desfoque do que está atrás	32px	24px	14px
--g-sat	Saturação: puxa a cor de trás	200%	220%	250%
--g-bright	Brilho do fundo	1	1.03	1.08
--g-edge	Luz da borda superior	0.95	1	1
--g-rim	Anel interno	0.5	0.62	0.75
--g-sheen	Reflexo diagonal na quina	0	0.35	0.6
--gn-alpha	Opacidade do vidro noturno	0.86	0.72	0.58
--gn-blur	Desfoque do vidro noturno	30px	26px	20px