Website · Documentation · GitHub · Changelog

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/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/cli | Camunda 8 command-line interface (casen) | | @bpmnkit/proxy | Local AI bridge and Camunda API proxy server | | @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 |

License

MIT © BPMN Kit — made by u11g