@cobalt-ui/plugin-sass

Generate Sass output for Cobalt from design tokens.

Setup

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

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

export default {
  plugins: [
    pluginSass({
      /** set the filename inside outDir */
      fileName: "./index.scss",
      /** use indented syntax? (.sass format) */
      indentedSyntax: false,
      /** modify values */
      transformValue(token, mode) {
        return mode ? token.mode[mode] : token.value;
      },
      /** rename variables */
      transformVariables(id) {
        return id.replace(/\./g, "__");
      },
    }),
  ],
};

Usage

After Cobalt has built your Sass tokens, import it into any file with:

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

.heading {
  color: $color__blue;
  font-size: $type__size__lg;
}

If some token variables conflict with local variables, you can always namespace them (Sass docs).

Modes

To use modes, use mode() function that was generated with your tokens:

@use "../tokens" as *;

// "default" mode
.heading {
  color: $color__blue;
  font-size: $type__size__lg;

  // "light" mode
  body.theme--light & {
    color: mode($color__blue, light);
    font-size: mode($type__size__lg, light);
  }

  // "dark" mode
  body.theme--dark & {
    color: mode($color__blue, dark);
    font-size: mode($type__size__lg, dark);
  }
}

⚠️ Be warned that Sass will throw an error if that mode doesn’t exist for that token. This is done intentionally so that values aren’t silently falling back to their defaults.

To learn more about modes, see the documentation.

Features

• type: file: base64 encodes the file
• type: url: converts to a plain url()

Tools

When you import your generated Sass, you’ll find more than just your tokens—you’ll find some handy utilities in there as well.

Color

TODO