bpmn-js 18.25.0 → 18.26.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.
@@ -11,6 +11,7 @@
11
11
  --color-grey-225-10-95: hsl(225, 10%, 95%);
12
12
  --color-grey-225-10-97: hsl(225, 10%, 97%);
13
13
 
14
+ --color-blue-205-100-40: hsl(205, 100%, 40%);
14
15
  --color-blue-205-100-45: hsl(205, 100%, 45%);
15
16
  --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
16
17
  --color-blue-205-100-50: hsl(205, 100%, 50%);
@@ -28,11 +29,17 @@
28
29
  --color-black-opacity-05: hsla(0, 0%, 0%, 5%);
29
30
  --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
30
31
 
32
+ --accent-color: var(--color-blue-205-100-40);
33
+
31
34
  --breadcrumbs-font-family: var(--bjs-font-family);
32
- --breadcrumbs-item-color: var(--color-blue-205-100-50);
35
+ --breadcrumbs-item-color: var(--accent-color);
33
36
  --breadcrumbs-arrow-color: var(--color-black);
37
+ --breadcrumbs-background-color: var(--color-grey-225-10-97);
38
+ --breadcrumbs-border-color: var(--color-grey-225-10-75);
39
+ --breadcrumbs-focus-outline-color: var(--accent-color);
34
40
  --drilldown-fill-color: var(--color-white);
35
- --drilldown-background-color: var(--color-blue-205-100-50);
41
+ --drilldown-background-color: var(--accent-color);
42
+ --drilldown-focus-outline-color: var(--accent-color);
36
43
  }
37
44
 
38
45
  .bjs-breadcrumbs {
@@ -40,13 +47,17 @@
40
47
  display: none;
41
48
  flex-wrap: wrap;
42
49
  align-items: center;
43
- top: 30px;
44
- left: 30px;
45
- padding: 0px;
50
+ top: 20px;
51
+ left: 20px;
52
+ padding: 5px 10px;
46
53
  margin: 0px;
47
54
  font-family: var(--breadcrumbs-font-family);
48
55
  font-size: 16px;
49
56
  line-height: normal;
57
+ background-color: var(--breadcrumbs-background-color);
58
+ border: solid 1px var(--breadcrumbs-border-color);
59
+ border-radius: 2px;
60
+ row-gap: 5px;
50
61
  }
51
62
 
