Configura la apariencia con proveedores y tokens --lq-*.
Los colores, radios, materiales y animaciones se obtienen de las propiedades CSS --lq-* de @liquidify/tokens.
Theme, Material y Backdrop eligen conjuntos coherentes de valores para una parte de la interfaz.LiquidTokenProvider permite sustituir valores concretos de --lq-*.Theme se reexporta desde @liquidify/react. Material y Backdrop pertenecen a @liquidify/glass.
import { Theme } from "@liquidify/react"
import { Backdrop, Material } from "@liquidify/glass"
export function AppShell({ children }: { children: React.ReactNode }) {
return (
<Theme type="system">
<Material default="regular">
<Backdrop type="low">{children}</Backdrop>
</Material>
</Theme>
)
}| Proveedor | Prop | Valores | Valor predeterminado |
|---|---|---|---|
Theme | type | light, dark, system | light |
Material | default | frosted, regular, clear | regular |
Backdrop | type | static, low, high | low |
Se pueden anidar. El proveedor más cercano determina cada ajuste. Consulta Proveedores.
LiquidTokenProvider acepta un mapa tokens con propiedades --lq-* y las aplica a su raíz display: contents. Los descendientes las heredan mediante la cascada CSS. Las claves que no empiezan por --lq- se descartan.
import { LiquidTokenProvider } from "@liquidify/glass"
import { Button } from "@liquidify/react"
export function BrandedRegion() {
return (
<LiquidTokenProvider tokens={{ "--lq-color-accent": "rebeccapurple" }}>
<Button variant="borderedProminent">Continue</Button>
</LiquidTokenProvider>
)
}Las reglas existentes consumen estos valores. No necesitas estilos por componente ni aumentar la especificidad de los selectores.
Las claves internas tienen prioridad. Los demás valores se heredan del proveedor externo. Cada proveedor escribe únicamente sus propias claves:
import { LiquidTokenProvider } from "@liquidify/glass"
import { Slider } from "@liquidify/react"
export function NestedTokens() {
return (
<LiquidTokenProvider tokens={{ "--lq-color-accent": "teal" }}>
<LiquidTokenProvider tokens={{ "--lq-radius-control": "0.25rem" }}>
{/* accent: teal (inherited), radius: 0.25rem (own) */}
<Slider aria-label="Amount" defaultValue={0.4} />
</LiquidTokenProvider>
</LiquidTokenProvider>
)
}