@bpmn-io/form-js-viewer 1.26.1 → 2.0.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.
- package/dist/assets/form-js-base.css +283 -157
- package/dist/assets/form-js.css +2750 -2593
- package/dist/assets/theme.css +168 -0
- package/dist/index.cjs +3 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +3 -3
- package/dist/index.es.js.map +1 -1
- package/package.json +6 -4
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The bpmn.io design tokens.
|
|
3
|
+
*
|
|
4
|
+
* Apply `bio-theme` to a component root — or to any common ancestor — and
|
|
5
|
+
* everything below inherits the tokens.
|
|
6
|
+
*
|
|
7
|
+
* Two tiers: the raw palette (`--color-*`) and the semantic tokens (`--bio-*`).
|
|
8
|
+
* Components derive their own variables from the semantic tokens; a theme
|
|
9
|
+
* rebinds the tokens, and reaches a component variable only to deviate.
|
|
10
|
+
*
|
|
11
|
+
* A theme has to match the element itself, not just an ancestor
|
|
12
|
+
* (`.my-theme .bio-theme`), because a custom property declared on an
|
|
13
|
+
* element always beats one inherited from above.
|
|
14
|
+
*/
|
|
15
|
+
.bio-theme {
|
|
16
|
+
|
|
17
|
+
/* greys */
|
|
18
|
+
--color-grey-225-10-15: hsl(225, 10%, 15%);
|
|
19
|
+
--color-grey-225-10-35: hsl(225, 10%, 35%);
|
|
20
|
+
--color-grey-225-10-45: hsl(225, 10%, 45%);
|
|
21
|
+
--color-grey-225-10-55: hsl(225, 10%, 55%);
|
|
22
|
+
--color-grey-225-10-75: hsl(225, 10%, 75%);
|
|
23
|
+
--color-grey-225-10-80: hsl(225, 10%, 80%);
|
|
24
|
+
--color-grey-225-10-85: hsl(225, 10%, 85%);
|
|
25
|
+
--color-grey-225-10-90: hsl(225, 10%, 90%);
|
|
26
|
+
--color-grey-225-10-93: hsl(225, 10%, 93%);
|
|
27
|
+
--color-grey-225-10-95: hsl(225, 10%, 95%);
|
|
28
|
+
--color-grey-225-10-97: hsl(225, 10%, 97%);
|
|
29
|
+
--color-grey-0-0-22: hsl(0, 0%, 22%);
|
|
30
|
+
--color-grey-0-0-88: hsl(0, 0%, 88%);
|
|
31
|
+
|
|
32
|
+
/* blues */
|
|
33
|
+
--color-blue-205-100-35: hsl(205, 100%, 35%);
|
|
34
|
+
--color-blue-205-100-40: hsl(205, 100%, 40%);
|
|
35
|
+
--color-blue-205-100-45: hsl(205, 100%, 45%);
|
|
36
|
+
--color-blue-205-100-50: hsl(205, 100%, 50%);
|
|
37
|
+
|
|
38
|
+
/* name says 70, value is 75%; preserved verbatim, since correcting it would
|
|
39
|
+
change what diagram-js renders */
|
|
40
|
+
--color-blue-205-100-70: hsl(205, 100%, 75%);
|
|
41
|
+
|
|
42
|
+
--color-blue-205-100-80: hsl(205, 100%, 80%);
|
|
43
|
+
--color-blue-205-100-85: hsl(205, 100%, 85%);
|
|
44
|
+
--color-blue-205-100-95: hsl(205, 100%, 95%);
|
|
45
|
+
--color-blue-218-100-74: hsl(218, 100%, 74%);
|
|
46
|
+
|
|
47
|
+
--color-blue-219-99-53: hsl(219, 99%, 53%);
|
|
48
|
+
|
|
49
|
+
/* greens */
|
|
50
|
+
--color-green-150-86-44: hsl(150, 86%, 44%);
|
|
51
|
+
|
|
52
|
+
/* reds */
|
|
53
|
+
--color-red-360-100-35: hsl(360, 100%, 35%);
|
|
54
|
+
--color-red-360-100-40: hsl(360, 100%, 40%);
|
|
55
|
+
--color-red-360-100-45: hsl(360, 100%, 45%);
|
|
56
|
+
--color-red-360-100-92: hsl(360, 100%, 92%);
|
|
57
|
+
--color-red-360-100-95: hsl(360, 100%, 95%);
|
|
58
|
+
--color-red-360-100-97: hsl(360, 100%, 97%);
|
|
59
|
+
|
|
60
|
+
/* ambers */
|
|
61
|
+
--color-amber-39-100-33: hsl(39, 100%, 33%);
|
|
62
|
+
--color-amber-35-84-57: hsl(35, 84%, 57%);
|
|
63
|
+
--color-amber-35-84-62: hsl(35, 84%, 62%);
|
|
64
|
+
--color-amber-38-100-96: hsl(38, 100%, 96%);
|
|
65
|
+
|
|
66
|
+
/* neutrals */
|
|
67
|
+
--color-white: hsl(0, 0%, 100%);
|
|
68
|
+
--color-black: hsl(0, 0%, 0%);
|
|
69
|
+
--color-transparent: transparent;
|
|
70
|
+
|
|
71
|
+
/* alpha variants */
|
|
72
|
+
--color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
|
|
73
|
+
--color-blue-205-100-50-opacity-15: hsla(205, 100%, 50%, 15%);
|
|
74
|
+
--color-blue-205-100-50-a35: hsla(205, 100%, 50%, 0.35);
|
|
75
|
+
/* name says 100 and 05, value is 99% at 0.5 alpha; preserved verbatim, since
|
|
76
|
+
correcting it would change what diagram-js renders */
|
|
77
|
+
--color-blue-219-100-53-05: hsla(219, 99%, 53%, 0.5);
|
|
78
|
+
--color-red-360-100-45-a35: hsla(360, 100%, 45%, 0.35);
|
|
79
|
+
--color-amber-35-84-62-a35: hsla(35, 84%, 62%, 0.35);
|
|
80
|
+
--color-black-opacity-05: hsla(0, 0%, 0%, 5%);
|
|
81
|
+
--color-black-opacity-10: hsla(0, 0%, 0%, 10%);
|
|
82
|
+
--color-black-opacity-20: hsla(0, 0%, 0%, 20%);
|
|
83
|
+
--color-black-opacity-30: hsla(0, 0%, 0%, 30%);
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Semantic tokens — the theming contract. Defaults reproduce the current
|
|
87
|
+
* bpmn.io look, so adopting the layer is not a visual change.
|
|
88
|
+
*/
|
|
89
|
+
|
|
90
|
+
/* surfaces */
|
|
91
|
+
--bio-surface: var(--color-white);
|
|
92
|
+
--bio-surface-overlay: var(--color-white);
|
|
93
|
+
--bio-surface-subtle: var(--color-grey-225-10-97);
|
|
94
|
+
--bio-surface-medium: var(--color-grey-225-10-95);
|
|
95
|
+
--bio-surface-strong: var(--color-grey-225-10-90);
|
|
96
|
+
|
|
97
|
+
/* tooltips contrast with the page rather than sit on it, so they invert */
|
|
98
|
+
--bio-surface-inverted: var(--color-grey-225-10-15);
|
|
99
|
+
--bio-surface-inverted-subtle: var(--color-grey-225-10-35);
|
|
100
|
+
|
|
101
|
+
/* content */
|
|
102
|
+
--bio-text: var(--color-grey-225-10-15);
|
|
103
|
+
--bio-text-subtle: var(--color-grey-225-10-35);
|
|
104
|
+
--bio-text-subtlest: var(--color-grey-225-10-55);
|
|
105
|
+
--bio-text-on-primary: var(--color-white);
|
|
106
|
+
--bio-text-on-inverted: var(--color-white);
|
|
107
|
+
|
|
108
|
+
/* lines */
|
|
109
|
+
--bio-border: var(--color-grey-225-10-75);
|
|
110
|
+
--bio-border-subtle: var(--color-grey-225-10-85);
|
|
111
|
+
--bio-border-disabled: var(--color-grey-225-10-90);
|
|
112
|
+
|
|
113
|
+
/* form-control borders */
|
|
114
|
+
--bio-border-input: var(--color-grey-225-10-75);
|
|
115
|
+
|
|
116
|
+
/* primary action */
|
|
117
|
+
--bio-primary: var(--color-blue-205-100-50);
|
|
118
|
+
--bio-primary-hover: var(--color-blue-205-100-45);
|
|
119
|
+
--bio-primary-surface: var(--color-blue-205-100-95);
|
|
120
|
+
|
|
121
|
+
/* stronger than `--bio-primary-surface`, to stay visible under selected text */
|
|
122
|
+
--bio-primary-surface-strong: var(--color-blue-205-100-85);
|
|
123
|
+
|
|
124
|
+
/* danger */
|
|
125
|
+
--bio-danger: var(--color-red-360-100-45);
|
|
126
|
+
--bio-danger-hover: var(--color-red-360-100-40);
|
|
127
|
+
--bio-danger-surface: var(--color-red-360-100-92);
|
|
128
|
+
--bio-danger-surface-subtle: var(--color-red-360-100-97);
|
|
129
|
+
|
|
130
|
+
/* warning */
|
|
131
|
+
--bio-warning: var(--color-amber-35-84-62);
|
|
132
|
+
--bio-warning-hover: var(--color-amber-35-84-57);
|
|
133
|
+
--bio-warning-text: var(--color-amber-39-100-33);
|
|
134
|
+
--bio-warning-surface: var(--color-amber-38-100-96);
|
|
135
|
+
|
|
136
|
+
/* success */
|
|
137
|
+
--bio-success: var(--color-green-150-86-44);
|
|
138
|
+
|
|
139
|
+
/* informational — links */
|
|
140
|
+
--bio-info: var(--color-blue-205-100-50);
|
|
141
|
+
--bio-info-hover: var(--color-blue-205-100-45);
|
|
142
|
+
|
|
143
|
+
/* a link on `--bio-surface-inverted` */
|
|
144
|
+
--bio-info-on-inverted: var(--color-blue-218-100-74);
|
|
145
|
+
|
|
146
|
+
/* a selected menu entry, which the default look marks no louder than hover */
|
|
147
|
+
--bio-selected-surface: var(--bio-surface-medium);
|
|
148
|
+
--bio-selected-text: var(--bio-text);
|
|
149
|
+
|
|
150
|
+
/* focus */
|
|
151
|
+
--bio-focus: var(--color-blue-205-100-40);
|
|
152
|
+
--bio-focus-ring: var(--color-blue-205-100-50-a35);
|
|
153
|
+
--bio-focus-ring-danger: var(--color-red-360-100-45-a35);
|
|
154
|
+
--bio-focus-ring-warning: var(--color-amber-35-84-62-a35);
|
|
155
|
+
|
|
156
|
+
/* a wash behind a focused control, where the design fills rather than rings */
|
|
157
|
+
--bio-focus-surface: var(--color-blue-205-100-95);
|
|
158
|
+
|
|
159
|
+
/* elevation */
|
|
160
|
+
--bio-shadow: var(--color-black-opacity-30);
|
|
161
|
+
--bio-shadow-subtle: var(--color-black-opacity-10);
|
|
162
|
+
|
|
163
|
+
/* corners — fully-round shapes (dots, toggle tracks) are geometry, not scale,
|
|
164
|
+
and stay off this ladder */
|
|
165
|
+
--bio-radius-sm: 2px;
|
|
166
|
+
--bio-radius-md: 3px;
|
|
167
|
+
--bio-radius-lg: 4px;
|
|
168
|
+
}
|
package/dist/index.cjs
CHANGED
|
@@ -695,7 +695,7 @@ function createInjector(bootstrapModules) {
|
|
|
695
695
|
*/
|
|
696
696
|
function createFormContainer(prefix = 'fjs') {
|
|
697
697
|
const container = document.createElement('div');
|
|
698
|
-
container.classList.add(`${prefix}-container
|
|
698
|
+
container.classList.add(`${prefix}-container`, 'bio-theme-parent');
|
|
699
699
|
return container;
|
|
700
700
|
}
|
|
701
701
|
|
|
@@ -6650,7 +6650,7 @@ function Lightbox(props) {
|
|
|
6650
6650
|
href: "https://bpmn.io",
|
|
6651
6651
|
target: "_blank",
|
|
6652
6652
|
rel: "noopener noreferrer",
|
|
6653
|
-
style: "margin: 15px 20px 15px 10px; align-self: center; color:
|
|
6653
|
+
style: "margin: 15px 20px 15px 10px; align-self: center; color: #404040",
|
|
6654
6654
|
children: jsxRuntime.jsx(Logo, {})
|
|
6655
6655
|
}), jsxRuntime.jsxs("span", {
|
|
6656
6656
|
children: ["Web-based tooling for BPMN, DMN, and forms powered by", ' ', jsxRuntime.jsx("a", {
|
|
@@ -6673,7 +6673,7 @@ function Link(props) {
|
|
|
6673
6673
|
rel: "noopener noreferrer",
|
|
6674
6674
|
class: "fjs-powered-by-link",
|
|
6675
6675
|
title: "Powered by bpmn.io",
|
|
6676
|
-
style: "color:
|
|
6676
|
+
style: "color: #404040",
|
|
6677
6677
|
onClick: props.onClick,
|
|
6678
6678
|
children: jsxRuntime.jsx(Logo, {})
|
|
6679
6679
|
})
|