Les fournisseurs sont facultatifs et peuvent être imbriqués. Sans eux, les composants utilisent les valeurs par défaut de la bibliothèque.

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 décrit la fréquence de changement du contenu derrière le verre. Il ne dessine pas d’arrière-plan et ne reçoit pas d’image. Utilisez static pour un contenu fixe, low pour les interfaces courantes et high pour un contenu qui change continuellement.

Le fournisseur le plus proche détermine chaque réglage. LiquidTokenProvider fusionne les objets imbriqués : les clés internes remplacent les clés externes. Les props propres au composant ont priorité lorsqu’elles existent.

@liquidify/react réexporte Theme. Importez Material, Backdrop et les fournisseurs avancés depuis @liquidify/glass.