• Couleurs : arrière-plans, texte, accents, séparateurs et actions.
• Typographie : polices, tailles, graisses et interlignage.
• Espacement et mise en page : espaces, breakpoints, zones d’interaction et couches.
• Forme et profondeur : rayons et ombres.
• Animation : durées et courbes.
• Matériaux : valeurs du verre et du moteur.

Consultez les noms exacts dans le fichier généré, sans les copier depuis le CSS interne.

.settings-stack {
  display: grid;
  gap: var(--lq-space-12);
  padding: var(--lq-space-16);
  color: var(--lq-color-fg-primary);
  border-radius: var(--lq-radius-14);
}

Modifiez les tokens documentés via la cascade ou LiquidTokenProvider. Limitez les changements à la région nécessaire :

import { LiquidTokenProvider } from "@liquidify/glass"

export function BrandedArea({ children }: { children: React.ReactNode }) {
  return (
    <LiquidTokenProvider tokens={{ "--lq-color-accent": "#5b5bd6" }}>
      {children}
    </LiquidTokenProvider>
  )
}

Seules les clés --lq-* sont acceptées. Leurs valeurs sont des chaînes CSS définies par l’application.

Utilisez tokens.json pour lire les valeurs depuis des outils, system-color-classes.css pour les classes de couleurs et liquidifyPreset depuis @liquidify/tokens/tailwind-preset pour Tailwind. Consultez le paquet.