sugarcube

Design tokens in, CSS & components out

Sugarcube is a tool for building front ends on DTCG design tokens. It connects your tokens to CSS variables, utility classes, CUBE CSS, and copy-to-own components — via the Vite plugin or CLI.

Quick start

npx @sugarcube-sh/cli init

This walks you through setup: starter tokens, CUBE CSS, components, and Vite plugin. The CLI is installed locally, so you can use sugarcube going forward.

With the Vite plugin:

// vite.config.ts
import sugarcube from "@sugarcube-sh/vite";
export default {
    plugins: [sugarcube()],
};

import "virtual:sugarcube.css";

Without the Vite plugin:

sugarcube generate

Or add it to your npm scripts:

{
    "scripts": {
        "styles:generate": "sugarcube generate",
        "styles:generate:watch": "sugarcube generate --watch",
        "tokens:validate": "sugarcube validate"
    }
}

Documentation

sugarcube.sh/docs

Packages

| Package | Description | | ------------------------------------------------------------------- | -------------------------------------------------- | | @sugarcube-sh/cli | CLI for initialization, generation, and components | | @sugarcube-sh/vite | Vite plugin with HMR | | @sugarcube-sh/core | Core token processing |

License

See LICENSE.md.