Generate CSS from your design tokens using Cobalt.

Features

• ✅ 🌈 Automatic P3 color enhancement
• ✅ Automatic mode inheritance (e.g. light/dark mode)

Install the plugin from npm:

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

Then add to your tokens.config.mjs file:

// tokens.config.mjs
import pluginCSS from "@cobalt-ui/plugin-css";

/** @type {import("@cobalt-ui/core").Config} */
export default {
  tokens: "./tokens.json",
  outDir: "./tokens/",
  plugins: [pluginCSS()],
};

And run:

npx co build

You’ll then get a ./tokens/tokens.css file with CSS variables for you to use anywhere in your app:

/* tokens/tokens.css */

:root {
  --color-blue: #0969da;
  --color-green: #2da44e;
  --color-red: #cf222e;
  --color-black: #101010;
  --color-ui-text: var(--color-black);
}

View the full documentation