Cobalt UI

CLI for managing Design Tokens Community Group (DTCG) token manifests (tokens.json) and generating code for any platform via plugins.

Usage

Install:

npm i -D @cobalt-ui/cli

And place a tokens.config.mjs file in the root of your project. Here are all the options, along with defaults:

// tokens.config.mjs

/** @type {import("@cobalt-ui/core").Config} */
export default {
  /** path to tokens.json */
  tokens: "./tokens.json",
  /** output directory for generated code*/
  outDir: "./tokens/",
  /** plugins to generate different outputs */
  plugins: [],
};

Commands

All CLI commands require a config to work properly, with the exception of co check and co convert.

npx co [command]

| Command | Notes | | :---------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | build | Turn design tokens into output files using [plugins]((https://cobalt-ui.pages.dev/docs//integrations). You can watch for changes in dev mode with build --watch. | | bundle --out [path] | Bundle multiple tokens.json files into one, e.g. co bundle --out path/to/output.json. Can output .json or .yaml. Requires multiple schemas set in config | | check [path] | Validate a tokens.json file and check for errors. This won’t output any files. | | init | Create a starter tokens.json file. | | convert [path] --out [path] | Convert a Style Dictionary JSON file to DTCG (docs) |

Plugins

Plugins are the entire purpose of using Cobalt! See the plugin documentation for instructions on getting started.

Documentation

See Documentation