Couleurs

Appliquez les couleurs sémantiques selon le thème et le contraste.

Les tokens sémantiques gardent leur fonction même si leur valeur change avec le thème, la plateforme ou le contraste.

Code
.account-card {
  color: var(--lq-color-fg-primary);
  background: var(--lq-color-bg-secondary);
  border: 1px solid var(--lq-color-separator);
}

.account-card-action {
  color: var(--lq-color-accent);
}

Groupes principaux

bg-* et fg-* : hiérarchie des arrière-plans et premiers plans.
label-* : couleurs de texte du niveau primaire au quaternaire.
accent et action-* : accentuation interactive et rôles d’action.
on-action-* : texte sur les surfaces d’action.
separator et contrast-floor : limites et contraste minimal.
system-* : couleurs système en clair, sombre et contraste renforcé.

Préférez les rôles sémantiques. Utilisez le rôle destructif ou un token d’action pour les actions destructives. Utilisez system-red uniquement lorsque le rouge a une signification propre.

Thème et contraste

Theme sélectionne les valeurs claires ou sombres. IncreaseContrast modifie les couleurs compatibles sans changer le moteur de verre.

Code
import { IncreaseContrast, Theme } from "@liquidify/glass"

<Theme type="system">
  <IncreaseContrast level="on">{children}</IncreaseContrast>
</Theme>

Ne stockez pas les couleurs résolues en JavaScript si elles doivent répondre au thème. Laissez var(--lq-color-*) se résoudre lors du rendu.