@commercetools-uikit/design-system 15.13.1 → 15.14.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/commercetools-uikit-design-system.cjs.dev.js +220 -33
- package/dist/commercetools-uikit-design-system.cjs.prod.js +220 -33
- package/dist/commercetools-uikit-design-system.esm.js +220 -33
- package/dist/declarations/src/design-tokens.d.ts +216 -29
- package/dist/declarations/src/index.d.ts +1 -1
- package/dist/declarations/src/theme-provider.d.ts +1 -1
- package/materials/custom-properties.css +123 -10
- package/materials/custom-properties.json +75 -10
- package/materials/internals/definition.yaml +316 -26
- package/package.json +2 -2
|
@@ -64,6 +64,7 @@ var themes = {
|
|
|
64
64
|
colorAccent20: 'hsl(195, 35.2941176471%, 20%)',
|
|
65
65
|
colorAccent30: 'hsl(195, 35.2941176471%, 30%)',
|
|
66
66
|
colorAccent40: 'hsl(195, 35.2941176471%, 40%)',
|
|
67
|
+
colorAccent60: 'hsl(195, 35.2941176471%, 60%)',
|
|
67
68
|
colorAccent90: 'hsl(195, 35.2941176471%, 90%)',
|
|
68
69
|
colorAccent95: 'hsl(195, 35.2941176471%, 95%)',
|
|
69
70
|
colorAccent98: 'hsl(195, 35.2941176471%, 98%)',
|
|
@@ -205,13 +206,20 @@ var themes = {
|
|
|
205
206
|
backgroundColorForTableHeader: '#213c45',
|
|
206
207
|
backgroundColorForTag: 'hsl(0, 0%, 95%)',
|
|
207
208
|
backgroundColorForTagWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
209
|
+
backgroundColorForTagWhenHovered: 'hsl(0, 0%, 95%)',
|
|
208
210
|
backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
|
|
209
211
|
backgroundColorForSelectInputOptionWhenHovered: 'hsl(0, 0%, 90%)',
|
|
210
212
|
backgroundColorForAvatar: 'hsl(0, 0%, 60%)',
|
|
211
213
|
backgroundColorForAvatarWhenHighlighted: '#ccc',
|
|
212
214
|
backgroundColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 85%)',
|
|
213
|
-
|
|
214
|
-
|
|
215
|
+
backgroundColorForLocalizedInputLabel: 'hsl(195, 35.2941176471%, 98%)',
|
|
216
|
+
backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(195, 35.2941176471%, 95%)',
|
|
217
|
+
backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
|
|
218
|
+
backgroundColorForLocalizedRichTextBodyButtonWhenActive: 'hsl(195, 35.2941176471%, 30%)',
|
|
219
|
+
backgroundColorForLocalizedRichTextBodyButton: 'hsl(0, 0%, 90%)',
|
|
220
|
+
backgroundColorForRichTextDropdownWhenHovered: 'hsl(0, 0%, 90%)',
|
|
221
|
+
backgroundColorForRichTextMoreStylesDropdownWhenHovered: 'hsl(0, 0%, 90%)',
|
|
222
|
+
backgroundColorForRichTextButton: 'hsl(195, 35.2941176471%, 30%)',
|
|
215
223
|
backgroundColorForTooltip: '#213c45',
|
|
216
224
|
backgroundColorForViewSwitcher: '#fff',
|
|
217
225
|
backgroundColorForViewSwitcherWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
|
|
@@ -230,6 +238,15 @@ var themes = {
|
|
|
230
238
|
backgroundColorForCheckboxInputIconWhenReadonly: '#fff',
|
|
231
239
|
backgroundColorForCheckboxInputIconWhenError: '#fff',
|
|
232
240
|
backgroundColorForCheckboxInputIconWhenHovered: '#fff',
|
|
241
|
+
backgroundColorForPrimaryActionDropdownWhenActive: 'hsl(0, 0%, 95%)',
|
|
242
|
+
backgroundColorForPrimaryActionDropdownWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
|
|
243
|
+
backgroundColorForToggleInputTrack: 'hsl(0, 0%, 60%)',
|
|
244
|
+
backgroundColorForToggleInputTrackWhenDisabled: '#ccc',
|
|
245
|
+
backgroundColorForToggleInputThumbWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
|
|
246
|
+
backgroundColorForToggleInputTrackWhenChecked: '#00b39e',
|
|
247
|
+
backgroundColorForToggleInputThumbWhenChecked: '#fff',
|
|
248
|
+
backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'hsl(172.9608938547486, 100%, 25%)',
|
|
249
|
+
backgroundColorForToggleInputThumbWhenCheckedAndDisabled: '#ccc',
|
|
233
250
|
borderForButtonAsSecondary: 'none',
|
|
234
251
|
borderForButtonAsSecondaryWhenHovered: 'none',
|
|
235
252
|
borderForButtonAsSecondaryWhenActive: 'none',
|
|
@@ -238,6 +255,7 @@ var themes = {
|
|
|
238
255
|
borderForViewSwitcher: 'none',
|
|
239
256
|
borderForSelectInputTag: 'none',
|
|
240
257
|
borderForRadioInputOption: '1px',
|
|
258
|
+
borderForCalendarMenuWhenFocused: '1px solid var(--color-primary)',
|
|
241
259
|
borderColorForInput: 'hsl(0, 0%, 60%)',
|
|
242
260
|
borderColorForInputWhenFocused: '#00b39e',
|
|
243
261
|
borderColorForInputWhenDisabled: '#ccc',
|
|
@@ -263,8 +281,8 @@ var themes = {
|
|
|
263
281
|
borderColorForStampAsInformation: '#078cdf',
|
|
264
282
|
borderColorForStampAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
|
|
265
283
|
borderColorForStampAsSecondary: 'hsl(0, 0%, 60%)',
|
|
266
|
-
|
|
267
|
-
|
|
284
|
+
borderColorForLocalizedInputLabel: '#ccc',
|
|
285
|
+
borderColorForLocalizedInputLabelWhenReadonly: '#ccc',
|
|
268
286
|
borderColorForContentNotificationWhenError: '#e60050',
|
|
269
287
|
borderColorForContentNotificationWhenInfo: '#078cdf',
|
|
270
288
|
borderColorForContentNotificationWhenWarning: '#f16d0e',
|
|
@@ -283,8 +301,9 @@ var themes = {
|
|
|
283
301
|
borderColorForRadioInputWhenReadonly: '#ccc',
|
|
284
302
|
borderColorForRadioInputWhenChecked: '#ccc',
|
|
285
303
|
borderColorForRadioInputWhenFocused: '#00b39e',
|
|
304
|
+
borderColorForPrimaryActionDropdownMenu: '#ccc',
|
|
286
305
|
borderRadiusForButtonAsBig: '6px',
|
|
287
|
-
|
|
306
|
+
borderRadiusForButtonAsMedium: '4px',
|
|
288
307
|
borderRadiusForButtonAsIconAsBig: '6px',
|
|
289
308
|
borderRadiusForButtonAsIconAsMedium: '4px',
|
|
290
309
|
borderRadiusForButtonAsIconAsSmall: '2px',
|
|
@@ -296,6 +315,9 @@ var themes = {
|
|
|
296
315
|
borderRadiusForViewSwitcher: '6px',
|
|
297
316
|
borderRadiusForContentNotification: '0 var(--border-radius-6) var(--border-radius-6) 0',
|
|
298
317
|
borderRadiusForContentNotificationIcon: 'var(--border-radius-6) 0 0 var(--border-radius-6)',
|
|
318
|
+
borderRadiusForPrimaryActionDropdown: 'var(--border-radius-6) 0 0 var(--border-radius-6)',
|
|
319
|
+
borderRadiusForPrimaryActionDropdownIcon: '0 var(--border-radius-6) var(--border-radius-6) 0',
|
|
320
|
+
borderRadiusForPrimaryActionDropdownMenu: '6px',
|
|
299
321
|
borderWidthForInput: '1px',
|
|
300
322
|
borderWidthForInputWhenWarning: '1px',
|
|
301
323
|
borderWidthForInputWhenError: '1px',
|
|
@@ -305,11 +327,14 @@ var themes = {
|
|
|
305
327
|
borderWidthForContentNotificationIcon: '0px',
|
|
306
328
|
borderLeftWidthForContentNotification: '1px',
|
|
307
329
|
borderWidthForCheckboxInputIcon: '1px',
|
|
330
|
+
borderForPrimaryActionDropdownIcon: '0px 0px 0px 1px',
|
|
308
331
|
boxShadowForDatetimeInputWhenHovered: 'inset 0 0 0 2px',
|
|
309
332
|
boxShadowForViewSwitcher: '0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12)',
|
|
310
333
|
boxShadowForViewSwitcherWhenSelected: 'inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)',
|
|
311
334
|
boxShadowForSelectInputWhenFocused: 'inset 0 0 0 2px',
|
|
335
|
+
boxShadowForCalendarMenuWhenFocused: 'none',
|
|
312
336
|
fontColorForText: '#1a1a1a',
|
|
337
|
+
fontColorForTextWhenDisabled: '#ccc',
|
|
313
338
|
fontColorForInput: '#1a1a1a',
|
|
314
339
|
fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
315
340
|
fontColorForInputWhenError: '#e60050',
|
|
@@ -321,8 +346,13 @@ var themes = {
|
|
|
321
346
|
fontColorForTagRemoveIconWhenHovered: '#f16d0e',
|
|
322
347
|
fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
323
348
|
fontColorForTextWhenInverted: '#fff',
|
|
349
|
+
fontColorForLinkAsInverted: '#fff',
|
|
350
|
+
fontColorForLinkAsPrimary: '#00b39e',
|
|
351
|
+
fontColorForLinkAsSecondary: '#1a1a1a',
|
|
352
|
+
fontColorForLinkAsPrimaryWhenActive: 'hsl(172.9608938547486, 100%, 25%)',
|
|
353
|
+
fontColorForLinkAsSecondaryWhenActive: '#00b39e',
|
|
324
354
|
fontColorForTableHeader: '#fff',
|
|
325
|
-
|
|
355
|
+
fontColorForLocalizedInputLabel: 'hsl(0, 0%, 60%)',
|
|
326
356
|
fontColorForViewSwitcher: '#1a1a1a',
|
|
327
357
|
fontColorForViewSwitcherWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
328
358
|
fontColorForViewSwitcherWhenSelected: '#1a1a1a',
|
|
@@ -350,8 +380,17 @@ var themes = {
|
|
|
350
380
|
fontColorForRadioInputWhenError: '#e60050',
|
|
351
381
|
fontColorForRadioInputWhenReadonly: 'hsl(0, 0%, 60%)',
|
|
352
382
|
fontColorForRadioInputWhenWarning: '#f16d0e',
|
|
383
|
+
fontColorForFlatButtonAsPrimary: '#00b39e',
|
|
384
|
+
fontColorForFlatButtonAsPrimaryWhenHovered: 'hsl(172.9608938547486, 100%, 25%)',
|
|
385
|
+
fontColorForFlatButtonAsCritical: '#e60050',
|
|
386
|
+
fontColorForFlatButtonAsCriticalWhenHovered: 'hsl(339.1304347826087, 100%, 25%)',
|
|
387
|
+
fontColorForFlatButtonAsSecondary: '#1a1a1a',
|
|
388
|
+
fontColorForFlatButtonAsInverted: '#fff',
|
|
389
|
+
fontColorForFlatButtonIconWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
390
|
+
fontColorForSecondaryIconButtonAsPrimary: '#00b39e',
|
|
391
|
+
fontColorForSecondaryIconButtonAsPrimaryWhenHovered: 'hsl(172.9608938547486, 100%, 25%)',
|
|
353
392
|
heightForButtonAsBig: '32px',
|
|
354
|
-
|
|
393
|
+
heightForButtonAsMedium: '24px',
|
|
355
394
|
heightForButtonAsIconAsBig: '32px',
|
|
356
395
|
heightForButtonAsIconAsMedium: '24px',
|
|
357
396
|
heightForButtonAsIconAsSmall: '16px',
|
|
@@ -361,6 +400,7 @@ var themes = {
|
|
|
361
400
|
heightForSelectInputTag: '26px',
|
|
362
401
|
heightForRadioInputOption: '16px',
|
|
363
402
|
heightForRadioInputOptionWhenChecked: '8px',
|
|
403
|
+
heightForPrimaryActionDropdown: '32px',
|
|
364
404
|
widthForAvatarAsMedium: '48px',
|
|
365
405
|
minWidthForMoneyInputCurrencyDropdown: '72px',
|
|
366
406
|
placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
|
|
@@ -381,7 +421,7 @@ var themes = {
|
|
|
381
421
|
fontSizeForAvatarAsSmall: '1rem',
|
|
382
422
|
fontSizeForAvatarAsMedium: '1.5rem',
|
|
383
423
|
fontSizeForAvatarAsBig: '3rem',
|
|
384
|
-
|
|
424
|
+
fontSizeForLocalizedInputLabel: '1rem',
|
|
385
425
|
fontSizeForContentNotification: '1rem',
|
|
386
426
|
fontSizeForSelectInputTag: '0.9231rem',
|
|
387
427
|
iconColorForDatetimeInputIcon: '#1a1a1a',
|
|
@@ -393,6 +433,8 @@ var themes = {
|
|
|
393
433
|
lineHeightForTextAsH5: 'inherit',
|
|
394
434
|
lineHeightForTextAsBody: 'inherit',
|
|
395
435
|
lineHeightForTextAsDetail: 'inherit',
|
|
436
|
+
lineHeightForSelectInputOptions: 'inherit',
|
|
437
|
+
lineHeightForTableHeader: 'inherit',
|
|
396
438
|
fontWeightForTextAsH1: '300',
|
|
397
439
|
fontWeightForTextAsH2: '300',
|
|
398
440
|
fontWeightForTextAsH3: '300',
|
|
@@ -402,6 +444,7 @@ var themes = {
|
|
|
402
444
|
fontWeightForTextAsDetail: '400',
|
|
403
445
|
fontWeightForButton: '400',
|
|
404
446
|
fontWeightForTableHeader: '400',
|
|
447
|
+
fontWeightForTextAsBold: '700',
|
|
405
448
|
marginForTableHeader: '8px',
|
|
406
449
|
marginForTableAsCondensed: '8px',
|
|
407
450
|
marginForViewSwitcherIcon: '0 var(--spacing-10) 0 0',
|
|
@@ -412,6 +455,11 @@ var themes = {
|
|
|
412
455
|
marginRightForSearchInputIcon: '8px',
|
|
413
456
|
marginRightForClearInputIcon: '4px',
|
|
414
457
|
marginLeftForRadioInputLabel: '8px',
|
|
458
|
+
marginRightForPrimaryActionDropdown: '4px',
|
|
459
|
+
marginTopForPrimaryActionDropdown: 'none',
|
|
460
|
+
marginForLocalizedRichTextBodyButton: 'none',
|
|
461
|
+
marginForRichTextDivider: '0 var(--spacing-10)',
|
|
462
|
+
marginForRichTextDropdownItemLabel: '0 0 0 var(--spacing-10)',
|
|
415
463
|
paddingForStamp: 'var(--spacing-10) var(--spacing-20)',
|
|
416
464
|
paddingForStampAsCondensed: '1px var(--spacing-10)',
|
|
417
465
|
paddingForTag: '5px var(--spacing-20)',
|
|
@@ -431,6 +479,14 @@ var themes = {
|
|
|
431
479
|
paddingForInput: '8px',
|
|
432
480
|
paddingForMultilineInput: 'var(--spacing-10) var(--spacing-20)',
|
|
433
481
|
paddingForLocalizedRichTextInputLabel: '0 var(--spacing-20)',
|
|
482
|
+
paddingForLocalizedRichTextDropdownButton: '3px var(--spacing-20)',
|
|
483
|
+
paddingForLocalizedRichTextDropdownItem: 'var(--spacing-10) var(--spacing-20)',
|
|
484
|
+
paddingForLocalizedRichTextBodyButton: 'var(--spacing-10)',
|
|
485
|
+
paddingForLocalizedInputLabel: '0 var(--spacing-20)',
|
|
486
|
+
paddingForRichTextInput: 'none',
|
|
487
|
+
paddingForRichTextToolbar: 'var(--spacing-10) 7px',
|
|
488
|
+
paddingLeftForRichTextToolbar: '3px',
|
|
489
|
+
paddingForRichTextEditorContainer: '6px var(--spacing-20) var(--spacing-10)',
|
|
434
490
|
paddingForLocalizedMultilineTextInputLabel: '0 var(--spacing-20)',
|
|
435
491
|
paddingForTagRemoveIcon: '0 var(--spacing-10)',
|
|
436
492
|
paddingForTooltip: 'var(--spacing-10) var(--spacing-20)',
|
|
@@ -446,6 +502,10 @@ var themes = {
|
|
|
446
502
|
paddingForSelectInputMenu: 'inherit',
|
|
447
503
|
paddingForMoneyInputCurrencyDropdown: '0 var(--spacing-20)',
|
|
448
504
|
paddingForSelectableSearchInputDropdown: '0 var(--spacing-20)',
|
|
505
|
+
paddingForPrimaryActionDropdown: '0 var(--spacing-20)',
|
|
506
|
+
paddingForPrimaryActionDropdownIcon: '0 var(--spacing-10)',
|
|
507
|
+
paddingForButtonAsMedium: '0 var(--spacing-20)',
|
|
508
|
+
paddingForButtonAsBig: '0 var(--spacing-30)',
|
|
449
509
|
shadowForButton: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
|
|
450
510
|
shadowForButtonWhenFocused: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
|
|
451
511
|
shadowForButtonWhenHovered: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
|
|
@@ -459,6 +519,12 @@ var themes = {
|
|
|
459
519
|
shadowForInputWhenWarning: 'none',
|
|
460
520
|
shadowForTooltip: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)',
|
|
461
521
|
shadowForSelectInputMenu: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
|
|
522
|
+
shadowForPrimaryActionDropdown: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
|
|
523
|
+
shadowForPrimaryActionDropdownWhenHovered: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
|
|
524
|
+
shadowForPrimaryActionDropdownWhenActive: 'inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)',
|
|
525
|
+
shadowForPrimaryActionDropdownMenu: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
|
|
526
|
+
shadowForToggleInputThumb: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
|
|
527
|
+
shadowForTagWhenHovered: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
|
|
462
528
|
fontSizeM: '1rem',
|
|
463
529
|
bigButtonHeight: '32px',
|
|
464
530
|
smallButtonHeight: '24px',
|
|
@@ -467,8 +533,7 @@ var themes = {
|
|
|
467
533
|
fontSizeDefault: '1rem',
|
|
468
534
|
fontSizeSmall: '0.9231rem',
|
|
469
535
|
shadowBoxTagHover: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
|
|
470
|
-
sizeHeightTag: '26px'
|
|
471
|
-
standardInputHeight: '32px'
|
|
536
|
+
sizeHeightTag: '26px'
|
|
472
537
|
},
|
|
473
538
|
test: {
|
|
474
539
|
colorPrimary: '#00b39e',
|
|
@@ -485,8 +550,8 @@ var themes = {
|
|
|
485
550
|
backgroundColorForButtonAsUrgentWhenActive: '#DC630A',
|
|
486
551
|
backgroundColorForButtonAsUrgentWhenHovered: '#E7680D',
|
|
487
552
|
backgroundColorForButtonWhenDisabled: 'hsl(0, 0%, 95%)',
|
|
488
|
-
backgroundColorForTableCellWhenHovered: 'hsl(0, 0%,
|
|
489
|
-
backgroundColorForTableHeader: '
|
|
553
|
+
backgroundColorForTableCellWhenHovered: 'hsl(0, 0%, 98%)',
|
|
554
|
+
backgroundColorForTableHeader: 'hsl(0, 0%, 95%)',
|
|
490
555
|
backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: '#fff',
|
|
491
556
|
backgroundColorForInputWhenHovered: 'hsl(0, 0%, 98%)',
|
|
492
557
|
backgroundColorForInputWhenDisabled: 'hsl(0, 0%, 95%)',
|
|
@@ -495,8 +560,14 @@ var themes = {
|
|
|
495
560
|
backgroundColorForAvatar: '#213c45',
|
|
496
561
|
backgroundColorForAvatarWhenHighlighted: 'hsl(195, 35.2941176471%, 30%)',
|
|
497
562
|
backgroundColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 95%)',
|
|
498
|
-
|
|
499
|
-
|
|
563
|
+
backgroundColorForLocalizedInputLabel: '#fff',
|
|
564
|
+
backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(0, 0%, 95%)',
|
|
565
|
+
backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(0, 0%, 95%)',
|
|
566
|
+
backgroundColorForLocalizedRichTextBodyButtonWhenActive: 'hsl(195, 35.2941176471%, 20%)',
|
|
567
|
+
backgroundColorForLocalizedRichTextBodyButton: 'hsl(0, 0%, 95%)',
|
|
568
|
+
backgroundColorForRichTextDropdownWhenHovered: 'hsl(0, 0%, 95%)',
|
|
569
|
+
backgroundColorForRichTextMoreStylesDropdownWhenHovered: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
|
|
570
|
+
backgroundColorForRichTextButton: 'hsl(195, 35.2941176471%, 20%)',
|
|
500
571
|
backgroundColorForTooltip: 'hsl(195, 35.2941176471%, 10%)',
|
|
501
572
|
backgroundColorForViewSwitcherWhenDisabled: '#fff',
|
|
502
573
|
backgroundColorForViewSwitcherWhenSelected: 'hsl(0, 0%, 95%)',
|
|
@@ -515,6 +586,16 @@ var themes = {
|
|
|
515
586
|
backgroundColorForCheckboxInputIconWhenReadonly: 'hsl(0, 0%, 60%)',
|
|
516
587
|
backgroundColorForCheckboxInputIconWhenError: '#e60050',
|
|
517
588
|
backgroundColorForCheckboxInputIconWhenHovered: 'hsl(0, 0%, 90%)',
|
|
589
|
+
backgroundColorForPrimaryActionDropdownWhenActive: 'hsl(0, 0%, 90%)',
|
|
590
|
+
backgroundColorForPrimaryActionDropdownWhenDisabled: 'hsl(0, 0%, 95%)',
|
|
591
|
+
backgroundColorForToggleInputTrack: '#ccc',
|
|
592
|
+
backgroundColorForToggleInputTrackWhenDisabled: 'hsl(0, 0%, 90%)',
|
|
593
|
+
backgroundColorForToggleInputThumbWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
594
|
+
backgroundColorForToggleInputTrackWhenChecked: 'hsl(172.9608938547486, 100%, 40%)',
|
|
595
|
+
backgroundColorForToggleInputThumbWhenChecked: 'hsl(172.9608938547486, 100%, 25%)',
|
|
596
|
+
backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 90%)',
|
|
597
|
+
backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 60%)',
|
|
598
|
+
backgroundColorForTagWhenHovered: 'hsl(0, 0%, 90%)',
|
|
518
599
|
borderForButtonAsSecondary: '1px solid var(--color-neutral)',
|
|
519
600
|
borderForButtonAsSecondaryWhenHovered: '1px solid var(--color-neutral)',
|
|
520
601
|
borderForButtonAsSecondaryWhenActive: '1px solid var(--color-neutral)',
|
|
@@ -523,6 +604,7 @@ var themes = {
|
|
|
523
604
|
borderForViewSwitcher: '1px solid var(--color-neutral)',
|
|
524
605
|
borderForSelectInputTag: '1px solid var(--color-neutral-85)',
|
|
525
606
|
borderForRadioInputOption: '2px',
|
|
607
|
+
borderForCalendarMenuWhenFocused: 'none',
|
|
526
608
|
borderColorForInput: '#ccc',
|
|
527
609
|
borderColorForInputWhenDisabled: '#ccc',
|
|
528
610
|
borderColorForInputWhenHovered: '#ccc',
|
|
@@ -543,8 +625,9 @@ var themes = {
|
|
|
543
625
|
borderColorForStampAsInformation: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
|
|
544
626
|
borderColorForStampAsPrimary: 'hsl(172.9608938547486, 100%, 85%)',
|
|
545
627
|
borderColorForStampAsSecondary: 'hsl(0, 0%, 85%)',
|
|
546
|
-
|
|
628
|
+
borderColorForLocalizedInputLabelWhenReadonly: '#fff',
|
|
547
629
|
borderColorForTag: '#ccc',
|
|
630
|
+
borderColorForTagWhenFocused: '#ccc',
|
|
548
631
|
borderColorForTagWhenHovered: '#ccc',
|
|
549
632
|
borderColorForContentNotificationWhenError: 'hsl(339.1304347826087, 100%, 85%)',
|
|
550
633
|
borderColorForContentNotificationWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
|
|
@@ -564,8 +647,9 @@ var themes = {
|
|
|
564
647
|
borderColorForRadioInputWhenReadonly: 'hsl(0, 0%, 60%)',
|
|
565
648
|
borderColorForRadioInputWhenChecked: '#00b39e',
|
|
566
649
|
borderColorForRadioInputWhenFocused: 'hsl(0, 0%, 60%)',
|
|
650
|
+
borderColorForPrimaryActionDropdownMenu: '#fff',
|
|
567
651
|
borderRadiusForButtonAsBig: '4px',
|
|
568
|
-
|
|
652
|
+
borderRadiusForButtonAsMedium: '4px',
|
|
569
653
|
borderRadiusForButtonAsIconAsBig: '4px',
|
|
570
654
|
borderRadiusForButtonAsIconAsMedium: '4px',
|
|
571
655
|
borderRadiusForButtonAsIconAsSmall: '2px',
|
|
@@ -576,16 +660,22 @@ var themes = {
|
|
|
576
660
|
borderRadiusForViewSwitcher: '4px',
|
|
577
661
|
borderRadiusForContentNotification: '0 var(--border-radius-4) var(--border-radius-4) 0',
|
|
578
662
|
borderRadiusForContentNotificationIcon: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
|
|
663
|
+
borderRadiusForPrimaryActionDropdown: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
|
|
664
|
+
borderRadiusForPrimaryActionDropdownIcon: '0 var(--border-radius-4) var(--border-radius-4) 0',
|
|
665
|
+
borderRadiusForPrimaryActionDropdownMenu: '4px',
|
|
579
666
|
borderWidthForTag: '1px 1px 1px 0',
|
|
580
667
|
borderWidthForContentNotificationIcon: '1px',
|
|
581
668
|
borderLeftWidthForContentNotification: '0px',
|
|
582
669
|
borderWidthForSelectInput: '2px',
|
|
583
670
|
borderWidthForCheckboxInputIcon: '2px',
|
|
671
|
+
borderForPrimaryActionDropdownIcon: '1px 1px 1px 0px',
|
|
584
672
|
boxShadowForDatetimeInputWhenHovered: 'inset 0 0 0 1px',
|
|
585
673
|
boxShadowForViewSwitcher: 'none',
|
|
586
674
|
boxShadowForViewSwitcherWhenSelected: 'none',
|
|
587
675
|
boxShadowForSelectInputWhenFocused: 'inset 0 0 0 1px',
|
|
588
|
-
|
|
676
|
+
boxShadowForCalendarMenuWhenFocused: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
|
|
677
|
+
fontColorForTextWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
678
|
+
fontColorForTableHeader: '#1a1a1a',
|
|
589
679
|
fontColorForInputWhenReadonly: 'hsl(0, 0%, 40%)',
|
|
590
680
|
fontColorForTagRemoveIcon: 'hsl(0, 0%, 40%)',
|
|
591
681
|
fontColorForTagDragIcon: 'hsl(0, 0%, 40%)',
|
|
@@ -608,6 +698,12 @@ var themes = {
|
|
|
608
698
|
fontColorForCheckboxInputLabelWhenError: '#e60050',
|
|
609
699
|
fontColorForCheckboxInputLabelWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
610
700
|
fontColorForCheckboxInputLabelWhenReadonly: 'hsl(0, 0%, 40%)',
|
|
701
|
+
fontColorForFlatButtonAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
|
|
702
|
+
fontColorForFlatButtonAsPrimaryWhenHovered: '#00b39e',
|
|
703
|
+
fontColorForLinkAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
|
|
704
|
+
fontColorForLinkAsPrimaryWhenActive: '#00b39e',
|
|
705
|
+
fontColorForSecondaryIconButtonAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
|
|
706
|
+
fontColorForSecondaryIconButtonAsPrimaryWhenHovered: '#00b39e',
|
|
611
707
|
fontSizeForInput: '1rem',
|
|
612
708
|
fontSizeForTextAsH1: '1.5rem',
|
|
613
709
|
fontSizeForTextAsH2: '1.25rem',
|
|
@@ -624,7 +720,7 @@ var themes = {
|
|
|
624
720
|
fontSizeForAvatarAsSmall: '0.875rem',
|
|
625
721
|
fontSizeForAvatarAsMedium: '1rem',
|
|
626
722
|
fontSizeForAvatarAsBig: '2.5rem',
|
|
627
|
-
|
|
723
|
+
fontSizeForLocalizedInputLabel: '1rem',
|
|
628
724
|
fontSizeForSelectInputTag: '1rem',
|
|
629
725
|
lineHeightForTextAsH1: '2.125rem',
|
|
630
726
|
lineHeightForTextAsH2: '1.75rem',
|
|
@@ -633,6 +729,8 @@ var themes = {
|
|
|
633
729
|
lineHeightForTextAsH5: '1.375rem',
|
|
634
730
|
lineHeightForTextAsBody: '1.625rem',
|
|
635
731
|
lineHeightForTextAsDetail: '1.375rem',
|
|
732
|
+
lineHeightForSelectInputOptions: '1.625rem',
|
|
733
|
+
lineHeightForTableHeader: '26px',
|
|
636
734
|
fontWeightForTextAsH1: '600',
|
|
637
735
|
fontWeightForTextAsH2: '500',
|
|
638
736
|
fontWeightForTextAsH3: '500',
|
|
@@ -642,8 +740,9 @@ var themes = {
|
|
|
642
740
|
fontWeightForTextAsDetail: '400',
|
|
643
741
|
fontWeightForButton: '500',
|
|
644
742
|
fontWeightForTableHeader: '600',
|
|
743
|
+
fontWeightForTextAsBold: '600',
|
|
645
744
|
heightForButtonAsBig: '40px',
|
|
646
|
-
|
|
745
|
+
heightForButtonAsMedium: '32px',
|
|
647
746
|
heightForButtonAsIconAsBig: '40px',
|
|
648
747
|
heightForButtonAsIconAsMedium: '32px',
|
|
649
748
|
heightForButtonAsIconAsSmall: '16px',
|
|
@@ -653,6 +752,7 @@ var themes = {
|
|
|
653
752
|
heightForSelectInputTag: '32px',
|
|
654
753
|
heightForRadioInputOption: '18px',
|
|
655
754
|
heightForRadioInputOptionWhenChecked: '10px',
|
|
755
|
+
heightForPrimaryActionDropdown: '40px',
|
|
656
756
|
iconColorForDatetimeInputIcon: 'hsl(0, 0%, 40%)',
|
|
657
757
|
iconColorForDatetimeInputIconWhenHovered: '#e60050',
|
|
658
758
|
widthForAvatarAsMedium: '40px',
|
|
@@ -667,6 +767,11 @@ var themes = {
|
|
|
667
767
|
marginRightForSearchInputIcon: '12px',
|
|
668
768
|
marginRightForClearInputIcon: '8px',
|
|
669
769
|
marginLeftForRadioInputLabel: '4px',
|
|
770
|
+
marginRightForPrimaryActionDropdown: '8px',
|
|
771
|
+
marginTopForPrimaryActionDropdown: '8px',
|
|
772
|
+
marginForLocalizedRichTextBodyButton: '0 2px var(--spacing-20) 2px',
|
|
773
|
+
marginForRichTextDivider: 'var(--spacing-10) 2px',
|
|
774
|
+
marginForRichTextDropdownItemLabel: '0 0 0 var(--spacing-20)',
|
|
670
775
|
paddingForStamp: '4px 12px',
|
|
671
776
|
paddingForStampAsCondensed: '0 var(--spacing-20)',
|
|
672
777
|
paddingForTag: '2px 12px',
|
|
@@ -685,8 +790,15 @@ var themes = {
|
|
|
685
790
|
paddingForCollapsiblePanelSectionDescriptionAsCondensed: '0 0 var(--spacing-40)',
|
|
686
791
|
paddingForInput: '16px',
|
|
687
792
|
paddingForMultilineInput: '8px',
|
|
688
|
-
paddingForLocalizedRichTextInputLabel: '
|
|
689
|
-
|
|
793
|
+
paddingForLocalizedRichTextInputLabel: 'var(--spacing-20) 12px',
|
|
794
|
+
paddingForLocalizedRichTextDropdownButton: '5px var(--spacing-20)',
|
|
795
|
+
paddingForLocalizedRichTextDropdownItem: 'var(--spacing-20) var(--spacing-30)',
|
|
796
|
+
paddingForLocalizedRichTextBodyButton: 'var(--spacing-20)',
|
|
797
|
+
paddingForRichTextInput: 'var(--spacing-20) var(--spacing-30)',
|
|
798
|
+
paddingForRichTextToolbar: 'none',
|
|
799
|
+
paddingLeftForRichTextToolbar: 'none',
|
|
800
|
+
paddingForRichTextEditorContainer: 'var(--spacing-20) 0 0',
|
|
801
|
+
paddingForLocalizedInputLabel: '0 12px',
|
|
690
802
|
paddingForTagRemoveIcon: '0 12px',
|
|
691
803
|
paddingForTooltip: 'var(--spacing-20) 12px',
|
|
692
804
|
paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)',
|
|
@@ -701,6 +813,10 @@ var themes = {
|
|
|
701
813
|
paddingForSelectInputMenu: 'var(--spacing-10) 0',
|
|
702
814
|
paddingForMoneyInputCurrencyDropdown: '0 12px',
|
|
703
815
|
paddingForSelectableSearchInputDropdown: '0 12px',
|
|
816
|
+
paddingForPrimaryActionDropdown: '0 var(--spacing-30)',
|
|
817
|
+
paddingForPrimaryActionDropdownIcon: '0 var(--spacing-20)',
|
|
818
|
+
paddingForButtonAsMedium: '0 var(--spacing-30)',
|
|
819
|
+
paddingForButtonAsBig: '0 var(--spacing-30)',
|
|
704
820
|
shadowForButton: 'none',
|
|
705
821
|
shadowForButtonWhenFocused: 'none',
|
|
706
822
|
shadowForButtonWhenHovered: 'none',
|
|
@@ -712,7 +828,13 @@ var themes = {
|
|
|
712
828
|
shadowForInputWhenError: 'inset 0 0 0 1px var(--color-error)',
|
|
713
829
|
shadowForInputWhenWarning: 'inset 0 0 0 1px var(--color-warning)',
|
|
714
830
|
shadowForTooltip: '0px 1px 2px 0px rgba(0, 0, 0, 0.25)',
|
|
715
|
-
shadowForSelectInputMenu: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
|
|
831
|
+
shadowForSelectInputMenu: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
|
|
832
|
+
shadowForPrimaryActionDropdown: 'none',
|
|
833
|
+
shadowForPrimaryActionDropdownWhenHovered: 'none',
|
|
834
|
+
shadowForPrimaryActionDropdownWhenActive: 'none',
|
|
835
|
+
shadowForPrimaryActionDropdownMenu: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
|
|
836
|
+
shadowForToggleInputThumb: '0px 1px 5px rgba(0, 0, 0, 0.2)',
|
|
837
|
+
shadowForTagWhenHovered: 'none'
|
|
716
838
|
}
|
|
717
839
|
};
|
|
718
840
|
var designTokens = {
|
|
@@ -726,6 +848,7 @@ var designTokens = {
|
|
|
726
848
|
colorAccent20: 'var(--color-accent-20, hsl(195, 35.2941176471%, 20%))',
|
|
727
849
|
colorAccent30: 'var(--color-accent-30, hsl(195, 35.2941176471%, 30%))',
|
|
728
850
|
colorAccent40: 'var(--color-accent-40, hsl(195, 35.2941176471%, 40%))',
|
|
851
|
+
colorAccent60: 'var(--color-accent-60, hsl(195, 35.2941176471%, 60%))',
|
|
729
852
|
colorAccent90: 'var(--color-accent-90, hsl(195, 35.2941176471%, 90%))',
|
|
730
853
|
colorAccent95: 'var(--color-accent-95, hsl(195, 35.2941176471%, 95%))',
|
|
731
854
|
colorAccent98: 'var(--color-accent-98, hsl(195, 35.2941176471%, 98%))',
|
|
@@ -867,13 +990,20 @@ var designTokens = {
|
|
|
867
990
|
backgroundColorForTableHeader: 'var(--background-color-for-table-header, #213c45)',
|
|
868
991
|
backgroundColorForTag: 'var(--background-color-for-tag, hsl(0, 0%, 95%))',
|
|
869
992
|
backgroundColorForTagWarning: 'var(--background-color-for-tag-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
|
|
993
|
+
backgroundColorForTagWhenHovered: 'var(--background-color-for-tag-when-hovered, hsl(0, 0%, 95%))',
|
|
870
994
|
backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: 'var(--background-color-for-collapsible-panel-header-icon-when-disabled, hsl(195, 35.2941176471%, 98%))',
|
|
871
995
|
backgroundColorForSelectInputOptionWhenHovered: 'var(--background-color-for-select-input-option-when-hovered, hsl(0, 0%, 90%))',
|
|
872
996
|
backgroundColorForAvatar: 'var(--background-color-for-avatar, hsl(0, 0%, 60%))',
|
|
873
997
|
backgroundColorForAvatarWhenHighlighted: 'var(--background-color-for-avatar-when-highlighted, #ccc)',
|
|
874
998
|
backgroundColorForStampAsPositive: 'var(--background-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 85%))',
|
|
875
|
-
|
|
876
|
-
|
|
999
|
+
backgroundColorForLocalizedInputLabel: 'var(--background-color-for-localized-input-label, hsl(195, 35.2941176471%, 98%))',
|
|
1000
|
+
backgroundColorForLocalizedInputLabelWhenReadonly: 'var(--background-color-for-localized-input-label-when-readonly, hsl(195, 35.2941176471%, 95%))',
|
|
1001
|
+
backgroundColorForLocalizedInputLabelWhenDisabled: 'var(--background-color-for-localized-input-label-when-disabled, hsl(195, 35.2941176471%, 98%))',
|
|
1002
|
+
backgroundColorForLocalizedRichTextBodyButtonWhenActive: 'var(--background-color-for-localized-rich-text-body-button-when-active, hsl(195, 35.2941176471%, 30%))',
|
|
1003
|
+
backgroundColorForLocalizedRichTextBodyButton: 'var(--background-color-for-localized-rich-text-body-button, hsl(0, 0%, 90%))',
|
|
1004
|
+
backgroundColorForRichTextDropdownWhenHovered: 'var(--background-color-for-rich-text-dropdown-when-hovered, hsl(0, 0%, 90%))',
|
|
1005
|
+
backgroundColorForRichTextMoreStylesDropdownWhenHovered: 'var(--background-color-for-rich-text-more-styles-dropdown-when-hovered, hsl(0, 0%, 90%))',
|
|
1006
|
+
backgroundColorForRichTextButton: 'var(--background-color-for-rich-text-button, hsl(195, 35.2941176471%, 30%))',
|
|
877
1007
|
backgroundColorForTooltip: 'var(--background-color-for-tooltip, #213c45)',
|
|
878
1008
|
backgroundColorForViewSwitcher: 'var(--background-color-for-view-switcher, #fff)',
|
|
879
1009
|
backgroundColorForViewSwitcherWhenDisabled: 'var(--background-color-for-view-switcher-when-disabled, hsl(195, 35.2941176471%, 98%))',
|
|
@@ -892,6 +1022,15 @@ var designTokens = {
|
|
|
892
1022
|
backgroundColorForCheckboxInputIconWhenReadonly: 'var(--background-color-for-checkbox-input-icon-when-readonly, #fff)',
|
|
893
1023
|
backgroundColorForCheckboxInputIconWhenError: 'var(--background-color-for-checkbox-input-icon-when-error, #fff)',
|
|
894
1024
|
backgroundColorForCheckboxInputIconWhenHovered: 'var(--background-color-for-checkbox-input-icon-when-hovered, #fff)',
|
|
1025
|
+
backgroundColorForPrimaryActionDropdownWhenActive: 'var(--background-color-for-primary-action-dropdown-when-active, hsl(0, 0%, 95%))',
|
|
1026
|
+
backgroundColorForPrimaryActionDropdownWhenDisabled: 'var(--background-color-for-primary-action-dropdown-when-disabled, hsl(195, 35.2941176471%, 98%))',
|
|
1027
|
+
backgroundColorForToggleInputTrack: 'var(--background-color-for-toggle-input-track, hsl(0, 0%, 60%))',
|
|
1028
|
+
backgroundColorForToggleInputTrackWhenDisabled: 'var(--background-color-for-toggle-input-track-when-disabled, #ccc)',
|
|
1029
|
+
backgroundColorForToggleInputThumbWhenDisabled: 'var(--background-color-for-toggle-input-thumb-when-disabled, hsl(195, 35.2941176471%, 95%))',
|
|
1030
|
+
backgroundColorForToggleInputTrackWhenChecked: 'var(--background-color-for-toggle-input-track-when-checked, #00b39e)',
|
|
1031
|
+
backgroundColorForToggleInputThumbWhenChecked: 'var(--background-color-for-toggle-input-thumb-when-checked, #fff)',
|
|
1032
|
+
backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-track-when-checked-and-disabled, hsl(172.9608938547486, 100%, 25%))',
|
|
1033
|
+
backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-thumb-when-checked-and-disabled, #ccc)',
|
|
895
1034
|
borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, none)',
|
|
896
1035
|
borderForButtonAsSecondaryWhenHovered: 'var(--border-for-button-as-secondary-when-hovered, none)',
|
|
897
1036
|
borderForButtonAsSecondaryWhenActive: 'var(--border-for-button-as-secondary-when-active, none)',
|
|
@@ -900,6 +1039,7 @@ var designTokens = {
|
|
|
900
1039
|
borderForViewSwitcher: 'var(--border-for-view-switcher, none)',
|
|
901
1040
|
borderForSelectInputTag: 'var(--border-for-select-input-tag, none)',
|
|
902
1041
|
borderForRadioInputOption: 'var(--border-for-radio-input-option, 1px)',
|
|
1042
|
+
borderForCalendarMenuWhenFocused: 'var(--border-for-calendar-menu-when-focused, 1px solid var(--color-primary))',
|
|
903
1043
|
borderColorForInput: 'var(--border-color-for-input, hsl(0, 0%, 60%))',
|
|
904
1044
|
borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, #00b39e)',
|
|
905
1045
|
borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, #ccc)',
|
|
@@ -925,8 +1065,8 @@ var designTokens = {
|
|
|
925
1065
|
borderColorForStampAsInformation: 'var(--border-color-for-stamp-as-information, #078cdf)',
|
|
926
1066
|
borderColorForStampAsPrimary: 'var(--border-color-for-stamp-as-primary, hsl(172.9608938547486, 100%, 25%))',
|
|
927
1067
|
borderColorForStampAsSecondary: 'var(--border-color-for-stamp-as-secondary, hsl(0, 0%, 60%))',
|
|
928
|
-
|
|
929
|
-
|
|
1068
|
+
borderColorForLocalizedInputLabel: 'var(--border-color-for-localized-input-label, #ccc)',
|
|
1069
|
+
borderColorForLocalizedInputLabelWhenReadonly: 'var(--border-color-for-localized-input-label-when-readonly, #ccc)',
|
|
930
1070
|
borderColorForContentNotificationWhenError: 'var(--border-color-for-content-notification-when-error, #e60050)',
|
|
931
1071
|
borderColorForContentNotificationWhenInfo: 'var(--border-color-for-content-notification-when-info, #078cdf)',
|
|
932
1072
|
borderColorForContentNotificationWhenWarning: 'var(--border-color-for-content-notification-when-warning, #f16d0e)',
|
|
@@ -945,8 +1085,9 @@ var designTokens = {
|
|
|
945
1085
|
borderColorForRadioInputWhenReadonly: 'var(--border-color-for-radio-input-when-readonly, #ccc)',
|
|
946
1086
|
borderColorForRadioInputWhenChecked: 'var(--border-color-for-radio-input-when-checked, #ccc)',
|
|
947
1087
|
borderColorForRadioInputWhenFocused: 'var(--border-color-for-radio-input-when-focused, #00b39e)',
|
|
1088
|
+
borderColorForPrimaryActionDropdownMenu: 'var(--border-color-for-primary-action-dropdown-menu, #ccc)',
|
|
948
1089
|
borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 6px)',
|
|
949
|
-
|
|
1090
|
+
borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)',
|
|
950
1091
|
borderRadiusForButtonAsIconAsBig: 'var(--border-radius-for-button-as-icon-as-big, 6px)',
|
|
951
1092
|
borderRadiusForButtonAsIconAsMedium: 'var(--border-radius-for-button-as-icon-as-medium, 4px)',
|
|
952
1093
|
borderRadiusForButtonAsIconAsSmall: 'var(--border-radius-for-button-as-icon-as-small, 2px)',
|
|
@@ -958,6 +1099,9 @@ var designTokens = {
|
|
|
958
1099
|
borderRadiusForViewSwitcher: 'var(--border-radius-for-view-switcher, 6px)',
|
|
959
1100
|
borderRadiusForContentNotification: 'var(--border-radius-for-content-notification, 0 var(--border-radius-6) var(--border-radius-6) 0)',
|
|
960
1101
|
borderRadiusForContentNotificationIcon: 'var(--border-radius-for-content-notification-icon, var(--border-radius-6) 0 0 var(--border-radius-6))',
|
|
1102
|
+
borderRadiusForPrimaryActionDropdown: 'var(--border-radius-for-primary-action-dropdown, var(--border-radius-6) 0 0 var(--border-radius-6))',
|
|
1103
|
+
borderRadiusForPrimaryActionDropdownIcon: 'var(--border-radius-for-primary-action-dropdown-icon, 0 var(--border-radius-6) var(--border-radius-6) 0)',
|
|
1104
|
+
borderRadiusForPrimaryActionDropdownMenu: 'var(--border-radius-for-primary-action-dropdown-menu, 6px)',
|
|
961
1105
|
borderWidthForInput: 'var(--border-width-for-input, 1px)',
|
|
962
1106
|
borderWidthForInputWhenWarning: 'var(--border-width-for-input-when-warning, 1px)',
|
|
963
1107
|
borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)',
|
|
@@ -967,11 +1111,14 @@ var designTokens = {
|
|
|
967
1111
|
borderWidthForContentNotificationIcon: 'var(--border-width-for-content-notification-icon, 0px)',
|
|
968
1112
|
borderLeftWidthForContentNotification: 'var(--border-left-width-for-content-notification, 1px)',
|
|
969
1113
|
borderWidthForCheckboxInputIcon: 'var(--border-width-for-checkbox-input-icon, 1px)',
|
|
1114
|
+
borderForPrimaryActionDropdownIcon: 'var(--border-for-primary-action-dropdown-icon, 0px 0px 0px 1px)',
|
|
970
1115
|
boxShadowForDatetimeInputWhenHovered: 'var(--box-shadow-for-datetime-input-when-hovered, inset 0 0 0 2px)',
|
|
971
1116
|
boxShadowForViewSwitcher: 'var(--box-shadow-for-view-switcher, 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12))',
|
|
972
1117
|
boxShadowForViewSwitcherWhenSelected: 'var(--box-shadow-for-view-switcher-when-selected, inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25))',
|
|
973
1118
|
boxShadowForSelectInputWhenFocused: 'var(--box-shadow-for-select-input-when-focused, inset 0 0 0 2px)',
|
|
1119
|
+
boxShadowForCalendarMenuWhenFocused: 'var(--box-shadow-for-calendar-menu-when-focused, none)',
|
|
974
1120
|
fontColorForText: 'var(--font-color-for-text, #1a1a1a)',
|
|
1121
|
+
fontColorForTextWhenDisabled: 'var(--font-color-for-text-when-disabled, #ccc)',
|
|
975
1122
|
fontColorForInput: 'var(--font-color-for-input, #1a1a1a)',
|
|
976
1123
|
fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))',
|
|
977
1124
|
fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)',
|
|
@@ -983,8 +1130,13 @@ var designTokens = {
|
|
|
983
1130
|
fontColorForTagRemoveIconWhenHovered: 'var(--font-color-for-tag-remove-icon-when-hovered, #f16d0e)',
|
|
984
1131
|
fontColorForTagWhenDisabled: 'var(--font-color-for-tag-when-disabled, hsl(0, 0%, 60%))',
|
|
985
1132
|
fontColorForTextWhenInverted: 'var(--font-color-for-text-when-inverted, #fff)',
|
|
1133
|
+
fontColorForLinkAsInverted: 'var(--font-color-for-link-as-inverted, #fff)',
|
|
1134
|
+
fontColorForLinkAsPrimary: 'var(--font-color-for-link-as-primary, #00b39e)',
|
|
1135
|
+
fontColorForLinkAsSecondary: 'var(--font-color-for-link-as-secondary, #1a1a1a)',
|
|
1136
|
+
fontColorForLinkAsPrimaryWhenActive: 'var(--font-color-for-link-as-primary-when-active, hsl(172.9608938547486, 100%, 25%))',
|
|
1137
|
+
fontColorForLinkAsSecondaryWhenActive: 'var(--font-color-for-link-as-secondary-when-active, #00b39e)',
|
|
986
1138
|
fontColorForTableHeader: 'var(--font-color-for-table-header, #fff)',
|
|
987
|
-
|
|
1139
|
+
fontColorForLocalizedInputLabel: 'var(--font-color-for-localized-input-label, hsl(0, 0%, 60%))',
|
|
988
1140
|
fontColorForViewSwitcher: 'var(--font-color-for-view-switcher, #1a1a1a)',
|
|
989
1141
|
fontColorForViewSwitcherWhenDisabled: 'var(--font-color-for-view-switcher-when-disabled, hsl(0, 0%, 60%))',
|
|
990
1142
|
fontColorForViewSwitcherWhenSelected: 'var(--font-color-for-view-switcher-when-selected, #1a1a1a)',
|
|
@@ -1012,8 +1164,17 @@ var designTokens = {
|
|
|
1012
1164
|
fontColorForRadioInputWhenError: 'var(--font-color-for-radio-input-when-error, #e60050)',
|
|
1013
1165
|
fontColorForRadioInputWhenReadonly: 'var(--font-color-for-radio-input-when-readonly, hsl(0, 0%, 60%))',
|
|
1014
1166
|
fontColorForRadioInputWhenWarning: 'var(--font-color-for-radio-input-when-warning, #f16d0e)',
|
|
1167
|
+
fontColorForFlatButtonAsPrimary: 'var(--font-color-for-flat-button-as-primary, #00b39e)',
|
|
1168
|
+
fontColorForFlatButtonAsPrimaryWhenHovered: 'var(--font-color-for-flat-button-as-primary-when-hovered, hsl(172.9608938547486, 100%, 25%))',
|
|
1169
|
+
fontColorForFlatButtonAsCritical: 'var(--font-color-for-flat-button-as-critical, #e60050)',
|
|
1170
|
+
fontColorForFlatButtonAsCriticalWhenHovered: 'var(--font-color-for-flat-button-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))',
|
|
1171
|
+
fontColorForFlatButtonAsSecondary: 'var(--font-color-for-flat-button-as-secondary, #1a1a1a)',
|
|
1172
|
+
fontColorForFlatButtonAsInverted: 'var(--font-color-for-flat-button-as-inverted, #fff)',
|
|
1173
|
+
fontColorForFlatButtonIconWhenDisabled: 'var(--font-color-for-flat-button-icon-when-disabled, hsl(0, 0%, 60%))',
|
|
1174
|
+
fontColorForSecondaryIconButtonAsPrimary: 'var(--font-color-for-secondary-icon-button-as-primary, #00b39e)',
|
|
1175
|
+
fontColorForSecondaryIconButtonAsPrimaryWhenHovered: 'var(--font-color-for-secondary-icon-button-as-primary-when-hovered, hsl(172.9608938547486, 100%, 25%))',
|
|
1015
1176
|
heightForButtonAsBig: 'var(--height-for-button-as-big, 32px)',
|
|
1016
|
-
|
|
1177
|
+
heightForButtonAsMedium: 'var(--height-for-button-as-medium, 24px)',
|
|
1017
1178
|
heightForButtonAsIconAsBig: 'var(--height-for-button-as-icon-as-big, 32px)',
|
|
1018
1179
|
heightForButtonAsIconAsMedium: 'var(--height-for-button-as-icon-as-medium, 24px)',
|
|
1019
1180
|
heightForButtonAsIconAsSmall: 'var(--height-for-button-as-icon-as-small, 16px)',
|
|
@@ -1023,6 +1184,7 @@ var designTokens = {
|
|
|
1023
1184
|
heightForSelectInputTag: 'var(--height-for-select-input-tag, 26px)',
|
|
1024
1185
|
heightForRadioInputOption: 'var(--height-for-radio-input-option, 16px)',
|
|
1025
1186
|
heightForRadioInputOptionWhenChecked: 'var(--height-for-radio-input-option-when-checked, 8px)',
|
|
1187
|
+
heightForPrimaryActionDropdown: 'var(--height-for-primary-action-dropdown, 32px)',
|
|
1026
1188
|
widthForAvatarAsMedium: 'var(--width-for-avatar-as-medium, 48px)',
|
|
1027
1189
|
minWidthForMoneyInputCurrencyDropdown: 'var(--min-width-for-money-input-currency-dropdown, 72px)',
|
|
1028
1190
|
placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(0, 0%, 60%))',
|
|
@@ -1043,7 +1205,7 @@ var designTokens = {
|
|
|
1043
1205
|
fontSizeForAvatarAsSmall: 'var(--font-size-for-avatar-as-small, 1rem)',
|
|
1044
1206
|
fontSizeForAvatarAsMedium: 'var(--font-size-for-avatar-as-medium, 1.5rem)',
|
|
1045
1207
|
fontSizeForAvatarAsBig: 'var(--font-size-for-avatar-as-big, 3rem)',
|
|
1046
|
-
|
|
1208
|
+
fontSizeForLocalizedInputLabel: 'var(--font-size-for-localized-input-label, 1rem)',
|
|
1047
1209
|
fontSizeForContentNotification: 'var(--font-size-for-content-notification, 1rem)',
|
|
1048
1210
|
fontSizeForSelectInputTag: 'var(--font-size-for-select-input-tag, 0.9231rem)',
|
|
1049
1211
|
iconColorForDatetimeInputIcon: 'var(--icon-color-for-datetime-input-icon, #1a1a1a)',
|
|
@@ -1055,6 +1217,8 @@ var designTokens = {
|
|
|
1055
1217
|
lineHeightForTextAsH5: 'var(--line-height-for-text-as-h-5, inherit)',
|
|
1056
1218
|
lineHeightForTextAsBody: 'var(--line-height-for-text-as-body, inherit)',
|
|
1057
1219
|
lineHeightForTextAsDetail: 'var(--line-height-for-text-as-detail, inherit)',
|
|
1220
|
+
lineHeightForSelectInputOptions: 'var(--line-height-for-select-input-options, inherit)',
|
|
1221
|
+
lineHeightForTableHeader: 'var(--line-height-for-table-header, inherit)',
|
|
1058
1222
|
fontWeightForTextAsH1: 'var(--font-weight-for-text-as-h-1, 300)',
|
|
1059
1223
|
fontWeightForTextAsH2: 'var(--font-weight-for-text-as-h-2, 300)',
|
|
1060
1224
|
fontWeightForTextAsH3: 'var(--font-weight-for-text-as-h-3, 300)',
|
|
@@ -1064,6 +1228,7 @@ var designTokens = {
|
|
|
1064
1228
|
fontWeightForTextAsDetail: 'var(--font-weight-for-text-as-detail, 400)',
|
|
1065
1229
|
fontWeightForButton: 'var(--font-weight-for-button, 400)',
|
|
1066
1230
|
fontWeightForTableHeader: 'var(--font-weight-for-table-header, 400)',
|
|
1231
|
+
fontWeightForTextAsBold: 'var(--font-weight-for-text-as-bold, 700)',
|
|
1067
1232
|
marginForTableHeader: 'var(--margin-for-table-header, 8px)',
|
|
1068
1233
|
marginForTableAsCondensed: 'var(--margin-for-table-as-condensed, 8px)',
|
|
1069
1234
|
marginForViewSwitcherIcon: 'var(--margin-for-view-switcher-icon, 0 var(--spacing-10) 0 0)',
|
|
@@ -1074,6 +1239,11 @@ var designTokens = {
|
|
|
1074
1239
|
marginRightForSearchInputIcon: 'var(--margin-right-for-search-input-icon, 8px)',
|
|
1075
1240
|
marginRightForClearInputIcon: 'var(--margin-right-for-clear-input-icon, 4px)',
|
|
1076
1241
|
marginLeftForRadioInputLabel: 'var(--margin-left-for-radio-input-label, 8px)',
|
|
1242
|
+
marginRightForPrimaryActionDropdown: 'var(--margin-right-for-primary-action-dropdown, 4px)',
|
|
1243
|
+
marginTopForPrimaryActionDropdown: 'var(--margin-top-for-primary-action-dropdown, none)',
|
|
1244
|
+
marginForLocalizedRichTextBodyButton: 'var(--margin-for-localized-rich-text-body-button, none)',
|
|
1245
|
+
marginForRichTextDivider: 'var(--margin-for-rich-text-divider, 0 var(--spacing-10))',
|
|
1246
|
+
marginForRichTextDropdownItemLabel: 'var(--margin-for-rich-text-dropdown-item-label, 0 0 0 var(--spacing-10))',
|
|
1077
1247
|
paddingForStamp: 'var(--padding-for-stamp, var(--spacing-10) var(--spacing-20))',
|
|
1078
1248
|
paddingForStampAsCondensed: 'var(--padding-for-stamp-as-condensed, 1px var(--spacing-10))',
|
|
1079
1249
|
paddingForTag: 'var(--padding-for-tag, 5px var(--spacing-20))',
|
|
@@ -1093,6 +1263,14 @@ var designTokens = {
|
|
|
1093
1263
|
paddingForInput: 'var(--padding-for-input, 8px)',
|
|
1094
1264
|
paddingForMultilineInput: 'var(--padding-for-multiline-input, var(--spacing-10) var(--spacing-20))',
|
|
1095
1265
|
paddingForLocalizedRichTextInputLabel: 'var(--padding-for-localized-rich-text-input-label, 0 var(--spacing-20))',
|
|
1266
|
+
paddingForLocalizedRichTextDropdownButton: 'var(--padding-for-localized-rich-text-dropdown-button, 3px var(--spacing-20))',
|
|
1267
|
+
paddingForLocalizedRichTextDropdownItem: 'var(--padding-for-localized-rich-text-dropdown-item, var(--spacing-10) var(--spacing-20))',
|
|
1268
|
+
paddingForLocalizedRichTextBodyButton: 'var(--padding-for-localized-rich-text-body-button, var(--spacing-10))',
|
|
1269
|
+
paddingForLocalizedInputLabel: 'var(--padding-for-localized-input-label, 0 var(--spacing-20))',
|
|
1270
|
+
paddingForRichTextInput: 'var(--padding-for-rich-text-input, none)',
|
|
1271
|
+
paddingForRichTextToolbar: 'var(--padding-for-rich-text-toolbar, var(--spacing-10) 7px)',
|
|
1272
|
+
paddingLeftForRichTextToolbar: 'var(--padding-left-for-rich-text-toolbar, 3px)',
|
|
1273
|
+
paddingForRichTextEditorContainer: 'var(--padding-for-rich-text-editor-container, 6px var(--spacing-20) var(--spacing-10))',
|
|
1096
1274
|
paddingForLocalizedMultilineTextInputLabel: 'var(--padding-for-localized-multiline-text-input-label, 0 var(--spacing-20))',
|
|
1097
1275
|
paddingForTagRemoveIcon: 'var(--padding-for-tag-remove-icon, 0 var(--spacing-10))',
|
|
1098
1276
|
paddingForTooltip: 'var(--padding-for-tooltip, var(--spacing-10) var(--spacing-20))',
|
|
@@ -1108,6 +1286,10 @@ var designTokens = {
|
|
|
1108
1286
|
paddingForSelectInputMenu: 'var(--padding-for-select-input-menu, inherit)',
|
|
1109
1287
|
paddingForMoneyInputCurrencyDropdown: 'var(--padding-for-money-input-currency-dropdown, 0 var(--spacing-20))',
|
|
1110
1288
|
paddingForSelectableSearchInputDropdown: 'var(--padding-for-selectable-search-input-dropdown, 0 var(--spacing-20))',
|
|
1289
|
+
paddingForPrimaryActionDropdown: 'var(--padding-for-primary-action-dropdown, 0 var(--spacing-20))',
|
|
1290
|
+
paddingForPrimaryActionDropdownIcon: 'var(--padding-for-primary-action-dropdown-icon, 0 var(--spacing-10))',
|
|
1291
|
+
paddingForButtonAsMedium: 'var(--padding-for-button-as-medium, 0 var(--spacing-20))',
|
|
1292
|
+
paddingForButtonAsBig: 'var(--padding-for-button-as-big, 0 var(--spacing-30))',
|
|
1111
1293
|
shadowForButton: 'var(--shadow-for-button, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
|
|
1112
1294
|
shadowForButtonWhenFocused: 'var(--shadow-for-button-when-focused, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
|
|
1113
1295
|
shadowForButtonWhenHovered: 'var(--shadow-for-button-when-hovered, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
|
|
@@ -1121,6 +1303,12 @@ var designTokens = {
|
|
|
1121
1303
|
shadowForInputWhenWarning: 'var(--shadow-for-input-when-warning, none)',
|
|
1122
1304
|
shadowForTooltip: 'var(--shadow-for-tooltip, 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12))',
|
|
1123
1305
|
shadowForSelectInputMenu: 'var(--shadow-for-select-input-menu, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
|
|
1306
|
+
shadowForPrimaryActionDropdown: 'var(--shadow-for-primary-action-dropdown, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
|
|
1307
|
+
shadowForPrimaryActionDropdownWhenHovered: 'var(--shadow-for-primary-action-dropdown-when-hovered, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
|
|
1308
|
+
shadowForPrimaryActionDropdownWhenActive: 'var(--shadow-for-primary-action-dropdown-when-active, inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25))',
|
|
1309
|
+
shadowForPrimaryActionDropdownMenu: 'var(--shadow-for-primary-action-dropdown-menu, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
|
|
1310
|
+
shadowForToggleInputThumb: 'var(--shadow-for-toggle-input-thumb, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
|
|
1311
|
+
shadowForTagWhenHovered: 'var(--shadow-for-tag-when-hovered, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
|
|
1124
1312
|
fontSizeM: 'var(--font-size-m, 1rem)',
|
|
1125
1313
|
bigButtonHeight: 'var(--big-button-height, 32px)',
|
|
1126
1314
|
smallButtonHeight: 'var(--small-button-height, 24px)',
|
|
@@ -1129,8 +1317,7 @@ var designTokens = {
|
|
|
1129
1317
|
fontSizeDefault: 'var(--font-size-default, 1rem)',
|
|
1130
1318
|
fontSizeSmall: 'var(--font-size-small, 0.9231rem)',
|
|
1131
1319
|
shadowBoxTagHover: 'var(--shadow-box-tag-hover, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
|
|
1132
|
-
sizeHeightTag: 'var(--size-height-tag, 26px)'
|
|
1133
|
-
standardInputHeight: 'var(--standard-input-height, 32px)'
|
|
1320
|
+
sizeHeightTag: 'var(--size-height-tag, 26px)'
|
|
1134
1321
|
};
|
|
1135
1322
|
var designTokens$1 = designTokens;
|
|
1136
1323
|
|
|
@@ -1323,7 +1510,7 @@ var withThemeContext = function withThemeContext(WrappedComponent) {
|
|
|
1323
1510
|
};
|
|
1324
1511
|
|
|
1325
1512
|
// NOTE: This string will be replaced on build time with the package version.
|
|
1326
|
-
var version = "15.
|
|
1513
|
+
var version = "15.14.0";
|
|
1327
1514
|
|
|
1328
1515
|
exports.ThemeProvider = ThemeProvider;
|
|
1329
1516
|
exports.customProperties = designTokens$1;
|