Package Exports

@cobalt-ui/plugin-css
@cobalt-ui/plugin-css/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@cobalt-ui/plugin-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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