drwpow
@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-jsThen 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
.jswith invisible.d.tsTypeScript declarations alongside it, which means you don’t have to configure anything whether using TypeScript or not.
And run:
npx co buildYou’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"));