bpmn.io Themes

The shared design-token layer for bpmn.io, and the themes built on top of it.

Package	Description
@bpmn-io/theme	The design tokens and the default bpmn.io look. Consumed by the libraries themselves.
@bpmn-io/c4-theme	Adopts bpmn.io components to fit visually into Camunda Design System (C4) built applications.

Applying a theme

A theme scopes itself to the class its design system already defines — c4-ui for the Camunda Design System — so put that on your application root:

<body class="c4-ui">

The libraries mark their own roots with bio-theme-parent, including UI that renders outside them — the popups and tooltips attach to document.body.

A theme works by rebinding the --bio-* tokens, which is what lets one theme cover every bpmn.io component at once. See @bpmn-io/theme for the tokens and how libraries consume them.

Build and Run

npm install

# lint and run all tests
npm run all

# run all tests
npm test

# spin up the canonical playground
npm start

# capture side-by-side theme comparison screenshots into .captures/
npm run capture

Releasing

Packages are versioned independently. bio-release detects what changed since each package's last release, asks for a bump, then publishes and tags:

npm run release

License

MIT