{"_id":"@bpmn-io/shadcn-theme","name":"@bpmn-io/shadcn-theme","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@bpmn-io/shadcn-theme","version":"0.0.1","description":"A shadcn theme for bpmn.io","publishConfig":{"access":"public"},"exports":{"./assets/*.css":"./assets/*.css","./package.json":"./package.json"},"keywords":["shadcn","bpmn.io","theme"],"homepage":"https://github.com/bpmn-io/shadcn-theme#readme","bugs":{"url":"https://github.com/bpmn-io/shadcn-theme/issues"},"repository":{"type":"git","url":"git+https://github.com/bpmn-io/shadcn-theme.git"},"license":"MIT","author":{"name":"bpmn.io Contributors"},"sideEffects":["*.css"],"scripts":{"all":"run-s lint test","lint":"eslint .","test":"karma start karma.config.cjs","capture":"node scripts/capture.js","dev":"npm test -- --auto-watch --no-single-run","start":"cross-env SINGLE_START=start npm run dev","start:diagram":"cross-env SINGLE_START=diagram npm run dev","start:bpmn":"cross-env SINGLE_START=bpmn npm run dev","start:properties-panel":"cross-env SINGLE_START=properties-panel npm run dev","start:element-template-chooser":"cross-env SINGLE_START=element-template-chooser npm run dev"},"devDependencies":{"@babel/core":"^7.29.0","@babel/plugin-transform-react-jsx":"^7.28.6","@bpmn-io/element-template-chooser":"^3.0.0","@bpmn-io/properties-panel":"^3.49.2","@bpmn-io/variable-resolver":"^3.3.0","@camunda/design-system":"^0.45.0","@camunda/example-data-properties-provider":"^1.5.0","@codemirror/view":"^6.43.8","bpmn-js":"^18.22.1","bpmn-js-create-append-anything":"^2.0.0","bpmn-js-element-templates":"^2.30.0","bpmn-js-properties-panel":"^5.64.0","camunda-bpmn-js":"^5.31.1","camunda-bpmn-js-behaviors":"^1.18.0","chai":"^6.2.2","cross-env":"^10.1.0","eslint":"^9.39.5","eslint-plugin-bpmn-io":"^2.3.1","karma":"^6.4.4","karma-chrome-launcher-2":"^3.3.0","karma-debug-launcher":"^0.0.5","karma-env-preprocessor":"^0.1.1","karma-firefox-launcher":"^2.1.3","karma-mocha":"^2.0.1","karma-tldr-reporter":"^1.0.0","karma-webpack":"^5.0.1","mocha":"^11.8.0","mocha-test-container-support":"^0.2.0","npm-run-all2":"^9.0.3","raw-loader":"^4.0.2","webpack":"^5.109.2","zeebe-bpmn-moddle":"^1.17.0"},"gitHead":"eb8606b43023d9b06c214e27d6a7860ab1d95d49","_id":"@bpmn-io/shadcn-theme@0.0.1","_nodeVersion":"24.16.0","_npmVersion":"12.0.2","dist":{"integrity":"sha512-FGFWuDnanu20zBPw28bXZtiTeJXkxLOuWU7zVyjDNb3ImA5JIbn12K2flAnsfp4yxQQTUBjCxRfdIlmifm9L8Q==","shasum":"aabcbe5740851b106b7b5a1920818a6444c6be1d","tarball":"https://registry.npmjs.org/@bpmn-io/shadcn-theme/-/shadcn-theme-0.0.1.tgz","fileCount":7,"unpackedSize":53089,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBZUxTbS82NkTNXwGdCK2dLxScQo3P5YlS7vyCj84szHAiBhGgIggS8YtEufJBGjlDfhaPXziwIob/cXKqccZQidkA=="}]},"_npmUser":{"name":"nikku","email":"git_nikku@nixis.de"},"directories":{},"maintainers":[{"name":"bpmn-io-admin","email":"bpmnio@camunda.com"},{"name":"nikku","email":"git_nikku@nixis.de"},{"name":"barmac","email":"maciejbarel@gmail.com"},{"name":"philippfromme","email":"philippfromme@outlook.com"},{"name":"maxtru","email":"maximilian.trumpf@camunda.com"},{"name":"skaiir-camunda","email":"valentin.serra@camunda.com"},{"name":"vsgoulart","email":"vinicius@vsgoulart.com"},{"name":"barinali","email":"ali.barin53@gmail.com"},{"name":"ev-camunda","email":"ev.bilske@camunda.com"},{"name":"jarekdanielak","email":"jarek.danielak@camunda.com"},{"name":"alekseymanetov","email":"alekseyManetov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/shadcn-theme_0.0.1_1787315898694_0.5861243053596084"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-21T12:38:18.537Z","0.0.1":"2026-08-21T12:38:18.827Z","modified":"2026-08-21T12:38:19.073Z"},"maintainers":[{"name":"bpmn-io-admin","email":"bpmnio@camunda.com"},{"name":"nikku","email":"git_nikku@nixis.de"},{"name":"barmac","email":"maciejbarel@gmail.com"},{"name":"philippfromme","email":"philippfromme@outlook.com"},{"name":"maxtru","email":"maximilian.trumpf@camunda.com"},{"name":"skaiir-camunda","email":"valentin.serra@camunda.com"},{"name":"vsgoulart","email":"vinicius@vsgoulart.com"},{"name":"barinali","email":"ali.barin53@gmail.com"},{"name":"ev-camunda","email":"ev.bilske@camunda.com"},{"name":"jarekdanielak","email":"jarek.danielak@camunda.com"},{"name":"alekseymanetov","email":"alekseyManetov@gmail.com"}],"description":"A shadcn theme for bpmn.io","homepage":"https://github.com/bpmn-io/shadcn-theme#readme","keywords":["shadcn","bpmn.io","theme"],"repository":{"type":"git","url":"git+https://github.com/bpmn-io/shadcn-theme.git"},"author":{"name":"bpmn.io Contributors"},"bugs":{"url":"https://github.com/bpmn-io/shadcn-theme/issues"},"license":"MIT","readme":"# bpmn.io Shadcn Theme\n\n[![CI](https://github.com/bpmn-io/shadcn-theme/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/shadcn-theme/actions/workflows/CI.yml)\n\nA portable [shadcn/ui](https://ui.shadcn.com/) theme for bpmn.io, with an\noptional [Camunda Design System](https://github.com/camunda/design-system) (C4)\noverride.\n\n## Usage\n\nApply `bpmn-io-shadcn-theme` to a common ancestor, load the base component CSS,\nthen the shared tokens and the adapter for each component in use:\n\n```html\n<div class=\"bpmn-io-shadcn-theme\">\n  <div id=\"canvas\"></div>\n  <div id=\"properties-panel\"></div>\n</div>\n```\n\n```js\nimport '@bpmn-io/properties-panel/dist/assets/properties-panel.css';\nimport '@bpmn-io/shadcn-theme/assets/tokens.css';\nimport '@bpmn-io/shadcn-theme/assets/properties-panel.css';\n```\n\nEach adapter loads after the base CSS of the component it themes. To also theme\nthe diagram surfaces — the palette, the search pad and the popup editor (the\ncreate, append and replace menus) — load `diagram.css` after the bpmn-js\nstylesheets:\n\n```js\nimport 'bpmn-js/dist/assets/diagram-js.css';\nimport 'bpmn-js/dist/assets/bpmn-js.css';\nimport '@bpmn-io/shadcn-theme/assets/tokens.css';\nimport '@bpmn-io/shadcn-theme/assets/diagram.css';\n```\n\nAdd `dark` to the theme root (or any ancestor) for dark mode, and override the\n`--shadcn-*` properties to match your shadcn configuration:\n\n```css\n.bpmn-io-shadcn-theme {\n  --shadcn-primary: 221.2 83.2% 53.3%;\n  --shadcn-radius: 0.75rem;\n}\n```\n\n### Camunda Design System (C4) override\n\nC4 exposes its own scoped semantic tokens. Render inside `C4Provider` and import\n`c4.css` after the adapter; it only applies beneath `.c4-ui`, leaving stock\nshadcn consumers unaffected:\n\n```js\nimport '@camunda/design-system/styles.css';\nimport '@bpmn-io/shadcn-theme/assets/tokens.css';\nimport '@bpmn-io/shadcn-theme/assets/properties-panel.css';\nimport '@bpmn-io/shadcn-theme/assets/diagram.css';\nimport '@bpmn-io/shadcn-theme/assets/c4.css';\n```\n\n## Build and Run\n\nPrepare the project by installing all dependencies:\n\n```sh\nnpm install\n```\n\nThen, depending on your use-case, you may run any of the following commands:\n\n```sh\n# lint and run all tests\nnpm run all\n\n# run all tests\nnpm test\n\n# spin up the canonical playground to try the theme end-to-end\nnpm start\n\n# capture side-by-side theme comparison screenshots into .captures/\nnpm run capture\n```\n\nTo explore a narrower surface, `it.only` a scenario spec or spin up one of the\ncomponent-specific playgrounds:\n\n```sh\nnpm run start:properties-panel\nnpm run start:diagram\nnpm run start:bpmn\nnpm run start:element-template-chooser\n```\n\n## License\n\nMIT","readmeFilename":"README.md","_rev":"1-46bda063ec88b274d79b85ff8e452144"}