JaBB Design Tokens (@jabb/tokens)

Single source of truth exported from Figma (Token Studio) → multi-platform outputs.

Current Status

Phase 1 - Token Pipeline GA ✅ Complete: Token build, test, and publishing pipeline implemented with comprehensive test suite.

Install

pnpm add @jabb/tokens

Usage – Web / Tailwind

/* globals.css */
@import "@jabb/tokens/dist/web/tokens.css";

// tailwind.config.cjs
const preset = require("@jabb/tokens/dist/web/tailwind-preset.cjs");
module.exports = { presets: [preset], content: ["./app/**/*.{ts,tsx}"] };

Architecture

• Source: tokens.json exported from Figma Token Studio
• Build: Style Dictionary transforms to multiple platforms
• Output: CSS variables, Tailwind preset, TypeScript definitions
• Distribution: Published as @jabb/tokens npm package

Testing

npm run build    # Build tokens from tokens.json
npm run test     # Run test suite
npm publish      # Publish to npm registry

CI Status

Badge

Last Updated: 2025-08-29