@bpmn-io/form-js-editor 0.14.1 → 0.15.0-alpha.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 (34) hide show
  1. package/dist/assets/form-js-editor-base.css +251 -36
  2. package/dist/assets/form-js-editor.css +229 -35
  3. package/dist/index.cjs +802 -283
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.es.js +673 -154
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/types/FormEditor.d.ts +9 -4
  8. package/dist/types/core/EventBus.d.ts +1 -1
  9. package/dist/types/core/FormLayoutValidator.d.ts +5 -1
  10. package/dist/types/core/index.d.ts +2 -1
  11. package/dist/types/features/dragging/Dragging.d.ts +3 -3
  12. package/dist/types/features/editor-actions/FormEditorActions.d.ts +2 -1
  13. package/dist/types/features/editor-actions/index.d.ts +1 -1
  14. package/dist/types/features/keyboard/index.d.ts +1 -1
  15. package/dist/types/features/modeling/FormLayoutUpdater.d.ts +2 -1
  16. package/dist/types/features/modeling/behavior/IdBehavior.d.ts +2 -1
  17. package/dist/types/features/modeling/behavior/KeyBehavior.d.ts +2 -1
  18. package/dist/types/features/modeling/behavior/ValidateBehavior.d.ts +2 -1
  19. package/dist/types/features/modeling/index.d.ts +6 -1
  20. package/dist/types/features/palette/PaletteRenderer.d.ts +1 -1
  21. package/dist/types/features/palette/components/Palette.d.ts +1 -1
  22. package/dist/types/features/properties-panel/PropertiesPanel.d.ts +1 -1
  23. package/dist/types/features/properties-panel/PropertiesPanelHeaderProvider.d.ts +1 -1
  24. package/dist/types/features/properties-panel/PropertiesPanelRenderer.d.ts +1 -1
  25. package/dist/types/features/properties-panel/entries/InputKeyValuesSourceEntry.d.ts +1 -1
  26. package/dist/types/render/Renderer.d.ts +1 -1
  27. package/dist/types/render/components/FieldDragPreview.d.ts +1 -1
  28. package/dist/types/render/components/FieldResizer.d.ts +1 -0
  29. package/dist/types/render/components/FormEditor.d.ts +1 -1
  30. package/dist/types/render/components/Util.d.ts +27 -1
  31. package/dist/types/render/components/editor-form-fields/EditorText.d.ts +2 -4
  32. package/dist/types/render/components/icons/index.d.ts +1 -1
  33. package/package.json +3 -3
  34. package/dist/types/features/properties-panel/icons/index.d.ts +0 -1
package/dist/assets/form-js-editor-base.css CHANGED
@@ -1,51 +1,204 @@
1
1
  .fjs-editor-container {
2
- --color-children-border: var(--color-grey-225-10-75);
3
- --color-children-selected-border: var(--color-blue-219-100-53);
2
+ --color-children-border: var(
3
+ --cds-border-strong,
4
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
5
+ );
6
+ --color-children-selected-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
4
7
  --color-children-selected-background: transparent;
5
- --color-children-hover-border: var(--color-blue-219-100-53-05);
8
+ --color-children-hover-border: var(--cds-border-interactive, var(--color-blue-219-100-53-05));
6
9
 
7
- --color-context-pad-item-background: var(--color-white);
8
- --color-context-pad-item-fill: var(--color-grey-225-10-35);
9
- --color-context-pad-item-hover-fill: var(--color-black);
10
-
11
- --color-dragula-background: var(--color-blue-205-100-95);
12
- --color-dragula-border: var(--color-blue-205-100-45);
13
- --color-dragula-mirror-background: var(--color-white);
14
- --color-dragula-mirror-border: var(--color-grey-225-10-90);
10
+ --color-context-pad-item-background: transparent;
11
+ --color-context-pad-item-fill: var(--cds-icon-secondary, var(--color-grey-225-10-15));
12
+ --color-context-pad-item-hover-fill: var(--color-red-360-100-45);
13
+
14
+ --color-resize-handle-background: var(--cds-border-interactive, var(--color-blue-219-100-53));
15
+ --color-resize-handle-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
16
+
17
+ --color-dragula-background: var(--cds-highlight, var(--color-blue-205-100-95));
18
+ --color-dragula-border: var(--cds-border-interactive, var(--color-blue-205-100-45));
19
+ --color-dragula-mirror-background: var(--cds-background, var(--color-white));
20
+ --color-dragula-mirror-border: var(
21
+ --cds-border-strong,
22
+ var(--cds-border-strong-01, var(--color-grey-225-10-90))
23
+ );
15
24
  --color-dragula-error-background: var(--color-red-360-100-92);
16
- --color-dragula-error-border: var(--color-red-360-100-45);
25
+ --color-dragula-error-border: var(--cds-text-error, var(--color-red-360-100-45));
17
26
  }
