@cobalt-ui/plugin-js

Generate JSON and JS (with TypeScript types) from your design tokens using Cobalt.

Features

• ✅ Universal JSON format makes it easy to consume tokens in any platform (including native/compiled code)
• ✅ Access all your design tokens safely and programatically in any frontend or backend setup
• ✅ Full support for token modes (e.g. light/dark mode)
• ✅ Automatic TypeScript types for strong typechecking (never have a broken style)

Setup

Install the plugin from npm:

npm i -D @cobalt-ui/plugin-js

Then add to your tokens.config.mjs file:

// tokens.config.mjs
import pluginJS from "@cobalt-ui/plugin-js";

/** @type {import("@cobalt-ui/core").Config} */
export default {
  tokens: "./tokens.json",
  outDir: "./tokens/",
  plugins: [
    pluginJS({
      /** output JS (with TS types)? boolean or filename (default: true) */
      js: true,
      /** output JSON? boolean or filename (default: false) */
      json: false,
    }),
  ],
};

The default plugin exports a plain .js with invisible .d.ts TypeScript declarations alongside it, which means you don’t have to configure anything whether using TypeScript or not.

And run:

npx co build

You’ll then get generated JS with a token() function you can use to grab token values:

import { token } from "./tokens/index.js";

// get default token
const red = token("color.red.10");

// get token for mode: dark
const redDark = token("color.red.10", "dark");

// cubicBezier + bezier-easing library
import BezierEasing from "bezier-easing";
const easing = BezierEasing(...token("ease.cubic-in-out"));

Docs

View the full documentation