---

Overview

@bpmnkit/ui is the shared design system for the BPMN Kit. It provides CSS custom property tokens, theme management utilities, and ready-made UI components (badges, cards, tables, theme switcher) used across the editor, canvas, plugins, and operate packages.

Features

• CSS design tokens — --bpmnkit-* custom properties for colors, spacing, typography, and borders
• Dark/light/auto theming — persistent theme via localStorage, applies data-theme attribute
• injectUiStyles() — programmatically inject all tokens + component CSS into the document
• UI components — badge(state), createStatsCard(), createTable(), theme switcher dropdown
• Icons — built-in SVG icon set (IC_UI)

Installation

npm install @bpmnkit/ui

Usage

Inject tokens at runtime (packages / apps)

import { injectUiStyles } from "@bpmnkit/ui"

// Call once before mounting your UI
injectUiStyles()

Import tokens in Astro/CSS

@import "@bpmnkit/ui/tokens.css";

Theme management

import { applyTheme, persistTheme, loadPersistedTheme } from "@bpmnkit/ui"

// Restore from localStorage on startup
const saved = loadPersistedTheme()  // "light" | "dark" | "auto"
applyTheme(document.documentElement, saved)

// Persist a user selection
persistTheme("dark")
applyTheme(document.documentElement, "dark")

Theme switcher dropdown

import { createThemeSwitcher } from "@bpmnkit/ui"

const { el, setTheme } = createThemeSwitcher({
  initial: "auto",
  persist: true,
  onChange: (theme) => applyTheme(document.body, theme),
})
document.querySelector(".toolbar")!.appendChild(el)

Design Tokens

All tokens use the --bpmnkit-* prefix and are defined for both light and dark modes.

Token	Purpose
--bpmnkit-bg	Page background
--bpmnkit-surface	Card / panel surface
--bpmnkit-border	Borders
--bpmnkit-fg	Primary text
--bpmnkit-fg-muted	Secondary text
--bpmnkit-accent	Primary accent / interactive
--bpmnkit-accent-bright	Links / bright accent
--bpmnkit-teal	Secondary accent
--bpmnkit-success	Success state
--bpmnkit-warn	Warning state
--bpmnkit-danger	Error / danger state
--bpmnkit-font	UI font stack
--bpmnkit-font-mono	Monospace font stack

---

Related Packages

Package	Description
@bpmnkit/core	BPMN/DMN/Form parser, builder, layout engine
@bpmnkit/canvas	Zero-dependency SVG BPMN viewer
@bpmnkit/editor	Full-featured interactive BPMN editor
@bpmnkit/engine	Lightweight BPMN process execution engine
@bpmnkit/feel	FEEL expression language parser & evaluator
@bpmnkit/plugins	22 composable canvas plugins
@bpmnkit/api	Camunda 8 REST API TypeScript client
@bpmnkit/ascii	Render BPMN diagrams as Unicode ASCII art
@bpmnkit/docspack	BPMN Kit docs as an offline docspack package for AI agents
@bpmnkit/profiles	Shared auth, profile storage, and client factories for CLI & proxy
@bpmnkit/operate	Monitoring & operations frontend for Camunda clusters
@bpmnkit/connector-gen	Generate connector templates from OpenAPI specs
@bpmnkit/connectors	Camunda 8 OOTB connector catalog and deterministic template application
@bpmnkit/cli	Camunda 8 command-line interface (casen)
@bpmnkit/proxy	Local AI bridge and Camunda API proxy server
@bpmnkit/patterns	Domain process patterns for BPMNKit AIKit
@bpmnkit/reebe-wasm	WebAssembly BPMN engine for browser simulation
@bpmnkit/worker-client	Thin Zeebe REST client for standalone workers
@bpmnkit/cli-sdk	Plugin authoring SDK for the casen CLI
@bpmnkit/create-casen-plugin	Scaffold a new casen CLI plugin in seconds
@bpmnkit/casen-report	HTML reports from Camunda 8 incident and SLA data
@bpmnkit/casen-worker-http	Example HTTP worker plugin — completes jobs with live JSONPlaceholder API data
@bpmnkit/casen-worker-ai	AI task worker — classify, summarize, extract, and decide using Claude

License

MIT BPMN Kit — made by u11g