@bpmn-io/form-js-viewer 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 (25) hide show
  1. package/dist/assets/form-js-base.css +94 -45
  2. package/dist/assets/form-js.css +90 -41
  3. package/dist/index.cjs +493 -304
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.es.js +493 -304
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/types/Form.d.ts +1 -1
  8. package/dist/types/core/EventBus.d.ts +1 -1
  9. package/dist/types/core/index.d.ts +2 -1
  10. package/dist/types/render/Renderer.d.ts +2 -2
  11. package/dist/types/render/components/Util.d.ts +2 -2
  12. package/dist/types/render/components/form-fields/Button.d.ts +9 -7
  13. package/dist/types/render/components/form-fields/Checkbox.d.ts +11 -9
  14. package/dist/types/render/components/form-fields/Checklist.d.ts +14 -12
  15. package/dist/types/render/components/form-fields/Datetime.d.ts +9 -7
  16. package/dist/types/render/components/form-fields/Default.d.ts +9 -7
  17. package/dist/types/render/components/form-fields/Image.d.ts +7 -5
  18. package/dist/types/render/components/form-fields/Number.d.ts +12 -10
  19. package/dist/types/render/components/form-fields/Radio.d.ts +14 -12
  20. package/dist/types/render/components/form-fields/Select.d.ts +14 -12
  21. package/dist/types/render/components/form-fields/Taglist.d.ts +14 -12
  22. package/dist/types/render/components/form-fields/Text.d.ts +9 -7
  23. package/dist/types/render/components/form-fields/Textarea.d.ts +11 -9
  24. package/dist/types/render/components/form-fields/Textfield.d.ts +11 -9
  25. package/package.json +2 -2
package/dist/assets/form-js-base.css CHANGED
@@ -33,21 +33,54 @@
33
33
  --color-white: hsl(0, 0%, 100%);
34
34
  --color-black: hsl(0, 0%, 0%);
35
35
 
36
- --color-background: var(--color-white);
37
- --color-background-disabled: var(--color-grey-225-10-95);
38
- --color-background-adornment: var(--color-grey-225-10-95);
39
- --color-icon-base: var(--color-black);
40
- --color-text: var(--color-grey-225-10-15);
41
- --color-text-light: var(--color-grey-225-10-35);
42
- --color-text-lighter: var(--color-grey-225-10-45);
43
- --color-text-lightest: var(--color-grey-225-10-55);
44
- --color-text-inverted: var(--color-white);
45
- --color-borders: var(--color-grey-225-10-55);
46
- --color-borders-disabled: var(--color-grey-225-10-75);
47
- --color-borders-adornment: var(--color-grey-225-10-85);
48
- --color-warning: var(--color-red-360-100-45);
49
- --color-accent: var(--color-blue-205-100-40);
50
- --color-datepicker-focused-day: var(--color-grey-225-10-55);
36
+ /**
37
+ * Specify color variables in the following schema:
38
+ * 1 - use specified layer
39
+ * 2 - use layer one
40
+ * 3 - use fallback
41
+ */
42
+ --color-background: var(
43
+ --cds-field,
44
+ var(--cds-field-01, var(--color-white))
45
+ );
46
+ --color-background-disabled: var(--cds-background, var(--color-grey-225-10-95));
47
+ --color-background-adornment: var(
48
+ --cds-field,
49
+ var(--cds-field-01, var(--color-grey-225-10-95))
50
+ );
51
+ --color-background-inverted: var(--cds-background-inverse, var(--color-grey-225-10-90));
52
+ --color-background-inverted-hover: var(--cds-background-inverse-hover, var(--color-grey-225-10-93));
53
+ --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
54
+ --color-layer: var(
55
+ --cds-layer,
56
+ var(--cds-layer-01, var(--color-white))
57
+ );
58
+
59
+ --color-icon-base: var(--cds-icon-primary, var(--color-black));
60
+ --color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
61
+ --color-text: var(--cds-text-primary, var(--color-grey-225-10-15));
62
+ --color-text-light: var(--cds-text-secondary, var(--color-grey-225-10-35));
63
+ --color-text-lighter: var(--cds-text-secondary, var(--color-grey-225-10-45));
64
+ --color-text-lightest: var(--cds-text-placeholder, var(--color-grey-225-10-55));
65
+ --color-text-inverted: var(--cds-text-inverse, var(--color-text));
66
+ --color-text-disabled: var(--cds-text-disabled, var(--color-text-light));
67
+
68
+ --color-borders: var(
69
+ --cds-border-strong,
70
+ var(--cds-border-strong-01, var(--color-grey-225-10-55))
71
+ );
72
+ --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
73
+ --color-borders-adornment: var(
74
+ --cds-border-subtle,
75
+ var(--cds-border-subtle-01, var(--color-grey-225-10-85))
76
+ );
77
+ --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
78
+
79
+ --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
80
+ --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
81
+ --color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
82
+ --color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
83
+ --color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
51
84
 
