@bpmn-io/form-js-playground 1.26.0 → 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.
@@ -33,18 +33,18 @@
33
33
  }
34
34
 
35
35
  .fjs-pgl-root {
36
- --color-button-hover: var(--color-grey-225-10-95);
36
+ --color-button-hover: var(--bio-surface-medium);
37
37
 
38
- --color-section-border: var(--color-grey-225-10-55);
39
- --color-section-header-background: var(--color-grey-225-10-95);
40
- --color-section-header-border-bottom: var(--color-grey-225-10-75);
38
+ --color-section-border: var(--bio-border);
39
+ --color-section-header-background: var(--bio-surface-medium);
40
+ --color-section-header-border-bottom: var(--bio-border);
41
41
 
42
- --color-palette-container-background: var(--color-grey-225-10-97);
43
- --color-palette-container-border: var(--color-grey-225-10-80);
42
+ --color-palette-container-background: var(--bio-surface-subtle);
43
+ --color-palette-container-border: var(--bio-border);
44
44
 
45
- --color-properties-container-background: var(--color-white);
45
+ --color-properties-container-background: var(--bio-surface);
46
46
 
47
- --color-text: var(--color-grey-225-10-15);
47
+ --color-text: var(--bio-text);
48
48
 
49
49
  --font-family: 'IBM Plex Sans', sans-serif;
50
50
  --font-family-monospace: 'IBM Plex Mono', monospace;
@@ -129,6 +129,7 @@
129
129
  .fjs-pgl-section .header {
130
130
  background: var(--color-section-header-background);
131
131
  font-size: 1rem;
132
+ font-weight: bold;
132
133
  margin: 0;
133
134
  line-height: 2em;
134
135
  padding: 0.2em 0.5em;
@@ -173,13 +174,37 @@
173
174
 
174
175
  padding: 20px;
175
176
 
176
- background: var(--color-white);
177
+ background: var(--bio-surface);
178
+ }
179
+
180
+ .fjs-pgl-modal-header {
181
+ margin: 0 0 16px;
182
+
183
+ font-size: 16px;
184
+ font-weight: bold;
185
+ }
186
+
187
+ .fjs-pgl-modal-body p {
188
+ margin: 0 0 14px;
189
+ }
190
+
191
+ .fjs-pgl-modal-body a {
192
+ color: var(--bio-primary);
193
+ text-decoration: underline;
177
194
  }
178
195
 
179
196
  .fjs-pgl-modal-content textarea {
180
197
  width: 100%;
181
198
  height: 300px;
182
199
  overflow: auto;
200
+
201
+ box-sizing: border-box;
202
+ padding: 5px;
203
+ border: solid 1px var(--bio-border);
204
+ border-radius: var(--input-border-radius);
205
+
206
+ font-family: monospace;
207
+ font-size: 13px;
183
208
  }
184
209
 
185
210
  .fjs-pgl-modal-footer {
@@ -233,13 +258,18 @@
233
258
 
234
259
  .fjs-pgl-button {
235
260
  color: var(--color-text);
236
- background-color: var(--color-white);
261
+ background-color: var(--bio-surface);
237
262
 
238
263
  border-width: 1px;
239
264
  border-style: solid;
240
- border-radius: 3px;
265
+ border-radius: var(--button-border-radius);
266
+
267
+ padding: 2px 8px;
241
268
 
242
269
  font-family: var(--font-family);
270
+ font-size: var(--font-size-base);
271
+ font-weight: normal;
272
+ line-height: var(--line-height-base);
243
273
  }
244
274
 
245
275
  .fjs-pgl-button-default {