18
27
 
19
28
  .fjs-palette-container {
20
- --color-palette-text: var(--color-grey-225-10-15);
21
- --color-palette-container-background: var(--color-grey-225-10-95);
22
- --color-palette-container-border: var(--color-grey-225-10-80);
23
- --color-palette-header: var(--color-text);
24
- --color-palette-header-background: var(--color-grey-225-10-95);
25
- --color-palette-header-border: var(--color-grey-225-10-85);
29
+ --color-palette-text: var(--cds-text-primary, var(--color-grey-225-10-15));
30
+ --color-palette-container-background: var(--cds-background, var(--color-grey-225-10-95));
31
+ --color-palette-container-border: var(
32
+ --cds-border-strong,
33
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
34
+ );
35
+ --color-palette-header: var(--cds-text-primary, var(--color-text));
36
+ --color-palette-header-background: var(--cds-background, var(--color-grey-225-10-95));
37
+ --color-palette-header-border: var(
38
+ --cds-border-strong,
39
+ var(--cds-border-strong-01, var(--color-grey-225-10-85))
40
+ );
26
41
  --color-palette-search: var(--color-palette-text);
27
- --color-palette-search-icon: var(--color-grey-225-10-35);
28
- --color-palette-search-icon-hover: var(--color-grey-225-10-15);
29
- --color-palette-search-background: var(--color-white);
30
- --color-palette-search-border: var(--color-grey-225-10-75);
31
- --color-palette-search-focus-background: var(--color-blue-205-100-95);
32
- --color-palette-search-focus-border: var(--color-blue-205-100-50);
33
- --color-palette-search-clear-focus-border: var(--color-grey-225-10-50);
42
+ --color-palette-search-icon: var(--cds-icon-secondary, var(--color-grey-225-10-35));
43
+ --color-palette-search-icon-hover: var(--cds-icon-primary, var(--color-grey-225-10-15));
44
+ --color-palette-search-background: var(
45
+ --cds-field,
46
+ var(--cds-field-01, var(--color-white))
47
+ );
48
+ --color-palette-search-border: var(
49
+ --cds-border-strong,
50
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
51
+ );
52
+ --color-palette-search-focus-background: var(
53
+ --cds-field,
54
+ var(--cds-field-01, var(--color-blue-205-100-95))
55
+ );
56
+ --color-palette-search-focus-border: var(--cds-focus, var(--color-blue-205-100-50));
57
+ --color-palette-search-clear-focus-border: var(--cds-focus, var(--color-grey-225-10-50));
34
58
  --color-palette-group-title: var(--color-palette-text);
35
59
  --color-palette-field: var(--color-palette-text);
36
- --color-palette-field-background: var(--color-white);
37
- --color-palette-field-border: var(--color-grey-225-10-80);
38
- --color-palette-field-hover-background: var(--color-grey-225-10-90);
60
+ --color-palette-field-background: var(
61
+ --cds-layer,
62
+ var(--cds-layer-01, var(--color-white))
63
+ );
64
+ --color-palette-field-border: var(
65
+ --cds-border-strong,
66
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
67
+ );
68
+ --color-palette-field-hover-background: var(--cds-background-hover, var(--color-grey-225-10-90));
39
69
  --cursor-palette-field: grab;
40
70
  --palette-width: 250px;
41
71
  }
