• Colores: fondos, texto, acentos, separadores y acciones.
• Tipografía: fuentes, tamaños, pesos e interlineado.
• Espaciado y distribución: espacios, breakpoints, áreas de interacción y capas.
• Forma y profundidad: radios y sombras.
• Movimiento: duraciones y curvas.
• Materiales: valores de cristal y motor.

Consulta los nombres exactos en el archivo generado, sin copiarlos del CSS interno.

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

Modifica los tokens documentados mediante la cascada o LiquidTokenProvider. Limita los cambios a la región necesaria:

import { LiquidTokenProvider } from "@liquidify/glass"

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

Solo se aceptan claves --lq-*. Sus valores son cadenas CSS definidas por la aplicación.

Usa tokens.json para leer valores desde herramientas, system-color-classes.css para clases de colores y liquidifyPreset desde @liquidify/tokens/tailwind-preset para Tailwind. Consulta el paquete.