@eturnity/eturnity_reusable_components 9.22.2 → 9.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/dist/index.es3.js +268 -156
  2. package/package.json +3 -3
  3. package/src/assets/theme.js +202 -90
  4. package/src/components/accordion/Accordion.stories.js +1 -1
  5. package/src/components/addNewButton/AddNewButton.stories.js +40 -8
  6. package/src/components/banner/actionBanner/ActionBanner.stories.js +1 -1
  7. package/src/components/banner/actionBanner/index.vue +4 -2
  8. package/src/components/banner/banner/Banner.stories.js +1 -1
  9. package/src/components/banner/infoBanner/InfoBanner.stories.js +1 -1
  10. package/src/components/banner/infoBanner/index.vue +4 -2
  11. package/src/components/banner/notificationBanner/notificationBanner.stories.js +81 -0
  12. package/src/components/buttons/buttonIcon/index.vue +216 -80
  13. package/src/components/buttons/closeButton/CloseButton.stories.js +1 -1
  14. package/src/components/buttons/collection/index.vue +1 -3
  15. package/src/components/buttons/mainButton/index.vue +98 -44
  16. package/src/components/buttons/splitButtons/splitButtons.stories.js +70 -0
  17. package/src/components/card/Card.stories.js +16 -4
  18. package/src/components/card/index.vue +1 -1
  19. package/src/components/collapsableInfoText/collapsableInfoText.stories.js +52 -0
  20. package/src/components/deleteIcon/DeleteIcon.stories.js +1 -1
  21. package/src/components/draggableCard/draggableCard.stories.js +1 -1
  22. package/src/components/draggableInputHandle/draggableInputHandle.stories.js +43 -0
  23. package/src/components/dropdown/Dropdown.stories.js +1 -1
  24. package/src/components/errorMessage/errorMessage.stories.js +31 -17
  25. package/src/components/filter/filterSettings.vue +1 -1
  26. package/src/components/icon/Icon.stories.js +1 -1
  27. package/src/components/iconWrapper/iconWrapper.stories.js +78 -0
  28. package/src/components/infoCard/InfoCard.stories.js +1 -1
  29. package/src/components/infoLabel/infoLabel.stories.js +61 -0
  30. package/src/components/infoText/infoText.stories.js +1 -1
  31. package/src/components/inputs/checkbox/Checkbox.stories.js +1 -1
  32. package/src/components/inputs/checkbox/index.vue +10 -1
  33. package/src/components/inputs/inputNumber/InputNumber.stories.js +1 -1
  34. package/src/components/inputs/inputNumber/index.vue +15 -5
  35. package/src/components/inputs/inputNumberQuestion/inputNumberQuestion.stories.js +77 -0
  36. package/src/components/inputs/inputText/InputText.stories.js +1 -1
  37. package/src/components/inputs/inputText/index.vue +29 -20
  38. package/src/components/inputs/isRequiredLabelStar/isRequiredLabelStar.stories.js +26 -0
  39. package/src/components/inputs/radioButton/RadioButton.stories.js +1 -1
  40. package/src/components/inputs/radioButton/index.vue +21 -7
  41. package/src/components/inputs/searchInput/SearchInput.stories.js +1 -1
  42. package/src/components/inputs/select/index.vue +33 -21
  43. package/src/components/inputs/select/option/index.vue +1 -1
  44. package/src/components/inputs/select/select.stories.js +4 -25
  45. package/src/components/inputs/shared/inputLabelTypography.js +7 -0
  46. package/src/components/inputs/slider/index.vue +9 -12
  47. package/src/components/inputs/slider/slider.stories.js +71 -0
  48. package/src/components/inputs/switchField/index.vue +37 -10
  49. package/src/components/inputs/switchField/switchField.stories.js +71 -0
  50. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +1 -1
  51. package/src/components/inputs/textAreaInput/index.vue +19 -6
  52. package/src/components/inputs/toggle/Toggle.stories.js +1 -1
  53. package/src/components/inputs/toggle/index.vue +10 -6
  54. package/src/components/label/index.vue +39 -11
  55. package/src/components/label/label.stories.js +69 -0
  56. package/src/components/markerItem/markerItem.stories.js +46 -0
  57. package/src/components/modals/actionModal/actionModal.stories.js +1 -1
  58. package/src/components/modals/actionModal/index.vue +1 -1
  59. package/src/components/modals/infoModal/index.vue +1 -10
  60. package/src/components/modals/infoModal/infoModal.stories.js +1 -1
  61. package/src/components/modals/modal/modal.spec.js +168 -0
  62. package/src/components/modals/modal/modal.stories.js +287 -26
  63. package/src/components/modals/modalBody/index.vue +30 -0
  64. package/src/components/modals/modalButtonContainer/index.vue +42 -0
  65. package/src/components/modals/modalButtonContainer/modalButtonContainer.stories.js +59 -0
  66. package/src/components/modals/modalContent/index.vue +125 -0
  67. package/src/components/modals/modalTitle/index.vue +34 -0
  68. package/src/components/navigationTabs/navigationTabs.stories.js +58 -0
  69. package/src/components/pageSubtitle/PageSubtitle.stories.js +1 -1
  70. package/src/components/pageTitle/PageTitle.stories.js +1 -1
  71. package/src/components/pagination/pagination.stories.js +79 -0
  72. package/src/components/paginationV2/paginationV2.spec.js +132 -0
  73. package/src/components/paginationV2/paginationV2.stories.js +68 -0
  74. package/src/components/panelRangeInfo/panelRangeInfo.stories.js +60 -0
  75. package/src/components/progressBar/ProgressBar.stories.js +1 -1
  76. package/src/components/progressStep/progressStep.stories.js +1 -1
  77. package/src/components/projectMarker/ProjectMarker.stories.js +1 -1
  78. package/src/components/rangeSlider/RangeSlider.stories.js +1 -1
  79. package/src/components/roundTabs/roundTabs.stories.js +54 -0
  80. package/src/components/selectedOptions/selectedOptions.stories.js +1 -1
  81. package/src/components/sideMenu/sideMenu.stories.js +53 -0
  82. package/src/components/spinner/Spinner.stories.js +1 -1
  83. package/src/components/spinnerGif/SpinnerGif.stories.js +1 -1
  84. package/src/components/statusIndicator/statusIndicator.stories.js +101 -0
  85. package/src/components/tableDropdown/TableDropdown.stories.js +1 -1
  86. package/src/components/tables/viewTable/viewTable.stories.js +85 -0
  87. package/src/components/tabsHeader/TabsHeader.stories.js +1 -1
  88. package/src/components/tag/conversionTag/conversionTag.stories.js +47 -0
  89. package/src/components/tag/freeTrialTag/freeTrialTag.stories.js +42 -0
  90. package/src/components/threeDots/index.vue +20 -3
  91. package/src/components/threeDots/threeDots.stories.js +59 -0
  92. package/src/components/videoThumbnail/videoThumbnail.stories.js +1 -1