42
72
 
43
73
  .fjs-properties-container {
44
- --color-properties-container-background: var(--color-white);
45
- --color-properties-container-border: var(--color-grey-225-10-80);
74
+ --color-properties-container-background: var(--cds-background, var(--color-white));
75
+ --color-properties-container-border: var(
76
+ --cds-border-strong,
77
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
78
+ );
46
79
  --properties-panel-width: 300px;
47
80
  }
48
81
 
82
+ /**
83
+ * Theming overrides
84
+ */
85
+ .fjs-properties-container .bio-properties-panel {
86
+ --text-base-color: var(--cds-text-primary, var(--color-grey-225-10-15));
87
+ --text-error-color: var(--cds-text-color, var(--color-red-360-100-45));
88
+ --link-color: var(--cds-text-primary, var(--color-blue-205-100-50));
89
+
90
+ --description-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
91
+ --description-code-background-color: var(
92
+ --cds-layer,
93
+ var(--cds-layer-01, var(--color-grey-225-10-97))
94
+ );
95
+ --description-code-border-color: var(
96
+ --cds-border-strong,
97
+ var(--cds-border-strong-01, var(--color-grey-225-10-85))
98
+ );
99
+ --description-list-item-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
100
+
101
+ --placeholder-color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
102
+ --placeholder-background-color: var(
103
+ --cds-layer,
104
+ var(--cds-layer-01, var(--color-grey-225-10-95))
105
+ );
106
+
107
+ --header-background-color: var(
108
+ --cds-layer,
109
+ var(--cds-layer-01, var(--color-grey-225-10-95))
110
+ );
111
+ --header-icon-fill-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
112
+ --header-bottom-border-color: var(--color-grey-225-10-75);
113
+
114
+ --group-background-color: var(--cds-background, var(--color-white));
115
+ --group-bottom-border-color: var(
116
+ --cds-border-strong,
117
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
118
+ );
119
+
120
+ --sticky-group-background-color: var(
121
+ --cds-layer,
122
+ var(--cds-layer-01, var(--color-grey-225-10-95))
123
+ );
124
+ --sticky-group-bottom-border-color: var(
125
+ --cds-border-strong,
126
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
127
+ );
128
+
129
+ --add-entry-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
130
+ --add-entry-hover-fill-color: var(--cds-icon-inverse, var(--color-white));
131
+ --add-entry-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
132
+ --add-entry-label-color: var(--cds-text-inverse, var(--color-white));
133
+
134
+ --remove-entry-fill-color: var(--color-red-360-100-45);
135
+ --remove-entry-hover-background-color: var(--color-red-360-100-92);
136
+
137
+ --arrow-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
138
+ --arrow-hover-background-color: var(
139
+ --cds-layer,
140
+ var(--cds-layer-01, var(--color-grey-225-10-95))
141
+ );
142
+
143
+ --dot-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
144
+
145
+ --list-badge-color: var(--cds-text-inverse, var(--color-white));
146
+ --list-badge-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
147
+
148
+ --input-background-color: var(
149
+ --cds-field,
150
+ var(--cds-field-01, var(--color-grey-225-10-97))
151
+ );
152
+ --input-border-color: var(
153
+ --cds-border-strong,
154
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
155
+ );
156
+
157
+ --input-focus-background-color: var(
158
+ --cds-field,
159
+ var(--cds-field-01, var(--color-blue-205-100-95))
160
+ );
161
+ --input-focus-border-color: var(--cds-focus, var(--color-blue-205-100-50));
162
+
163
+ --input-error-background-color: var(
164
+ --cds-field,
165
+ var(--cds-field-01, var(--color-red-360-100-97))
166
+ );
167
+ --input-error-border-color: var(--cds-text-error, var(--color-red-360-100-45));
168
+ --input-error-focus-border-color: var(--cds-text-error, var(--color-red-360-100-45));
169
+
170
+ --input-disabled-color: var(--cds-text-disabled, var(--color-grey-225-10-55));
171
+ --input-disabled-background-color: var(
172
+ --cds-field,
173
+ var(--cds-field-01, var(--color-grey-225-10-97))
174
+ );
175
+ --input-disabled-border-color: var(--cds-border-disabled, var(--color-grey-225-10-90));
176
+
177
+ --toggle-switch-on-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
178
+ --toggle-switch-off-background-color: var(--cds-toggle-off, var(--color-grey-225-10-75));
179
+ --toggle-switch-switcher-background-color: var(--cds-background, var(--color-white));
180
+
181
+ --side-line-background-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
182
+ --side-line-extension-background-color: var(--cds-text-secondary, (--color-grey-225-10-35));
183
+
184
+ --list-entry-dot-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
185
+ --list-entry-header-button-fill-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
186
+ --list-entry-add-entry-empty-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
187
+ --list-entry-add-entry-empty-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-45));
188
+ --list-entry-add-entry-label-color: var(--cds-text-inverse, var(--color-white));
189
+ --list-entry-add-entry-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
190
+ --list-entry-add-entry-fill-color: var(--cds-icon-inverse, var(--color-white));
191
+
192
+ --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-35));
193
+ --feel-inactive-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
194
+
195
+ --feel-indicator-background-color: var(--cds-background-hover, var(--color-grey-225-10-90));
196
+ }
197
+
198
+ .fjs-properties-container .bio-properties-panel-input {
199
+ color: var(--color-text);
200
+ }
201
+
49
202
  .fjs-editor-container {
50
203
  height: 100%;
51
204
  width: 100%;
@@ -111,6 +264,10 @@
111
264
  user-select: none;
112
265
  }
