superdesk-ui-framework 5.0.2 → 5.0.4

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 (48) hide show
  1. package/.mocharc.json +1 -1
  2. package/app/scripts/helpers/dropdown.helper.js +9 -0
  3. package/app/styles/_buttons.scss +4 -1
  4. package/app/styles/_helpers.scss +25 -6
  5. package/app/styles/_popover.scss +8 -8
  6. package/app/styles/_tooltips.scss +83 -0
  7. package/app/styles/design-tokens/_design-tokens-general.scss +6 -0
  8. package/app/styles/form-elements/_checkbox.scss +9 -5
  9. package/app/styles/form-elements/_inputs.scss +7 -1
  10. package/app-typescript/components/Autocomplete.tsx +1 -1
  11. package/app-typescript/components/Form/InputWrapper.tsx +1 -1
  12. package/app-typescript/components/Popover.tsx +2 -0
  13. package/app-typescript/components/SelectGrid.tsx +3 -1
  14. package/app-typescript/components/TimePicker/TimePickerPopover.spec.ts +163 -0
  15. package/app-typescript/components/TimePicker/TimePickerPopover.tsx +286 -0
  16. package/app-typescript/components/TimePicker/TimeValueHolder.tsx +36 -0
  17. package/app-typescript/components/{TimePicker.tsx → TimePicker/index.tsx} +6 -12
  18. package/app-typescript/components/Tooltip.tsx +1 -1
  19. package/app-typescript/components/TooltipV2.tsx +10 -21
  20. package/app-typescript/components/_Positioner.tsx +2 -0
  21. package/dist/components/Popover.tsx +31 -8
  22. package/dist/components/TimePicker.tsx +7 -2
  23. package/dist/components/Tooltips.tsx +15 -13
  24. package/dist/components/utilities/SpacingUtilities.tsx +126 -126
  25. package/dist/components/utilities/TextUtilities.tsx +51 -37
  26. package/dist/examples.bundle.js +1354 -1199
  27. package/dist/superdesk-ui.bundle.css +146 -41
  28. package/dist/superdesk-ui.bundle.js +829 -741
  29. package/dist/vendor.bundle.js +15 -15
  30. package/package.json +1 -1
  31. package/react/components/Autocomplete.js +2 -1
  32. package/react/components/Form/InputWrapper.js +2 -1
  33. package/react/components/Popover.d.ts +1 -0
  34. package/react/components/Popover.js +1 -1
  35. package/react/components/SelectGrid.js +2 -1
  36. package/react/components/TimePicker/TimePickerPopover.d.ts +27 -0
  37. package/react/components/TimePicker/TimePickerPopover.js +231 -0
  38. package/react/components/TimePicker/TimeValueHolder.d.ts +13 -0
  39. package/react/components/TimePicker/TimeValueHolder.js +73 -0
  40. package/react/components/{TimePicker.d.ts → TimePicker/index.d.ts} +1 -1
  41. package/react/components/{TimePicker.js → TimePicker/index.js} +5 -9
  42. package/react/components/Tooltip.js +1 -1
  43. package/react/components/TooltipV2.js +10 -18
  44. package/react/components/_Positioner.d.ts +1 -0
  45. package/react/components/_Positioner.js +1 -1
  46. package/app-typescript/components/TimePickerPopover.tsx +0 -283
  47. package/react/components/TimePickerPopover.d.ts +0 -18
  48. package/react/components/TimePickerPopover.js +0 -222