52
85
  --font-family: 'IBM Plex Sans', sans-serif;
53
86
 
@@ -67,7 +100,7 @@
67
100
 
68
101
  --border-definition: 1px solid var(--color-borders);
69
102
  --border-definition-adornment: 1px solid var(--color-borders-adornment);
70
- --outline-definition: 1px solid var(--color-borders);
103
+ --outline-definition: 1px solid var(--cds-focus, var(--color-borders));
71
104
  --border-definition-disabled: 1px solid var(--color-borders-disabled);
72
105
 
73
106
  height: 100%;
@@ -133,7 +166,6 @@
133
166
  letter-spacing: var(--letter-spacing-base);
134
167
  font-weight: 400;
135
168
  color: var(--color-text);
136
- background-color: var(--color-background);
137
169
  position: relative;
138
170
  padding: 0 4px;
139
171
  }
@@ -180,6 +212,7 @@
180
212
  .fjs-container .fjs-taglist-input,
181
213
  .fjs-container .fjs-textarea,
182
214
  .fjs-container .fjs-select {
215
+ color: var(--color-text);
183
216
  border-color: var(--color-borders);
184
217
  background-color: var(--color-background);
185
218
  font-family: inherit;
@@ -271,7 +304,7 @@
271
304
  color: var(--color-text-lighter);
272
305
  padding: 8px;
273
306
  width: auto !important;
274
- min-width: 34px;
307
+ min-width: min(34px, 20%);
275
308
  display: flex;
276
309
  overflow: hidden;
277
310
  }
@@ -353,7 +386,7 @@
353
386
  .fjs-container .fjs-input-group .fjs-taglist,
354
387
  .fjs-container .fjs-input-group .fjs-select {
355
388
  height: unset;
356
- min-width: min(60px, 50%);
389
+ min-width: min(60px, 40%);
357
390
  width: 100%;
358
391
  }
359
392
 
@@ -376,7 +409,7 @@
376
409
 
377
410
  .fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
378
411
  .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display {
379
- color: var(--color-text-lightest);
412
+ color: var(--color-text-lighter);
380
413
  line-height: var(--line-height-input);
381
414
  }
382
415
 
@@ -413,6 +446,7 @@
413
446
  width: 100%;
414
447
  height: 100%;
415
448
  display: flex;
449
+ position: relative;
416
450
  }
417
451
 
418
452
  .fjs-container .fjs-textarea {
@@ -430,7 +464,7 @@
430
464
  display: flex;
431
465
  flex-direction: column;
432
466
  border-radius: 0 2px 2px 0;
433
- width: 23px;
467
+ width: clamp(16px, 40%, 23px);
434
468
  overflow: clip;
435
469
  border-left: var(--border-definition-adornment);
436
470
  }
@@ -443,20 +477,18 @@
443
477
  .fjs-container .fjs-number-arrow-container button {
444
478
  border: none;
445
479
  flex: 1;
446
- color: var(--color-text-light);
447
- background-color: var(--color-grey-225-10-95);
480
+ color: var(--color-text);
481
+ background-color: var(--color-background);
448
482
  font-weight: bold;
449
483
  font-size: 10px;
450
484
  line-height: 15px;
451
485
  }
452
486
 
453
487
  .fjs-container .fjs-number-arrow-container button:hover {
454
- background-color: var(--color-grey-225-10-93);
455
- color: var(--color-text);
488
+ background-color: var(--color-background-inverted-hover);
489
+ color: var(--cds-text-inverse, var(--color-text));
456
490
  }
457
491
 
458
-
459
-
460
492
  .fjs-container .fjs-radio {
461
493
  display: flex;
462
494
  flex-direction: column;
@@ -468,7 +500,7 @@
468
500
  }