113
266
 
267
+ .fjs-editor-container .fjs-drop-container-horizontal {
268
+ width: 100%;
269
+ }
270
+
114
271
  .fjs-editor-container .fjs-layout-row {
115
272
  padding: 4px 0px;
116
273
  }
@@ -145,6 +302,65 @@
145
302
  visibility: visible;
146
303
  }
147
304
 
305
+ .fjs-editor-container .fjs-drag-move {
306
+ padding-left: 3px;
307
+ }
308
+
309
+ .fjs-editor-container .fjs-field-resize-handle {
310
+ resize: horizontal;
311
+ position: absolute;
312
+ visibility: hidden;
313
+ width: 6px;
314
+ top: 0;
315
+ bottom: 0;
316
+ margin: auto;
317
+ height: 50px;
318
+ max-height: calc(100% - 2px);
319
+ border: 1px solid var(--color-resize-handle-border);
320
+ border-radius: 50px;
321
+ background: var(--color-white);
322
+ z-index: 3;
323
+ }
324
+
325
+ .fjs-editor-container .fjs-field-resize-handle-right {
326
+ right: -4px;
327
+ cursor: ew-resize;
328
+ }
329
+
330
+ .fjs-editor-container .fjs-field-resize-handle-left {
331
+ left: -4px;
332
+ cursor: ew-resize;
333
+ }
334
+
335
+ .fjs-editor-container .fjs-element-resizing-right .fjs-field-resize-handle-right,
336
+ .fjs-editor-container .fjs-element-resizing-left .fjs-field-resize-handle-left,
337
+ .fjs-editor-container .fjs-field-resize-handle:hover {
338
+ background: var(--color-resize-handle-background);
339
+ }
340
+
341
+ .fjs-editor-container .fjs-element-resizing-right .fjs-context-pad,
342
+ .fjs-editor-container .fjs-element-resizing-left .fjs-context-pad {
343
+ display: none;
344
+ }
345
+
346
+ .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
347
+ visibility: visible;
348
+ }
349
+
350
+ .fjs-resize-drag-preview {
351
+ width: 1px;
352
+ height: 1px;
353
+ position: absolute;
354
+ top: 0;
355
+ }
356
+
357
+ /* do not show resize handles on small screens */
358
+ @media (max-width: 66rem) {
359
+ .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
360
+ display: none !important;
361
+ }
362
+ }
363
+
148
364
  /**
149
365
  * Cursor styles
150
366
  */
