Colors

Apply semantic Liquidify color tokens across themes and contrast modes.

Use semantic color tokens for application surfaces and text. Their meaning remains stable while the resolved value can change with the active theme, platform build, or increased-contrast scope.

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

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

Main groups

bg-* and fg-* establish the surface and foreground hierarchy.
label-* supplies theme-aware primary through quaternary text colors.
accent and action-* cover interactive emphasis and action roles.
on-action-* supplies foreground colors matched to action surfaces.
separator and contrast-floor support boundaries and minimum contrast.
system-* exposes named system colors with light, dark, and increased-contrast values.

Prefer a semantic role over a literal system color. A destructive action should use the component's destructive role or an action token; system-red is appropriate only when red itself carries application meaning.

Theme and contrast

Theme selects the light or dark token branch. IncreaseContrast switches eligible semantic colors to their increased-contrast values without modifying the glass engine itself.

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

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

Do not cache a resolved CSS value in JavaScript when it needs to respond to either scope. Let var(--lq-color-*) resolve at paint time.