469
501
 
470
502
  .fjs-container .fjs-button[type='submit'] {
471
- color: var(--color-text-inverted);
503
+ color: var(--cds-text-inverse, var(--color-white));
472
504
  background-color: var(--color-accent);
473
505
  border-color: var(--color-accent);
474
506
  }
@@ -522,23 +554,32 @@
522
554
  .fjs-container .fjs-number-arrow-container.fjs-disabled button,
523
555
  .fjs-container .fjs-taglist.fjs-disabled,
524
556
  .fjs-container .fjs-disabled .fjs-input-group {
525
- background-color: var(--color-background-disabled);
557
+ color: var(--color-text-disabled);
558
+ background-color: var(--cds-field, var(--color-background-disabled));
526
559
  border-color: var(--color-borders-disabled);
527
560
  }
528
561
 
562
+ .fjs-container .fjs-number-arrow-container.fjs-disabled button {
563
+ background-color: var(--cds-toggle-off, var(--color-background-disabled));
564
+ }
565
+
529
566
  .fjs-container .fjs-button[type='submit']:disabled,
530
567
  .fjs-container .fjs-button[type='reset']:disabled {
531
- color: var(--text-light);
568
+ color: var(--cds-text-on-color-disabled, var(--color-text-light));
532
569
  background-color: var(--color-background-disabled);
533
570
  border-color: var(--color-borders-disabled);
534
571
  }
535
572
  .fjs-container .fjs-disabled .fjs-input-group .fjs-input-adornment,
536
573
  .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container,
537
- .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator
538
- {
574
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator {
539
575
  border-color: var(--color-borders-disabled);
540
576
  }
541
577
 
578
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-up,
579
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-down {
580
+ pointer-events: none;
581
+ }
582
+
542
583
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
543
584
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
544
585
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
@@ -566,8 +607,7 @@
566
607
  }
567
608
 
568
609
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
569
- border-color: var(--color-red-360-100-92);
570
- background: var(--color-red-360-100-97);
610
+ border-color: var(--color-warning-light);
571
611
  }
572
612
 
573
613
  .fjs-container .fjs-form-field-error {
@@ -609,6 +649,14 @@
609
649
  top: -5px;
610
650
  }
611
651
 
652
+ .fjs-container .fjs-select-hidden-input {
653
+ width: 0;
654
+ overflow: hidden;
655
+ opacity: 0;
656
+ padding: 0;
657
+ border: none;
658
+ }
659
+
612
660
  .fjs-container .fjs-taglist {
613
661
  display: flex;
614
662
  flex-wrap: wrap;
@@ -624,12 +672,13 @@
624
672
  display: flex;
625
673
  overflow: hidden;
626
674
  user-select: none;
627
- background-color: var(--color-grey-225-10-90);
675
+ color: var(--color-text-inverted);
676
+ background-color: var(--color-background-inverted);
628
677
  border-radius: 2px;
629
678
  }
630
679
 
631
680
  .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag {
632
- background-color: var(--color-grey-225-10-85);
681
+ background-color: var(--color-background-inverted);
633
682
  }
634
683
 
635
684
  .fjs-container .fjs-taglist .fjs-taglist-tags {
@@ -652,7 +701,7 @@
652
701
  height: 24px;
653
702
  text-align: center;
654
703
  line-height: 28px;
655
- background-color: var(--color-grey-225-10-80);
704
+ background-color: var(--cds-background-inverse, var(--color-grey-225-10-80));
656
705
  border: none;
657
706
  padding: 1px 0;
658
707
  }
@@ -660,12 +709,12 @@
660
709
  .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove > svg {
661
710
  margin-bottom: 4px;
662
711
  opacity: 0.6;
663
- color: var(--color-icon-base);
712
+ color: var(--color-icon-inverted);
664
713
  }
665
714
 
666
715
  .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
667
716
  .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
668
- background-color: var(--color-grey-225-10-75);
717
+ background-color: var(--color-background-active);
669
718
  }
670
719
 
671
720
  .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
@@ -694,14 +743,14 @@
694
743
  width: 100%;
695
744
  border-radius: 3px;
696
745
  margin-top: 3px;