@@ -179,26 +395,24 @@
179
395
  .fjs-editor-container .fjs-context-pad {
180
396
  z-index: 2;
181
397
  position: absolute;
182
- top: 3px;
183
- right: 3px;
184
- box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%);
398
+ top: 0;
399
+ right: 5px;
185
400
  }
186
401
 
187
402
  .fjs-editor-container .fjs-context-pad-item {
188
403
  border: none;
189
- border-radius: 3px;
190
404
  background-color: var(--color-context-pad-item-background);
191
405
  padding: 0;
192
406
  width: 24px;
193
407
  height: 24px;
194
- fill: var(--color-context-pad-item-fill);
408
+ color: var(--color-context-pad-item-fill);
195
409
  display: flex;
196
410
  justify-content: center;
197
411
  align-items: center;
198
412
  }
199
413
 
200
414
  .fjs-editor-container .fjs-context-pad-item:hover {
201
- fill: var(--color-context-pad-item-hover-fill);
415
+ color: var(--color-context-pad-item-hover-fill);
202
416
  }
203
417
 
204
418
  /**
@@ -265,6 +479,7 @@
265
479
  margin: 0;
266
480
  border: none;
267
481
  padding: 0;
482
+ color: var(--color-palette-text);
268
483
  }
269
484
 
270
485
  .fjs-palette-container .fjs-palette-search:focus {
package/dist/assets/form-js-editor.css CHANGED
@@ -1,49 +1,182 @@
1
1
  .fjs-editor-container {
2
- --color-children-border: var(--color-grey-225-10-75);
3
- --color-children-selected-border: var(--color-blue-219-100-53);
2
+ --color-children-border: var(
3
+ --cds-border-strong,
4
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
5
+ );
6
+ --color-children-selected-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
4
7
  --color-children-selected-background: transparent;
5
- --color-children-hover-border: var(--color-blue-219-100-53-05);
6
- --color-context-pad-item-background: var(--color-white);
7
- --color-context-pad-item-fill: var(--color-grey-225-10-35);
8
- --color-context-pad-item-hover-fill: var(--color-black);
9
- --color-dragula-background: var(--color-blue-205-100-95);
10
- --color-dragula-border: var(--color-blue-205-100-45);
11
- --color-dragula-mirror-background: var(--color-white);
12
- --color-dragula-mirror-border: var(--color-grey-225-10-90);
8
+ --color-children-hover-border: var(--cds-border-interactive, var(--color-blue-219-100-53-05));
9
+ --color-context-pad-item-background: transparent;
10
+ --color-context-pad-item-fill: var(--cds-icon-secondary, var(--color-grey-225-10-15));
11
+ --color-context-pad-item-hover-fill: var(--color-red-360-100-45);
12
+ --color-resize-handle-background: var(--cds-border-interactive, var(--color-blue-219-100-53));
13
+ --color-resize-handle-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
14
+ --color-dragula-background: var(--cds-highlight, var(--color-blue-205-100-95));
15
+ --color-dragula-border: var(--cds-border-interactive, var(--color-blue-205-100-45));
16
+ --color-dragula-mirror-background: var(--cds-background, var(--color-white));
17
+ --color-dragula-mirror-border: var(
18
+ --cds-border-strong,
19
+ var(--cds-border-strong-01, var(--color-grey-225-10-90))
20
+ );
13
21
  --color-dragula-error-background: var(--color-red-360-100-92);
14
- --color-dragula-error-border: var(--color-red-360-100-45);
22
+ --color-dragula-error-border: var(--cds-text-error, var(--color-red-360-100-45));
15
23
  }
16
24
 
17
25
  .fjs-palette-container {
18
- --color-palette-text: var(--color-grey-225-10-15);
19
- --color-palette-container-background: var(--color-grey-225-10-95);
20
- --color-palette-container-border: var(--color-grey-225-10-80);
21
- --color-palette-header: var(--color-text);
22
- --color-palette-header-background: var(--color-grey-225-10-95);
23
- --color-palette-header-border: var(--color-grey-225-10-85);
26
+ --color-palette-text: var(--cds-text-primary, var(--color-grey-225-10-15));
27
+ --color-palette-container-background: var(--cds-background, var(--color-grey-225-10-95));
28
+ --color-palette-container-border: var(
29
+ --cds-border-strong,
30
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
31
+ );
32
+ --color-palette-header: var(--cds-text-primary, var(--color-text));
33
+ --color-palette-header-background: var(--cds-background, var(--color-grey-225-10-95));
34
+ --color-palette-header-border: var(
35
+ --cds-border-strong,
36
+ var(--cds-border-strong-01, var(--color-grey-225-10-85))
37
+ );
24
38
  --color-palette-search: var(--color-palette-text);
25
- --color-palette-search-icon: var(--color-grey-225-10-35);
26
- --color-palette-search-icon-hover: var(--color-grey-225-10-15);
27
- --color-palette-search-background: var(--color-white);
28
- --color-palette-search-border: var(--color-grey-225-10-75);
29
- --color-palette-search-focus-background: var(--color-blue-205-100-95);
30
- --color-palette-search-focus-border: var(--color-blue-205-100-50);
31
- --color-palette-search-clear-focus-border: var(--color-grey-225-10-50);
39
+ --color-palette-search-icon: var(--cds-icon-secondary, var(--color-grey-225-10-35));
40
+ --color-palette-search-icon-hover: var(--cds-icon-primary, var(--color-grey-225-10-15));
41
+ --color-palette-search-background: var(
42
+ --cds-field,
43
+ var(--cds-field-01, var(--color-white))
44
+ );
45
+ --color-palette-search-border: var(
46
+ --cds-border-strong,
47
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
48
+ );
49
+ --color-palette-search-focus-background: var(
50
+ --cds-field,
51
+ var(--cds-field-01, var(--color-blue-205-100-95))
52
+ );
53
+ --color-palette-search-focus-border: var(--cds-focus, var(--color-blue-205-100-50));
54
+ --color-palette-search-clear-focus-border: var(--cds-focus, var(--color-grey-225-10-50));
32
55
  --color-palette-group-title: var(--color-palette-text);
33
56
  --color-palette-field: var(--color-palette-text);
34
- --color-palette-field-background: var(--color-white);
35
- --color-palette-field-border: var(--color-grey-225-10-80);
36
- --color-palette-field-hover-background: var(--color-grey-225-10-90);
57
+ --color-palette-field-background: var(
58
+ --cds-layer,
59
+ var(--cds-layer-01, var(--color-white))
60
+ );
61
+ --color-palette-field-border: var(
62
+ --cds-border-strong,
63
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
64
+ );
65
+ --color-palette-field-hover-background: var(--cds-background-hover, var(--color-grey-225-10-90));
37
66
  --cursor-palette-field: grab;
38
67
  --palette-width: 250px;
39
68
  }
40
69
 
41
70
  .fjs-properties-container {
42
- --color-properties-container-background: var(--color-white);
43
- --color-properties-container-border: var(--color-grey-225-10-80);
71
+ --color-properties-container-background: var(--cds-background, var(--color-white));
72
+ --color-properties-container-border: var(
73
+ --cds-border-strong,
74
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
75
+ );
44
76
  --properties-panel-width: 300px;
45
77
  }
46
78
 
79
+ /**
80
+ * Theming overrides
81
+ */
82
+ .fjs-properties-container .bio-properties-panel {
83
+ --text-base-color: var(--cds-text-primary, var(--color-grey-225-10-15));
84
+ --text-error-color: var(--cds-text-color, var(--color-red-360-100-45));
85
+ --link-color: var(--cds-text-primary, var(--color-blue-205-100-50));
86
+ --description-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
87
+ --description-code-background-color: var(
88
+ --cds-layer,
89
+ var(--cds-layer-01, var(--color-grey-225-10-97))
90
+ );
91
+ --description-code-border-color: var(
92
+ --cds-border-strong,
93
+ var(--cds-border-strong-01, var(--color-grey-225-10-85))
94
+ );
95
+ --description-list-item-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
96
+ --placeholder-color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
97
+ --placeholder-background-color: var(
98
+ --cds-layer,
99
+ var(--cds-layer-01, var(--color-grey-225-10-95))
100
+ );
101
+ --header-background-color: var(
102
+ --cds-layer,
103
+ var(--cds-layer-01, var(--color-grey-225-10-95))
104
+ );
105
+ --header-icon-fill-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
106
+ --header-bottom-border-color: var(--color-grey-225-10-75);
107
+ --group-background-color: var(--cds-background, var(--color-white));
108
+ --group-bottom-border-color: var(
109
+ --cds-border-strong,
110
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
111
+ );
112
+ --sticky-group-background-color: var(
113
+ --cds-layer,
114
+ var(--cds-layer-01, var(--color-grey-225-10-95))
115
+ );
116
+ --sticky-group-bottom-border-color: var(
117
+ --cds-border-strong,
118
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
119
+ );
120
+ --add-entry-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
121
+ --add-entry-hover-fill-color: var(--cds-icon-inverse, var(--color-white));
122
+ --add-entry-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
123
+ --add-entry-label-color: var(--cds-text-inverse, var(--color-white));
124
+ --remove-entry-fill-color: var(--color-red-360-100-45);
125
+ --remove-entry-hover-background-color: var(--color-red-360-100-92);
126
+ --arrow-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
127
+ --arrow-hover-background-color: var(
128
+ --cds-layer,
129
+ var(--cds-layer-01, var(--color-grey-225-10-95))
130
+ );
131
+ --dot-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
132
+ --list-badge-color: var(--cds-text-inverse, var(--color-white));
133
+ --list-badge-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
134
+ --input-background-color: var(
135
+ --cds-field,
136
+ var(--cds-field-01, var(--color-grey-225-10-97))
137
+ );
138
+ --input-border-color: var(
139
+ --cds-border-strong,
140
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
141
+ );
142
+ --input-focus-background-color: var(
143
+ --cds-field,
144
+ var(--cds-field-01, var(--color-blue-205-100-95))
145
+ );
146
+ --input-focus-border-color: var(--cds-focus, var(--color-blue-205-100-50));
147
+ --input-error-background-color: var(
148
+ --cds-field,
149
+ var(--cds-field-01, var(--color-red-360-100-97))
150
+ );
151
+ --input-error-border-color: var(--cds-text-error, var(--color-red-360-100-45));
152
+ --input-error-focus-border-color: var(--cds-text-error, var(--color-red-360-100-45));
153
+ --input-disabled-color: var(--cds-text-disabled, var(--color-grey-225-10-55));
154
+ --input-disabled-background-color: var(
155
+ --cds-field,
156
+ var(--cds-field-01, var(--color-grey-225-10-97))
157
+ );
158
+ --input-disabled-border-color: var(--cds-border-disabled, var(--color-grey-225-10-90));
159
+ --toggle-switch-on-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
160
+ --toggle-switch-off-background-color: var(--cds-toggle-off, var(--color-grey-225-10-75));
161
+ --toggle-switch-switcher-background-color: var(--cds-background, var(--color-white));
162
+ --side-line-background-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
163
+ --side-line-extension-background-color: var(--cds-text-secondary, (--color-grey-225-10-35));
164
+ --list-entry-dot-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
165
+ --list-entry-header-button-fill-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
166
+ --list-entry-add-entry-empty-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
167
+ --list-entry-add-entry-empty-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-45));
168
+ --list-entry-add-entry-label-color: var(--cds-text-inverse, var(--color-white));
169
+ --list-entry-add-entry-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
170
+ --list-entry-add-entry-fill-color: var(--cds-icon-inverse, var(--color-white));
171
+ --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-35));
172
+ --feel-inactive-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
173
+ --feel-indicator-background-color: var(--cds-background-hover, var(--color-grey-225-10-90));
174
+ }
175
+
176
+ .fjs-properties-container .bio-properties-panel-input {
177
+ color: var(--color-text);
178
+ }
179
+
47
180
  .fjs-editor-container {
48
181
  height: 100%;
49
182
  width: 100%;
@@ -109,6 +242,10 @@
109
242
  user-select: none;
110
243
  }
