@bpmn-io/form-js-carbon-styles 1.6.4 → 1.7.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 (3) hide show
  1. package/package.json +3 -3
  2. package/src/carbon-styles.js +28 -2
  3. package/src/carbon-styles.scss +27 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bpmn-io/form-js-carbon-styles",
3
- "version": "1.6.4",
3
+ "version": "1.7.0",
4
4
  "description": "Custom carbon styles for form-js",
5
5
  "scripts": {
6
6
  "all": "run-s test",
@@ -18,12 +18,12 @@
18
18
  "url": "https://github.com/bpmn-io"
19
19
  },
20
20
  "devDependencies": {
21
- "@bpmn-io/form-js-viewer": "^1.6.4",
21
+ "@bpmn-io/form-js-viewer": "^1.7.0",
22
22
  "@carbon/elements": "^11.33.1",
23
23
  "styled-components": "^6.1.1"
24
24
  },
25
25
  "files": [
26
26
  "src"
27
27
  ],
28
- "gitHead": "81778692a8965f1bc6aadb3ff6a94df4202099e8"
28
+ "gitHead": "8e289cb810b1fe7bea10b625263a67d9502d47bc"
29
29
  }
package/src/carbon-styles.js CHANGED
@@ -56,18 +56,25 @@ const getSelectArrowStyles = ({ arrowRightPosition, color }) => css`
56
56
 
57
57
  const MARKDOWN_STYLES = css`
58
58
  .fjs-container .fjs-form-field.fjs-form-field-text .markup {
59
- & {
59
+ font-size: var(--cds-body-long-01-font-size);
60
+ font-weight: var(--cds-body-long-01-font-weight);
61
+ line-height: var(--cds-body-long-01-line-height);
62
+ letter-spacing: var(--cds-body-long-01-letter-spacing);
63
+
64
+ & p {
60
65
  font-size: var(--cds-body-long-01-font-size);
61
66
  font-weight: var(--cds-body-long-01-font-weight);
62
67
  line-height: var(--cds-body-long-01-line-height);
63
68
  letter-spacing: var(--cds-body-long-01-letter-spacing);
69
+ margin-bottom: var(--cds-spacing-05);
64
70
  }
65
-
71
+
66
72
  & h1 {
67
73
  font-size: var(--cds-productive-heading-06-font-size);
68
74
  font-weight: var(--cds-productive-heading-06-font-weight);
69
75
  line-height: var(--cds-productive-heading-06-line-height);
70
76
  letter-spacing: var(--cds-productive-heading-06-letter-spacing);
77
+ margin-bottom: var(--cds-spacing-05);
71
78
  }
72
79
 
73
80
  & h2 {
@@ -75,6 +82,7 @@ const MARKDOWN_STYLES = css`
75
82
  font-weight: var(--cds-productive-heading-05-font-weight);
76
83
  line-height: var(--cds-productive-heading-05-line-height);
77
84
  letter-spacing: var(--cds-productive-heading-05-letter-spacing);
85
+ margin-bottom: var(--cds-spacing-05);
78
86
  }
79
87
 
80
88
  & h3 {
@@ -82,24 +90,31 @@ const MARKDOWN_STYLES = css`
82
90
  font-weight: var(--cds-productive-heading-04-font-weight);
83
91
  line-height: var(--cds-productive-heading-04-line-height);
84
92
  letter-spacing: var(--cds-productive-heading-04-letter-spacing);
93
+ margin-bottom: var(--cds-spacing-05);
85
94
  }
95
+
86
96
  & h4 {
87
97
  font-size: var(--cds-productive-heading-03-font-size);
88
98
  font-weight: var(--cds-productive-heading-03-font-weight);
89
99
  line-height: var(--cds-productive-heading-03-line-height);
90
100
  letter-spacing: var(--cds-productive-heading-03-letter-spacing);
101
+ margin-bottom: var(--cds-spacing-05);
91
102
  }
103
+
92
104
  & h5 {
93
105
  font-size: var(--cds-productive-heading-02-font-size);
94
106
  font-weight: var(--cds-productive-heading-02-font-weight);
95
107
  line-height: var(--cds-productive-heading-02-line-height);
96
108
  letter-spacing: var(--cds-productive-heading-02-letter-spacing);
109
+ margin-bottom: var(--cds-spacing-05);
97
110
  }
111
+
98
112
  & h6 {
99
113
  font-size: var(--cds-productive-heading-01-font-size);
100
114
  font-weight: var(--cds-productive-heading-01-font-weight);
101
115
  line-height: var(--cds-productive-heading-01-line-height);
102
116
  letter-spacing: var(--cds-productive-heading-01-letter-spacing);
117
+ margin-bottom: var(--cds-spacing-05);
103
118
  }
104
119
 
105
120
  & code {
@@ -109,6 +124,7 @@ const MARKDOWN_STYLES = css`
109
124
  line-height: var(--cds-code-02-line-height);
110
125
  letter-spacing: var(--cds-code-02-letter-spacing);
111
126
  white-space: pre-wrap;
127
+ margin-bottom: var(--cds-spacing-05);
112
128
  }
113
129
 
114
130
  & blockquote {
@@ -117,6 +133,7 @@ const MARKDOWN_STYLES = css`
117
133
  font-weight: var(--cds-quotation-02-font-weight);
118
134
  line-height: var(--cds-quotation-02-line-height);
119
135
  letter-spacing: var(--cds-quotation-02-letter-spacing);
136
+ margin-bottom: var(--cds-spacing-05);
120
137
  }
121
138
 
122
139
  & ul,
@@ -126,6 +143,7 @@ const MARKDOWN_STYLES = css`
126
143
  border: 0;
127
144
  margin: 0;
128
145
  list-style: none;
146
+ margin-bottom: var(--cds-spacing-05);
129
147
  }
130
148
 
131
149
  & ul {
@@ -156,6 +174,14 @@ const MARKDOWN_STYLES = css`
156
174
  content: counter(item) '.';
157
175
  }
158
176
  }
