@liquidai/tokens

Design tokens for the Tidal design system — CSS variables, Tailwind preset, JSON, and typed JS exports. Sourced from Figma.

npm install @liquidai/tokens
# or: pnpm add @liquidai/tokens

Usage

CSS variables

import "@liquidai/tokens/css";

Gives you --foreground, --background, --primary, --button-*, --radius-*, --text-*, --leading-*, --font-weight-*, etc. Two typography modes (.typography-internal default, .typography-external opt-in) and light/dark modes (.dark) are toggled via classes.

Tailwind v4 (CSS-first)

/* app/globals.css */
@import "tailwindcss";
@import "@liquidai/tokens/css";    /* raw tokens: :root + .dark */
@import "@liquidai/tokens/theme";  /* maps them into v4's --color-*, --radius-*, … */

@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  /* v4 defaults border-color to currentColor, which reads as a white outline
     in dark mode. Point it at the token instead. */
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    border-color: var(--border-default);
  }
}

Import theme after css. Both files define names in v4's namespaces, and v4 hoists @theme output above imported CSS — the theme uses @theme inline for the handful that genuinely conflict so the cascade can't clobber them.

Note that v4 slid the size scale down a step: v3's bare rounded is v4's rounded-sm, and v3's rounded-sm is v4's rounded-xs (same for shadow). Pixel values are unchanged — only the class names move.

Tailwind v3 (JS preset)

// tailwind.config.ts
import preset from "@liquidai/tokens/tailwind";

export default {
  presets: [preset],
  content: ["./app/**/*.{ts,tsx}"],
};

Both entries are generated from the same source in scripts/build.ts, so they cannot drift.

Typed JS values

import { semantic, radius, spacing, gradients, shadows } from "@liquidai/tokens";

semantic.button.primary.fill.light; // "#cd82f0"
radius.md;                          // "8px"
gradients["button-primary"];        // "linear-gradient(...)"

Raw JSON

import tokens from "@liquidai/tokens/json";

Package contents

| Export | What you get | |---|---| | @liquidai/tokens | Typed JS constants for every token | | @liquidai/tokens/css | CSS file with :root, .dark, and typography modes | | @liquidai/tokens/theme | Tailwind v4 @theme mapping (CSS-first) | | @liquidai/tokens/tailwind | Tailwind v3 JS preset | | @liquidai/tokens/json | Full structured snapshot |

License

MIT © Liquid AI