@bpmn-io/form-js-editor 1.26.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/assets/form-js-editor-base.css +69 -132
  2. package/dist/assets/form-js-editor.css +482 -271
  3. package/dist/assets/properties-panel.css +449 -179
  4. package/dist/index.cjs +329 -139
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.es.js +333 -143
  7. package/dist/index.es.js.map +1 -1
  8. package/package.json +7 -5
package/dist/assets/form-js-editor-base.css CHANGED
@@ -1,146 +1,83 @@
1
+ /**
2
+ * Semantic tokens, copied from `@bpmn-io/theme` to style the components
3
+ * according to this theme.
4
+ *
5
+ * Names and values of the tokens should stay intact with the `@bpmn-io/theme`
6
+ * source of truth, to ensure matching styles and allow overrides with an
7
+ * alternative theme.
8
+ */
9
+ .bio-theme-parent {
10
+ --bio-surface: hsl(0, 0%, 100%);
11
+ --bio-surface-subtle: hsl(225, 10%, 97%);
12
+ --bio-surface-medium: hsl(225, 10%, 95%);
13
+ --bio-surface-strong: hsl(225, 10%, 90%);
14
+ --bio-text: hsl(225, 10%, 15%);
15
+ --bio-text-subtle: hsl(225, 10%, 35%);
16
+ --bio-text-subtlest: hsl(225, 10%, 55%);
17
+ --bio-border: hsl(225, 10%, 75%);
18
+ --bio-border-input: hsl(225, 10%, 75%);
19
+ --bio-border-subtle: hsl(225, 10%, 85%);
20
+ --bio-border-disabled: hsl(225, 10%, 90%);
21
+ --bio-primary: hsl(205, 100%, 40%);
22
+ --bio-primary-surface: hsl(205, 100%, 95%);
23
+ --bio-danger: hsl(360, 100%, 45%);
24
+ --bio-danger-surface: hsl(360, 100%, 92%);
25
+ --bio-focus: hsl(205, 100%, 40%);
26
+ --bio-shadow: hsla(0, 0%, 0%, 30%);
27
+ }
28
+
1
29
  .fjs-editor-container {
2
- --color-children-selected-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
30
+ --color-children-selected-border: var(--bio-primary);
3
31
  --color-children-selected-background: transparent;
4
- --color-children-hover-border: var(--cds-border-interactive, var(--color-blue-219-100-53-05));
32
+ --color-children-hover-border: color-mix(in srgb, var(--bio-primary) 50%, transparent);
5
33
 
6
34
  --color-context-pad-item-background: transparent;
7
- --color-context-pad-item-fill: var(--cds-icon-secondary, var(--color-grey-225-10-15));
8
- --color-context-pad-item-hover-fill: var(--color-red-360-100-45);
35
+ --color-context-pad-item-fill: var(--bio-text);
36
+ --color-context-pad-item-hover-fill: var(--bio-danger);
9
37
 
10
- --color-resize-handle-background: var(--cds-border-interactive, var(--color-blue-219-100-53));
11
- --color-resize-handle-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
38
+ --color-resize-handle-background: var(--bio-primary);
39
+ --color-resize-handle-border: var(--bio-primary);
12
40
 
13
- --color-dragula-background: var(--cds-highlight, var(--color-blue-205-100-95));
14
- --color-dragula-border: var(--cds-border-interactive, var(--color-blue-205-100-45));
15
- --color-dragula-mirror-background: var(--cds-background, var(--color-white));
16
- --color-dragula-mirror-border: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-90)));
17
- --color-dragula-error-background: var(--color-red-360-100-92);
18
- --color-dragula-error-border: var(--cds-text-error, var(--color-red-360-100-45));
41
+ --color-dragula-background: var(--bio-primary-surface);
42
+ --color-dragula-border: var(--bio-primary);
43
+ --color-dragula-mirror-background: var(--bio-surface);
44
+ --color-dragula-mirror-border: var(--bio-border-disabled);
45
+ --color-dragula-error-background: var(--bio-danger-surface);
46
+ --color-dragula-error-border: var(--bio-danger);
19
47
  }
20
48
 
21
49
  .fjs-palette-container {
22
- --color-palette-text: var(--cds-text-primary, var(--color-grey-225-10-15));
23
- --color-palette-container-background: var(--cds-background, var(--color-grey-225-10-95));
24
- --color-palette-container-border: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-80)));
25
- --color-palette-header: var(--cds-text-primary, var(--color-text));
26
- --color-palette-header-background: var(--cds-background, var(--color-grey-225-10-95));
27
- --color-palette-header-border: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-85)));
50
+ --color-palette-text: var(--bio-text);
51
+ --color-palette-container-background: var(--bio-surface-medium);
52
+ --color-palette-container-border: var(--bio-border);
53
+ --color-palette-header: var(--color-text);
54
+ --color-palette-header-background: var(--bio-surface-medium);
55
+ --color-palette-header-border: var(--bio-border-subtle);
28
56
  --color-palette-search: var(--color-palette-text);
