@tidal-ds/tokens

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

npm install @tidal-ds/tokens
# or: pnpm add @tidal-ds/tokens

Usage

CSS variables

import "@tidal-ds/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 preset

// tailwind.config.ts
import preset from "@tidal-ds/tokens/tailwind";

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

Typed JS values

import { semantic, radius, spacing, gradients, shadows } from "@tidal-ds/tokens";

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

Raw JSON

import tokens from "@tidal-ds/tokens/json";

Package contents

| Export | What you get | |---|---| | @tidal-ds/tokens | Typed JS constants for every token | | @tidal-ds/tokens/css | CSS file with :root, .dark, and typography modes | | @tidal-ds/tokens/tailwind | Tailwind v3/v4 preset wired to the CSS vars | | @tidal-ds/tokens/json | Full structured snapshot |

License

MIT © Liquid AI