Configurez l’apparence avec les fournisseurs et les tokens --lq-*.
Les couleurs, rayons, matériaux et animations proviennent des propriétés CSS --lq-* de @liquidify/tokens.
Theme, Material et Backdrop choisissent des ensembles cohérents de valeurs pour une partie de l’interface.LiquidTokenProvider permet de remplacer des valeurs précises de --lq-*.Theme est réexporté depuis @liquidify/react. Material et Backdrop appartiennent à @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>
)
}| Fournisseur | Prop | Valeurs | Valeur par défaut |
|---|---|---|---|
Theme | type | light, dark, system | light |
Material | default | frosted, regular, clear | regular |
Backdrop | type | static, low, high | low |
Ils peuvent être imbriqués. Le fournisseur le plus proche détermine chaque réglage. Consultez Fournisseurs.
LiquidTokenProvider accepte un objet tokens contenant des propriétés --lq-* et les applique à sa racine display: contents. Les descendants les héritent via la cascade CSS. Les clés qui ne commencent pas par --lq- sont ignorées.
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>
)
}Les règles existantes utilisent ces valeurs. Aucun style par composant ni augmentation de la spécificité des sélecteurs n’est nécessaire.
Les clés internes ont priorité. Les autres valeurs sont héritées du fournisseur externe. Chaque fournisseur écrit uniquement ses propres clés :
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>
)
}