Foundation · Lumina
Materials
O vidro do Lumina é translúcido, mas nunca leitoso. Ele revela o que está atrás o suficiente para criar profundidade, sem nunca atrapalhar a hierarquia.
Hierarquia por blur
Quatro intensidades de vidro. Combine bg-background/[60 a 90] com backdrop-blur-*, sempre nessa ordem.
blur-smleve
blur-mdpadrão
blur-lgforte
blur-xlfrosted
Regra prática
Use vidro onde houver mudança de hierarquia: header, popover, control center, dialog. Nunca em conteúdo pesado de leitura.
Header global
blur-md · 80%
Popovers e control centers
blur-xl · 80 a 90%
Sheets e drawers
blur-md · 90%
mais opaco, mais sólido
Dialogs
blur-sm · no overlay
conteúdo opaco