CLI

The Cobalt CLI is the primary way to turn your Design Token Community Group (DTCG) design tokens into code. To install it to your project, run:

npm i -D @cobalt-ui/cli

Build

Most of the time you’ll be running the build command:

npx co build

This first validates your schema (and will error on any schema errors), then it generates code using your installed plugins.

INFO

If you end up with stale assets in outDir from old tokens or plugins no longer used, there’s not an option to clear out this directory on build (Cobalt doesn’t assume it owns this folder). However, there are easy-to-use tools such as del-cli you can run before each build.

Watch mode

To build your tokens as you work, add the --watch flag:

npx co build --watch

This watches for any changes in your tokens.json file, and automatically runs a build on any change. Useful for developing locally!

Validate

To only validate your tokens.json schema without loading plugins, run the check command:

npx co check [path]

This will show any errors and warnings in your schema. [path] can be ommitted if you only want to validate the file(s) set to token in your config file.

Lint

To lint your tokens.json and throw errors, run (requires linting plugins configured, such as lint-a11y):

npx co lint [path]

Bundle

To combine multiple tokens.json files into one, use the bundle command:

npx co bundle --out [path]

Be sure to specify a [path]!

Convert

The convert comand is useful for converting a foreign format to DTCG. Currently only converting from the Style Dictionary token format format is supported.

Style Dictionary Format

To convert from the Style Dictionary token format to DTCG, run:

npx co convert [input] --out [output]

See full guide

Init

You can initialize a placeholder tokens.json file with the init command:

npx co init

There’s not much here, but it can at least save a little typing.