Configura el tema, material, fondo, contraste y tokens.
Define valores generales con proveedores. Usa una prop local cuando una superficie necesite un tratamiento distinto:
import {
Backdrop,
IncreaseContrast,
LiquidTokenProvider,
Material,
Theme,
} from "@liquidify/glass"
import "@liquidify/glass/glass.css"
export function ProductEnvironment({ children }: { children: React.ReactNode }) {
return (
<Theme type="system">
<Material default="regular">
<Backdrop type="low">
<IncreaseContrast level="auto">
<LiquidTokenProvider tokens={{ "--lq-color-accent": "#5b5bd6" }}>
{children}
</LiquidTokenProvider>
</IncreaseContrast>
</Backdrop>
</Material>
</Theme>
)
}Usa frosted para fondos complejos o texto que necesite mayor separación; regular para interfaces habituales; y clear para fondos tranquilos que sigan siendo legibles.
<Material default="regular">
<GlassPrimitive as="nav">…</GlassPrimitive>
<GlassPrimitive as="aside" material="frosted">…</GlassPrimitive>
</Material>La prop material del componente tiene prioridad sobre el proveedor.
Backdrop no dibuja un fondo. Indica la frecuencia de cambio del contenido existente:
static: contenido fijo.low: interfaces habituales.high: vídeo o animación continua.Limita high a la región que lo necesite.
Usa LiquidTokenProvider para configurar una región en ejecución y CSS para regiones definidas por selectores. Pasa solo claves --lq-* y prefiere tokens semánticos como --lq-color-accent.
Consulta Materiales y Colores.