Design tokens

Use Liquidify's public CSS variables and machine-readable token artifacts.

Liquidify's packages share a --lq-* CSS custom-property vocabulary generated by @liquidify/tokens. The aggregate React stylesheet includes the token cascade; install the token package directly only when a non-component surface needs the same vocabulary.

pnpm add @liquidify/tokens

import "@liquidify/tokens/variables.css"

Token families

Colors covers backgrounds, labels, accents, separators, actions, and system colors.
Typography covers font families, sizes, weights, line heights, and tracking.
Spacing and layout covers spacing, breakpoints, hit targets, opacity, and stacking.
Shape and depth covers radii and shadows.
Motion covers duration, easing, and interaction values.
Materials covers the public glass-material and engine values.

Use the generated artifact as the authority for exact names instead of copying a value from the library's internal CSS.

.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);
}

Override a scope

Override documented tokens through the cascade or LiquidTokenProvider. Keep overrides scoped so embedded surfaces and tests can exercise the default contract.

import { LiquidTokenProvider } from "@liquidify/glass"

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

Only --lq-* keys are accepted by LiquidTokenProvider. Values are application-owned CSS strings.

Other formats

@liquidify/tokens/tokens.json provides the generated machine-readable manifest.
@liquidify/tokens/system-color-classes.css provides generated system-color classes.
@liquidify/tokens/tailwind-preset exports liquidifyPreset for Tailwind configuration.

See the @liquidify/tokens package page for entry-point details.