Aplica colores semánticos en cada tema y nivel de contraste.
Los tokens semánticos conservan su función aunque cambie el valor con el tema, la plataforma o el contraste.
.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);
}bg-* y fg-*: jerarquía de fondos y primer plano.label-*: colores de texto desde primario hasta cuaternario.accent y action-*: énfasis interactivo y roles de acción.on-action-*: texto sobre superficies de acción.separator y contrast-floor: límites y contraste mínimo.system-*: colores del sistema en claro, oscuro y contraste aumentado.Prefiere roles semánticos. Usa el rol destructivo o un token de acción para acciones destructivas. Usa system-red solo cuando el rojo tenga significado propio.
Theme selecciona los valores claros u oscuros. IncreaseContrast cambia los colores compatibles sin modificar el motor de cristal.
import { IncreaseContrast, Theme } from "@liquidify/glass"
<Theme type="system">
<IncreaseContrast level="on">{children}</IncreaseContrast>
</Theme>No guardes colores resueltos en JavaScript si deben responder al tema. Deja que var(--lq-color-*) se resuelva al dibujar.