52
63
  .bjs-breadcrumbs-shown .bjs-breadcrumbs {
@@ -63,18 +74,18 @@
63
74
 
64
75
  .bjs-breadcrumbs li {
65
76
  display: inline-flex;
66
- padding-bottom: 5px;
67
77
  align-items: center;
68
78
  }
69
79
 
70
- .bjs-breadcrumbs li a {
80
+ .bjs-breadcrumbs a.bjs-crumb {
71
81
  cursor: pointer;
72
82
  color: var(--breadcrumbs-item-color);
83
+ text-decoration: none;
73
84
  }
74
85
 
75
- .bjs-breadcrumbs li:last-of-type a {
76
- color: inherit;
77
- cursor: default;
86
+ .bjs-breadcrumbs a.bjs-crumb:focus-visible {
87
+ outline: solid 1px var(--breadcrumbs-focus-outline-color);
88
+ outline-offset: 1px;
78
89
  }
79
90
 
80
91
  .bjs-breadcrumbs li:not(:first-child)::before {
@@ -102,12 +113,16 @@
102
113
  cursor: pointer;
103
114
  border: none;
104
115
  border-radius: 2px;
105
- outline: none;
106
116
 
107
117
  fill: var(--drilldown-fill-color);
108
118
  background-color: var(--drilldown-background-color);
109
119
  }
110
120
 
121
+ .bjs-drilldown:focus-visible {
122
+ outline: solid 1px var(--drilldown-focus-outline-color);
123
+ outline-offset: 1px;
124
+ }
125
+
111
126
  .bjs-drilldown-empty {
112
127
  display: none;
113
128
  }
@@ -12,6 +12,7 @@
12
12
  --color-grey-225-10-95: hsl(225, 10%, 95%);
13
13
  --color-grey-225-10-97: hsl(225, 10%, 97%);
14
14
 
15
+ --color-blue-205-100-40: hsl(205, 100%, 40%);
15
16
  --color-blue-205-100-45: hsl(205, 100%, 45%);
16
17
  --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
17
18
  --color-blue-205-100-50: hsl(205, 100%, 50%);
@@ -33,15 +34,17 @@
33
34
 
34
35
  --canvas-fill-color: var(--color-white);
35
36
 
37
+ --accent-color: var(--color-blue-205-100-40);
38
+
36
39
  --bendpoint-fill-color: var(--color-blue-205-100-45);
37
40
  --bendpoint-stroke-color: var(--canvas-fill-color);
38
41
 
39
42
  --context-pad-entry-background-color: var(--color-white);
40
43
  --context-pad-entry-hover-background-color: var(--color-grey-225-10-95);
41
44
 
42
- --element-dragger-color: var(--color-blue-205-100-50);
45
+ --element-dragger-color: var(--accent-color);
43
46
  --element-hover-outline-fill-color: var(--color-blue-205-100-45);
44
- --element-selected-outline-stroke-color: var(--color-blue-205-100-50);
47
+ --element-selected-outline-stroke-color: var(--accent-color);
45
48
  --element-selected-outline-secondary-stroke-color: var(--color-blue-205-100-70);
46
49
 
47
50
  --lasso-fill-color: var(--color-blue-205-100-50-opacity-15);
@@ -49,7 +52,7 @@
49
52
 
50
53
  --palette-entry-color: var(--color-grey-225-10-15);
51
54
  --palette-entry-hover-color: var(--color-blue-205-100-45);
52
- --palette-entry-selected-color: var(--color-blue-205-100-50);
55
+ --palette-entry-selected-color: var(--accent-color);
53
56
  --palette-separator-color: var(--color-grey-225-10-75);
54
57
  --palette-toggle-hover-background-color: var(--color-grey-225-10-55);
55
58
  --palette-background-color: var(--color-grey-225-10-97);
@@ -58,7 +61,7 @@
58
61
  --popup-font-family: "IBM Plex Sans", sans-serif;
59
62
  --popup-font-size: 14px;
60
63
  --popup-secondary-font-size: .9em;
61
- --popup-header-entry-selected-color: var(--color-blue-205-100-50);
64
+ --popup-header-entry-selected-color: var(--accent-color);
62
65
  --popup-header-font-weight: bolder;
63
66
  --popup-header-group-divider-color: var(--color-grey-225-10-75);
64
67
  --popup-background-color: var(--color-white);
@@ -70,14 +73,14 @@
70
73
  --popup-entry-title-color: var(--color-grey-225-10-55);
71
74
  --popup-entry-hover-color: var(--color-grey-225-10-95);
72
75
  --popup-search-border-color: var(--color-grey-225-10-75);
73
- --popup-search-focus-border-color: var(--color-blue-205-100-50);
76
+ --popup-search-focus-border-color: var(--accent-color);
74
77
  --popup-search-focus-background-color: var(--color-blue-205-100-95);
75
78
  --popup-tab-color: var(--color-grey-225-10-55);
76
79
  --popup-tab-hover-color: var(--color-grey-225-10-15);
77
80
  --popup-tab-active-color: var(--color-grey-225-10-15);
78
- --popup-tab-active-border-color: var(--color-blue-205-100-50);
81
+ --popup-tab-active-border-color: var(--accent-color);
79
82
  --popup-tab-strip-border-color: var(--color-grey-225-10-90);
80
- --popup-tab-focus-border-color: var(--color-blue-205-100-50);
83
+ --popup-tab-focus-border-color: var(--accent-color);
81
84
 
82
85
  --resizer-fill-color: var(--color-blue-205-100-45);
83
86
  --resizer-stroke-color: var(--canvas-fill-color);
@@ -87,17 +90,17 @@
87
90
  --search-container-background-color: var(--color-white);
88
91
  --search-shadow-color: var(--color-black-opacity-30);
89
92
  --search-input-border-color: var(--color-grey-225-10-75);
90
- --search-input-focus-border-color: var(--color-blue-205-100-50);
93
+ --search-input-focus-border-color: var(--accent-color);
91
94
  --search-input-focus-background-color: var(--color-blue-205-100-95);
92
95
  --search-result-hover-background-color: var(--color-grey-225-10-95);
93
96
  --search-result-secondary-color: var(--color-grey-225-10-55);
94
97
  --search-preselected-background-color: var(--color-blue-205-100-50-opacity-15);
95
98
 
96
- --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50);
99
+ --shape-attach-allowed-stroke-color: var(--accent-color);
97
100
  --shape-connect-allowed-fill-color: var(--color-grey-225-10-97);
98
101
  --shape-drop-allowed-fill-color: var(--color-grey-225-10-97);
99
102
  --shape-drop-not-allowed-fill-color: var(--color-red-360-100-97);
100
- --shape-resize-preview-stroke-color: var(--color-blue-205-100-50);
103
+ --shape-resize-preview-stroke-color: var(--accent-color);
101
104
 
102
105
  --snap-line-stroke-color: var(--color-blue-205-100-45-opacity-30);
103
106