JSON + Native App Integration

Generate universal JSON from your Design Tokens Community Group (DTCG) tokens. This is usable by any platform, any language (provided you do a small amount of JSON parsing).

Setup

TIP

Make sure you have the Cobalt CLI installed!

This uses the JS plugin, which we’ll install 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 JSON? boolean or filename (default: false) */
      json: true, 
    }), 
  ],
};

And run:

npx co build

You’ll get a generated ./tokens/tokens.json file with the following structure:

Name	Type	Description
tokens	object	Object of token ID → value (all aliases resolved & all transformations applied)
meta	object	Object of token ID → metadata ($type, $description, etc.)
modes	object	Object of token ID → mode → values (note: tokens without any modes will be missing from the object)

Usage

Usage will vary depending on the platform and language, but here are a few examples:

• Simplifying iOS Apps Design with Design Tokens (this blog post uses Style Dictonary JSON, but the same ideas apply to DTCG JSON)

Config

The config options are the same as the JS plugin.

Transform

Likewise, the transform API is also the same as the JS plugin.