@cobalt-ui/plugin-css

@cobalt-ui/plugin-css

Generate CSS from your design tokens using Cobalt.

Features

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

Basic Setup

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);
}

Docs

View the full documentation