Los proveedores son opcionales y se pueden anidar. Sin ellos, los componentes usan los valores predeterminados de la biblioteca.

import {
  Backdrop,
  LiquidTokenProvider,
  Material,
  Theme,
} from "@liquidify/glass"

export function AppEnvironment({ children }: { children: React.ReactNode }) {
  return (
    <Theme type="system">
      <Material default="regular">
        <Backdrop type="low">
          <LiquidTokenProvider tokens={{ "--lq-color-accent": "rebeccapurple" }}>
            {children}
          </LiquidTokenProvider>
        </Backdrop>
      </Material>
    </Theme>
  )
}

Backdrop describe la frecuencia de cambio del contenido detrás del cristal. No dibuja un fondo ni recibe imágenes. Usa static para contenido fijo, low para interfaces habituales y high para contenido que cambia continuamente.

El proveedor más cercano determina cada ajuste. LiquidTokenProvider combina los mapas anidados: las claves internas sustituyen las externas. Las props específicas del componente tienen prioridad cuando están disponibles.

@liquidify/react reexporta Theme. Importa Material, Backdrop y los proveedores avanzados desde @liquidify/glass.