697
- box-shadow: 0px 0px 5px var(--color-grey-225-10-85);
698
- background-color: var(--color-white);
746
+ box-shadow: 0px 0px 5px var(--color-shadow);
747
+ background-color: var(--color-layer);
699
748
  }
700
749
 
701
750
  .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
702
751
  padding: 6px 8px;
703
- border-bottom: 1px solid var(--color-grey-225-10-90);
704
- color: var(--color-grey-225-10-35);
752
+ border-bottom: 1px solid var(--color-borders-inverted);
753
+ color: var(--color-text-light);
705
754
  }
706
755
 
707
756
  .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
@@ -709,8 +758,8 @@
709
758
  }
710
759
 
711
760
  .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
712
- background-color: var(--color-grey-225-10-90);
713
- color: var(--color-black);
761
+ background-color: var(--color-background-inverted);
762
+ color: var(--color-text-inverted);
714
763
  }
715
764
 
716
765
  .fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
package/dist/assets/form-js.css CHANGED
@@ -28,21 +28,51 @@
28
28
  --color-red-360-100-97: hsl(360, 100%, 97%);
29
29
  --color-white: hsl(0, 0%, 100%);
30
30
  --color-black: hsl(0, 0%, 0%);
31
- --color-background: var(--color-white);
32
- --color-background-disabled: var(--color-grey-225-10-95);
33
- --color-background-adornment: var(--color-grey-225-10-95);
34
- --color-icon-base: var(--color-black);
35
- --color-text: var(--color-grey-225-10-15);
36
- --color-text-light: var(--color-grey-225-10-35);
37
- --color-text-lighter: var(--color-grey-225-10-45);
38
- --color-text-lightest: var(--color-grey-225-10-55);
39
- --color-text-inverted: var(--color-white);
40
- --color-borders: var(--color-grey-225-10-55);
41
- --color-borders-disabled: var(--color-grey-225-10-75);
42
- --color-borders-adornment: var(--color-grey-225-10-85);
43
- --color-warning: var(--color-red-360-100-45);
44
- --color-accent: var(--color-blue-205-100-40);
45
- --color-datepicker-focused-day: var(--color-grey-225-10-55);
31
+ /**
32
+ * Specify color variables in the following schema:
33
+ * 1 - use specified layer
34
+ * 2 - use layer one
35
+ * 3 - use fallback
36
+ */
37
+ --color-background: var(
38
+ --cds-field,
39
+ var(--cds-field-01, var(--color-white))
40
+ );
41
+ --color-background-disabled: var(--cds-background, var(--color-grey-225-10-95));
42
+ --color-background-adornment: var(
43
+ --cds-field,
44
+ var(--cds-field-01, var(--color-grey-225-10-95))
45
+ );
46
+ --color-background-inverted: var(--cds-background-inverse, var(--color-grey-225-10-90));
47
+ --color-background-inverted-hover: var(--cds-background-inverse-hover, var(--color-grey-225-10-93));
48
+ --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
49
+ --color-layer: var(
50
+ --cds-layer,
51
+ var(--cds-layer-01, var(--color-white))
52
+ );
53
+ --color-icon-base: var(--cds-icon-primary, var(--color-black));
54
+ --color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
55
+ --color-text: var(--cds-text-primary, var(--color-grey-225-10-15));
56
+ --color-text-light: var(--cds-text-secondary, var(--color-grey-225-10-35));
57
+ --color-text-lighter: var(--cds-text-secondary, var(--color-grey-225-10-45));
58
+ --color-text-lightest: var(--cds-text-placeholder, var(--color-grey-225-10-55));
59
+ --color-text-inverted: var(--cds-text-inverse, var(--color-text));
60
+ --color-text-disabled: var(--cds-text-disabled, var(--color-text-light));
61
+ --color-borders: var(
62
+ --cds-border-strong,
63
+ var(--cds-border-strong-01, var(--color-grey-225-10-55))
64
+ );
65
+ --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
66
+ --color-borders-adornment: var(
67
+ --cds-border-subtle,
68
+ var(--cds-border-subtle-01, var(--color-grey-225-10-85))
69
+ );
70
+ --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
71
+ --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
72
+ --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
73
+ --color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
74
+ --color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
75
+ --color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
46
76
  --font-family: "IBM Plex Sans", sans-serif;
47
77
  --font-size-base: 14px;
