JSPM

  • Created
  • Published
  • Downloads 173
  • Score
    100M100P100Q88755F
  • License MIT

Generate scss/sass from your design tokens schema (requires @cobalt-ui/cli)

Package Exports

  • @cobalt-ui/plugin-sass
  • @cobalt-ui/plugin-sass/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-sass) 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-sass

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

Setup

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

Docs

View the full documentation