111
244
 
245
+ .fjs-editor-container .fjs-drop-container-horizontal {
246
+ width: 100%;
247
+ }
248
+
112
249
  .fjs-editor-container .fjs-layout-row {
113
250
  padding: 4px 0px;
114
251
  }
@@ -143,6 +280,64 @@
143
280
  visibility: visible;
144
281
  }
145
282
 
283
+ .fjs-editor-container .fjs-drag-move {
284
+ padding-left: 3px;
285
+ }
286
+
287
+ .fjs-editor-container .fjs-field-resize-handle {
288
+ resize: horizontal;
289
+ position: absolute;
290
+ visibility: hidden;
291
+ width: 6px;
292
+ top: 0;
293
+ bottom: 0;
294
+ margin: auto;
295
+ height: 50px;
296
+ max-height: calc(100% - 2px);
297
+ border: 1px solid var(--color-resize-handle-border);
298
+ border-radius: 50px;
299
+ background: var(--color-white);
300
+ z-index: 3;
301
+ }
302
+
303
+ .fjs-editor-container .fjs-field-resize-handle-right {
304
+ right: -4px;
305
+ cursor: ew-resize;
306
+ }
307
+
308
+ .fjs-editor-container .fjs-field-resize-handle-left {
309
+ left: -4px;
310
+ cursor: ew-resize;
311
+ }
312
+
313
+ .fjs-editor-container .fjs-element-resizing-right .fjs-field-resize-handle-right,
314
+ .fjs-editor-container .fjs-element-resizing-left .fjs-field-resize-handle-left,
315
+ .fjs-editor-container .fjs-field-resize-handle:hover {
316
+ background: var(--color-resize-handle-background);
317
+ }
318
+
319
+ .fjs-editor-container .fjs-element-resizing-right .fjs-context-pad,
320
+ .fjs-editor-container .fjs-element-resizing-left .fjs-context-pad {
321
+ display: none;
322
+ }
323
+
324
+ .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
325
+ visibility: visible;
326
+ }
327
+
328
+ .fjs-resize-drag-preview {
329
+ width: 1px;
330
+ height: 1px;
331
+ position: absolute;
332
+ top: 0;
333
+ }
334
+
335
+ /* do not show resize handles on small screens */
336
+ @media (max-width: 66rem) {
337
+ .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
338
+ display: none !important;
339
+ }
340
+ }
146
341
  /**
147
342
  * Cursor styles
148
343
  */
