Chroma-Style as a plugin

Enable @chroma/style through chroma.json, the generic plugin loader, and bootstrapStyle in your app entry.

Chroma-Style follows the same vendoring model as Chroma-Fs. The shared loader contract is documented in Plugins; this page covers only chroma-style.

Enable it

{
  "name": "my-app",
  "mode": "dynamic",
  "plugins": ["chroma-style"]
}

static, dynamic, and standard templates already include it. Remove the entry from chroma.json if you do not need the plugin.

Manifest

{
  "name": "chroma-style",
  "package": "@chroma/style",
  "version": "0.1.2",
  "entry": "index.js",
  "loadAs": "style",
  "capabilities": ["styling", "design-tokens"],
  "hooks": {
    "styles": "injectStyles"
  },
  "assets": {
    "stylesheets": ["tokens.css", "utilities.css"]
  }
}

Field	Value	Notes
`loadAs`	`"style"`	`loadPlugins()` → `plugins.style`
`hooks.styles`	`injectStyles`	Runs automatically during `loadPlugins()`
`hooks.bootstrap`	(not in manifest)	You call `bootstrapStyle({ cva, cx })` from `main.chr`

The default plugin export in index.js also lists bootstrap: bootstrapStyle for custom loaders; the stock template loader only auto-invokes styles.

Loader sequence

// plugins/loader.js (simplified)
if (meta.hooks?.styles) {
  mod[meta.hooks.styles](); // injectStyles → <link> for tokens + utilities
}
// bootstrap hook is NOT called for chroma-style unless you add it to chroma.plugin.json
loaded.style = mod; // full module; you call bootstrapStyle yourself

Typical entry:

const plugins = await loadPlugins();
globalThis.__chromaStyle = plugins.style.bootstrapStyle({ cva, cx });

bootstrapStyle is idempotent for CSS injection (injectStyles skips duplicate <link> tags via data-chroma-plugin markers).

Install and build

Step	Behavior
`chroma install`	Copies plugin to `~/.chroma/plugins/chroma-style`
`chroma new`	Vendors into `./plugins/chroma-style/`
`chroma build`	Copies `plugins/` into `dist/` — stylesheets keep working in production zips

Because the plugin is vendored, you may patch tokens.css or add utilities in place; document overrides in your app if you fork.

Without the generic loader

import { injectStyles, bootstrapStyle } from "./plugins/chroma-style/index.js";
import { cva, cx } from "./pkg/chroma.js";

injectStyles();
const api = bootstrapStyle({ cva, cx });

Or link CSS statically:

<link rel="stylesheet" href="./plugins/chroma-style/tokens.css" />
<link rel="stylesheet" href="./plugins/chroma-style/utilities.css" />

Linking in index.html is recommended when you need tokens before the first module runs (see Runtime hosts).

Styling guide
Chroma-Fs as a plugin — parallel pattern for loadAs: "fs"