177
+
178
+ pre {
179
+ margin-bottom: var(--cds-spacing-05);
180
+ }
181
+
182
+ div > :last-child {
183
+ margin-bottom: 0;
184
+ }
159
185
  }
160
186
  `;
161
187
 
package/src/carbon-styles.scss CHANGED
@@ -165,17 +165,26 @@
165
165
 
166
166
  // Markdown styles /////////////
167
167
 
168
- .fjs-container .fjs-form-field.fjs-form-field-text .markup {
168
+ .fjs-container .fjs-form-field.fjs-form-field-text {
169
169
  font-size: var(--cds-body-long-01-font-size);
170
170
  font-weight: var(--cds-body-long-01-font-weight);
171
171
  line-height: var(--cds-body-long-01-line-height);
172
172
  letter-spacing: var(--cds-body-long-01-letter-spacing);
173
173
 
174
+ p {
175
+ font-size: var(--cds-body-long-01-font-size);
176
+ font-weight: var(--cds-body-long-01-font-weight);
177
+ line-height: var(--cds-body-long-01-line-height);
178
+ letter-spacing: var(--cds-body-long-01-letter-spacing);
179
+ margin-bottom: var(--cds-spacing-05);
180
+ }
181
+
174
182
  h1 {
175
183
  font-size: var(--cds-productive-heading-06-font-size);
176
184
  font-weight: var(--cds-productive-heading-06-font-weight);
177
185
  line-height: var(--cds-productive-heading-06-line-height);
178
186
  letter-spacing: var(--cds-productive-heading-06-letter-spacing);
187
+ margin-bottom: var(--cds-spacing-05);
179
188
  }
180
189
 
181
190
  h2 {
@@ -183,6 +192,7 @@
183
192
  font-weight: var(--cds-productive-heading-05-font-weight);
184
193
  line-height: var(--cds-productive-heading-05-line-height);
185
194
  letter-spacing: var(--cds-productive-heading-05-letter-spacing);
195
+ margin-bottom: var(--cds-spacing-05);
186
196
  }
187
197
 
188
198
  h3 {
@@ -190,6 +200,7 @@
190
200
  font-weight: var(--cds-productive-heading-04-font-weight);
191
201
  line-height: var(--cds-productive-heading-04-line-height);
192
202
  letter-spacing: var(--cds-productive-heading-04-letter-spacing);
203
+ margin-bottom: var(--cds-spacing-05);
193
204
  }
194
205
 
195
206
  h4 {
@@ -197,6 +208,7 @@
197
208
  font-weight: var(--cds-productive-heading-03-font-weight);
198
209
  line-height: var(--cds-productive-heading-03-line-height);
199
210
  letter-spacing: var(--cds-productive-heading-03-letter-spacing);
211
+ margin-bottom: var(--cds-spacing-05);
200
212
  }
201
213
 
202
214
  h5 {
@@ -204,6 +216,7 @@
204
216
  font-weight: var(--cds-productive-heading-02-font-weight);
205
217
  line-height: var(--cds-productive-heading-02-line-height);
206
218
  letter-spacing: var(--cds-productive-heading-02-letter-spacing);
219
+ margin-bottom: var(--cds-spacing-05);
207
220
  }
208
221
 
209
222
  h6 {
@@ -211,6 +224,7 @@
211
224
  font-weight: var(--cds-productive-heading-01-font-weight);
212
225
  line-height: var(--cds-productive-heading-01-line-height);
213
226
  letter-spacing: var(--cds-productive-heading-01-letter-spacing);
227
+ margin-bottom: var(--cds-spacing-05);
214
228
  }
215
229
 
216
230
  code {
@@ -220,6 +234,7 @@
220
234
  line-height: var(--cds-code-02-line-height);
221
235
  letter-spacing: var(--cds-code-02-letter-spacing);
222
236
  white-space: pre-wrap;
237
+ margin-bottom: var(--cds-spacing-05);
223
238
  }
224
239
 
225
240
  blockquote {
@@ -228,6 +243,7 @@
228
243
  font-weight: var(--cds-quotation-02-font-weight);
229
244
  line-height: var(--cds-quotation-02-line-height);
230
245
  letter-spacing: var(--cds-quotation-02-letter-spacing);
246
+ margin-bottom: var(--cds-spacing-05);
231
247
  }
232
248
 
233
249
  ul,
@@ -237,6 +253,7 @@
237
253
  border: 0;
238
254
  margin: 0;
239
255
  list-style: none;
256
+ margin-bottom: var(--cds-spacing-05);
240
257
  }
241
258
 
242
259
  ul {
@@ -267,6 +284,14 @@
267
284
  }
268
285
  }
269
286
  }
287
+
288
+ pre {
289
+ margin-bottom: var(--cds-spacing-05);
290
+ }
291
+
292
+ div > :last-child {
293
+ margin-bottom: 0;
294
+ }
270
295
  }
271
296
 
272
297
  // Anchor styles /////////////
@@ -1216,7 +1241,7 @@
1216
1241
  // iFrame styles ////////////
1217
1242
 
1218
1243
  .fjs-container {
1219
- .fjs-iframe-placeholder {
1244
+ .fjs-iframe-placeholder, .fjs-image-placeholder {
1220
1245
  background-color: var(--cds-layer);
1221
1246
  border-color: var(--cds-border-subtle);
1222
1247
  color: var(--cds-text-helper);