48
78
  --font-size-input: 14px;
@@ -56,7 +86,7 @@
56
86
  --form-field-height: 36px;
57
87
  --border-definition: 1px solid var(--color-borders);
58
88
  --border-definition-adornment: 1px solid var(--color-borders-adornment);
59
- --outline-definition: 1px solid var(--color-borders);
89
+ --outline-definition: 1px solid var(--cds-focus, var(--color-borders));
60
90
  --border-definition-disabled: 1px solid var(--color-borders-disabled);
61
91
  height: 100%;
62
92
  }
@@ -120,7 +150,6 @@
120
150
  letter-spacing: var(--letter-spacing-base);
121
151
  font-weight: 400;
122
152
  color: var(--color-text);
123
- background-color: var(--color-background);
124
153
  position: relative;
125
154
  padding: 0 4px;
126
155
  }
@@ -167,6 +196,7 @@
167
196
  .fjs-container .fjs-taglist-input,
168
197
  .fjs-container .fjs-textarea,
169
198
  .fjs-container .fjs-select {
199
+ color: var(--color-text);
170
200
  border-color: var(--color-borders);
171
201
  background-color: var(--color-background);
172
202
  font-family: inherit;
@@ -258,7 +288,7 @@
258
288
  color: var(--color-text-lighter);
259
289
  padding: 8px;
260
290
  width: auto !important;
261
- min-width: 34px;
291
+ min-width: min(34px, 20%);
262
292
  display: flex;
263
293
  overflow: hidden;
264
294
  }
@@ -338,7 +368,7 @@
338
368
  .fjs-container .fjs-input-group .fjs-taglist,
339
369
  .fjs-container .fjs-input-group .fjs-select {
340
370
  height: unset;
341
- min-width: min(60px, 50%);
371
+ min-width: min(60px, 40%);
342
372
  width: 100%;
343
373
  }
344
374
 
@@ -361,7 +391,7 @@
361
391
 
362
392
  .fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
363
393
  .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display {
364
- color: var(--color-text-lightest);
394
+ color: var(--color-text-lighter);
365
395
  line-height: var(--line-height-input);
366
396
  }
367
397
 
@@ -398,6 +428,7 @@
398
428
  width: 100%;
399
429
  height: 100%;
400
430
  display: flex;
431
+ position: relative;
401
432
  }
402
433
 
403
434
  .fjs-container .fjs-textarea {
@@ -415,7 +446,7 @@
415
446
  display: flex;
416
447
  flex-direction: column;
417
448
  border-radius: 0 2px 2px 0;
418
- width: 23px;
449
+ width: clamp(16px, 40%, 23px);
419
450
  overflow: clip;
420
451
  border-left: var(--border-definition-adornment);
421
452
  }
@@ -428,16 +459,16 @@
428
459
  .fjs-container .fjs-number-arrow-container button {
429
460
  border: none;
430
461
  flex: 1;
431
- color: var(--color-text-light);
432
- background-color: var(--color-grey-225-10-95);
462
+ color: var(--color-text);
463
+ background-color: var(--color-background);
433
464
  font-weight: bold;
434
465
  font-size: 10px;
435
466
  line-height: 15px;
436
467
  }
437
468
 
438
469
  .fjs-container .fjs-number-arrow-container button:hover {
439
- background-color: var(--color-grey-225-10-93);
440
- color: var(--color-text);
470
+ background-color: var(--color-background-inverted-hover);
471
+ color: var(--cds-text-inverse, var(--color-text));
441
472
  }
442
473
 
443
474
  .fjs-container .fjs-radio {
@@ -451,7 +482,7 @@
451
482
  }
452
483
 
453
484
  .fjs-container .fjs-button[type=submit] {
454
- color: var(--color-text-inverted);
485
+ color: var(--cds-text-inverse, var(--color-white));
455
486
  background-color: var(--color-accent);
456
487
  border-color: var(--color-accent);
457
488
  }
@@ -505,13 +536,18 @@
505
536
  .fjs-container .fjs-number-arrow-container.fjs-disabled button,
506
537
  .fjs-container .fjs-taglist.fjs-disabled,
507
538
  .fjs-container .fjs-disabled .fjs-input-group {
508
- background-color: var(--color-background-disabled);
539
+ color: var(--color-text-disabled);
540
+ background-color: var(--cds-field, var(--color-background-disabled));
509
541
  border-color: var(--color-borders-disabled);
510
542
  }