package/dist/components/utilities/SpacingUtilities.tsx CHANGED
@@ -33,49 +33,49 @@ class SpacingUtilitiesDoc extends React.Component {
33
33
  <tr>
34
34
  <td>p-0-5</td>
35
35
  <td>
36
- {'padding: calc(0.5 * var(--base-increment)) !important;'}{' '}
36
+ {'padding: var(--space--0-5) !important;'}{' '}
37
37
  <span className="doc-text--highlight">/* 4px */</span>
38
38
  </td>
39
39
  </tr>
40
40
  <tr>
41
41
  <td>p-1</td>
42
42
  <td>
43
- {'padding: calc(1 * var(--base-increment)) !important;'}{' '}
43
+ {'padding: var(--space--1) !important;'}{' '}
44
44
  <span className="doc-text--highlight">/* 8px */</span>
45
45
  </td>
46
46
  </tr>
47
47
  <tr>
48
48
  <td>p-1-5</td>
49
49
  <td>
50
- {'padding: calc(1.5 * var(--base-increment)) !important;'}{' '}
50
+ {'padding: var(--space--1-5) !important;'}{' '}
51
51
  <span className="doc-text--highlight">/* 12px */</span>
52
52
  </td>
53
53
  </tr>
54
54
  <tr>
55
55
  <td>p-2</td>
56
56
  <td>
57
- {'padding: calc(2 * var(--base-increment)) !important;'}{' '}
57
+ {'padding: var(--space--2) !important;'}{' '}
58
58
  <span className="doc-text--highlight">/* 16px */</span>
59
59
  </td>
60
60
  </tr>
61
61
  <tr>
62
62
  <td>p-3</td>
63
63
  <td>
64
- {'padding: calc(3 * var(--base-increment)) !important;'}{' '}
64
+ {'padding: var(--space--3) !important;'}{' '}
65
65
  <span className="doc-text--highlight">/* 24px */</span>
66
66
  </td>
67
67
  </tr>
68
68
  <tr>
69
69
  <td>p-4</td>
70
70
  <td>
71
- {'padding: calc(4 * var(--base-increment)) !important;'}{' '}
71
+ {'padding: var(--space--4) !important;'}{' '}
72
72
  <span className="doc-text--highlight">/* 32px */</span>
73
73
  </td>
74
74
  </tr>
75
75
  <tr>
76
76
  <td>p-5</td>
77
77
  <td>
78
- {'padding: calc(5 * var(--base-increment)) !important;'}{' '}
78
+ {'padding: var(--space--5) !important;'}{' '}
79
79
  <span className="doc-text--highlight">/* 40px */</span>
80
80
  </td>
81
81
  </tr>
@@ -92,49 +92,49 @@ class SpacingUtilitiesDoc extends React.Component {
92
92
  <tr>
93
93
  <td>ps-0-5</td>
94
94
  <td>
95
- {'padding-inline-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
95
+ {'padding-inline-start: var(--space--0-5) !important;'}{' '}
96
96
  <span className="doc-text--highlight">/* 4px */</span>
97
97
  </td>
98
98
  </tr>
99
99
  <tr>
100
100
  <td>ps-1</td>
101
101
  <td>
102
- {'padding-inline-start: calc(1 * var(--base-increment)) !important;'}{' '}
102
+ {'padding-inline-start: var(--space--1) !important;'}{' '}
103
103
  <span className="doc-text--highlight">/* 8px */</span>
104
104
  </td>
105
105
  </tr>
106
106
  <tr>
107
107
  <td>ps-1-5</td>
108
108
  <td>
109
- {'padding-inline-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
109
+ {'padding-inline-start: var(--space--1-5) !important;'}{' '}
110
110
  <span className="doc-text--highlight">/* 12px */</span>
111
111
  </td>
112
112
  </tr>
113
113
  <tr>
114
114
  <td>ps-2</td>
115
115
  <td>
116
- {'padding-inline-start: calc(2 * var(--base-increment)) !important;'}{' '}
116
+ {'padding-inline-start: var(--space--2) !important;'}{' '}
117
117
  <span className="doc-text--highlight">/* 16px */</span>
118
118
  </td>
119
119
  </tr>
120
120
  <tr>
121
121
  <td>ps-3</td>
122
122
  <td>
123
- {'padding-inline-start: calc(3 * var(--base-increment)) !important;'}{' '}
123
+ {'padding-inline-start: var(--space--3) !important;'}{' '}
124
124
  <span className="doc-text--highlight">/* 24px */</span>
125
125
  </td>
126
126
  </tr>
127
127
  <tr>
128
128
  <td>ps-4</td>
129
129
  <td>
130
- {'padding-inline-start: calc(4 * var(--base-increment)) !important;'}{' '}
130
+ {'padding-inline-start: var(--space--4) !important;'}{' '}
131
131
  <span className="doc-text--highlight">/* 32px */</span>
132
132
  </td>
133
133
  </tr>
134
134
  <tr>
135
135
  <td>ps-5</td>
136
136
  <td>
137
- {'padding-inline-start: calc(5 * var(--base-increment)) !important;'}{' '}
137
+ {'padding-inline-start: var(--space--5) !important;'}{' '}
138
138
  <span className="doc-text--highlight">/* 40px */</span>
139
139
  </td>
140
140
  </tr>
@@ -151,49 +151,49 @@ class SpacingUtilitiesDoc extends React.Component {
151
151
  <tr>
152
152
  <td>pe-0-5</td>
153
153
  <td>
154
- {'padding-inline-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
154
+ {'padding-inline-end: var(--space--0-5) !important;'}{' '}
155
155
  <span className="doc-text--highlight">/* 4px */</span>
156
156
  </td>
157
157
  </tr>
158
158
  <tr>
159
159
  <td>pe-1</td>
160
160
  <td>
161
- {'padding-inline-end: calc(1 * var(--base-increment)) !important;'}{' '}
161
+ {'padding-inline-end: var(--space--1) !important;'}{' '}
162
162
  <span className="doc-text--highlight">/* 8px */</span>
163
163
  </td>
164
164
  </tr>
165
165
  <tr>
166
166
  <td>pe-1-5</td>
167
167
  <td>
168
- {'padding-inline-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
168
+ {'padding-inline-end: var(--space--1-5) !important;'}{' '}
169
169
  <span className="doc-text--highlight">/* 12px */</span>
170
170
  </td>
171
171
  </tr>
172
172
  <tr>
173
173
  <td>pe-2</td>
174
174
  <td>
175
- {'padding-inline-end: calc(2 * var(--base-increment)) !important;'}{' '}
175
+ {'padding-inline-end: var(--space--2) !important;'}{' '}
176
176
  <span className="doc-text--highlight">/* 16px */</span>
177
177
  </td>
178
178
  </tr>
179
179
  <tr>
180
180
  <td>pe-3</td>
181
181
  <td>
182
- {'padding-inline-end: calc(3 * var(--base-increment)) !important;'}{' '}
182
+ {'padding-inline-end: var(--space--3) !important;'}{' '}
183
183
  <span className="doc-text--highlight">/* 24px */</span>
184
184
  </td>
185
185
  </tr>
186
186
  <tr>
187
187
  <td>pe-4</td>
188
188
  <td>
189
- {'padding-inline-end: calc(4 * var(--base-increment)) !important;'}{' '}
189
+ {'padding-inline-end: var(--space--4) !important;'}{' '}
190
190
  <span className="doc-text--highlight">/* 32px */</span>
191
191
  </td>
192
192
  </tr>
193
193
  <tr>
194
194
  <td>pe-5</td>
195
195
  <td>
196
- {'padding-inline-end: calc(5 * var(--base-increment)) !important;'}{' '}
196
+ {'padding-inline-end: var(--space--5) !important;'}{' '}
197
197
  <span className="doc-text--highlight">/* 40px */</span>
198
198
  </td>
199
199
  </tr>
@@ -214,70 +214,70 @@ class SpacingUtilitiesDoc extends React.Component {
214
214
  <tr>
215
215
  <td>px-0-5</td>
216
216
  <td>
217
- {'padding-inline-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
217
+ {'padding-inline-start: var(--space--0-5) !important;'}{' '}
218
218
  <span className="doc-text--highlight">/* 4px */</span>
219
219
  <br />
220
- {'padding-inline-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
220
+ {'padding-inline-end: var(--space--0-5) !important;'}{' '}
221
221
  <span className="doc-text--highlight">/* 4px */</span>
222
222
  </td>
223
223
  </tr>
224
224
  <tr>
225
225
  <td>px-1</td>
226
226
  <td>
227
- {'padding-inline-start: calc(1 * var(--base-increment)) !important;'}{' '}
227
+ {'padding-inline-start: var(--space--1) !important;'}{' '}
228
228
  <span className="doc-text--highlight">/* 8px */</span>
229
229
  <br />
230
- {'padding-inline-end: calc(1 * var(--base-increment)) !important;'}{' '}
230
+ {'padding-inline-end: var(--space--1) !important;'}{' '}
231
231
  <span className="doc-text--highlight">/* 8px */</span>
232
232
  </td>
233
233
  </tr>
234
234
  <tr>
235
235
  <td>px-1-5</td>
236
236
  <td>
237
- {'padding-inline-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
237
+ {'padding-inline-start: var(--space--1-5) !important;'}{' '}
238
238
  <span className="doc-text--highlight">/* 12px */</span>
239
239
  <br />
240
- {'padding-inline-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
240
+ {'padding-inline-end: var(--space--1-5) !important;'}{' '}
241
241
  <span className="doc-text--highlight">/* 12px */</span>
242
242
  </td>
243
243
  </tr>
244
244
  <tr>
245
245
  <td>px-2</td>
246
246
  <td>
247
- {'padding-inline-start: calc(2 * var(--base-increment)) !important;'}{' '}
247
+ {'padding-inline-start: var(--space--2) !important;'}{' '}
248
248
  <span className="doc-text--highlight">/* 16px */</span>
249
249
  <br />
250
- {'padding-inline-end: calc(2 * var(--base-increment)) !important;'}{' '}
250
+ {'padding-inline-end: var(--space--2) !important;'}{' '}
251
251
  <span className="doc-text--highlight">/* 16px */</span>
252
252
  </td>
253
253
  </tr>
254
254
  <tr>
255
255
  <td>px-3</td>
256
256
  <td>
257
- {'padding-inline-start: calc(3 * var(--base-increment)) !important;'}{' '}
257
+ {'padding-inline-start: var(--space--3) !important;'}{' '}
258
258
  <span className="doc-text--highlight">/* 24px */</span>
259
259
  <br />
260
- {'padding-inline-end: calc(3 * var(--base-increment)) !important;'}{' '}
260
+ {'padding-inline-end: var(--space--3) !important;'}{' '}
261
261
  <span className="doc-text--highlight">/* 24px */</span>
262
262
  </td>
263
263
  </tr>
264
264
  <tr>
265
265
  <td>px-4</td>
266
266
  <td>
267
- {'padding-inline-start: calc(4 * var(--base-increment)) !important;'}{' '}
267
+ {'padding-inline-start: var(--space--4) !important;'}{' '}
268
268
  <span className="doc-text--highlight">/* 32px */</span>
269
269
  <br />
270
- {'padding-inline-end: calc(4 * var(--base-increment)) !important;'}{' '}
270
+ {'padding-inline-end: var(--space--4) !important;'}{' '}
271
271
  <span className="doc-text--highlight">/* 32px */</span>
272
272
  </td>
273
273
  </tr>
274
274
  <tr>
275
275
  <td>px-5</td>
276
276
  <td>
277
- {'padding-inline-start: calc(5 * var(--base-increment)) !important;'}{' '}
277
+ {'padding-inline-start: var(--space--5) !important;'}{' '}
278
278
  <span className="doc-text--highlight">/* 40px */</span>
279
279
  <br />
280
- {'padding-inline-end: calc(5 * var(--base-increment)) !important;'}{' '}
280
+ {'padding-inline-end: var(--space--5) !important;'}{' '}
281
281
  <span className="doc-text--highlight">/* 40px */</span>
282
282
  </td>
283
283
  </tr>
@@ -293,49 +293,49 @@ class SpacingUtilitiesDoc extends React.Component {
293
293
  <tr>
294
294
  <td>pt-0-5</td>
295
295
  <td>
296
- {'padding-block-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
296
+ {'padding-block-start: var(--space--0-5) !important;'}{' '}
297
297
  <span className="doc-text--highlight">/* 4px */</span>
298
298
  </td>
299
299
  </tr>
300
300
  <tr>
301
301
  <td>pt-1</td>
302
302
  <td>
303
- {'padding-block-start: calc(1 * var(--base-increment)) !important;'}{' '}
303
+ {'padding-block-start: var(--space--1) !important;'}{' '}
304
304
  <span className="doc-text--highlight">/* 8px */</span>
305
305
  </td>
306
306
  </tr>
307
307
  <tr>
308
308
  <td>pt-1-5</td>
309
309
  <td>
310
- {'padding-block-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
310
+ {'padding-block-start: var(--space--1-5) !important;'}{' '}
311
311
  <span className="doc-text--highlight">/* 12px */</span>
312
312
  </td>
313
313
  </tr>
314
314
  <tr>
315
315
  <td>pt-2</td>
316
316
  <td>
317
- {'padding-block-start: calc(2 * var(--base-increment)) !important;'}{' '}
317
+ {'padding-block-start: var(--space--2) !important;'}{' '}
318
318
  <span className="doc-text--highlight">/* 16px */</span>
319
319
  </td>
320
320
  </tr>
321
321
  <tr>
322
322
  <td>pt-3</td>
323
323
  <td>
324
- {'padding-block-start: calc(3 * var(--base-increment)) !important;'}{' '}
324
+ {'padding-block-start: var(--space--3) !important;'}{' '}
325
325
  <span className="doc-text--highlight">/* 24px */</span>
326
326
  </td>
327
327
  </tr>
328
328
  <tr>
329
329
  <td>pt-4</td>
330
330
  <td>
331
- {'padding-block-start: calc(4 * var(--base-increment)) !important;'}{' '}
331
+ {'padding-block-start: var(--space--4) !important;'}{' '}
332
332
  <span className="doc-text--highlight">/* 32px */</span>
333
333
  </td>
334
334
  </tr>
335
335
  <tr>
336
336
  <td>pt-5</td>
337
337
  <td>
338
- {'padding-block-start: calc(5 * var(--base-increment)) !important;'}{' '}
338
+ {'padding-block-start: var(--space--5) !important;'}{' '}
339
339
  <span className="doc-text--highlight">/* 40px */</span>
340
340
  </td>
341
341
  </tr>
@@ -352,49 +352,49 @@ class SpacingUtilitiesDoc extends React.Component {
352
352
  <tr>
353
353
  <td>pb-0-5</td>
354
354
  <td>
355
- {'padding-block-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
355
+ {'padding-block-end: var(--space--0-5) !important;'}{' '}
356
356
  <span className="doc-text--highlight">/* 4px */</span>
357
357
  </td>
358
358
  </tr>
359
359
  <tr>
360
360
  <td>pb-1</td>
361
361
  <td>
362
- {'padding-block-end: calc(1 * var(--base-increment)) !important;'}{' '}
362
+ {'padding-block-end: var(--space--1) !important;'}{' '}
363
363
  <span className="doc-text--highlight">/* 8px */</span>
364
364
  </td>
365
365
  </tr>
366
366
  <tr>
367
367
  <td>pb-1-5</td>
368
368
  <td>
369
- {'padding-block-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
369
+ {'padding-block-end: var(--space--1-5) !important;'}{' '}
370
370
  <span className="doc-text--highlight">/* 12px */</span>
371
371
  </td>
372
372
  </tr>
373
373
  <tr>
374
374
  <td>pb-2</td>
375
375
  <td>
376
- {'padding-block-end: calc(2 * var(--base-increment)) !important;'}{' '}
376
+ {'padding-block-end: var(--space--2) !important;'}{' '}
377
377
  <span className="doc-text--highlight">/* 16px */</span>
378
378
  </td>
379
379
  </tr>
380
380
  <tr>
381
381
  <td>pe-3</td>
382
382
  <td>
383
- {'padding-block-end: calc(3 * var(--base-increment)) !important;'}{' '}
383
+ {'padding-block-end: var(--space--3) !important;'}{' '}
384
384
  <span className="doc-text--highlight">/* 24px */</span>
385
385
  </td>
386
386
  </tr>
387
387
  <tr>
388
388
  <td>pb-4</td>
389
389
  <td>
390
- {'padding-block-end: calc(4 * var(--base-increment)) !important;'}{' '}
390
+ {'padding-block-end: var(--space--4) !important;'}{' '}
391
391
  <span className="doc-text--highlight">/* 32px */</span>
392
392
  </td>
393
393
  </tr>
394
394
  <tr>
395
395
  <td>pb-5</td>
396
396
  <td>
397
- {'padding-block-end: calc(5 * var(--base-increment)) !important;'}{' '}
397
+ {'padding-block-end: var(--space--5) !important;'}{' '}
398
398
  <span className="doc-text--highlight">/* 40px */</span>
399
399
  </td>
400
400
  </tr>
@@ -415,70 +415,70 @@ class SpacingUtilitiesDoc extends React.Component {
415
415
  <tr>
416
416
  <td>py-0-5</td>
417
417
  <td>
418
- {'padding-block-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
418
+ {'padding-block-start: var(--space--0-5) !important;'}{' '}
419
419
  <span className="doc-text--highlight">/* 4px */</span>
420
420
  <br />
421
- {'padding-block-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
421
+ {'padding-block-end: var(--space--0-5) !important;'}{' '}
422
422
  <span className="doc-text--highlight">/* 4px */</span>
423
423
  </td>
424
424
  </tr>
425
425
  <tr>
426
426
  <td>py-1</td>
427
427
  <td>
428
- {'padding-block-start: calc(1 * var(--base-increment)) !important;'}{' '}
428
+ {'padding-block-start: var(--space--1) !important;'}{' '}
429
429
  <span className="doc-text--highlight">/* 8px */</span>
430
430
  <br />
431
- {'padding-block-end: calc(1 * var(--base-increment)) !important;'}{' '}
431
+ {'padding-block-end: var(--space--1) !important;'}{' '}
432
432
  <span className="doc-text--highlight">/* 8px */</span>
433
433
  </td>
434
434
  </tr>
435
435
  <tr>
436
436
  <td>py-1-5</td>
437
437
  <td>
438
- {'padding-block-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
438
+ {'padding-block-start: var(--space--1-5) !important;'}{' '}
439
439
  <span className="doc-text--highlight">/* 12px */</span>
440
440
  <br />
441
- {'padding-block-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
441
+ {'padding-block-end: var(--space--1-5) !important;'}{' '}
442
442
  <span className="doc-text--highlight">/* 12px */</span>
443
443
  </td>
444
444
  </tr>
445
445
  <tr>
446
446
  <td>py-2</td>
447
447
  <td>
448
- {'padding-block-start: calc(2 * var(--base-increment)) !important;'}{' '}
448
+ {'padding-block-start: var(--space--2) !important;'}{' '}
449
449
  <span className="doc-text--highlight">/* 16px */</span>
450
450
  <br />
451
- {'padding-block-end: calc(2 * var(--base-increment)) !important;'}{' '}
451
+ {'padding-block-end: var(--space--2) !important;'}{' '}
452
452
  <span className="doc-text--highlight">/* 16px */</span>
453
453
  </td>
454
454
  </tr>
455
455
  <tr>
456
456
  <td>py-3</td>
457
457
  <td>
458
- {'padding-block-start: calc(3 * var(--base-increment)) !important;'}{' '}
458
+ {'padding-block-start: var(--space--3) !important;'}{' '}
459
459
  <span className="doc-text--highlight">/* 24px */</span>
460
460
  <br />
461
- {'padding-block-end: calc(3 * var(--base-increment)) !important;'}{' '}
461
+ {'padding-block-end: var(--space--3) !important;'}{' '}
462
462
  <span className="doc-text--highlight">/* 24px */</span>
463
463
  </td>
464
464
  </tr>
465
465
  <tr>
466
466
  <td>py-4</td>
467
467
  <td>
468
- {'padding-block-start: calc(4 * var(--base-increment)) !important;'}{' '}
468
+ {'padding-block-start: var(--space--4) !important;'}{' '}
469
469
  <span className="doc-text--highlight">/* 32px */</span>
470
470
  <br />
471
- {'padding-block-end: calc(4 * var(--base-increment)) !important;'}{' '}
471
+ {'padding-block-end: var(--space--4) !important;'}{' '}
472
472
  <span className="doc-text--highlight">/* 32px */</span>
473
473
  </td>
474
474
  </tr>
475
475
  <tr>
476
476
  <td>py-5</td>
477
477
  <td>
478
- {'padding-block-start: calc(5 * var(--base-increment)) !important;'}{' '}
478
+ {'padding-block-start: var(--space--5) !important;'}{' '}
479
479
  <span className="doc-text--highlight">/* 40px */</span>
480
480
  <br />
481
- {'padding-block-end: calc(5 * var(--base-increment)) !important;'}{' '}
481
+ {'padding-block-end: var(--space--5) !important;'}{' '}
482
482
  <span className="doc-text--highlight">/* 40px */</span>
483
483
  </td>
484
484
  </tr>
@@ -509,49 +509,49 @@ class SpacingUtilitiesDoc extends React.Component {
509
509
  <tr>
510
510
  <td>m-0-5</td>
511
511
  <td>
512
- {'margin: calc(0.5 * var(--base-increment)) !important;'}{' '}
512
+ {'margin: var(--space--0-5) !important;'}{' '}
513
513
  <span className="doc-text--highlight">/* 4px */</span>
514
514
  </td>
515
515
  </tr>
516
516
  <tr>
517
517
  <td>m-1</td>
518
518
  <td>
519
- {'margin: calc(1 * var(--base-increment)) !important;'}{' '}
519
+ {'margin: var(--space--1) !important;'}{' '}
520
520
  <span className="doc-text--highlight">/* 8px */</span>
521
521
  </td>
522
522
  </tr>
523
523
  <tr>
524
524
  <td>m-1-5</td>
525
525
  <td>
526
- {'margin: calc(1.5 * var(--base-increment)) !important;'}{' '}
526
+ {'margin: var(--space--1-5) !important;'}{' '}
527
527
  <span className="doc-text--highlight">/* 12px */</span>
528
528
  </td>
529
529
  </tr>
530
530
  <tr>
531
531
  <td>m-2</td>
532
532
  <td>
533
- {'margin: calc(2 * var(--base-increment)) !important;'}{' '}
533
+ {'margin: var(--space--2) !important;'}{' '}
534
534
  <span className="doc-text--highlight">/* 16px */</span>
535
535
  </td>
536
536
  </tr>
537
537
  <tr>
538
538
  <td>m-3</td>
539
539
  <td>
540
- {'margin: calc(3 * var(--base-increment)) !important;'}{' '}
540
+ {'margin: var(--space--3) !important;'}{' '}
541
541
  <span className="doc-text--highlight">/* 24px */</span>
542
542
  </td>
543
543
  </tr>
544
544
  <tr>
545
545
  <td>m-4</td>
546
546
  <td>
547
- {'margin: calc(4 * var(--base-increment)) !important;'}{' '}
547
+ {'margin: var(--space--4) !important;'}{' '}
548
548
  <span className="doc-text--highlight">/* 32px */</span>
549
549
  </td>
550
550
  </tr>
551
551
  <tr>
552
552
  <td>m-5</td>
553
553
  <td>
554
- {'margin: calc(5 * var(--base-increment)) !important;'}{' '}
554
+ {'margin: var(--space--5) !important;'}{' '}
555
555
  <span className="doc-text--highlight">/* 40px */</span>
556
556
  </td>
557
557
  </tr>
@@ -568,49 +568,49 @@ class SpacingUtilitiesDoc extends React.Component {
568
568
  <tr>
569
569
  <td>ms-0-5</td>
570
570
  <td>
571
- {'margin-inline-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
571
+ {'margin-inline-start: var(--space--0-5) !important;'}{' '}
572
572
  <span className="doc-text--highlight">/* 4px */</span>
573
573
  </td>
574
574
  </tr>
575
575
  <tr>
576
576
  <td>ms-1</td>
577
577
  <td>
578
- {'margin-inline-start: calc(1 * var(--base-increment)) !important;'}{' '}
578
+ {'margin-inline-start: var(--space--1) !important;'}{' '}
579
579
  <span className="doc-text--highlight">/* 8px */</span>
580
580
  </td>
581
581
  </tr>
582
582
  <tr>
583
583
  <td>ms-1-5</td>
584
584
  <td>
585
- {'margin-inline-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
585
+ {'margin-inline-start: var(--space--1-5) !important;'}{' '}
586
586
  <span className="doc-text--highlight">/* 12px */</span>
587
587
  </td>
588
588
  </tr>
589
589
  <tr>
590
590
  <td>ms-2</td>
591
591
  <td>
592
- {'margin-inline-start: calc(2 * var(--base-increment)) !important;'}{' '}
592
+ {'margin-inline-start: var(--space--2) !important;'}{' '}
593
593
  <span className="doc-text--highlight">/* 16px */</span>
594
594
  </td>
595
595
  </tr>
596
596
  <tr>
597
597
  <td>ms-3</td>
598
598
  <td>
599
- {'margin-inline-start: calc(3 * var(--base-increment)) !important;'}{' '}
599
+ {'margin-inline-start: var(--space--3) !important;'}{' '}
600
600
  <span className="doc-text--highlight">/* 24px */</span>
601
601
  </td>
602
602
  </tr>
603
603
  <tr>
604
604
  <td>ms-4</td>
605
605
  <td>
606
- {'margin-inline-start: calc(4 * var(--base-increment)) !important;'}{' '}
606
+ {'margin-inline-start: var(--space--4) !important;'}{' '}
607
607
  <span className="doc-text--highlight">/* 32px */</span>
608
608
  </td>
609
609
  </tr>
610
610
  <tr>
611
611
  <td>ms-5</td>
612
612
  <td>
613
- {'margin-inline-start: calc(5 * var(--base-increment)) !important;'}{' '}
613
+ {'margin-inline-start: var(--space--5) !important;'}{' '}
614
614
  <span className="doc-text--highlight">/* 40px */</span>
615
615
  </td>
616
616
  </tr>
@@ -627,49 +627,49 @@ class SpacingUtilitiesDoc extends React.Component {
627
627
  <tr>
628
628
  <td>me-0-5</td>
629
629
  <td>
630
- {'margin-inline-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
630
+ {'margin-inline-end: var(--space--0-5) !important;'}{' '}
631
631
  <span className="doc-text--highlight">/* 4px */</span>
632
632
  </td>
633
633
  </tr>
634
634
  <tr>
635
635
  <td>me-1</td>
636
636
  <td>
637
- {'margin-inline-end: calc(1 * var(--base-increment)) !important;'}{' '}
637
+ {'margin-inline-end: var(--space--1) !important;'}{' '}
638
638
  <span className="doc-text--highlight">/* 8px */</span>
639
639
  </td>
640
640
  </tr>
641
641
  <tr>
642
642
  <td>me-1-5</td>
643
643
  <td>
644
- {'margin-inline-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
644
+ {'margin-inline-end: var(--space--1-5) !important;'}{' '}
645
645
  <span className="doc-text--highlight">/* 12px */</span>
646
646
  </td>
647
647
  </tr>
648
648
  <tr>
649
649
  <td>me-2</td>
650
650
  <td>
651
- {'margin-inline-end: calc(2 * var(--base-increment)) !important;'}{' '}
651
+ {'margin-inline-end: var(--space--2) !important;'}{' '}
652
652
  <span className="doc-text--highlight">/* 16px */</span>
653
653
  </td>
654
654
  </tr>
655
655
  <tr>
656
656
  <td>me-3</td>
657
657
  <td>
658
- {'margin-inline-end: calc(3 * var(--base-increment)) !important;'}{' '}
658
+ {'margin-inline-end: var(--space--3) !important;'}{' '}
659
659
  <span className="doc-text--highlight">/* 24px */</span>
660
660
  </td>
661
661
  </tr>
662
662
  <tr>
663
663
  <td>me-4</td>
664
664
  <td>
665
- {'margin-inline-end: calc(4 * var(--base-increment)) !important;'}{' '}
665
+ {'margin-inline-end: var(--space--4) !important;'}{' '}
666
666
  <span className="doc-text--highlight">/* 32px */</span>
667
667
  </td>
668
668
  </tr>
669
669
  <tr>
670
670
  <td>me-5</td>
671
671
  <td>
672
- {'margin-inline-end: calc(5 * var(--base-increment)) !important;'}{' '}
672
+ {'margin-inline-end: var(--space--5) !important;'}{' '}
673
673
  <span className="doc-text--highlight">/* 40px */</span>
674
674
  </td>
675
675
  </tr>
@@ -690,70 +690,70 @@ class SpacingUtilitiesDoc extends React.Component {
690
690
  <tr>
691
691
  <td>mx-0-5</td>
692
692
  <td>
693
- {'margin-inline-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
693
+ {'margin-inline-start: var(--space--0-5) !important;'}{' '}
694
694
  <span className="doc-text--highlight">/* 4px */</span>
695
695
  <br />
696
- {'margin-inline-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
696
+ {'margin-inline-end: var(--space--0-5) !important;'}{' '}
697
697
  <span className="doc-text--highlight">/* 4px */</span>
698
698
  </td>
699
699
  </tr>
700
700
  <tr>
701
701
  <td>mx-1</td>
702
702
  <td>
703
- {'margin-inline-start: calc(1 * var(--base-increment)) !important;'}{' '}
703
+ {'margin-inline-start: var(--space--1) !important;'}{' '}
704
704
  <span className="doc-text--highlight">/* 8px */</span>
705
705
  <br />
706
- {'margin-inline-end: calc(1 * var(--base-increment)) !important;'}{' '}
706
+ {'margin-inline-end: var(--space--1) !important;'}{' '}
707
707
  <span className="doc-text--highlight">/* 8px */</span>
708
708
  </td>
709
709
  </tr>
710
710
  <tr>
711
711
  <td>mx-1-5</td>
712
712
  <td>
713
- {'margin-inline-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
713
+ {'margin-inline-start: var(--space--1-5) !important;'}{' '}
714
714
  <span className="doc-text--highlight">/* 12px */</span>
715
715
  <br />
716
- {'margin-inline-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
716
+ {'margin-inline-end: var(--space--1-5) !important;'}{' '}
717
717
  <span className="doc-text--highlight">/* 12px */</span>
718
718
  </td>
719
719
  </tr>
720
720
  <tr>
721
721
  <td>mx-2</td>
722
722
  <td>
723
- {'margin-inline-start: calc(2 * var(--base-increment)) !important;'}{' '}
723
+ {'margin-inline-start: var(--space--2) !important;'}{' '}
724
724
  <span className="doc-text--highlight">/* 16px */</span>
725
725
  <br />
726
- {'margin-inline-end: calc(2 * var(--base-increment)) !important;'}{' '}
726
+ {'margin-inline-end: var(--space--2) !important;'}{' '}
727
727
  <span className="doc-text--highlight">/* 16px */</span>
728
728
  </td>
729
729
  </tr>
730
730
  <tr>
731
731
  <td>mx-3</td>
732
732
  <td>
733
- {'margin-inline-start: calc(3 * var(--base-increment)) !important;'}{' '}
733
+ {'margin-inline-start: var(--space--3) !important;'}{' '}
734
734
  <span className="doc-text--highlight">/* 24px */</span>
735
735
  <br />
736
- {'margin-inline-end: calc(3 * var(--base-increment)) !important;'}{' '}
736
+ {'margin-inline-end: var(--space--3) !important;'}{' '}
737
737
  <span className="doc-text--highlight">/* 24px */</span>
738
738
  </td>
739
739
  </tr>
740
740
  <tr>
741
741
  <td>mx-4</td>
742
742
  <td>
743
- {'margin-inline-start: calc(4 * var(--base-increment)) !important;'}{' '}
743
+ {'margin-inline-start: var(--space--4) !important;'}{' '}
744
744
  <span className="doc-text--highlight">/* 32px */</span>
745
745
  <br />
746
- {'margin-inline-end: calc(4 * var(--base-increment)) !important;'}{' '}
746
+ {'margin-inline-end: var(--space--4) !important;'}{' '}
747
747
  <span className="doc-text--highlight">/* 32px */</span>
748
748
  </td>
749
749
  </tr>
750
750
  <tr>
751
751
  <td>mx-5</td>
752
752
  <td>
753
- {'margin-inline-start: calc(5 * var(--base-increment)) !important;'}{' '}
753
+ {'margin-inline-start: var(--space--5) !important;'}{' '}
754
754
  <span className="doc-text--highlight">/* 40px */</span>
755
755
  <br />
756
- {'margin-inline-end: calc(5 * var(--base-increment)) !important;'}{' '}
756
+ {'margin-inline-end: var(--space--5) !important;'}{' '}
757
757
  <span className="doc-text--highlight">/* 40px */</span>
758
758
  </td>
759
759
  </tr>
@@ -769,49 +769,49 @@ class SpacingUtilitiesDoc extends React.Component {
769
769
  <tr>
770
770
  <td>mt-0-5</td>
771
771
  <td>
772
- {'margin-block-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
772
+ {'margin-block-start: var(--space--0-5) !important;'}{' '}
773
773
  <span className="doc-text--highlight">/* 4px */</span>
774
774
  </td>
775
775
  </tr>
776
776
  <tr>
777
777
  <td>mt-1</td>
778
778
  <td>
779
- {'margin-block-start: calc(1 * var(--base-increment)) !important;'}{' '}
779
+ {'margin-block-start: var(--space--1) !important;'}{' '}
780
780
  <span className="doc-text--highlight">/* 8px */</span>
781
781
  </td>
782
782
  </tr>
783
783
  <tr>
784
784
  <td>mt-1-5</td>
785
785
  <td>
786
- {'margin-block-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
786
+ {'margin-block-start: var(--space--1-5) !important;'}{' '}
787
787
  <span className="doc-text--highlight">/* 12px */</span>
788
788
  </td>
789
789
  </tr>
790
790
  <tr>
791
791
  <td>mt-2</td>
792
792
  <td>
793
- {'margin-block-start: calc(2 * var(--base-increment)) !important;'}{' '}
793
+ {'margin-block-start: var(--space--2) !important;'}{' '}
794
794
  <span className="doc-text--highlight">/* 16px */</span>
795
795
  </td>
796
796
  </tr>
797
797
  <tr>
798
798
  <td>mt-3</td>
799
799
  <td>
800
- {'margin-block-start: calc(3 * var(--base-increment)) !important;'}{' '}
800
+ {'margin-block-start: var(--space--3) !important;'}{' '}
801
801
  <span className="doc-text--highlight">/* 24px */</span>
802
802
  </td>
803
803
  </tr>
804
804
  <tr>
805
805
  <td>mt-4</td>
806
806
  <td>
807
- {'margin-block-start: calc(4 * var(--base-increment)) !important;'}{' '}
807
+ {'margin-block-start: var(--space--4) !important;'}{' '}
808
808
  <span className="doc-text--highlight">/* 32px */</span>
809
809
  </td>
810
810
  </tr>
811
811
  <tr>
812
812
  <td>mt-5</td>
813
813
  <td>
814
- {'margin-block-start: calc(5 * var(--base-increment)) !important;'}{' '}
814
+ {'margin-block-start: var(--space--5) !important;'}{' '}
815
815
  <span className="doc-text--highlight">/* 40px */</span>
816
816
  </td>
817
817
  </tr>
@@ -828,49 +828,49 @@ class SpacingUtilitiesDoc extends React.Component {
828
828
  <tr>
829
829
  <td>mb-0-5</td>
830
830
  <td>
831
- {'margin-block-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
831
+ {'margin-block-end: var(--space--0-5) !important;'}{' '}
832
832
  <span className="doc-text--highlight">/* 4px */</span>
833
833
  </td>
834
834
  </tr>
835
835
  <tr>
836
836
  <td>mb-1</td>
837
837
  <td>
838
- {'margin-block-end: calc(1 * var(--base-increment)) !important;'}{' '}
838
+ {'margin-block-end: var(--space--1) !important;'}{' '}
839
839
  <span className="doc-text--highlight">/* 8px */</span>
840
840
  </td>
841
841
  </tr>
842
842
  <tr>
843
843
  <td>mb-1-5</td>
844
844
  <td>
845
- {'margin-block-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
845
+ {'margin-block-end: var(--space--1-5) !important;'}{' '}
846
846
  <span className="doc-text--highlight">/* 12px */</span>
847
847
  </td>
848
848
  </tr>
849
849
  <tr>
850
850
  <td>mb-2</td>
851
851
  <td>
852
- {'margin-block-end: calc(2 * var(--base-increment)) !important;'}{' '}
852
+ {'margin-block-end: var(--space--2) !important;'}{' '}
853
853
  <span className="doc-text--highlight">/* 16px */</span>
854
854
  </td>
855
855
  </tr>
856
856
  <tr>
857
857
  <td>me-3</td>
858
858
  <td>
859
- {'margin-block-end: calc(3 * var(--base-increment)) !important;'}{' '}
859
+ {'margin-block-end: var(--space--3) !important;'}{' '}
860
860
  <span className="doc-text--highlight">/* 24px */</span>
861
861
  </td>
862
862
  </tr>
863
863
  <tr>
864
864
  <td>mb-4</td>
865
865
  <td>
866
- {'margin-block-end: calc(4 * var(--base-increment)) !important;'}{' '}
866
+ {'margin-block-end: var(--space--4) !important;'}{' '}
867
867
  <span className="doc-text--highlight">/* 32px */</span>
868
868
  </td>
869
869
  </tr>
870
870
  <tr>
871
871
  <td>mb-5</td>
872
872
  <td>
873
- {'margin-block-end: calc(5 * var(--base-increment)) !important;'}{' '}
873
+ {'margin-block-end: var(--space--5) !important;'}{' '}
874
874
  <span className="doc-text--highlight">/* 40px */</span>
875
875
  </td>
876
876
  </tr>
@@ -891,70 +891,70 @@ class SpacingUtilitiesDoc extends React.Component {
891
891
  <tr>
892
892
  <td>my-0-5</td>
893
893
  <td>
894
- {'margin-block-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
894
+ {'margin-block-start: var(--space--0-5) !important;'}{' '}
895
895
  <span className="doc-text--highlight">/* 4px */</span>
896
896
  <br />
897
- {'margin-block-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
897
+ {'margin-block-end: var(--space--0-5) !important;'}{' '}
898
898
  <span className="doc-text--highlight">/* 4px */</span>
899
899
  </td>
900
900
  </tr>
901
901
  <tr>
902
902
  <td>my-1</td>
903
903
  <td>
904
- {'margin-block-start: calc(1 * var(--base-increment)) !important;'}{' '}
904
+ {'margin-block-start: var(--space--1) !important;'}{' '}
905
905
  <span className="doc-text--highlight">/* 8px */</span>
906
906
  <br />
907
- {'margin-block-end: calc(1 * var(--base-increment)) !important;'}{' '}
907
+ {'margin-block-end: var(--space--1) !important;'}{' '}
908
908
  <span className="doc-text--highlight">/* 8px */</span>
909
909
  </td>
910
910
  </tr>
911
911
  <tr>
912
912
  <td>my-1-5</td>
913
913
  <td>
914
- {'margin-block-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
914
+ {'margin-block-start: var(--space--1-5) !important;'}{' '}
915
915
  <span className="doc-text--highlight">/* 12px */</span>
916
916
  <br />
917
- {'margin-block-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
917
+ {'margin-block-end: var(--space--1-5) !important;'}{' '}
918
918
  <span className="doc-text--highlight">/* 12px */</span>
919
919
  </td>
920
920
  </tr>
921
921
  <tr>
922
922
  <td>my-2</td>
923
923
  <td>
924
- {'margin-block-start: calc(2 * var(--base-increment)) !important;'}{' '}
924
+ {'margin-block-start: var(--space--2) !important;'}{' '}
925
925
  <span className="doc-text--highlight">/* 16px */</span>
926
926
  <br />
927
- {'margin-block-end: calc(2 * var(--base-increment)) !important;'}{' '}
927
+ {'margin-block-end: var(--space--2) !important;'}{' '}
928
928
  <span className="doc-text--highlight">/* 16px */</span>
929
929
  </td>
930
930
  </tr>
931
931
  <tr>
932
932
  <td>my-3</td>
933
933
  <td>
934
- {'margin-block-start: calc(3 * var(--base-increment)) !important;'}{' '}
934
+ {'margin-block-start: var(--space--3) !important;'}{' '}
935
935
  <span className="doc-text--highlight">/* 24px */</span>
936
936
  <br />
937
- {'margin-block-end: calc(3 * var(--base-increment)) !important;'}{' '}
937
+ {'margin-block-end: var(--space--3) !important;'}{' '}
938
938
  <span className="doc-text--highlight">/* 24px */</span>
939
939
  </td>
940
940
  </tr>
941
941
  <tr>
942
942
  <td>my-4</td>
943
943
  <td>
944
- {'margin-block-start: calc(4 * var(--base-increment)) !important;'}{' '}
944
+ {'margin-block-start: var(--space--4) !important;'}{' '}
945
945
  <span className="doc-text--highlight">/* 32px */</span>
946
946
  <br />
947
- {'margin-block-end: calc(4 * var(--base-increment)) !important;'}{' '}
947
+ {'margin-block-end: var(--space--4) !important;'}{' '}
948
948
  <span className="doc-text--highlight">/* 32px */</span>
949
949
  </td>
950
950
  </tr>
951
951
  <tr>
952
952
  <td>my-5</td>
953
953
  <td>
954
- {'margin-block-start: calc(5 * var(--base-increment)) !important;'}{' '}
954
+ {'margin-block-start: var(--space--5) !important;'}{' '}
955
955
  <span className="doc-text--highlight">/* 40px */</span>
956
956
  <br />
957
- {'margin-block-end: calc(5 * var(--base-increment)) !important;'}{' '}
957
+ {'margin-block-end: var(--space--5) !important;'}{' '}
958
958
  <span className="doc-text--highlight">/* 40px */</span>
959
959
  </td>
960
960
  </tr>