@@ -176,26 +371,24 @@
176
371
  .fjs-editor-container .fjs-context-pad {
177
372
  z-index: 2;
178
373
  position: absolute;
179
- top: 3px;
180
- right: 3px;
181
- box-shadow: 1px 1px 1px 1px rgb(0 0 0/10%);
374
+ top: 0;
375
+ right: 5px;
182
376
  }
183
377
 
184
378
  .fjs-editor-container .fjs-context-pad-item {
185
379
  border: none;
186
- border-radius: 3px;
187
380
  background-color: var(--color-context-pad-item-background);
188
381
  padding: 0;
189
382
  width: 24px;
190
383
  height: 24px;
191
- fill: var(--color-context-pad-item-fill);
384
+ color: var(--color-context-pad-item-fill);
192
385
  display: flex;
193
386
  justify-content: center;
194
387
  align-items: center;
195
388
  }
196
389
 
197
390
  .fjs-editor-container .fjs-context-pad-item:hover {
198
- fill: var(--color-context-pad-item-hover-fill);
391
+ color: var(--color-context-pad-item-hover-fill);
199
392
  }
200
393
 
201
394
  /**
@@ -262,6 +455,7 @@
262
455
  margin: 0;
263
456
  border: none;
264
457
  padding: 0;
458
+ color: var(--color-palette-text);
265
459
  }
266
460
 
267
461
  .fjs-palette-container .fjs-palette-search:focus {