@bpmn-io/form-js-carbon-styles 0.15.0-alpha.0 → 1.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.
Files changed (2) hide show
  1. package/package.json +8 -6
  2. package/src/carbon-styles.js +235 -137
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bpmn-io/form-js-carbon-styles",
3
- "version": "0.15.0-alpha.0",
3
+ "version": "1.0.0-alpha.0",
4
4
  "description": "Custom carbon styles for form-js",
5
5
  "main": "src/carbon-styles.js",
6
6
  "types": "src/types/carbon-styles.d.ts",
@@ -19,16 +19,18 @@
19
19
  "name": "bpmn.io contributors",
20
20
  "url": "https://github.com/bpmn-io"
21
21
  },
22
- "dependencies": {
22
+ "devDependencies": {
23
+ "@bpmn-io/form-js-viewer": "^1.0.0-alpha.0",
23
24
  "@carbon/elements": "^11.19.1",
25
+ "@types/styled-components": "^5.1.26",
24
26
  "styled-components": "^5.3.6"
25
27
  },
26
- "devDependencies": {
27
- "@bpmn-io/form-js-viewer": "^0.15.0-alpha.0",
28
- "@types/styled-components": "^5.1.26"
28
+ "peerDependencies": {
29
+ "@carbon/elements": ">=11",
30
+ "styled-components": ">=5"
29
31
  },
30
32
  "files": [
31
33
  "src"
32
34
  ],
33
- "gitHead": "205275d1b314a512e662758999cd6667894c3695"
35
+ "gitHead": "992b8f130b82f8e739af7b3794e42a3ec054523d"
34
36
  }
package/src/carbon-styles.js CHANGED
@@ -57,110 +57,108 @@ const getSelectArrowStyles = ({
57
57
  `;
58
58
 
59
59
  const MARKDOWN_STYLES = css`
60
- ${({ theme }) => css`
61
- .fjs-container .fjs-form-field.fjs-form-field-text .markup {
62
- & {
63
- font-size: var(--cds-body-long-01-font-size);
64
- font-weight: var(--cds-body-long-01-font-weight);
65
- line-height: var(--cds-body-long-01-line-height);
66
- letter-spacing: var(--cds-body-long-01-letter-spacing);
67
- }
60
+ .fjs-container .fjs-form-field.fjs-form-field-text .markup {
61
+ & {
62
+ font-size: var(--cds-body-long-01-font-size);
63
+ font-weight: var(--cds-body-long-01-font-weight);
64
+ line-height: var(--cds-body-long-01-line-height);
65
+ letter-spacing: var(--cds-body-long-01-letter-spacing);
66
+ }
68
67
 
69
- & h1 {
70
- font-size: var(--cds-productive-heading-06-font-size);
71
- font-weight: var(--cds-productive-heading-06-font-weight);
72
- line-height: var(--cds-productive-heading-06-line-height);
73
- letter-spacing: var(--cds-productive-heading-06-letter-spacing);
74
- }
68
+ & h1 {
69
+ font-size: var(--cds-productive-heading-06-font-size);
70
+ font-weight: var(--cds-productive-heading-06-font-weight);
71
+ line-height: var(--cds-productive-heading-06-line-height);
72
+ letter-spacing: var(--cds-productive-heading-06-letter-spacing);
73
+ }
75
74
 
76
- & h2 {
77
- font-size: var(--cds-productive-heading-05-font-size);
78
- font-weight: var(--cds-productive-heading-05-font-weight);
79
- line-height: var(--cds-productive-heading-05-line-height);
80
- letter-spacing: var(--cds-productive-heading-05-letter-spacing);
81
- }
75
+ & h2 {
76
+ font-size: var(--cds-productive-heading-05-font-size);
77
+ font-weight: var(--cds-productive-heading-05-font-weight);
78
+ line-height: var(--cds-productive-heading-05-line-height);
79
+ letter-spacing: var(--cds-productive-heading-05-letter-spacing);
80
+ }
82
81
 
83
- & h3 {
84
- font-size: var(--cds-productive-heading-04-font-size);
85
- font-weight: var(--cds-productive-heading-04-font-weight);
86
- line-height: var(--cds-productive-heading-04-line-height);
87
- letter-spacing: var(--cds-productive-heading-04-letter-spacing);
88
- }
89
- & h4 {
90
- font-size: var(--cds-productive-heading-03-font-size);
91
- font-weight: var(--cds-productive-heading-03-font-weight);
92
- line-height: var(--cds-productive-heading-03-line-height);
93
- letter-spacing: var(--cds-productive-heading-03-letter-spacing);
94
- }
95
- & h5 {
96
- font-size: var(--cds-productive-heading-02-font-size);
97
- font-weight: var(--cds-productive-heading-02-font-weight);
98
- line-height: var(--cds-productive-heading-02-line-height);
99
- letter-spacing: var(--cds-productive-heading-02-letter-spacing);
100
- }
101
- & h6 {
102
- font-size: var(--cds-productive-heading-01-font-size);
103
- font-weight: var(--cds-productive-heading-01-font-weight);
104
- line-height: var(--cds-productive-heading-01-line-height);
105
- letter-spacing: var(--cds-productive-heading-01-letter-spacing);
106
- }
82
+ & h3 {
83
+ font-size: var(--cds-productive-heading-04-font-size);
84
+ font-weight: var(--cds-productive-heading-04-font-weight);
85
+ line-height: var(--cds-productive-heading-04-line-height);
86
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing);
87
+ }
88
+ & h4 {
89
+ font-size: var(--cds-productive-heading-03-font-size);
90
+ font-weight: var(--cds-productive-heading-03-font-weight);
91
+ line-height: var(--cds-productive-heading-03-line-height);
92
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing);
93
+ }
94
+ & h5 {
95
+ font-size: var(--cds-productive-heading-02-font-size);
96
+ font-weight: var(--cds-productive-heading-02-font-weight);
97
+ line-height: var(--cds-productive-heading-02-line-height);
98
+ letter-spacing: var(--cds-productive-heading-02-letter-spacing);
99
+ }
100
+ & h6 {
101
+ font-size: var(--cds-productive-heading-01-font-size);
102
+ font-weight: var(--cds-productive-heading-01-font-weight);
103
+ line-height: var(--cds-productive-heading-01-line-height);
104
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing);
105
+ }
107
106
 
108
- & code {
109
- font-family: var(--cds-code-02-font-family);
110
- font-size: var(--cds-code-02-font-size);
111
- font-weight: var(--cds-code-02-font-weight);
112
- line-height: var(--cds-code-02-line-height);
113
- letter-spacing: var(--cds-code-02-letter-spacing);
114
- white-space: pre-wrap;
115
- }
107
+ & code {
108
+ font-family: var(--cds-code-02-font-family);
109
+ font-size: var(--cds-code-02-font-size);
110
+ font-weight: var(--cds-code-02-font-weight);
111
+ line-height: var(--cds-code-02-line-height);
112
+ letter-spacing: var(--cds-code-02-letter-spacing);
113
+ white-space: pre-wrap;
114
+ }
116
115
 
117
- & blockquote {
118
- font-family: var(--cds-quotation-02-font-family);
119
- font-size: var(--cds-quotation-02-font-size);
120
- font-weight: var(--cds-quotation-02-font-weight);
121
- line-height: var(--cds-quotation-02-line-height);
122
- letter-spacing: var(--cds-quotation-02-letter-spacing);
123
- }
116
+ & blockquote {
117
+ font-family: var(--cds-quotation-02-font-family);
118
+ font-size: var(--cds-quotation-02-font-size);
119
+ font-weight: var(--cds-quotation-02-font-weight);
120
+ line-height: var(--cds-quotation-02-line-height);
121
+ letter-spacing: var(--cds-quotation-02-letter-spacing);
122
+ }
124
123
 
125
- & ul,
126
- & ol {
127
- box-sizing: border-box;
128
- padding: 0;
129
- border: 0;
130
- margin: 0;
131
- list-style: none;
132
- }
124
+ & ul,
125
+ & ol {
126
+ box-sizing: border-box;
127
+ padding: 0;
128
+ border: 0;
129
+ margin: 0;
130
+ list-style: none;
131
+ }
133
132
 
134
- & ul {
135
- margin-left: var(--cds-spacing-05);
136
- }
133
+ & ul {
134
+ margin-left: var(--cds-spacing-05);
135
+ }
137
136
 
138
- & ol {
139
- margin-left: var(--cds-spacing-05);
140
- }
137
+ & ol {
138
+ margin-left: var(--cds-spacing-05);
139
+ }
141
140
 
142
- & ul li {
143
- position: relative;
141
+ & ul li {
142
+ position: relative;
144
143
 
145
- &:before {
146
- position: absolute;
147
- left: calc(-1 * var(--cds-spacing-05));
148
- content: '–';
149
- }
144
+ &:before {
145
+ position: absolute;
146
+ left: calc(-1 * var(--cds-spacing-05));
147
+ content: '–';
150
148
  }
149
+ }
151
150
 
152
- & ol li {
153
- position: relative;
154
- counter-increment: item;
151
+ & ol li {
152
+ position: relative;
153
+ counter-increment: item;
155
154
 
156
- &:before {
157
- position: absolute;
158
- left: calc(-1 * var(--cds-spacing-05));
159
- content: counter(item) '.';
160
- }
155
+ &:before {
156
+ position: absolute;
157
+ left: calc(-1 * var(--cds-spacing-05));
158
+ content: counter(item) '.';
161
159
  }
162
160
  }
163
- `}
161
+ }
164
162
  `;
165
163
 
166
164
  const ANCHOR_STYLES = css`
@@ -199,6 +197,108 @@ const ANCHOR_STYLES = css`
199
197
  }
200
198
  `;
201
199
 
200
+ const READONLY_STYLES = css`
201
+ ${({ theme }) => css`
202
+ .fjs-container {
203
+ .fjs-readonly {
204
+
205
+ .fjs-input:read-only:not(:disabled),
206
+ .fjs-textarea:read-only:not(:disabled),
207
+ .fjs-select:read-only:not(:disabled),
208
+ &.fjs-taglist,
209
+ .fjs-input-group {
210
+ background-color: transparent;
211
+ }
212
+
213
+ &.fjs-form-field-number {
214
+ .fjs-input-group .fjs-number-arrow-container {
215
+ background-color: transparent;
216
+
217
+ .fjs-number-arrow-up,
218
+ .fjs-number-arrow-down {
219
+ background-color: transparent;
220
+ pointer-events: none;
221
+ }
222
+ }
223
+ }
224
+
225
+ &.fjs-form-field:not(.fjs-form-field-datetime) {
226
+ .fjs-input-group .fjs-input-adornment {
227
+ background: transparent;
228
+ }
229
+ }
230
+
231
+ &.fjs-form-field-select {
232
+ .fjs-input-group {
233
+ cursor: unset;
234
+ background-image: ${getSelectArrowSvg(theme.iconDisabled)};
235
+ background-color: transparent;
236
+ border-bottom: 1px solid var(--cds-border-strong);
237
+
238
+ .fjs-input:read-only:not(:disabled) {
239
+ border-color: transparent;
240
+ }
241
+
242
+ .fjs-select-display {
243
+ color: var(--cds-text-primary);
244
+ }
245
+ }
246
+ }
247
+
248
+ &.fjs-form-field-datetime {
249
+ .fjs-input-group {
250
+ cursor: unset;
251
+
252
+ .fjs-input-adornment {
253
+ background-color: transparent;
254
+ }
255
+
256
+ .flatpickr-input {
257
+ cursor: unset;
258
+ }
259
+
260
+ .fjs-input-adornment svg {
261
+ cursor: unset;
262
+ }
263
+ }
264
+ }
265
+
266
+ &.fjs-form-field-checkbox,
267
+ &.fjs-form-field-radio,
268
+ &.fjs-form-field-checklist {
269
+ .fjs-input:read-only {
270
+ opacity: 1;
271
+ background-color: transparent;
272
+
273
+ &:before {
274
+ border-color: var(--cds-icon-disabled);
275
+ }
276
+ }
277
+
278
+ &.fjs-checked .fjs-input[type='checkbox'],
279
+ .fjs-form-field-label.fjs-checked .fjs-input[type='checkbox'] {
280
+ &:before {
281
+ border: 1px solid var(--cds-icon-disabled);
282
+ background: transparent;
283
+ }
284
+
285
+ &:after {
286
+ border-bottom: 2px solid var(--cds-icon-primary);
287
+ border-left: 2px solid var(--cds-icon-primary);
288
+ }
289
+ }
290
+ }
291
+
292
+ &.fjs-taglist .fjs-taglist-tag {
293
+ .fjs-taglist-tag-label {
294
+ padding: 2px 0px;
295
+ }
296
+ }
297
+ }
298
+ }
299
+ `}
300
+ `;
301
+
202
302
  const DISABLED_STYLES = css`
203
303
  .fjs-container {
204
304
  .fjs-disabled {
@@ -271,11 +371,11 @@ const DISABLED_STYLES = css`
271
371
  }
272
372
 
273
373
  .fjs-taglist.fjs-disabled .fjs-taglist-tag {
274
- background-color: var(--cds-field-02);
275
- opacity: 0.7;
374
+ background-color: var(--cds-layer-01);
276
375
 
277
376
  .fjs-taglist-tag-label {
278
377
  padding: 2px 0px;
378
+ opacity: 0.7;
279
379
  color: var(--cds-text-on-color-disabled);
280
380
  }
281
381
  }
@@ -283,57 +383,55 @@ const DISABLED_STYLES = css`
283
383
  `;
284
384
 
285
385
  const LABEL_DESCRIPTION_ERROR_STYLES = css`
286
- ${({ theme }) => css`
287
- .fjs-container {
288
- .fjs-form-field-label {
289
- font-size: var(--cds-label-01-font-size);
290
- font-weight: var(--cds-label-01-font-weight);
291
- line-height: var(--cds-label-01-line-height);
292
- letter-spacing: var(--cds-label-01-letter-spacing);
293
- }
386
+ .fjs-container {
387
+ .fjs-form-field-label {
388
+ font-size: var(--cds-label-01-font-size);
389
+ font-weight: var(--cds-label-01-font-weight);
390
+ line-height: var(--cds-label-01-line-height);
391
+ letter-spacing: var(--cds-label-01-letter-spacing);
392
+ }
294
393
 
295
- .fjs-form-field:not(.fjs-form-field-checkbox)
296
- .fjs-form-field-label:first-child {
297
- margin: 0;
298
- margin-bottom: var(--cds-spacing-03);
299
- }
394
+ .fjs-form-field:not(.fjs-form-field-checkbox)
395
+ .fjs-form-field-label:first-child {
396
+ margin: 0;
397
+ margin-bottom: var(--cds-spacing-03);
398
+ }
300
399
 
301
- .fjs-form-field.fjs-form-field-radio
302
- .fjs-form-field-label:not(:first-of-type),
303
- .fjs-form-field.fjs-form-field-checklist
304
- .fjs-form-field-label:not(:first-of-type) {
305
- margin: 0;
306
- margin-bottom: 0.1875rem;
307
- }
400
+ .fjs-form-field.fjs-form-field-radio
401
+ .fjs-form-field-label:not(:first-of-type),
402
+ .fjs-form-field.fjs-form-field-checklist
403
+ .fjs-form-field-label:not(:first-of-type) {
404
+ margin: 0;
405
+ margin-bottom: 0.1875rem;
406
+ }
308
407
 
309
- .fjs-form-field.fjs-form-field-radio
310
- .fjs-form-field-label:not(:first-of-type) {
311
- min-height: ${rem(27)};
312
- }
408
+ .fjs-form-field.fjs-form-field-radio
409
+ .fjs-form-field-label:not(:first-of-type) {
410
+ min-height: ${rem(27)};
411
+ }
313
412
 
314
- .fjs-form-field-description {
315
- margin: 0;
316
- margin-top: var(--cds-spacing-02);
317
- font-size: var(--cds-helper-text-01-font-size);
318
- font-weight: var(--cds-helper-text-01-font-weight);
319
- line-height: var(--cds-helper-text-01-line-height);
320
- letter-spacing: var(--cds-helper-text-01-letter-spacing);
321
- }
413
+ .fjs-form-field-description {
414
+ margin: 0;
415
+ margin-top: var(--cds-spacing-02);
416
+ font-size: var(--cds-helper-text-01-font-size);
417
+ font-weight: var(--cds-helper-text-01-font-weight);
418
+ line-height: var(--cds-helper-text-01-line-height);
419
+ letter-spacing: var(--cds-helper-text-01-letter-spacing);
420
+ }
322
421
 
323
- .fjs-form-field-error {
324
- margin: 0;
325
- margin-top: var(--cds-spacing-02);
326
- font-size: var(--cds-label-01-font-size);
327
- font-weight: var(--cds-label-01-font-weight);
328
- line-height: var(--cds-label-01-line-height);
329
- letter-spacing: var(--cds-label-01-letter-spacing);
330
- }
422
+ .fjs-form-field-error {
423
+ margin: 0;
424
+ margin-top: var(--cds-spacing-02);
425
+ font-size: var(--cds-label-01-font-size);
426
+ font-weight: var(--cds-label-01-font-weight);
427
+ line-height: var(--cds-label-01-line-height);
428
+ letter-spacing: var(--cds-label-01-letter-spacing);
429
+ }
331
430
 
332
- .fjs-has-errors .fjs-form-field-description {
333
- display: none;
334
- }
431
+ .fjs-has-errors .fjs-form-field-description {
432
+ display: none;
335
433
  }
336
- `}
434
+ }
337
435
  `;
338
436
 
339
437
  const CHECKBOX_STYLES = css`
@@ -1033,6 +1131,7 @@ const ADORNMENTS_STYLES = css`
1033
1131
  const CARBON_STYLES = css`
1034
1132
  ${MARKDOWN_STYLES}
1035
1133
  ${ANCHOR_STYLES}
1134
+ ${READONLY_STYLES}
1036
1135
  ${DISABLED_STYLES}
1037
1136
  ${LABEL_DESCRIPTION_ERROR_STYLES}
1038
1137
  ${CHECKBOX_STYLES}
@@ -1049,7 +1148,6 @@ const CARBON_STYLES = css`
1049
1148
  .fjs-container {
1050
1149
  width: 100%;
1051
1150
  height: min-content;
1052
- --carbon-breakpoint-lg-width: 66rem;
1053
1151
 
1054
1152
  .cds--grid {
1055
1153
  padding: 0;
@@ -1069,7 +1167,7 @@ const CARBON_STYLES = css`
1069
1167
  margin-right: 0;
1070
1168
  }
1071
1169
 
1072
- @media (width < var(--carbon-breakpoint-lg-width)) {
1170
+ @media (width < 66rem) { // Carbon lg width breakpoint
1073
1171
  .fjs-layout-column .fjs-form-field {
1074
1172
  margin-left: 0;
1075
1173
  margin-right: 0;