29
- --color-palette-search-icon: var(--cds-icon-secondary, var(--color-grey-225-10-35));
30
- --color-palette-search-icon-hover: var(--cds-icon-primary, var(--color-grey-225-10-15));
31
- --color-palette-search-background: var(--cds-field, var(--cds-field-01, var(--color-white)));
32
- --color-palette-search-border: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-75)));
33
- --color-palette-search-focus-background: var(--cds-field, var(--cds-field-01, var(--color-blue-205-100-95)));
34
- --color-palette-search-focus-border: var(--cds-focus, var(--color-blue-205-100-50));
35
- --color-palette-search-clear-focus-border: var(--cds-focus, var(--color-grey-225-10-50));
57
+ --color-palette-search-icon: var(--bio-text-subtle);
58
+ --color-palette-search-icon-hover: var(--bio-text);
59
+ --color-palette-search-background: var(--bio-surface);
60
+ --color-palette-search-border: var(--bio-border);
61
+ --color-palette-search-focus-background: var(--bio-primary-surface);
62
+ --color-palette-search-focus-border: var(--bio-focus);
63
+ --color-palette-search-clear-focus-border: var(--bio-border-input);
36
64
  --color-palette-group-title: var(--color-palette-text);
37
65
  --color-palette-field: var(--color-palette-text);
38
- --color-palette-field-background: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
39
- --color-palette-field-border: var(--cds-border-subtle, var(--cds-border-subtle-01, var(--color-grey-225-10-93)));
40
- --color-palette-field-focus: var(--cds-border-interactive, var(--color-blue-205-100-45));
41
- --color-palette-field-hover-background: var(--cds-background-hover, var(--color-grey-225-10-90));
42
- --color-palette-field-hover-border: var(
43
- --cds-border-strong,
44
- var(--cds-border-strong-01, var(--color-grey-225-10-55))
45
- );
66
+ --color-palette-field-background: var(--bio-surface);
67
+ --color-palette-field-border: var(--bio-border-disabled);
68
+ --color-palette-field-focus: var(--bio-primary);
69
+ --color-palette-field-hover-background: var(--bio-surface-strong);
70
+ --color-palette-field-hover-border: var(--bio-border-input);
46
71
  --cursor-palette-field: grab;
47
72
  --palette-width: 270px;
48
73
  }
49
74
 
50
75
  .fjs-properties-container {
51
- --color-properties-container-background: var(--cds-background, var(--color-white));
52
- --color-properties-container-border: var(
53
- --cds-border-strong,
54
- var(--cds-border-strong-01, var(--color-grey-225-10-80))
55
- );
76
+ --color-properties-container-background: var(--bio-surface);
77
+ --color-properties-container-border: var(--bio-border);
56
78
  --properties-panel-width: 300px;
57
79
  }
58
80
 
59
- /**
60
- * Theming overrides
61
- */
62
- .fjs-properties-container .bio-properties-panel {
63
- --text-base-color: var(--cds-text-primary, var(--color-grey-225-10-15));
64
- --text-error-color: var(--cds-text-color, var(--color-red-360-100-45));
65
- --link-color: var(--cds-text-primary, var(--color-blue-205-100-50));
66
-
67
- --description-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
68
- --description-code-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-97)));
69
- --description-code-border-color: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-85)));
70
- --description-list-item-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
71
-
72
- --placeholder-color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
73
- --placeholder-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-95)));
74
-
75
- --header-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-95)));
76
- --header-icon-fill-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
77
- --header-bottom-border-color: var(--color-grey-225-10-75);
78
-
79
- --group-background-color: var(--cds-background, var(--color-white));
80
- --group-bottom-border-color: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-75)));
81
-
82
- --sticky-group-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-95)));
83
- --sticky-group-bottom-border-color: var(
84
- --cds-border-strong,
85
- var(--cds-border-strong-01, var(--color-grey-225-10-75))
86
- );
87
-
88
- --add-entry-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
89
- --add-entry-hover-fill-color: var(--cds-icon-inverse, var(--color-white));
90
- --add-entry-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
91
- --add-entry-label-color: var(--cds-text-inverse, var(--color-white));
92
-
93
- --remove-entry-fill-color: var(--color-red-360-100-45);
94
- --remove-entry-hover-background-color: var(--color-red-360-100-92);
95
-
96
- --arrow-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
97
- --arrow-hover-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-95)));
98
-
99
- --dot-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
100
-
101
- --list-badge-color: var(--cds-text-inverse, var(--color-white));
102
- --list-badge-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
103
-
104
- --input-background-color: var(--cds-field, var(--cds-field-01, var(--color-grey-225-10-97)));
105
- --input-border-color: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-75)));
106
-
107
- --input-focus-background-color: var(--cds-field, var(--cds-field-01, var(--color-blue-205-100-95)));
108
- --input-focus-border-color: var(--cds-focus, var(--color-blue-205-100-50));
109
-
110
- --input-error-background-color: var(--cds-field, var(--cds-field-01, var(--color-red-360-100-97)));
111
- --input-error-border-color: var(--cds-text-error, var(--color-red-360-100-45));
112
- --input-error-focus-border-color: var(--cds-text-error, var(--color-red-360-100-45));
113
-
114
- --input-disabled-color: var(--cds-text-disabled, var(--color-grey-225-10-55));
115
- --input-disabled-background-color: var(--cds-field, var(--cds-field-01, var(--color-grey-225-10-97)));
116
- --input-disabled-border-color: var(--cds-border-disabled, var(--color-grey-225-10-90));
117
-
118
- --toggle-switch-on-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
119
- --toggle-switch-off-background-color: var(--cds-toggle-off, var(--color-grey-225-10-75));
120
- --toggle-switch-switcher-background-color: var(--cds-background, var(--color-white));
121
-
122
- --side-line-background-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
123
- --side-line-extension-background-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
124
-
125
- --list-entry-dot-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
126
- --list-entry-header-button-fill-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
127
- --list-entry-add-entry-empty-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
128
- --list-entry-add-entry-empty-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-45));
129
- --list-entry-add-entry-label-color: var(--cds-text-inverse, var(--color-white));
130
- --list-entry-add-entry-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
131
- --list-entry-add-entry-fill-color: var(--cds-icon-inverse, var(--color-white));
132
-
133
- --feel-background-color: transparent;
134
- --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-45));
135
- --feel-inactive-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
136
- --feel-hover-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
137
- --feel-hover-background-color: var(--cds-layer-02, var(--color-grey-225-10-97));
138
- --feel-active-background-color: transparent;
139
- --feel-required-color: var(--cds-icon-disabled, var(--color-grey-225-10-55));
140
-
141
- --feel-indicator-background-color: var(--cds-background-hover, var(--color-grey-225-10-90));
142
- }
143
-
144
81
  .fjs-properties-container .bio-properties-panel-input {
145
82
  color: var(--color-text);
146
83
  }
