@bpmn-io/c4-主题

使bpm.io看起来像 卡蒙达设计系统 (C4级).

它通过重新指定 @bpmn-io/theme c4语义符号 符号,所以每个 bpm.io 组件一次导入一个主题 。 颜色总是 来源于C4;它所暗示的结构——弧度,间隔,控制高度,幽灵 按钮 – 跟随 阴影/ ui c4公约是 继续发展.

使用量

打开 .c4-ui 在您的应用程序根上(它带有设计系统的符号), 装入基本组件 CSS, 然后是共享的令牌和每个适配器 正在使用中组件。 主题范围为: .c4-ui因此导入样式表 是唯一的选择 :

<body class="c4-ui">
  <div id="canvas"></div>
  <div id="properties-panel"></div>
</body>

import '@camunda/design-system/styles.css';
import '@bpmn-io/properties-panel/dist/assets/properties-panel.css';
import '@bpmn-io/c4-theme/assets/tokens.css';
import '@bpmn-io/c4-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/c4-theme/assets/tokens.css';
import '@bpmn-io/c4-theme/assets/diagram.css';

暗模式遵循设计系统本身 dark 类——主题没有 其自有的调色板,所以它继承了C4决心的任何.

构建和运行

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

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:dmn

许可证

麻省理工学院