Generate .scss and .sass from your Design Tokens Community Group (DTCG) tokens.

Features

• ✅ Supports all features of the CSS plugin
• ✅ Strong typechecking with Sass to never have broken styles

Install the plugin (and its dependency) from npm:

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

Then add to your tokens.config.mjs file:

// tokens.config.mjs
import pluginSass from "@cobalt-ui/plugin-sass";

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

And run:

npx co build

You’ll then generate a ./tokens/index.scss file that exports a token() function you can use to grab tokens:

@use "../tokens" as *; // update "../tokens" to match your location of tokens/index.scss

.heading {
  color: token("color.blue");
  font-size: token("typography.size.xxl");
}

View the full documentation