package/src/assets/theme.js CHANGED
@@ -77,6 +77,7 @@ const theme = (() => {
77
77
  transparentBlack1: '#162228e6',
78
78
  transparentBlack2: '#263238e5',
79
79
  transparentBlue1: '#20a4cae6',
80
+ transparentTeal900: '#151B1EFA',
80
81
  blueElectric: '#66dffa',
81
82
  eturnityGrey: '#263238',
82
83
  teal: '#018b7d',
@@ -123,6 +124,7 @@ const theme = (() => {
123
124
  900: '#2C2D2F',
124
125
  },
125
126
  teal: {
127
+ 25: '#F4F8FA',
126
128
  50: '#F0F3F5',
127
129
  100: '#E1E7EA',
128
130
  200: '#D1DBE0',
@@ -171,6 +173,7 @@ const theme = (() => {
171
173
  900: '#332900',
172
174
  },
173
175
  red: {
176
+ 25: '#FFF9F9',
174
177
  50: '#FFEBEB',
175
178
  100: '#FFDDDD',
176
179
  200: '#FFBBBB',
@@ -183,6 +186,7 @@ const theme = (() => {
183
186
  900: '#331111',
184
187
  },
185
188
  transparentWhite: {
189
+ 50: '#ffffff16',
186
190
  100: '#ffffff24',
187
191
  200: '#ffffff48',
188
192
  300: '#ffffff64',
@@ -205,6 +209,7 @@ const theme = (() => {
205
209
  900: '#000000fa',
206
210
  },
207
211
  transparentTeal: {
212
+ 50: '#6E8E9E16',
208
213
  100: '#6E8E9E24',
209
214
  200: '#6E8E9E48',
210
215
  300: '#6E8E9E64',
@@ -215,6 +220,29 @@ const theme = (() => {
215
220
  800: '#6E8E9Ee6',
216
221
  900: '#6E8E9Efa',
217
222
  },
223
+ transparentRed: {
224
+ 100: '#cc454524',
225
+ 200: '#cc454548',
226
+ 300: '#cc454564',
227
+ 400: '#cc454580',
228
+ 500: '#cc454596',
229
+ 600: '#cc4545b4',
230
+ 700: '#cc4545d4',
231
+ 800: '#cc4545e6',
232
+ 900: '#cc4545fa',
233
+ },
234
+ // Figma: white/000-10%, purple/400-08%, teal/400-10%, etc.
235
+ buttonIcon: {
236
+ overlayWhite10: '#ffffff1a',
237
+ overlayWhite20: '#ffffff33',
238
+ overlayBlack10: '#1622281a',
239
+ overlayBlack20: '#16222833',
240
+ overlayPurple8: '#b17bfa14',
241
+ overlayTeal10: '#8ca6b31a',
242
+ overlayTeal20: '#8ca6b333',
243
+ overlayRed8: '#ff656514',
244
+ none: 'transparent',
245
+ },
218
246
  }
219
247
 
220
248
  return {
@@ -261,21 +289,25 @@ const theme = (() => {
261
289
  backgroundColor: semanticColors.purple[500],
262
290
  textColor: colors.white,
263
291
  borderColor: '',
292
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
264
293
  },
265
294
  hover: {
266
- backgroundColor: semanticColors.purple[700],
295
+ backgroundColor: semanticColors.purple[600],
267
296
  textColor: colors.white,
268
297
  borderColor: '',
298
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
269
299
  },
270
300
  active: {
271
- backgroundColor: semanticColors.purple[600],
301
+ backgroundColor: semanticColors.purple[700],
272
302
  textColor: colors.white,
273
303
  borderColor: '',
304
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
274
305
  },
275
306
  disabled: {
276
307
  textColor: colors.white,
277
308
  backgroundColor: semanticColors.grey[500],
278
309
  borderColor: '',
310
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
279
311
  },
280
312
  },
281
313
  cancel: {
@@ -284,21 +316,25 @@ const theme = (() => {
284
316
  backgroundColor: semanticColors.red[600],
285
317
  textColor: colors.white,
286
318
  borderColor: '',
319
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
287
320
  },
288
321
  hover: {
289
- backgroundColor: semanticColors.red[800],
322
+ backgroundColor: semanticColors.red[700],
290
323
  textColor: colors.white,
291
324
  borderColor: '',
325
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
292
326
  },
293
327
  active: {
294
- backgroundColor: semanticColors.red[700],
328
+ backgroundColor: semanticColors.red[800],
295
329
  textColor: colors.white,
296
330
  borderColor: '',
331
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
297
332
  },
298
333
  disabled: {
299
334
  textColor: colors.white,
300
- backgroundColor: semanticColors.grey[500],
335
+ backgroundColor: semanticColors.transparentRed[300],
301
336
  borderColor: '',
337
+ iconBackgroundColor: semanticColors.buttonIcon.none,
302
338
  },
303
339
  },
304
340
  },
@@ -310,21 +346,25 @@ const theme = (() => {
310
346
  backgroundColor: semanticColors.purple[50],
311
347
  textColor: semanticColors.purple[500],
312
348
  borderColor: '',
349
+ iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8,
313
350
  },
314
351
  hover: {
315
352
  backgroundColor: semanticColors.purple[100],
316
- textColor: semanticColors.purple[700],
353
+ textColor: semanticColors.purple[500],
317
354
  borderColor: '',
355
+ iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8,
318
356
  },
319
357
  active: {
320
- backgroundColor: semanticColors.purple[50],
321
- textColor: semanticColors.purple[600],
358
+ backgroundColor: semanticColors.purple[200],
359
+ textColor: semanticColors.purple[500],
322
360
  borderColor: '',
361
+ iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8,
323
362
  },
324
363
  disabled: {
325
364
  textColor: semanticColors.grey[600],
326
365
  backgroundColor: semanticColors.grey[300],
327
366
  borderColor: '',
367
+ iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8,
328
368
  },
329
369
  },
330
370
  cancel: {
@@ -333,21 +373,25 @@ const theme = (() => {
333
373
  backgroundColor: semanticColors.red[50],
334
374
  textColor: semanticColors.red[600],
335
375
  borderColor: '',
376
+ iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
336
377
  },
337
378
  hover: {
338
379
  backgroundColor: semanticColors.red[100],
339
380
  textColor: semanticColors.red[700],
340
381
  borderColor: '',
382
+ iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
341
383
  },
342
384
  active: {
343
385
  backgroundColor: semanticColors.red[200],
344
386
  textColor: semanticColors.red[800],
345
387
  borderColor: '',
388
+ iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
346
389
  },
347
390
  disabled: {
348
- textColor: semanticColors.grey[600],
349
- backgroundColor: semanticColors.grey[300],
391
+ textColor: semanticColors.red[200],
392
+ backgroundColor: semanticColors.red[25],
350
393
  borderColor: '',
394
+ iconBackgroundColor: semanticColors.buttonIcon.none,
351
395
  },
352
396
  },
353
397
  },
@@ -358,22 +402,26 @@ const theme = (() => {
358
402
  default: {
359
403
  backgroundColor: colors.white,
360
404
  textColor: semanticColors.purple[500],
361
- borderColor: semanticColors.grey[300],
405
+ borderColor: semanticColors.teal[200],
406
+ iconBackgroundColor: semanticColors.buttonIcon.none,
362
407
  },
363
408
  hover: {
364
- backgroundColor: semanticColors.purple[100],
365
- textColor: semanticColors.purple[700],
366
- borderColor: semanticColors.grey[300],
409
+ backgroundColor: colors.white,
410
+ textColor: semanticColors.purple[500],
411
+ borderColor: semanticColors.purple[300],
412
+ iconBackgroundColor: semanticColors.buttonIcon.none,
367
413
  },
368
414
  active: {
369
- backgroundColor: semanticColors.purple[100],
370
- textColor: semanticColors.purple[600],
371
- borderColor: semanticColors.grey[600],
415
+ backgroundColor: colors.white,
416
+ textColor: semanticColors.purple[500],
417
+ borderColor: semanticColors.purple[400],
418
+ iconBackgroundColor: semanticColors.buttonIcon.none,
372
419
  },
373
420
  disabled: {
374
421
  textColor: semanticColors.grey[600],
375
- backgroundColor: semanticColors.grey[300],
376
- borderColor: semanticColors.grey[300],
422
+ backgroundColor: colors.white,
423
+ borderColor: semanticColors.grey[500],
424
+ iconBackgroundColor: semanticColors.buttonIcon.none,
377
425
  },
378
426
  },
379
427
  cancel: {
@@ -381,22 +429,26 @@ const theme = (() => {
381
429
  default: {
382
430
  backgroundColor: colors.white,
383
431
  textColor: semanticColors.red[600],
384
- borderColor: semanticColors.grey[300],
432
+ borderColor: semanticColors.teal[200],
433
+ iconBackgroundColor: semanticColors.buttonIcon.none,
385
434
  },
386
435
  hover: {
387
- backgroundColor: semanticColors.red[100],
436
+ backgroundColor: colors.white,
388
437
  textColor: semanticColors.red[700],
389
- borderColor: semanticColors.grey[300],
438
+ borderColor: semanticColors.red[700],
439
+ iconBackgroundColor: semanticColors.buttonIcon.none,
390
440
  },
391
441
  active: {
392
- backgroundColor: semanticColors.red[200],
442
+ backgroundColor: colors.white,
393
443
  textColor: semanticColors.red[800],
394
- borderColor: semanticColors.grey[300],
444
+ borderColor: semanticColors.red[800],
445
+ iconBackgroundColor: semanticColors.buttonIcon.none,
395
446
  },
396
447
  disabled: {
397
- textColor: semanticColors.grey[600],
398
- backgroundColor: semanticColors.grey[300],
399
- borderColor: semanticColors.grey[300],
448
+ textColor: semanticColors.red[200],
449
+ backgroundColor: colors.white,
450
+ borderColor: semanticColors.teal[100],
451
+ iconBackgroundColor: semanticColors.buttonIcon.none,
400
452
  },
401
453
  },
402
454
  },
@@ -408,21 +460,25 @@ const theme = (() => {
408
460
  backgroundColor: colors.white,
409
461
  textColor: semanticColors.purple[500],
410
462
  borderColor: '',
463
+ iconBackgroundColor: semanticColors.buttonIcon.none,
411
464
  },
412
465
  hover: {
413
- backgroundColor: semanticColors.purple[200],
414
- textColor: semanticColors.purple[700],
466
+ backgroundColor: semanticColors.purple[100],
467
+ textColor: semanticColors.purple[500],
415
468
  borderColor: '',
469
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
416
470
  },
417
471
  active: {
418
- backgroundColor: semanticColors.purple[100],
419
- textColor: semanticColors.purple[600],
472
+ backgroundColor: semanticColors.purple[200],
473
+ textColor: semanticColors.purple[500],
420
474
  borderColor: '',
475
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
421
476
  },
422
477
  disabled: {
423
478
  textColor: semanticColors.grey[600],
424
- backgroundColor: semanticColors.grey[300],
479
+ backgroundColor: colors.white,
425
480
  borderColor: '',
481
+ iconBackgroundColor: semanticColors.buttonIcon.none,
426
482
  },
427
483
  },
428
484
  cancel: {
@@ -431,21 +487,25 @@ const theme = (() => {
431
487
  backgroundColor: colors.white,
432
488
  textColor: semanticColors.red[600],
433
489
  borderColor: '',
490
+ iconBackgroundColor: semanticColors.buttonIcon.none,
434
491
  },
435
492
  hover: {
436
493
  backgroundColor: semanticColors.red[100],
437
494
  textColor: semanticColors.red[700],
438
495
  borderColor: '',
496
+ iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
439
497
  },
440
498
  active: {
441
499
  backgroundColor: semanticColors.red[200],
442
500
  textColor: semanticColors.red[800],
443
501
  borderColor: '',
502
+ iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
444
503
  },
445
504
  disabled: {
446
- textColor: semanticColors.grey[600],
447
- backgroundColor: semanticColors.grey[300],
505
+ textColor: semanticColors.red[200],
506
+ backgroundColor: colors.white,
448
507
  borderColor: '',
508
+ iconBackgroundColor: semanticColors.buttonIcon.none,
449
509
  },
450
510
  },
451
511
  tertiary: {
@@ -453,21 +513,25 @@ const theme = (() => {
453
513
  backgroundColor: 'transparent',
454
514
  textColor: semanticColors.teal[800],
455
515
  borderColor: semanticColors.teal[100],
516
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
456
517
  },
457
518
  hover: {
458
519
  backgroundColor: semanticColors.grey[200],
459
520
  textColor: semanticColors.teal[800],
460
521
  borderColor: semanticColors.teal[100],
522
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
461
523
  },
462
524
  active: {
463
525
  backgroundColor: semanticColors.grey[400],
464
526
  textColor: semanticColors.teal[800],
465
527
  borderColor: semanticColors.teal[100],
528
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
466
529
  },
467
530
  disabled: {
468
531
  textColor: semanticColors.grey[600],
469
532
  backgroundColor: semanticColors.grey[500],
470
- borderColor: semanticColors.grey[800],
533
+ borderColor: semanticColors.grey[500],
534
+ iconBackgroundColor: semanticColors.buttonIcon.none,
471
535
  },
472
536
  },
473
537
  },
@@ -477,21 +541,25 @@ const theme = (() => {
477
541
  backgroundColor: colors.white,
478
542
  textColor: semanticColors.teal[800],
479
543
  borderColor: semanticColors.teal[100],
544
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
480
545
  },
481
546
  hover: {
482
547
  backgroundColor: semanticColors.teal[50],
483
548
  textColor: semanticColors.teal[800],
484
549
  borderColor: semanticColors.teal[100],
550
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
485
551
  },
486
552
  active: {
487
553
  backgroundColor: semanticColors.teal[100],
488
554
  textColor: semanticColors.teal[800],
489
555
  borderColor: semanticColors.teal[100],
556
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
490
557
  },
491
558
  disabled: {
492
559
  textColor: semanticColors.grey[600],
493
560
  backgroundColor: semanticColors.grey[300],
494
- borderColor: '',
561
+ borderColor: semanticColors.grey[500],
562
+ iconBackgroundColor: semanticColors.buttonIcon.none,
495
563
  },
496
564
  },
497
565
  },
@@ -501,21 +569,25 @@ const theme = (() => {
501
569
  backgroundColor: semanticColors.yellow[200],
502
570
  textColor: semanticColors.teal[800],
503
571
  borderColor: '',
572
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
504
573
  },
505
574
  hover: {
506
575
  backgroundColor: semanticColors.yellow[200],
507
576
  textColor: semanticColors.teal[800],
508
577
  borderColor: '',
578
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
509
579
  },
510
580
  active: {
511
581
  backgroundColor: semanticColors.yellow[200],
512
582
  textColor: semanticColors.teal[800],
513
583
  borderColor: '',
584
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
514
585
  },
515
586
  disabled: {
516
587
  backgroundColor: semanticColors.yellow[200],
517
588
  textColor: semanticColors.teal[400],
518
589
  borderColor: '',
590
+ iconBackgroundColor: semanticColors.buttonIcon.none,
519
591
  },
520
592
  },
521
593
  },
@@ -525,21 +597,25 @@ const theme = (() => {
525
597
  backgroundColor: semanticColors.blue[200],
526
598
  textColor: semanticColors.teal[800],
527
599
  borderColor: '',
600
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
528
601
  },
529
602
  hover: {
530
603
  backgroundColor: semanticColors.blue[200],
531
604
  textColor: semanticColors.teal[800],
532
605
  borderColor: '',
606
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
533
607
  },
534
608
  active: {
535
609
  backgroundColor: semanticColors.blue[200],
536
610
  textColor: semanticColors.teal[800],
537
611
  borderColor: '',
612
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
538
613
  },
539
614
  disabled: {
540
615
  backgroundColor: semanticColors.blue[200],
541
616
  textColor: semanticColors.teal[400],
542
617
  borderColor: '',
618
+ iconBackgroundColor: semanticColors.buttonIcon.none,
543
619
  },
544
620
  },
545
621
  },
@@ -551,47 +627,55 @@ const theme = (() => {
551
627
  main: {
552
628
  // variant: this is the default variant
553
629
  default: {
554
- backgroundColor: colors.white,
630
+ backgroundColor: semanticColors.teal[25],
555
631
  textColor: semanticColors.teal[800],
556
632
  borderColor: '',
633
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
557
634
  },
558
635
  hover: {
559
- backgroundColor: semanticColors.purple[100],
636
+ backgroundColor: semanticColors.teal[100],
560
637
  textColor: semanticColors.teal[800],
561
638
  borderColor: '',
639
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
562
640
  },
563
641
  active: {
564
- backgroundColor: semanticColors.purple[100],
642
+ backgroundColor: semanticColors.teal[200],
565
643
  textColor: semanticColors.teal[800],
566
644
  borderColor: '',
645
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
567
646
  },
568
647
  disabled: {
569
- textColor: semanticColors.grey[800],
570
- backgroundColor: semanticColors.grey[400],
648
+ textColor: semanticColors.teal[800],
649
+ backgroundColor: semanticColors.transparentWhite[300],
571
650
  borderColor: '',
651
+ iconBackgroundColor: semanticColors.buttonIcon.overlayBlack10,
572
652
  },
573
653
  },
574
654
  cancel: {
575
655
  // variant
576
656
  default: {
577
- backgroundColor: semanticColors.red[400],
578
- textColor: semanticColors.teal[800],
657
+ backgroundColor: semanticColors.red[600],
658
+ textColor: colors.white,
579
659
  borderColor: '',
660
+ iconBackgroundColor: semanticColors.buttonIcon.none,
580
661
  },
581
662
  hover: {
582
- backgroundColor: semanticColors.red[100],
583
- textColor: semanticColors.teal[800],
663
+ backgroundColor: semanticColors.red[700],
664
+ textColor: colors.white,
584
665
  borderColor: '',
666
+ iconBackgroundColor: semanticColors.buttonIcon.none,
585
667
  },
586
668
  active: {
587
- backgroundColor: semanticColors.red[200],
588
- textColor: semanticColors.teal[800],
669
+ backgroundColor: semanticColors.red[800],
670
+ textColor: colors.white,
589
671
  borderColor: '',
672
+ iconBackgroundColor: semanticColors.buttonIcon.none,
590
673
  },
591
674
  disabled: {
592
- backgroundColor: semanticColors.grey[300],
593
- textColor: semanticColors.grey[800],
675
+ backgroundColor: semanticColors.transparentRed[200],
676
+ textColor: semanticColors.transparentWhite[400],
594
677
  borderColor: '',
678
+ iconBackgroundColor: semanticColors.buttonIcon.none,
595
679
  },
596
680
  },
597
681
  },
@@ -603,21 +687,25 @@ const theme = (() => {
603
687
  backgroundColor: semanticColors.teal[800],
604
688
  textColor: semanticColors.purple[50],
605
689
  borderColor: '',
690
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
606
691
  },
607
692
  hover: {
608
- backgroundColor: semanticColors.teal[600],
693
+ backgroundColor: semanticColors.transparentTeal[400],
609
694
  textColor: semanticColors.purple[50],
610
695
  borderColor: '',
696
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
611
697
  },
612
698
  active: {
613
- backgroundColor: semanticColors.teal[700],
699
+ backgroundColor: semanticColors.transparentTeal[600],
614
700
  textColor: semanticColors.purple[50],
615
701
  borderColor: '',
702
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
616
703
  },
617
704
  disabled: {
618
- textColor: semanticColors.grey[600],
619
- backgroundColor: semanticColors.grey[500],
705
+ textColor: semanticColors.grey[800],
706
+ backgroundColor: semanticColors.transparentTeal[200],
620
707
  borderColor: '',
708
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
621
709
  },
622
710
  },
623
711
  cancel: {
@@ -626,21 +714,25 @@ const theme = (() => {
626
714
  backgroundColor: semanticColors.red[800],
627
715
  textColor: semanticColors.red[400],
628
716
  borderColor: '',
717
+ iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
629
718
  },
630
719
  hover: {
631
720
  backgroundColor: semanticColors.red[700],
632
721
  textColor: semanticColors.red[300],
633
722
  borderColor: '',
723
+ iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
634
724
  },
635
725
  active: {
636
726
  backgroundColor: semanticColors.red[600],
637
727
  textColor: semanticColors.red[200],
638
728
  borderColor: '',
729
+ iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
639
730
  },
640
731
  disabled: {
641
- textColor: semanticColors.grey[600],
642
- backgroundColor: semanticColors.grey[500],
732
+ textColor: semanticColors.transparentWhite[200],
733
+ backgroundColor: semanticColors.transparentRed[100],
643
734
  borderColor: '',
735
+ iconBackgroundColor: semanticColors.buttonIcon.none,
644
736
  },
645
737
  },
646
738
  },
@@ -650,46 +742,54 @@ const theme = (() => {
650
742
  // variant: this is the default variant
651
743
  default: {
652
744
  backgroundColor: 'transparent',
653
- textColor: semanticColors.purple[50],
654
- borderColor: semanticColors.teal[500],
745
+ textColor: semanticColors.teal[50],
746
+ borderColor: semanticColors.teal[600],
747
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
655
748
  },
656
749
  hover: {
657
- backgroundColor: semanticColors.teal[600],
658
- textColor: semanticColors.purple[50],
659
- borderColor: semanticColors.teal[400],
750
+ backgroundColor: semanticColors.transparentTeal[400],
751
+ textColor: semanticColors.teal[50],
752
+ borderColor: semanticColors.teal[500],
753
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
660
754
  },
661
755
  active: {
662
- backgroundColor: semanticColors.teal[700],
663
- textColor: semanticColors.purple[50],
664
- borderColor: semanticColors.teal[300],
756
+ backgroundColor: semanticColors.transparentTeal[600],
757
+ textColor: semanticColors.teal[50],
758
+ borderColor: semanticColors.teal[400],
759
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
665
760
  },
666
761
  disabled: {
667
- textColor: semanticColors.grey[600],
668
- backgroundColor: semanticColors.grey[500],
669
- borderColor: semanticColors.grey[800],
762
+ textColor: semanticColors.grey[800],
763
+ backgroundColor: semanticColors.transparentTeal[100],
764
+ borderColor: semanticColors.grey[900],
765
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
670
766
  },
671
767
  },
672
768
  cancel: {
673
769
  // variant
674
770
  default: {
675
- backgroundColor: semanticColors.teal[200],
676
- textColor: semanticColors.red[400],
677
- borderColor: semanticColors.teal[500],
771
+ backgroundColor: 'transparent',
772
+ textColor: semanticColors.red[500],
773
+ borderColor: semanticColors.transparentTeal[500],
774
+ iconBackgroundColor: semanticColors.buttonIcon.none,
678
775
  },
679
776
  hover: {
680
- backgroundColor: semanticColors.red[700],
681
- textColor: semanticColors.red[700],
682
- borderColor: semanticColors.teal[400],
777
+ backgroundColor: semanticColors.transparentTeal[200],
778
+ textColor: semanticColors.red[500],
779
+ borderColor: semanticColors.transparentTeal[400],
780
+ iconBackgroundColor: semanticColors.buttonIcon.none,
683
781
  },
684
782
  active: {
685
- backgroundColor: semanticColors.red[600],
686
- textColor: semanticColors.red[200],
687
- borderColor: semanticColors.teal[300],
783
+ backgroundColor: semanticColors.transparentTeal[300],
784
+ textColor: semanticColors.red[500],
785
+ borderColor: semanticColors.transparentTeal[300],
786
+ iconBackgroundColor: semanticColors.buttonIcon.none,
688
787
  },
689
788
  disabled: {
690
- textColor: semanticColors.grey[600],
691
- backgroundColor: semanticColors.grey[500],
692
- borderColor: semanticColors.grey[800],
789
+ backgroundColor: 'transparent',
790
+ textColor: semanticColors.transparentRed[500],
791
+ borderColor: semanticColors.transparentTeal[300],
792
+ iconBackgroundColor: semanticColors.buttonIcon.none,
693
793
  },
694
794
  },
695
795
  },
@@ -701,44 +801,52 @@ const theme = (() => {
701
801
  backgroundColor: 'transparent',
702
802
  textColor: semanticColors.purple[50],
703
803
  borderColor: '',
804
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
704
805
  },
705
806
  hover: {
706
- backgroundColor: semanticColors.teal[600],
807
+ backgroundColor: semanticColors.transparentTeal[400],
707
808
  textColor: semanticColors.purple[50],
708
809
  borderColor: '',
810
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
709
811
  },
710
812
  active: {
711
- backgroundColor: semanticColors.teal[700],
813
+ backgroundColor: semanticColors.transparentTeal[600],
712
814
  textColor: semanticColors.purple[50],
713
815
  borderColor: '',
816
+ iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
714
817
  },
715
818
  disabled: {
716
- textColor: semanticColors.grey[600],
717
- backgroundColor: semanticColors.grey[500],
819
+ textColor: semanticColors.grey[800],
820
+ backgroundColor: semanticColors.transparentTeal[100],
718
821
  borderColor: '',
822
+ iconBackgroundColor: semanticColors.buttonIcon.none,
719
823
  },
720
824
  },
721
825
  cancel: {
722
826
  // variant
723
827
  default: {
724
- backgroundColor: semanticColors.teal[200],
725
- textColor: semanticColors.red[400],
828
+ backgroundColor: 'transparent',
829
+ textColor: semanticColors.red[500],
726
830
  borderColor: '',
831
+ iconBackgroundColor: semanticColors.buttonIcon.none,
727
832
  },
728
833
  hover: {
729
- backgroundColor: semanticColors.red[700],
730
- textColor: semanticColors.red[300],
834
+ backgroundColor: semanticColors.transparentTeal[200],
835
+ textColor: semanticColors.red[500],
731
836
  borderColor: '',
837
+ iconBackgroundColor: semanticColors.buttonIcon.none,
732
838
  },
733
839
  active: {
734
- backgroundColor: semanticColors.red[600],
735
- textColor: semanticColors.red[200],
840
+ backgroundColor: semanticColors.transparentTeal[300],
841
+ textColor: semanticColors.red[500],
736
842
  borderColor: '',
843
+ iconBackgroundColor: semanticColors.buttonIcon.none,
737
844
  },
738
845
  disabled: {
739
- textColor: semanticColors.grey[600],
740
- backgroundColor: semanticColors.grey[500],
846
+ backgroundColor: 'transparent',
847
+ textColor: semanticColors.transparentRed[500],
741
848
  borderColor: '',
849
+ iconBackgroundColor: semanticColors.buttonIcon.none,
742
850
  },
743
851
  },
744
852
  },
@@ -748,21 +856,25 @@ const theme = (() => {
748
856
  backgroundColor: colors.white,
749
857
  textColor: semanticColors.teal[800],
750
858
  borderColor: semanticColors.teal[100],
859
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
751
860
  },
752
861
  hover: {
753
862
  backgroundColor: semanticColors.teal[100],
754
863
  textColor: semanticColors.teal[800],
755
864
  borderColor: semanticColors.teal[100],
865
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
756
866
  },
757
867
  active: {
758
868
  backgroundColor: semanticColors.teal[100],
759
869
  textColor: semanticColors.teal[800],
760
870
  borderColor: semanticColors.teal[100],
871
+ iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
761
872
  },
762
873
  disabled: {
763
874
  textColor: semanticColors.grey[600],
764
875
  backgroundColor: semanticColors.grey[300],
765
876
  borderColor: '',
877
+ iconBackgroundColor: semanticColors.buttonIcon.none,
766
878
  },
767
879
  },
768
880
  },