511
543
 
544
+ .fjs-container .fjs-number-arrow-container.fjs-disabled button {
545
+ background-color: var(--cds-toggle-off, var(--color-background-disabled));
546
+ }
547
+
512
548
  .fjs-container .fjs-button[type=submit]:disabled,
513
549
  .fjs-container .fjs-button[type=reset]:disabled {
514
- color: var(--text-light);
550
+ color: var(--cds-text-on-color-disabled, var(--color-text-light));
515
551
  background-color: var(--color-background-disabled);
516
552
  border-color: var(--color-borders-disabled);
517
553
  }
@@ -522,6 +558,11 @@
522
558
  border-color: var(--color-borders-disabled);
523
559
  }
524
560
 
561
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-up,
562
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-down {
563
+ pointer-events: none;
564
+ }
565
+
525
566
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
526
567
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
527
568
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
@@ -549,8 +590,7 @@
549
590
  }
550
591
 
551
592
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
552
- border-color: var(--color-red-360-100-92);
553
- background: var(--color-red-360-100-97);
593
+ border-color: var(--color-warning-light);
554
594
  }
555
595
 
556
596
  .fjs-container .fjs-form-field-error {
@@ -592,6 +632,14 @@
592
632
  top: -5px;
593
633
  }
594
634
 
635
+ .fjs-container .fjs-select-hidden-input {
636
+ width: 0;
637
+ overflow: hidden;
638
+ opacity: 0;
639
+ padding: 0;
640
+ border: none;
641
+ }
642
+
595
643
  .fjs-container .fjs-taglist {
596
644
  display: flex;
597
645
  flex-wrap: wrap;
@@ -607,12 +655,13 @@
607
655
  display: flex;
608
656
  overflow: hidden;
609
657
  user-select: none;
610
- background-color: var(--color-grey-225-10-90);
658
+ color: var(--color-text-inverted);
659
+ background-color: var(--color-background-inverted);
611
660
  border-radius: 2px;
612
661
  }
613
662
 
614
663
  .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag {
615
- background-color: var(--color-grey-225-10-85);
664
+ background-color: var(--color-background-inverted);
616
665
  }
617
666
 
618
667
  .fjs-container .fjs-taglist .fjs-taglist-tags {
@@ -635,7 +684,7 @@
635
684
  height: 24px;
636
685
  text-align: center;
637
686
  line-height: 28px;
638
- background-color: var(--color-grey-225-10-80);
687
+ background-color: var(--cds-background-inverse, var(--color-grey-225-10-80));
639
688
  border: none;
640
689
  padding: 1px 0;
641
690
  }
@@ -643,12 +692,12 @@
643
692
  .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove > svg {
644
693
  margin-bottom: 4px;
645
694
  opacity: 0.6;
646
- color: var(--color-icon-base);
695
+ color: var(--color-icon-inverted);
647
696
  }
648
697
 
649
698
  .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
650
699
  .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
651
- background-color: var(--color-grey-225-10-75);
700
+ background-color: var(--color-background-active);
652
701
  }
653
702
 
654
703
  .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
@@ -677,14 +726,14 @@
677
726
  width: 100%;
678
727
  border-radius: 3px;
679
728
  margin-top: 3px;
680
- box-shadow: 0px 0px 5px var(--color-grey-225-10-85);
681
- background-color: var(--color-white);
729
+ box-shadow: 0px 0px 5px var(--color-shadow);
730
+ background-color: var(--color-layer);
682
731
  }
683
732
 
684
733
  .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
685
734
  padding: 6px 8px;
686
- border-bottom: 1px solid var(--color-grey-225-10-90);
687
- color: var(--color-grey-225-10-35);
735
+ border-bottom: 1px solid var(--color-borders-inverted);
736
+ color: var(--color-text-light);
688
737
  }
689
738
 
690
739
  .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
@@ -692,8 +741,8 @@
692
741
  }
693
742
 
694
743
  .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
695
- background-color: var(--color-grey-225-10-90);
696
- color: var(--color-black);
744
+ background-color: var(--color-background-inverted);
745
+ color: var(--color-text-inverted);
697
746
  }
698
747
 
699
748
  .fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {