bpmn.io 沙德克恩语 主题

便携式 阴影/ ui bpmn.io 的主题,带有 选项 卡蒙达设计系统 (C4级) 超过.

使用量

应用 bpmn-io-shadcn-theme 到共同祖先,装入基部组件CSS, 然后是每个使用的组件的共享令牌和适配器:

<div class="bpmn-io-shadcn-theme">
  <div id="canvas"></div>
  <div id="properties-panel"></div>
</div>

import '@bpmn-io/properties-panel/dist/assets/properties-panel.css';
import '@bpmn-io/shadcn-theme/assets/tokens.css';
import '@bpmn-io/shadcn-theme/assets/properties-panel.css';

每个适配器在其主题组件的基底CSS后加载. 另选主题 图表表面——调色板、搜索垫和弹出编辑器( 创建、附加和替换菜单)——负载 diagram.css bpmn -js 之后的游戏 样式表 :

import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-js.css';
import '@bpmn-io/shadcn-theme/assets/tokens.css';
import '@bpmn-io/shadcn-theme/assets/diagram.css';

添加 dark ,并覆盖 --shadcn-* 属性以匹配您的阴影配置 :

.bpmn-io-shadcn-theme {
  --shadcn-primary: 221.2 83.2% 53.3%;
  --shadcn-radius: 0.75rem;
}

Camunda 设计系统(C4)

C4曝光了自己的范围语义符号. 内部渲染 C4Provider 导入 c4.css 在适配器后; 只在下方应用 .c4-ui,离开库存 阴影消费者未受影响:

import '@camunda/design-system/styles.css';
import '@bpmn-io/shadcn-theme/assets/tokens.css';
import '@bpmn-io/shadcn-theme/assets/properties-panel.css';
import '@bpmn-io/shadcn-theme/assets/diagram.css';
import '@bpmn-io/shadcn-theme/assets/c4.css';

构建和运行

通过安装所有依赖来准备工程 :

npm install

然后,根据您的使用大小写,您可以运行以下任何命令:

# lint and run all tests
npm run all

# run all tests
npm test

# spin up the canonical playground to try the theme end-to-end
npm start

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

为了探索更狭窄的地表, it.only 假想或旋转其中之一 特定组成部分游乐场:

npm run start:properties-panel
npm run start:diagram
npm run start:bpmn
npm run start:element-template-chooser

许可证

麻省理工学院