terrazzoapp
@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-cssThen 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 buildYou’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);
}