@@ -280,7 +217,7 @@
280
217
  }
281
218
 
282
219
  .fjs-editor-container .fjs-empty-component .fjs-empty-component-text {
283
- color: var(--cds-text-disabled, var(--color-grey-225-10-55));
220
+ color: var(--color-text-lighter);
284
221
  }
285
222
 
286
223
  @container (width < 100px) {
@@ -365,7 +302,7 @@
365
302
  max-height: calc(100% - 2px);
366
303
  border: 1px solid var(--color-resize-handle-border);
367
304
  border-radius: 50px;
368
- background: var(--color-white);
305
+ background: var(--bio-surface);
369
306
  z-index: 3;
370
307
  }
371
308
 
@@ -403,7 +340,7 @@
403
340
 
404
341
  .fjs-editor-container .fjs-repeat-render-footer {
405
342
  font-size: var(--font-size-label);
406
- background: var(--cds-field, var(--color-background-disabled));
343
+ background: var(--color-background-disabled);
407
344
  color: var(--color-text-light);
408
345
  padding: 3px;
409
346
  display: flex;
@@ -535,12 +472,12 @@
535
472
  color: var(--color-palette-search);
536
473
  border: 1px solid var(--color-palette-search-border);
537
474
  background-color: var(--color-palette-search-background);
538
- border-radius: 2px;
475
+ border-radius: var(--input-border-radius);
539
476
  font-size: 14px;
540
477
  }
541
478
 
542
479
  .fjs-palette-container .fjs-palette-search-container:focus-within {
543
- outline: none;
480
+ outline: var(--outline-definition);
544
481
  background-color: var(--color-palette-search-focus-background);
545
482
  border: 1px solid var(--color-palette-search-focus-border);
546
483
  }
@@ -674,7 +611,7 @@
674
611
  }
675
612
 
676
613
  .fjs-json-editor .cm-placeholder {
677
- color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
614
+ color: var(--color-text-placeholder);
678
615
  }
679
616
 
680
617
  .fjs-json-editor .cm-placeholder > :first-child {
@@ -743,7 +680,7 @@
743
680
 
744
681
  .fjs-editor-container .fjs-form-field-spacer {
745
682
  min-height: 30px;
746
- background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #f5f5f5 10px, #f5f5f5 20px);
683
+ background: repeating-linear-gradient(45deg, var(--bio-surface), var(--bio-surface) 10px, var(--bio-surface-subtle) 10px, var(--bio-surface-subtle) 20px);
747
684
  }
748
685
 
749
686
  .fjs-editor-container .fjs-form-field-html,
@@ -800,7 +737,7 @@
800
737
  background-color: var(--color-dragula-mirror-background) !important;
801
738
  border: solid 1px var(--color-dragula-mirror-border) !important;
802
739
  border-radius: 5px !important;
803
- box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15) !important;
740
+ box-shadow: 0px 0px 20px var(--bio-shadow) !important;
804
741
  display: flex !important;
805
742
  filter: none !important;
806
743
  flex-direction: row !important;
@@ -820,7 +757,7 @@
820
757
  font-size: 11px;
821
758
  user-select: none;
822
759
  color: var(--color-text);
823
- background: var(--color-white);
760
+ background: var(--bio-surface);
824
761
  }
825
762
 
826
763
  .fjs-field-preview .fjs-field-preview-icon {