@commercetools-uikit/design-system 15.10.0 → 15.11.1
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 +164 -5
- package/dist/commercetools-uikit-design-system.cjs.prod.js +164 -5
- package/dist/commercetools-uikit-design-system.esm.js +164 -5
- package/dist/declarations/src/design-tokens.d.ts +162 -3
- package/materials/custom-properties.css +58 -1
- package/materials/custom-properties.json +55 -1
- package/materials/internals/definition.yaml +231 -3
- package/package.json +1 -1
|
@@ -71,9 +71,10 @@ var themes = {
|
|
|
71
71
|
colorNeutral10: 'hsl(0deg 0% 80% / 10%)',
|
|
72
72
|
colorNeutral40: 'hsl(0, 0%, 40%)',
|
|
73
73
|
colorNeutral60: 'hsl(0, 0%, 60%)',
|
|
74
|
+
colorNeutral85: 'hsl(0, 0%, 85%)',
|
|
74
75
|
colorNeutral90: 'hsl(0, 0%, 90%)',
|
|
75
76
|
colorNeutral95: 'hsl(0, 0%, 95%)',
|
|
76
|
-
|
|
77
|
+
colorNeutral98: 'hsl(0, 0%, 98%)',
|
|
77
78
|
colorInfo: '#078cdf',
|
|
78
79
|
colorInfo40: 'hsl(203.05555555555554, 93.9130434783%, 40%)',
|
|
79
80
|
colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
|
|
@@ -84,6 +85,7 @@ var themes = {
|
|
|
84
85
|
colorWarning85: 'hsl(25.110132158590307, 89.0196078431%, 85%)',
|
|
85
86
|
colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
86
87
|
colorError: '#e60050',
|
|
88
|
+
colorError25: 'hsl(339.1304347826087, 100%, 25%)',
|
|
87
89
|
colorError40: 'hsl(339.1304347826087, 100%, 40%)',
|
|
88
90
|
colorError85: 'hsl(339.1304347826087, 100%, 85%)',
|
|
89
91
|
colorError95: 'hsl(339.1304347826087, 100%, 95%)',
|
|
@@ -195,6 +197,8 @@ var themes = {
|
|
|
195
197
|
backgroundColorForInputWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
|
|
196
198
|
backgroundColorForInputWhenHovered: '#fff',
|
|
197
199
|
backgroundColorForInputWhenFocused: '#fff',
|
|
200
|
+
backgroundColorForInputWhenReadonly: '#fff',
|
|
201
|
+
backgroundColorForInputWhenActive: 'hsl(195, 35.2941176471%, 95%)',
|
|
198
202
|
backgroundColorForTableCellWhenHovered: 'hsl(0, 0%, 90%)',
|
|
199
203
|
backgroundColorForTableHeader: '#213c45',
|
|
200
204
|
backgroundColorForTag: 'hsl(0, 0%, 95%)',
|
|
@@ -211,6 +215,14 @@ var themes = {
|
|
|
211
215
|
backgroundColorForViewSwitcherWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
|
|
212
216
|
backgroundColorForViewSwitcherWhenSelected: 'hsl(0, 0%, 95%)',
|
|
213
217
|
backgroundColorForViewSwitcherWhenHovered: 'hsl(0, 0%, 90%)',
|
|
218
|
+
backgroundColorForContentNotificationWhenError: '#fff',
|
|
219
|
+
backgroundColorForContentNotificationWhenInfo: '#fff',
|
|
220
|
+
backgroundColorForContentNotificationWhenWarning: '#fff',
|
|
221
|
+
backgroundColorForContentNotificationWhenSuccess: '#fff',
|
|
222
|
+
backgroundColorForContentNotificationIconWhenError: '#e60050',
|
|
223
|
+
backgroundColorForContentNotificationIconWhenInfo: '#078cdf',
|
|
224
|
+
backgroundColorForContentNotificationIconWhenWarning: '#f16d0e',
|
|
225
|
+
backgroundColorForContentNotificationIconWhenSuccess: '#00b39e',
|
|
214
226
|
borderForButtonAsSecondary: 'none',
|
|
215
227
|
borderForButtonAsSecondaryWhenHovered: 'none',
|
|
216
228
|
borderForButtonAsSecondaryWhenActive: 'none',
|
|
@@ -244,6 +256,15 @@ var themes = {
|
|
|
244
256
|
borderColorForStampAsSecondary: 'hsl(0, 0%, 60%)',
|
|
245
257
|
borderColorForLocalizedMultilineTextInputLabel: '#ccc',
|
|
246
258
|
borderColorForLocalizedMultilineTextInputLabelWhenReadonly: '#ccc',
|
|
259
|
+
borderColorForContentNotificationWhenError: '#e60050',
|
|
260
|
+
borderColorForContentNotificationWhenInfo: '#078cdf',
|
|
261
|
+
borderColorForContentNotificationWhenWarning: '#f16d0e',
|
|
262
|
+
borderColorForContentNotificationWhenSuccess: '#00b39e',
|
|
263
|
+
borderColorForGroupHeadingSelectInputOptions: '#ccc',
|
|
264
|
+
borderColorForSelectInputMenu: '#00b39e',
|
|
265
|
+
borderColorForSelectInputWhenReadonly: '#ccc',
|
|
266
|
+
borderColorForSelectInputMenuWhenWarning: '#f16d0e',
|
|
267
|
+
borderColorForSelectInputMenuWhenError: '#e60050',
|
|
247
268
|
borderRadiusForButtonAsBig: '6px',
|
|
248
269
|
borderRadiusForButtonAsSmall: '4px',
|
|
249
270
|
borderRadiusForButtonAsIconAsBig: '6px',
|
|
@@ -255,14 +276,20 @@ var themes = {
|
|
|
255
276
|
borderRadiusForTableManagerDroppableList: '6px',
|
|
256
277
|
borderRadiusForStamp: '2px',
|
|
257
278
|
borderRadiusForViewSwitcher: '6px',
|
|
279
|
+
borderRadiusForContentNotification: '0 var(--border-radius-6) var(--border-radius-6) 0',
|
|
280
|
+
borderRadiusForContentNotificationIcon: 'var(--border-radius-6) 0 0 var(--border-radius-6)',
|
|
258
281
|
borderWidthForInput: '1px',
|
|
259
282
|
borderWidthForInputWhenWarning: '1px',
|
|
260
283
|
borderWidthForInputWhenError: '1px',
|
|
261
284
|
borderWidthForInputWhenFocused: '1px',
|
|
262
285
|
borderWidthForTag: '1px',
|
|
286
|
+
borderWidthForSelectInput: '1px',
|
|
287
|
+
borderWidthForContentNotificationIcon: '0px',
|
|
288
|
+
borderLeftWidthForContentNotification: '1px',
|
|
263
289
|
boxShadowForDatetimeInputWhenHovered: 'inset 0 0 0 2px',
|
|
264
290
|
boxShadowForViewSwitcher: '0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12)',
|
|
265
291
|
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)',
|
|
292
|
+
boxShadowForSelectInputWhenFocused: 'inset 0 0 0 2px',
|
|
266
293
|
fontColorForText: '#1a1a1a',
|
|
267
294
|
fontColorForInput: '#1a1a1a',
|
|
268
295
|
fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
@@ -280,6 +307,20 @@ var themes = {
|
|
|
280
307
|
fontColorForViewSwitcher: '#1a1a1a',
|
|
281
308
|
fontColorForViewSwitcherWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
282
309
|
fontColorForViewSwitcherWhenSelected: '#1a1a1a',
|
|
310
|
+
fontColorForClearInputIcon: '#1a1a1a',
|
|
311
|
+
fontColorForClearInputIconWhenHovered: '#f16d0e',
|
|
312
|
+
fontColorForContentNotification: '#1a1a1a',
|
|
313
|
+
fontColorForContentNotificationIconWhenError: '#fff',
|
|
314
|
+
fontColorForContentNotificationIconWhenWarning: '#fff',
|
|
315
|
+
fontColorForContentNotificationIconWhenSuccess: '#fff',
|
|
316
|
+
fontColorForContentNotificationIconWhenInfo: '#fff',
|
|
317
|
+
fontColorForSearchInputIcon: '#1a1a1a',
|
|
318
|
+
fontColorForSearchInputIconWhenHovered: '#1a1a1a',
|
|
319
|
+
fontColorForSelectInputIcon: '#1a1a1a',
|
|
320
|
+
fontColorForSelectInputWhenError: '#1a1a1a',
|
|
321
|
+
fontColorForSelectInputWhenWarning: '#1a1a1a',
|
|
322
|
+
fontColorForSelectInputIconWhenError: '#1a1a1a',
|
|
323
|
+
fontColorForSelectInputIconWhenWarning: '#1a1a1a',
|
|
283
324
|
heightForButtonAsBig: '32px',
|
|
284
325
|
heightForButtonAsSmall: '24px',
|
|
285
326
|
heightForButtonAsIconAsBig: '32px',
|
|
@@ -308,6 +349,7 @@ var themes = {
|
|
|
308
349
|
fontSizeForAvatarAsMedium: '1.5rem',
|
|
309
350
|
fontSizeForAvatarAsBig: '3rem',
|
|
310
351
|
fontSizeForLocalizedMultilineTextInputLabel: '0.9231rem',
|
|
352
|
+
fontSizeForContentNotification: '1rem',
|
|
311
353
|
iconColorForDatetimeInputIcon: '#1a1a1a',
|
|
312
354
|
iconColorForDatetimeInputIconWhenHovered: '#f16d0e',
|
|
313
355
|
lineHeightForTextAsH1: 'inherit',
|
|
@@ -329,6 +371,9 @@ var themes = {
|
|
|
329
371
|
marginForTableHeader: '8px',
|
|
330
372
|
marginForTableAsCondensed: '8px',
|
|
331
373
|
marginForViewSwitcherIcon: '0 var(--spacing-10) 0 0',
|
|
374
|
+
marginForGroupHeadingSelectInputOptions: '4px',
|
|
375
|
+
marginForSelectInputIcon: '4px',
|
|
376
|
+
marginLeftForSelectInputIcon: 'inherit',
|
|
332
377
|
paddingForStamp: 'var(--spacing-10) var(--spacing-20)',
|
|
333
378
|
paddingForStampAsCondensed: '1px var(--spacing-10)',
|
|
334
379
|
paddingForTag: '5px var(--spacing-20)',
|
|
@@ -353,6 +398,14 @@ var themes = {
|
|
|
353
398
|
paddingForTooltip: 'var(--spacing-10) var(--spacing-20)',
|
|
354
399
|
paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)',
|
|
355
400
|
paddingForViewSwitcherWhenCondensed: '0 var(--spacing-20) 0 var(--spacing-20)',
|
|
401
|
+
paddingForContentNotification: 'var(--spacing-20)',
|
|
402
|
+
paddingForContentNotificationIcon: 'var(--spacing-20) var(--spacing-30)',
|
|
403
|
+
paddingLeftForSelectInputOptions: '8px',
|
|
404
|
+
paddingRightForSelectInputOptions: '8px',
|
|
405
|
+
paddingTopForSelectInputOptions: '4px',
|
|
406
|
+
paddingBottomForSelectInputOptions: '4px',
|
|
407
|
+
paddingForGroupHeadingSelectInputOptions: '8px',
|
|
408
|
+
paddingForSelectInputMenu: 'inherit',
|
|
356
409
|
shadowForButton: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
|
|
357
410
|
shadowForButtonWhenFocused: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
|
|
358
411
|
shadowForButtonWhenHovered: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
|
|
@@ -365,6 +418,7 @@ var themes = {
|
|
|
365
418
|
shadowForInputWhenError: 'none',
|
|
366
419
|
shadowForInputWhenWarning: 'none',
|
|
367
420
|
shadowForTooltip: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)',
|
|
421
|
+
shadowForSelectInputMenu: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
|
|
368
422
|
fontSizeM: '1rem',
|
|
369
423
|
bigButtonHeight: '32px',
|
|
370
424
|
smallButtonHeight: '24px',
|
|
@@ -393,8 +447,10 @@ var themes = {
|
|
|
393
447
|
backgroundColorForTableCellWhenHovered: 'hsl(0, 0%, 95%)',
|
|
394
448
|
backgroundColorForTableHeader: '#fff',
|
|
395
449
|
backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: '#fff',
|
|
396
|
-
backgroundColorForInputWhenHovered: 'hsl(0, 0%,
|
|
450
|
+
backgroundColorForInputWhenHovered: 'hsl(0, 0%, 98%)',
|
|
397
451
|
backgroundColorForInputWhenDisabled: 'hsl(0, 0%, 95%)',
|
|
452
|
+
backgroundColorForInputWhenActive: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
|
|
453
|
+
backgroundColorForInputWhenReadonly: 'hsl(0, 0%, 95%)',
|
|
398
454
|
backgroundColorForAvatar: '#213c45',
|
|
399
455
|
backgroundColorForAvatarWhenHighlighted: 'hsl(195, 35.2941176471%, 30%)',
|
|
400
456
|
backgroundColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 95%)',
|
|
@@ -404,6 +460,15 @@ var themes = {
|
|
|
404
460
|
backgroundColorForViewSwitcherWhenDisabled: '#fff',
|
|
405
461
|
backgroundColorForViewSwitcherWhenSelected: 'hsl(0, 0%, 95%)',
|
|
406
462
|
backgroundColorForViewSwitcherWhenHovered: 'hsl(0, 0%, 95%)',
|
|
463
|
+
backgroundColorForContentNotificationWhenError: 'hsl(339.1304347826087, 100%, 95%)',
|
|
464
|
+
backgroundColorForContentNotificationWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
|
|
465
|
+
backgroundColorForContentNotificationWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
466
|
+
backgroundColorForContentNotificationWhenSuccess: 'hsl(172.9608938547486, 100%, 95%)',
|
|
467
|
+
backgroundColorForContentNotificationIconWhenError: 'hsl(339.1304347826087, 100%, 95%)',
|
|
468
|
+
backgroundColorForContentNotificationIconWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
|
|
469
|
+
backgroundColorForContentNotificationIconWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
470
|
+
backgroundColorForContentNotificationIconWhenSuccess: 'hsl(172.9608938547486, 100%, 95%)',
|
|
471
|
+
backgroundColorForSelectInputOptionWhenHovered: 'hsl(0, 0%, 98%)',
|
|
407
472
|
borderForButtonAsSecondary: '1px solid var(--color-neutral)',
|
|
408
473
|
borderForButtonAsSecondaryWhenHovered: '1px solid var(--color-neutral)',
|
|
409
474
|
borderForButtonAsSecondaryWhenActive: '1px solid var(--color-neutral)',
|
|
@@ -433,6 +498,15 @@ var themes = {
|
|
|
433
498
|
borderColorForLocalizedMultilineTextInputLabelWhenReadonly: 'hsl(0, 0%, 90%)',
|
|
434
499
|
borderColorForTag: '#ccc',
|
|
435
500
|
borderColorForTagWhenHovered: '#ccc',
|
|
501
|
+
borderColorForContentNotificationWhenError: 'hsl(339.1304347826087, 100%, 85%)',
|
|
502
|
+
borderColorForContentNotificationWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
|
|
503
|
+
borderColorForContentNotificationWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 85%)',
|
|
504
|
+
borderColorForContentNotificationWhenSuccess: 'hsl(172.9608938547486, 100%, 85%)',
|
|
505
|
+
borderColorForGroupHeadingSelectInputOptions: 'hsl(0, 0%, 90%)',
|
|
506
|
+
borderColorForSelectInputMenu: '#fff',
|
|
507
|
+
borderColorForSelectInputWhenReadonly: 'hsl(0, 0%, 95%)',
|
|
508
|
+
borderColorForSelectInputMenuWhenWarning: '#fff',
|
|
509
|
+
borderColorForSelectInputMenuWhenError: '#fff',
|
|
436
510
|
borderRadiusForButtonAsBig: '4px',
|
|
437
511
|
borderRadiusForButtonAsSmall: '4px',
|
|
438
512
|
borderRadiusForButtonAsIconAsBig: '4px',
|
|
@@ -443,16 +517,35 @@ var themes = {
|
|
|
443
517
|
borderRadiusForInput: '4px',
|
|
444
518
|
borderRadiusForStamp: '20px',
|
|
445
519
|
borderRadiusForViewSwitcher: '4px',
|
|
520
|
+
borderRadiusForContentNotification: '0 var(--border-radius-4) var(--border-radius-4) 0',
|
|
521
|
+
borderRadiusForContentNotificationIcon: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
|
|
446
522
|
borderWidthForTag: '1px 1px 1px 0',
|
|
523
|
+
borderWidthForContentNotificationIcon: '1px',
|
|
524
|
+
borderLeftWidthForContentNotification: '0px',
|
|
525
|
+
borderWidthForSelectInput: '2px',
|
|
447
526
|
boxShadowForDatetimeInputWhenHovered: 'inset 0 0 0 1px',
|
|
448
527
|
boxShadowForViewSwitcher: 'none',
|
|
449
528
|
boxShadowForViewSwitcherWhenSelected: 'none',
|
|
529
|
+
boxShadowForSelectInputWhenFocused: 'inset 0 0 0 1px',
|
|
450
530
|
fontColorForTableHeader: 'hsl(0, 0%, 40%)',
|
|
451
531
|
fontColorForInputWhenReadonly: 'hsl(0, 0%, 40%)',
|
|
452
532
|
fontColorForTagRemoveIcon: 'hsl(0, 0%, 40%)',
|
|
453
533
|
fontColorForTagDragIcon: 'hsl(0, 0%, 40%)',
|
|
454
534
|
fontColorForTagRemoveIconWhenHovered: '#e60050',
|
|
455
535
|
fontColorForViewSwitcher: 'hsl(0, 0%, 40%)',
|
|
536
|
+
fontColorForContentNotificationIconWhenError: '#e60050',
|
|
537
|
+
fontColorForContentNotificationIconWhenWarning: '#f16d0e',
|
|
538
|
+
fontColorForContentNotificationIconWhenSuccess: '#00b39e',
|
|
539
|
+
fontColorForContentNotificationIconWhenInfo: '#078cdf',
|
|
540
|
+
fontColorForClearInputIconWhenHovered: '#e60050',
|
|
541
|
+
fontColorForClearInputIcon: 'hsl(0, 0%, 40%)',
|
|
542
|
+
fontColorForSearchInputIcon: 'hsl(0, 0%, 60%)',
|
|
543
|
+
fontColorForSearchInputIconWhenHovered: '#00b39e',
|
|
544
|
+
fontColorForSelectInputIcon: 'hsl(0, 0%, 60%)',
|
|
545
|
+
fontColorForSelectInputWhenError: '#e60050',
|
|
546
|
+
fontColorForSelectInputWhenWarning: '#f16d0e',
|
|
547
|
+
fontColorForSelectInputIconWhenError: '#e60050',
|
|
548
|
+
fontColorForSelectInputIconWhenWarning: '#f16d0e',
|
|
456
549
|
fontSizeForInput: '1rem',
|
|
457
550
|
fontSizeForTextAsH1: '1.5rem',
|
|
458
551
|
fontSizeForTextAsH2: '1.25rem',
|
|
@@ -501,6 +594,9 @@ var themes = {
|
|
|
501
594
|
marginForTableHeader: '16px',
|
|
502
595
|
marginForTableCellAsCondensed: '8px',
|
|
503
596
|
marginForViewSwitcherIcon: '0 var(--spacing-20) 0 0',
|
|
597
|
+
marginForGroupHeadingSelectInputOptions: '8px',
|
|
598
|
+
marginForSelectInputIcon: '8px',
|
|
599
|
+
marginLeftForSelectInputIcon: '8px',
|
|
504
600
|
paddingForStamp: '4px 12px',
|
|
505
601
|
paddingForStampAsCondensed: '0 var(--spacing-20)',
|
|
506
602
|
paddingForTag: '2px 12px',
|
|
@@ -525,6 +621,14 @@ var themes = {
|
|
|
525
621
|
paddingForTooltip: 'var(--spacing-20) 12px',
|
|
526
622
|
paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)',
|
|
527
623
|
paddingForViewSwitcherWhenCondensed: '0 12px 0 12px',
|
|
624
|
+
paddingForContentNotification: 'var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20)',
|
|
625
|
+
paddingForContentNotificationIcon: 'var(--spacing-20) 0 var(--spacing-20) var(--spacing-30)',
|
|
626
|
+
paddingLeftForSelectInputOptions: '16px',
|
|
627
|
+
paddingRightForSelectInputOptions: '16px',
|
|
628
|
+
paddingTopForSelectInputOptions: '8px',
|
|
629
|
+
paddingBottomForSelectInputOptions: '8px',
|
|
630
|
+
paddingForGroupHeadingSelectInputOptions: '16px',
|
|
631
|
+
paddingForSelectInputMenu: 'var(--spacing-10) 0',
|
|
528
632
|
shadowForButton: 'none',
|
|
529
633
|
shadowForButtonWhenFocused: 'none',
|
|
530
634
|
shadowForButtonWhenHovered: 'none',
|
|
@@ -535,7 +639,8 @@ var themes = {
|
|
|
535
639
|
shadowForInputWhenFocused: 'inset 0 0 0 1px var(--color-primary)',
|
|
536
640
|
shadowForInputWhenError: 'inset 0 0 0 1px var(--color-error)',
|
|
537
641
|
shadowForInputWhenWarning: 'inset 0 0 0 1px var(--color-warning)',
|
|
538
|
-
shadowForTooltip: '0px 1px 2px 0px rgba(0, 0, 0, 0.25)'
|
|
642
|
+
shadowForTooltip: '0px 1px 2px 0px rgba(0, 0, 0, 0.25)',
|
|
643
|
+
shadowForSelectInputMenu: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
|
|
539
644
|
}
|
|
540
645
|
};
|
|
541
646
|
var designTokens = {
|
|
@@ -557,9 +662,10 @@ var designTokens = {
|
|
|
557
662
|
colorNeutral10: 'var(--color-neutral-10, hsl(0deg 0% 80% / 10%))',
|
|
558
663
|
colorNeutral40: 'var(--color-neutral-40, hsl(0, 0%, 40%))',
|
|
559
664
|
colorNeutral60: 'var(--color-neutral-60, hsl(0, 0%, 60%))',
|
|
665
|
+
colorNeutral85: 'var(--color-neutral-85, hsl(0, 0%, 85%))',
|
|
560
666
|
colorNeutral90: 'var(--color-neutral-90, hsl(0, 0%, 90%))',
|
|
561
667
|
colorNeutral95: 'var(--color-neutral-95, hsl(0, 0%, 95%))',
|
|
562
|
-
|
|
668
|
+
colorNeutral98: 'var(--color-neutral-98, hsl(0, 0%, 98%))',
|
|
563
669
|
colorInfo: 'var(--color-info, #078cdf)',
|
|
564
670
|
colorInfo40: 'var(--color-info-40, hsl(203.05555555555554, 93.9130434783%, 40%))',
|
|
565
671
|
colorInfo85: 'var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))',
|
|
@@ -570,6 +676,7 @@ var designTokens = {
|
|
|
570
676
|
colorWarning85: 'var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))',
|
|
571
677
|
colorWarning95: 'var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))',
|
|
572
678
|
colorError: 'var(--color-error, #e60050)',
|
|
679
|
+
colorError25: 'var(--color-error-25, hsl(339.1304347826087, 100%, 25%))',
|
|
573
680
|
colorError40: 'var(--color-error-40, hsl(339.1304347826087, 100%, 40%))',
|
|
574
681
|
colorError85: 'var(--color-error-85, hsl(339.1304347826087, 100%, 85%))',
|
|
575
682
|
colorError95: 'var(--color-error-95, hsl(339.1304347826087, 100%, 95%))',
|
|
@@ -681,6 +788,8 @@ var designTokens = {
|
|
|
681
788
|
backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(195, 35.2941176471%, 98%))',
|
|
682
789
|
backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, #fff)',
|
|
683
790
|
backgroundColorForInputWhenFocused: 'var(--background-color-for-input-when-focused, #fff)',
|
|
791
|
+
backgroundColorForInputWhenReadonly: 'var(--background-color-for-input-when-readonly, #fff)',
|
|
792
|
+
backgroundColorForInputWhenActive: 'var(--background-color-for-input-when-active, hsl(195, 35.2941176471%, 95%))',
|
|
684
793
|
backgroundColorForTableCellWhenHovered: 'var(--background-color-for-table-cell-when-hovered, hsl(0, 0%, 90%))',
|
|
685
794
|
backgroundColorForTableHeader: 'var(--background-color-for-table-header, #213c45)',
|
|
686
795
|
backgroundColorForTag: 'var(--background-color-for-tag, hsl(0, 0%, 95%))',
|
|
@@ -697,6 +806,14 @@ var designTokens = {
|
|
|
697
806
|
backgroundColorForViewSwitcherWhenDisabled: 'var(--background-color-for-view-switcher-when-disabled, hsl(195, 35.2941176471%, 98%))',
|
|
698
807
|
backgroundColorForViewSwitcherWhenSelected: 'var(--background-color-for-view-switcher-when-selected, hsl(0, 0%, 95%))',
|
|
699
808
|
backgroundColorForViewSwitcherWhenHovered: 'var(--background-color-for-view-switcher-when-hovered, hsl(0, 0%, 90%))',
|
|
809
|
+
backgroundColorForContentNotificationWhenError: 'var(--background-color-for-content-notification-when-error, #fff)',
|
|
810
|
+
backgroundColorForContentNotificationWhenInfo: 'var(--background-color-for-content-notification-when-info, #fff)',
|
|
811
|
+
backgroundColorForContentNotificationWhenWarning: 'var(--background-color-for-content-notification-when-warning, #fff)',
|
|
812
|
+
backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, #fff)',
|
|
813
|
+
backgroundColorForContentNotificationIconWhenError: 'var(--background-color-for-content-notification-icon-when-error, #e60050)',
|
|
814
|
+
backgroundColorForContentNotificationIconWhenInfo: 'var(--background-color-for-content-notification-icon-when-info, #078cdf)',
|
|
815
|
+
backgroundColorForContentNotificationIconWhenWarning: 'var(--background-color-for-content-notification-icon-when-warning, #f16d0e)',
|
|
816
|
+
backgroundColorForContentNotificationIconWhenSuccess: 'var(--background-color-for-content-notification-icon-when-success, #00b39e)',
|
|
700
817
|
borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, none)',
|
|
701
818
|
borderForButtonAsSecondaryWhenHovered: 'var(--border-for-button-as-secondary-when-hovered, none)',
|
|
702
819
|
borderForButtonAsSecondaryWhenActive: 'var(--border-for-button-as-secondary-when-active, none)',
|
|
@@ -730,6 +847,15 @@ var designTokens = {
|
|
|
730
847
|
borderColorForStampAsSecondary: 'var(--border-color-for-stamp-as-secondary, hsl(0, 0%, 60%))',
|
|
731
848
|
borderColorForLocalizedMultilineTextInputLabel: 'var(--border-color-for-localized-multiline-text-input-label, #ccc)',
|
|
732
849
|
borderColorForLocalizedMultilineTextInputLabelWhenReadonly: 'var(--border-color-for-localized-multiline-text-input-label-when-readonly, #ccc)',
|
|
850
|
+
borderColorForContentNotificationWhenError: 'var(--border-color-for-content-notification-when-error, #e60050)',
|
|
851
|
+
borderColorForContentNotificationWhenInfo: 'var(--border-color-for-content-notification-when-info, #078cdf)',
|
|
852
|
+
borderColorForContentNotificationWhenWarning: 'var(--border-color-for-content-notification-when-warning, #f16d0e)',
|
|
853
|
+
borderColorForContentNotificationWhenSuccess: 'var(--border-color-for-content-notification-when-success, #00b39e)',
|
|
854
|
+
borderColorForGroupHeadingSelectInputOptions: 'var(--border-color-for-group-heading-select-input-options, #ccc)',
|
|
855
|
+
borderColorForSelectInputMenu: 'var(--border-color-for-select-input-menu, #00b39e)',
|
|
856
|
+
borderColorForSelectInputWhenReadonly: 'var(--border-color-for-select-input-when-readonly, #ccc)',
|
|
857
|
+
borderColorForSelectInputMenuWhenWarning: 'var(--border-color-for-select-input-menu-when-warning, #f16d0e)',
|
|
858
|
+
borderColorForSelectInputMenuWhenError: 'var(--border-color-for-select-input-menu-when-error, #e60050)',
|
|
733
859
|
borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 6px)',
|
|
734
860
|
borderRadiusForButtonAsSmall: 'var(--border-radius-for-button-as-small, 4px)',
|
|
735
861
|
borderRadiusForButtonAsIconAsBig: 'var(--border-radius-for-button-as-icon-as-big, 6px)',
|
|
@@ -741,14 +867,20 @@ var designTokens = {
|
|
|
741
867
|
borderRadiusForTableManagerDroppableList: 'var(--border-radius-for-table-manager-droppable-list, 6px)',
|
|
742
868
|
borderRadiusForStamp: 'var(--border-radius-for-stamp, 2px)',
|
|
743
869
|
borderRadiusForViewSwitcher: 'var(--border-radius-for-view-switcher, 6px)',
|
|
870
|
+
borderRadiusForContentNotification: 'var(--border-radius-for-content-notification, 0 var(--border-radius-6) var(--border-radius-6) 0)',
|
|
871
|
+
borderRadiusForContentNotificationIcon: 'var(--border-radius-for-content-notification-icon, var(--border-radius-6) 0 0 var(--border-radius-6))',
|
|
744
872
|
borderWidthForInput: 'var(--border-width-for-input, 1px)',
|
|
745
873
|
borderWidthForInputWhenWarning: 'var(--border-width-for-input-when-warning, 1px)',
|
|
746
874
|
borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)',
|
|
747
875
|
borderWidthForInputWhenFocused: 'var(--border-width-for-input-when-focused, 1px)',
|
|
748
876
|
borderWidthForTag: 'var(--border-width-for-tag, 1px)',
|
|
877
|
+
borderWidthForSelectInput: 'var(--border-width-for-select-input, 1px)',
|
|
878
|
+
borderWidthForContentNotificationIcon: 'var(--border-width-for-content-notification-icon, 0px)',
|
|
879
|
+
borderLeftWidthForContentNotification: 'var(--border-left-width-for-content-notification, 1px)',
|
|
749
880
|
boxShadowForDatetimeInputWhenHovered: 'var(--box-shadow-for-datetime-input-when-hovered, inset 0 0 0 2px)',
|
|
750
881
|
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))',
|
|
751
882
|
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))',
|
|
883
|
+
boxShadowForSelectInputWhenFocused: 'var(--box-shadow-for-select-input-when-focused, inset 0 0 0 2px)',
|
|
752
884
|
fontColorForText: 'var(--font-color-for-text, #1a1a1a)',
|
|
753
885
|
fontColorForInput: 'var(--font-color-for-input, #1a1a1a)',
|
|
754
886
|
fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))',
|
|
@@ -766,6 +898,20 @@ var designTokens = {
|
|
|
766
898
|
fontColorForViewSwitcher: 'var(--font-color-for-view-switcher, #1a1a1a)',
|
|
767
899
|
fontColorForViewSwitcherWhenDisabled: 'var(--font-color-for-view-switcher-when-disabled, hsl(0, 0%, 60%))',
|
|
768
900
|
fontColorForViewSwitcherWhenSelected: 'var(--font-color-for-view-switcher-when-selected, #1a1a1a)',
|
|
901
|
+
fontColorForClearInputIcon: 'var(--font-color-for-clear-input-icon, #1a1a1a)',
|
|
902
|
+
fontColorForClearInputIconWhenHovered: 'var(--font-color-for-clear-input-icon-when-hovered, #f16d0e)',
|
|
903
|
+
fontColorForContentNotification: 'var(--font-color-for-content-notification, #1a1a1a)',
|
|
904
|
+
fontColorForContentNotificationIconWhenError: 'var(--font-color-for-content-notification-icon-when-error, #fff)',
|
|
905
|
+
fontColorForContentNotificationIconWhenWarning: 'var(--font-color-for-content-notification-icon-when-warning, #fff)',
|
|
906
|
+
fontColorForContentNotificationIconWhenSuccess: 'var(--font-color-for-content-notification-icon-when-success, #fff)',
|
|
907
|
+
fontColorForContentNotificationIconWhenInfo: 'var(--font-color-for-content-notification-icon-when-info, #fff)',
|
|
908
|
+
fontColorForSearchInputIcon: 'var(--font-color-for-search-input-icon, #1a1a1a)',
|
|
909
|
+
fontColorForSearchInputIconWhenHovered: 'var(--font-color-for-search-input-icon-when-hovered, #1a1a1a)',
|
|
910
|
+
fontColorForSelectInputIcon: 'var(--font-color-for-select-input-icon, #1a1a1a)',
|
|
911
|
+
fontColorForSelectInputWhenError: 'var(--font-color-for-select-input-when-error, #1a1a1a)',
|
|
912
|
+
fontColorForSelectInputWhenWarning: 'var(--font-color-for-select-input-when-warning, #1a1a1a)',
|
|
913
|
+
fontColorForSelectInputIconWhenError: 'var(--font-color-for-select-input-icon-when-error, #1a1a1a)',
|
|
914
|
+
fontColorForSelectInputIconWhenWarning: 'var(--font-color-for-select-input-icon-when-warning, #1a1a1a)',
|
|
769
915
|
heightForButtonAsBig: 'var(--height-for-button-as-big, 32px)',
|
|
770
916
|
heightForButtonAsSmall: 'var(--height-for-button-as-small, 24px)',
|
|
771
917
|
heightForButtonAsIconAsBig: 'var(--height-for-button-as-icon-as-big, 32px)',
|
|
@@ -794,6 +940,7 @@ var designTokens = {
|
|
|
794
940
|
fontSizeForAvatarAsMedium: 'var(--font-size-for-avatar-as-medium, 1.5rem)',
|
|
795
941
|
fontSizeForAvatarAsBig: 'var(--font-size-for-avatar-as-big, 3rem)',
|
|
796
942
|
fontSizeForLocalizedMultilineTextInputLabel: 'var(--font-size-for-localized-multiline-text-input-label, 0.9231rem)',
|
|
943
|
+
fontSizeForContentNotification: 'var(--font-size-for-content-notification, 1rem)',
|
|
797
944
|
iconColorForDatetimeInputIcon: 'var(--icon-color-for-datetime-input-icon, #1a1a1a)',
|
|
798
945
|
iconColorForDatetimeInputIconWhenHovered: 'var(--icon-color-for-datetime-input-icon-when-hovered, #f16d0e)',
|
|
799
946
|
lineHeightForTextAsH1: 'var(--line-height-for-text-as-h-1, inherit)',
|
|
@@ -815,6 +962,9 @@ var designTokens = {
|
|
|
815
962
|
marginForTableHeader: 'var(--margin-for-table-header, 8px)',
|
|
816
963
|
marginForTableAsCondensed: 'var(--margin-for-table-as-condensed, 8px)',
|
|
817
964
|
marginForViewSwitcherIcon: 'var(--margin-for-view-switcher-icon, 0 var(--spacing-10) 0 0)',
|
|
965
|
+
marginForGroupHeadingSelectInputOptions: 'var(--margin-for-group-heading-select-input-options, 4px)',
|
|
966
|
+
marginForSelectInputIcon: 'var(--margin-for-select-input-icon, 4px)',
|
|
967
|
+
marginLeftForSelectInputIcon: 'var(--margin-left-for-select-input-icon, inherit)',
|
|
818
968
|
paddingForStamp: 'var(--padding-for-stamp, var(--spacing-10) var(--spacing-20))',
|
|
819
969
|
paddingForStampAsCondensed: 'var(--padding-for-stamp-as-condensed, 1px var(--spacing-10))',
|
|
820
970
|
paddingForTag: 'var(--padding-for-tag, 5px var(--spacing-20))',
|
|
@@ -839,6 +989,14 @@ var designTokens = {
|
|
|
839
989
|
paddingForTooltip: 'var(--padding-for-tooltip, var(--spacing-10) var(--spacing-20))',
|
|
840
990
|
paddingForViewSwitcher: 'var(--padding-for-view-switcher, 0 var(--spacing-30) 0 var(--spacing-30))',
|
|
841
991
|
paddingForViewSwitcherWhenCondensed: 'var(--padding-for-view-switcher-when-condensed, 0 var(--spacing-20) 0 var(--spacing-20))',
|
|
992
|
+
paddingForContentNotification: 'var(--padding-for-content-notification, var(--spacing-20))',
|
|
993
|
+
paddingForContentNotificationIcon: 'var(--padding-for-content-notification-icon, var(--spacing-20) var(--spacing-30))',
|
|
994
|
+
paddingLeftForSelectInputOptions: 'var(--padding-left-for-select-input-options, 8px)',
|
|
995
|
+
paddingRightForSelectInputOptions: 'var(--padding-right-for-select-input-options, 8px)',
|
|
996
|
+
paddingTopForSelectInputOptions: 'var(--padding-top-for-select-input-options, 4px)',
|
|
997
|
+
paddingBottomForSelectInputOptions: 'var(--padding-bottom-for-select-input-options, 4px)',
|
|
998
|
+
paddingForGroupHeadingSelectInputOptions: 'var(--padding-for-group-heading-select-input-options, 8px)',
|
|
999
|
+
paddingForSelectInputMenu: 'var(--padding-for-select-input-menu, inherit)',
|
|
842
1000
|
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))',
|
|
843
1001
|
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))',
|
|
844
1002
|
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))',
|
|
@@ -851,6 +1009,7 @@ var designTokens = {
|
|
|
851
1009
|
shadowForInputWhenError: 'var(--shadow-for-input-when-error, none)',
|
|
852
1010
|
shadowForInputWhenWarning: 'var(--shadow-for-input-when-warning, none)',
|
|
853
1011
|
shadowForTooltip: 'var(--shadow-for-tooltip, 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12))',
|
|
1012
|
+
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))',
|
|
854
1013
|
fontSizeM: 'var(--font-size-m, 1rem)',
|
|
855
1014
|
bigButtonHeight: 'var(--big-button-height, 32px)',
|
|
856
1015
|
smallButtonHeight: 'var(--small-button-height, 24px)',
|
|
@@ -1061,7 +1220,7 @@ var withThemeContext = function withThemeContext(WrappedComponent) {
|
|
|
1061
1220
|
};
|
|
1062
1221
|
|
|
1063
1222
|
// NOTE: This string will be replaced on build time with the package version.
|
|
1064
|
-
var version = "15.
|
|
1223
|
+
var version = "15.11.1";
|
|
1065
1224
|
|
|
1066
1225
|
exports.ThemeProvider = ThemeProvider;
|
|
1067
1226
|
exports.customProperties = designTokens$1;
|