@thryveai/theme-interfaces 2.4.21 → 2.4.23-beta.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 (44) hide show
  1. package/README.md +29 -29
  2. package/dist/index.d.ts +28 -27
  3. package/dist/index.js +33 -31
  4. package/dist/interfaces/admin-images-interfaces.d.ts +11 -11
  5. package/dist/interfaces/admin-images-interfaces.js +2 -2
  6. package/dist/interfaces/admin-settings-interfaces.d.ts +57 -57
  7. package/dist/interfaces/admin-settings-interfaces.js +2 -2
  8. package/dist/interfaces/default-settings.interfaces.d.ts +89 -89
  9. package/dist/interfaces/default-settings.interfaces.js +3 -3
  10. package/dist/interfaces/default-theme.interface.d.ts +695 -695
  11. package/dist/interfaces/default-theme.interface.js +2 -2
  12. package/dist/interfaces/icons.interfaces.d.ts +7 -7
  13. package/dist/interfaces/icons.interfaces.js +128 -126
  14. package/dist/interfaces/retailer-settings.interfaces.d.ts +543 -537
  15. package/dist/interfaces/retailer-settings.interfaces.js +2 -2
  16. package/dist/interfaces/sts-settings.interfaces.d.ts +6 -6
  17. package/dist/interfaces/sts-settings.interfaces.js +2 -2
  18. package/dist/interfaces/theme.interfaces.d.ts +695 -695
  19. package/dist/interfaces/theme.interfaces.js +2 -2
  20. package/dist/storefront/SFUIImagesTemplate.AdminUi.d.ts +2 -2
  21. package/dist/storefront/SFUIImagesTemplate.AdminUi.js +112 -112
  22. package/dist/storefront/SFUISettingsTemplate.AdminUi.d.ts +14 -14
  23. package/dist/storefront/SFUISettingsTemplate.AdminUi.js +1025 -1008
  24. package/dist/storefront/SFUIThemesTemplate.AdminUi.d.ts +3 -3
  25. package/dist/storefront/SFUIThemesTemplate.AdminUi.js +113 -113
  26. package/dist/storefront/contentEngineComponents.d.ts +23 -23
  27. package/dist/storefront/contentEngineComponents.js +25 -25
  28. package/dist/storefront/defaultIconsStorefront.d.ts +3 -0
  29. package/dist/storefront/defaultIconsStorefront.js +128 -0
  30. package/dist/storefront/defaultImagesStorefront.d.ts +3 -3
  31. package/dist/storefront/defaultImagesStorefront.js +96 -96
  32. package/dist/storefront/defaultSettingsStorefront.d.ts +3 -3
  33. package/dist/storefront/defaultSettingsStorefront.js +297 -292
  34. package/dist/storefront/defaultThemeStorefront.d.ts +5 -5
  35. package/dist/storefront/defaultThemeStorefront.js +1156 -1156
  36. package/dist/sts/STSImagesTemplate.AdminUi.d.ts +2 -2
  37. package/dist/sts/STSImagesTemplate.AdminUi.js +50 -50
  38. package/dist/sts/STSSettingsTemplate.AdminUi.d.ts +2 -2
  39. package/dist/sts/STSSettingsTemplate.AdminUi.js +30 -30
  40. package/dist/sts/defaultSettingsSts.d.ts +3 -3
  41. package/dist/sts/defaultSettingsSts.js +9 -9
  42. package/dist/theme-templates/index.d.ts +3 -3
  43. package/dist/theme-templates/index.js +8 -8
  44. package/package.json +29 -21
package/dist/storefront/defaultThemeStorefront.js CHANGED
@@ -1,1156 +1,1156 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DefaultThemeColors = exports.globalTheme = void 0;
4
- var DefaultThemeSFUI = function (colors) {
5
- if (colors === void 0) { colors = exports.DefaultThemeColors; }
6
- return ({
7
- colors: {
8
- brandColors: {
9
- primary1: colors.primary1,
10
- primary2: colors.primary2,
11
- primary3: colors.primary3,
12
- primary4: colors.primary4,
13
- primary5: colors.primary5,
14
- secondary1: colors.secondary1,
15
- secondary2: colors.secondary2,
16
- secondary3: colors.secondary3,
17
- secondary4: colors.secondary4,
18
- secondary5: colors.secondary5,
19
- tertiary1: colors.tertiary1,
20
- tertiary2: colors.tertiary2,
21
- tertiary3: colors.tertiary3,
22
- tertiary4: colors.tertiary4,
23
- tertiary5: colors.tertiary5
24
- },
25
- uiColors: {
26
- success: colors.success,
27
- successDark: colors.successDark,
28
- successLight: colors.successLight,
29
- warn: colors.warn,
30
- warnDark: colors.warnDark,
31
- warnLight: colors.warnLight,
32
- alert: colors.alert,
33
- alertDark: colors.alertDark,
34
- alertLight: colors.alertLight,
35
- promotion1: colors.promotion1,
36
- promotion2: colors.promotion2,
37
- greyscale1: colors.greyscale1,
38
- greyscale2: colors.greyscale2,
39
- greyscale3: colors.greyscale3,
40
- greyscale4: colors.greyscale4,
41
- greyscale5: colors.greyscale5,
42
- greyscale6: colors.greyscale6,
43
- greyscale7: colors.greyscale7
44
- }
45
- },
46
- header: {
47
- notifications: {
48
- counter: {
49
- backgroundColor: colors.alert,
50
- },
51
- text: {
52
- color: colors.greyscale1,
53
- hoverColor: colors.greyscale3,
54
- },
55
- seeAllNotifications: { color: colors.greyscale4 },
56
- },
57
- badge: {
58
- cart: {
59
- color: colors.secondary1,
60
- bgColor: colors.greyscale1
61
- }
62
- },
63
- topMenu: {
64
- color: colors.greyscale6,
65
- hoverColor: colors.greyscale6,
66
- backgroundColor: colors.greyscale2,
67
- links: {
68
- static: {
69
- color: colors.primary1,
70
- textDecoration: 'none'
71
- },
72
- hover: {
73
- color: colors.primary1,
74
- textDecoration: 'underline'
75
- },
76
- clicked: {
77
- color: colors.primary1,
78
- textDecoration: 'underline'
79
- },
80
- visited: {
81
- color: colors.primary1,
82
- textDecoration: 'none'
83
- }
84
- }
85
- },
86
- mainMenu: {
87
- color: colors.greyscale6,
88
- hoverColor: colors.greyscale6,
89
- backgroundColor: colors.greyscale1,
90
- links: {
91
- static: {
92
- color: colors.primary1,
93
- textDecoration: 'none'
94
- },
95
- hover: {
96
- color: colors.primary1,
97
- textDecoration: 'underline'
98
- },
99
- clicked: {
100
- color: colors.primary1,
101
- textDecoration: 'underline'
102
- },
103
- visited: {
104
- color: colors.primary1,
105
- textDecoration: 'none'
106
- }
107
- }
108
- },
109
- bottomMenu: {
110
- color: colors.greyscale6,
111
- hoverColor: colors.primary1,
112
- backgroundColor: colors.greyscale1,
113
- textTransform: 'capitalize',
114
- fontWeight: exports.globalTheme.FontWeight,
115
- links: {
116
- static: {
117
- color: colors.primary1,
118
- textDecoration: 'none'
119
- },
120
- hover: {
121
- color: colors.primary1,
122
- textDecoration: 'underline'
123
- },
124
- clicked: {
125
- color: colors.primary1,
126
- textDecoration: 'underline'
127
- },
128
- visited: {
129
- color: colors.primary1,
130
- textDecoration: 'none'
131
- }
132
- }
133
- },
134
- mobileMenu: {
135
- color: colors.primary1,
136
- hoverColor: colors.primary1,
137
- backgroundColor: colors.greyscale1,
138
- links: {
139
- static: {
140
- color: colors.primary1,
141
- textDecoration: 'none'
142
- },
143
- hover: {
144
- color: colors.primary1,
145
- textDecoration: 'underline'
146
- },
147
- clicked: {
148
- color: colors.primary1,
149
- textDecoration: 'underline'
150
- },
151
- visited: {
152
- color: colors.primary1,
153
- textDecoration: 'none'
154
- }
155
- }
156
- },
157
- search: {
158
- borderColor: colors.greyscale3,
159
- borderRadius: '4px',
160
- clearBtnColor: colors.greyscale3,
161
- searchButton: {
162
- desktop: {
163
- static: { color: colors.primary1, backgroundColor: 'transparent' },
164
- hover: { color: colors.primary1, backgroundColor: colors.greyscale2 },
165
- clicked: {
166
- color: colors.greyscale1,
167
- backgroundColor: colors.primary1
168
- }
169
- },
170
- tablet: {
171
- static: { color: colors.primary1 },
172
- clicked: {
173
- color: colors.greyscale1
174
- }
175
- },
176
- mobile: {
177
- static: { color: colors.primary1 }
178
- }
179
- },
180
- suggestions: {
181
- links: {
182
- color: {
183
- static: 'inherit',
184
- hover: 'inherit',
185
- visited: 'inherit'
186
- }
187
- }
188
- },
189
- multisearchBtn: {
190
- static: {
191
- color: colors.greyscale5,
192
- backgroundColor: colors.primary5
193
- },
194
- hover: {
195
- color: colors.primary1,
196
- backgroundColor: colors.primary5
197
- }
198
- }
199
- },
200
- storePopover: {
201
- backgroundColor: colors.primary5,
202
- activeBackgroundColor: colors.secondary5,
203
- color: colors.greyscale5,
204
- activeColor: colors.greyscale5,
205
- borderColor: 'transparent',
206
- borderRadius: '4px',
207
- reserveTimeIconPosition: 'center'
208
- },
209
- accountPopover: {
210
- backgroundColor: colors.greyscale2,
211
- borderColor: 'transparent',
212
- borderRadius: '4px',
213
- color: colors.greyscale5,
214
- links: {
215
- color: {
216
- static: colors.greyscale5,
217
- hover: 'inherit',
218
- visited: colors.greyscale5
219
- }
220
- }
221
- },
222
- headerActionLinks: {
223
- activeBackgroundColor: colors.greyscale2,
224
- activeColor: colors.primary1,
225
- backgroundColor: 'none',
226
- borderRadius: exports.globalTheme.BorderRadius,
227
- color: colors.greyscale5,
228
- hoverColor: colors.greyscale5,
229
- fontFamily: exports.globalTheme.FontFamily,
230
- fontWeight: exports.globalTheme.FontWeightBold,
231
- links: {
232
- static: {
233
- color: colors.primary1,
234
- textDecoration: 'none'
235
- },
236
- hover: {
237
- color: colors.primary1,
238
- textDecoration: 'underline'
239
- },
240
- clicked: {
241
- color: colors.primary1,
242
- textDecoration: 'underline'
243
- },
244
- visited: {
245
- color: colors.primary1,
246
- textDecoration: 'none'
247
- }
248
- }
249
- },
250
- headerLinks: {
251
- color: colors.greyscale5,
252
- hoverColor: colors.greyscale5,
253
- backgroundColor: 'none',
254
- activeColor: colors.greyscale5,
255
- activeBackgroundColor: colors.greyscale2,
256
- fontWeight: exports.globalTheme.FontWeightBold,
257
- borderRadius: exports.globalTheme.BorderRadius,
258
- links: {
259
- static: {
260
- color: colors.primary1,
261
- textDecoration: 'none'
262
- },
263
- hover: {
264
- color: colors.primary1,
265
- textDecoration: 'underline'
266
- },
267
- clicked: {
268
- color: colors.primary1,
269
- textDecoration: 'underline'
270
- },
271
- visited: {
272
- color: colors.primary1,
273
- textDecoration: 'none'
274
- }
275
- }
276
- },
277
- departments: {
278
- wrapCategoryTitle: false,
279
- backgroundColor: {
280
- active: 'inherit',
281
- static: colors.greyscale2
282
- },
283
- color: {
284
- static: colors.greyscale5,
285
- hover: colors.primary1
286
- },
287
- iconColor: {
288
- static: colors.greyscale3,
289
- hover: colors.greyscale3
290
- }
291
- }
292
- },
293
- body: {
294
- fontSize: exports.globalTheme.baseFontSize,
295
- color: exports.globalTheme.bodyFontColor,
296
- backgroundColor: exports.globalTheme.bodyBackgroundColor
297
- },
298
- footer: {
299
- mainFooter: {
300
- color: colors.greyscale6,
301
- hoverColor: colors.greyscale6,
302
- backgroundColor: colors.greyscale2,
303
- links: {
304
- static: {
305
- color: colors.primary1,
306
- textDecoration: 'none'
307
- },
308
- hover: {
309
- color: colors.primary1,
310
- textDecoration: 'underline'
311
- },
312
- clicked: {
313
- color: colors.primary1,
314
- textDecoration: 'underline'
315
- },
316
- visited: {
317
- color: colors.primary1,
318
- textDecoration: 'none'
319
- }
320
- }
321
- },
322
- bottomFooter: {
323
- color: colors.greyscale1,
324
- hoverColor: colors.greyscale1,
325
- backgroundColor: colors.greyscale5,
326
- links: {
327
- static: {
328
- color: colors.primary1,
329
- textDecoration: 'none'
330
- },
331
- hover: {
332
- color: colors.primary1,
333
- textDecoration: 'underline'
334
- },
335
- clicked: {
336
- color: colors.primary1,
337
- textDecoration: 'underline'
338
- },
339
- visited: {
340
- color: colors.primary1,
341
- textDecoration: 'none'
342
- }
343
- }
344
- },
345
- bottomFooterNavHeaderLink: {
346
- color: colors.greyscale6,
347
- hoverColor: colors.greyscale6,
348
- backgroundColor: 'transparent',
349
- links: {
350
- static: {
351
- color: colors.primary1,
352
- textDecoration: 'none'
353
- },
354
- hover: {
355
- color: colors.primary1,
356
- textDecoration: 'underline'
357
- },
358
- clicked: {
359
- color: colors.primary1,
360
- textDecoration: 'underline'
361
- },
362
- visited: {
363
- color: colors.primary1,
364
- textDecoration: 'none'
365
- }
366
- }
367
- },
368
- mediaIcons: {
369
- color: colors.greyscale5
370
- }
371
- },
372
- orderConfirmation: {
373
- iconColor: colors.greyscale1,
374
- backgroundColor: colors.successLight
375
- },
376
- minimalHeader: {
377
- desktop: {
378
- color: colors.secondary1,
379
- hoverColor: colors.secondary1,
380
- backgroundColor: colors.greyscale1,
381
- iconColor: colors.secondary1,
382
- links: {
383
- static: {
384
- color: colors.primary1,
385
- textDecoration: 'none'
386
- },
387
- hover: {
388
- color: colors.primary1,
389
- textDecoration: 'underline'
390
- },
391
- clicked: {
392
- color: colors.primary1,
393
- textDecoration: 'underline'
394
- },
395
- visited: {
396
- color: colors.primary1,
397
- textDecoration: 'none'
398
- }
399
- }
400
- },
401
- mobile: {
402
- color: colors.secondary1,
403
- hoverColor: colors.secondary1,
404
- backgroundColor: colors.greyscale1,
405
- iconColor: colors.secondary1,
406
- links: {
407
- static: {
408
- color: colors.primary1,
409
- textDecoration: 'none'
410
- },
411
- hover: {
412
- color: colors.primary1,
413
- textDecoration: 'underline'
414
- },
415
- clicked: {
416
- color: colors.primary1,
417
- textDecoration: 'underline'
418
- },
419
- visited: {
420
- color: colors.primary1,
421
- textDecoration: 'none'
422
- }
423
- }
424
- }
425
- },
426
- subHeaderBoxes: {
427
- backgroundColor: colors.greyscale2,
428
- color: colors.greyscale5,
429
- contentBorder: colors.greyscale2
430
- },
431
- breadcrumb: {
432
- textTransform: 'capitalize',
433
- backgroundColor: colors.greyscale2,
434
- color: colors.primary1,
435
- activeColor: colors.greyscale6,
436
- backIconColor: colors.greyscale4
437
- },
438
- breadcrumbTitle: {
439
- textTransform: 'capitalize',
440
- backgroundColor: colors.greyscale2,
441
- color: colors.primary1,
442
- activeColor: colors.greyscale6,
443
- backIconColor: colors.greyscale4
444
- },
445
- payment: {
446
- selectedCardBackground: colors.primary5,
447
- selectedCardColor: colors.greyscale5,
448
- summary: {
449
- listItemBackground: colors.greyscale2
450
- },
451
- checkoutCards: {
452
- borderRadius: '4px'
453
- }
454
- },
455
- productPage: {
456
- detailsBackgroundColor: colors.greyscale2,
457
- badges: {
458
- borderRadius: '4px'
459
- },
460
- priceReductionColor: colors.alert,
461
- previouslyPurchased: {
462
- color: colors.greyscale5,
463
- bgColor: colors.primary5
464
- }
465
- },
466
- accountPage: {
467
- passwordRequirements: {
468
- backgroundColor: colors.primary5
469
- }
470
- },
471
- favorites: {
472
- headerIconStyle: 'FavSolid',
473
- productColors: {
474
- static: {
475
- color: colors.greyscale3,
476
- hoverColor: colors.alert
477
- },
478
- active: {
479
- color: colors.alert,
480
- hoverColor: colors.alertDark
481
- }
482
- }
483
- },
484
- promoBadges: {
485
- backgroundColor: {
486
- promotion: colors.promotion1,
487
- pointsBasedPromo: colors.promotion2
488
- },
489
- fontWeight: exports.globalTheme.FontWeightBold,
490
- color: {
491
- promotion: colors.greyscale1,
492
- pointsBasedPromo: colors.greyscale1
493
- }
494
- },
495
- loyaltyCard: {
496
- backgroundColor: colors.primary5,
497
- borderColor: colors.primary5,
498
- borderRadius: '16px',
499
- cardTextColor: colors.greyscale5,
500
- dimensions: {
501
- width: 325,
502
- height: 190
503
- },
504
- input: {
505
- borderRadius: '4px',
506
- backgroundColor: colors.greyscale1,
507
- borderColor: colors.greyscale3,
508
- idFields: {
509
- staticBorder: colors.greyscale4,
510
- hoverBorder: colors.greyscale5,
511
- activeBorder: colors.primary1,
512
- errorBorder: colors.alert
513
- }
514
- },
515
- infoList: {
516
- color: colors.greyscale4,
517
- borderColor: colors.greyscale2
518
- }
519
- },
520
- typography: {
521
- webFonts: [
522
- 'https://fonts.googleapis.com/css?family=Cabin:400,400i,700,700i&display=swap'
523
- ],
524
- embeddedFonts: [],
525
- weights: {
526
- normal: exports.globalTheme.FontWeight,
527
- bold: exports.globalTheme.FontWeightBold
528
- },
529
- text: {
530
- body: {
531
- color: colors.greyscale6,
532
- fontFamily: exports.globalTheme.FontFamily,
533
- fontSize: '1rem',
534
- fontWeight: exports.globalTheme.FontWeight,
535
- capitalization: 'none',
536
- lineHeight: '1.1875rem',
537
- letterSpacing: 'normal'
538
- },
539
- fontXS: {
540
- fontFamily: exports.globalTheme.FontFamily,
541
- fontSize: '0.75rem',
542
- fontWeight: exports.globalTheme.FontWeight,
543
- capitalization: 'none',
544
- lineHeight: '0.9375rem',
545
- letterSpacing: 'normal'
546
- },
547
- fontSM: {
548
- fontFamily: exports.globalTheme.FontFamily,
549
- fontSize: '0.875rem',
550
- fontWeight: exports.globalTheme.FontWeightBold,
551
- capitalization: 'none',
552
- lineHeight: '1rem',
553
- letterSpacing: 'normal'
554
- },
555
- fontMD: {
556
- fontFamily: exports.globalTheme.FontFamily,
557
- fontSize: '1rem',
558
- fontWeight: exports.globalTheme.FontWeightBold,
559
- capitalization: 'none',
560
- lineHeight: '1.1875rem',
561
- letterSpacing: 'normal'
562
- },
563
- fontLG: {
564
- fontFamily: exports.globalTheme.HeadlineFontFamily,
565
- fontSize: '1.5rem',
566
- fontWeight: exports.globalTheme.HeadlineFontWeight,
567
- capitalization: 'none',
568
- lineHeight: '1.8125rem',
569
- letterSpacing: 'normal'
570
- },
571
- fontXL: {
572
- fontFamily: exports.globalTheme.HeadlineFontFamily,
573
- fontSize: '2rem',
574
- fontWeight: exports.globalTheme.HeadlineFontWeight,
575
- capitalization: 'none',
576
- lineHeight: '2.4375rem',
577
- letterSpacing: 'normal'
578
- }
579
- },
580
- links: {
581
- static: {
582
- color: colors.primary1,
583
- textDecoration: 'none'
584
- },
585
- hover: {
586
- color: colors.primary1,
587
- textDecoration: 'underline'
588
- },
589
- clicked: {
590
- color: colors.primary1,
591
- textDecoration: 'underline'
592
- },
593
- visited: {
594
- color: colors.primary1,
595
- textDecoration: 'none'
596
- }
597
- }
598
- },
599
- buttonLinks: { color: colors.primary1 },
600
- buttons: {
601
- globalThemeBorderRadius: exports.globalTheme.BorderRadius,
602
- globalThemeFontWeight: exports.globalTheme.FontWeightBold,
603
- globalThemeFontFamily: exports.globalTheme.FontFamily,
604
- iconPosition: 'left',
605
- miniCart: {
606
- minicartContentPadding: 0,
607
- textTransform: 'capitalize',
608
- backgroundColor: 'none',
609
- borderRadius: exports.globalTheme.BorderRadius,
610
- activeBackgroundColor: colors.secondary1,
611
- hoverBackgroundColor: colors.secondary5,
612
- tabletSettings: {
613
- enabled: false,
614
- backgroundColor: '',
615
- backgroundColorHover: '',
616
- iconColor: '',
617
- iconColorHover: '',
618
- showText: false,
619
- textColor: '',
620
- textColorHover: ''
621
- },
622
- color: colors.secondary1,
623
- activeColor: colors.greyscale1,
624
- mobileColor: colors.secondary1,
625
- iconColor: colors.secondary1,
626
- activeIconColor: colors.greyscale1,
627
- mobileIconColor: colors.secondary1,
628
- tabletIconColor: 'none',
629
- desktopIconSize: '16px',
630
- mobileIconSize: '24px'
631
- },
632
- primary: {
633
- borderRadius: exports.globalTheme.BorderRadius,
634
- fontWeight: exports.globalTheme.FontWeightBold,
635
- textTransform: 'none',
636
- static: {
637
- bgColor: colors.primary1,
638
- borderColor: colors.primary1,
639
- color: colors.greyscale1,
640
- iconColor: colors.greyscale1
641
- },
642
- hover: {
643
- bgColor: colors.primary2,
644
- borderColor: colors.primary2,
645
- color: colors.greyscale1,
646
- iconColor: colors.greyscale1
647
- },
648
- clicked: {
649
- bgColor: colors.primary3,
650
- borderColor: colors.primary3,
651
- color: colors.greyscale1,
652
- iconColor: colors.greyscale1
653
- },
654
- disabled: {
655
- bgColor: colors.primary4,
656
- borderColor: colors.primary4,
657
- color: colors.greyscale1,
658
- iconColor: colors.greyscale3
659
- }
660
- },
661
- primaryLight: {
662
- borderRadius: exports.globalTheme.BorderRadius,
663
- fontWeight: exports.globalTheme.FontWeightBold,
664
- textTransform: 'none',
665
- static: {
666
- bgColor: colors.greyscale1,
667
- borderColor: colors.greyscale1,
668
- color: colors.primary1,
669
- iconColor: colors.primary1
670
- },
671
- hover: {
672
- bgColor: colors.greyscale1,
673
- borderColor: colors.greyscale1,
674
- color: colors.primary2,
675
- iconColor: colors.primary2
676
- },
677
- clicked: {
678
- bgColor: colors.greyscale1,
679
- borderColor: colors.greyscale1,
680
- color: colors.primary3,
681
- iconColor: colors.primary3
682
- },
683
- disabled: {
684
- bgColor: colors.greyscale1,
685
- borderColor: colors.greyscale1,
686
- color: colors.greyscale3,
687
- iconColor: colors.greyscale3
688
- }
689
- },
690
- secondary: {
691
- borderRadius: exports.globalTheme.BorderRadius,
692
- fontWeight: exports.globalTheme.FontWeightBold,
693
- textTransform: 'none',
694
- static: {
695
- bgColor: colors.greyscale1,
696
- borderColor: colors.primary1,
697
- color: colors.primary1,
698
- iconColor: colors.primary1
699
- },
700
- hover: {
701
- bgColor: colors.primary1,
702
- borderColor: colors.primary1,
703
- color: colors.greyscale1,
704
- iconColor: colors.greyscale1
705
- },
706
- clicked: {
707
- bgColor: colors.primary2,
708
- borderColor: colors.primary2,
709
- color: colors.greyscale1,
710
- iconColor: colors.greyscale1
711
- },
712
- disabled: {
713
- bgColor: colors.greyscale1,
714
- borderColor: colors.greyscale3,
715
- color: colors.greyscale3,
716
- iconColor: colors.greyscale3
717
- }
718
- },
719
- secondaryLight: {
720
- borderRadius: exports.globalTheme.BorderRadius,
721
- fontWeight: exports.globalTheme.FontWeightBold,
722
- textTransform: 'none',
723
- static: {
724
- bgColor: 'transparent',
725
- borderColor: colors.greyscale1,
726
- color: colors.greyscale1,
727
- iconColor: colors.greyscale1
728
- },
729
- hover: {
730
- bgColor: colors.greyscale1,
731
- borderColor: colors.greyscale1,
732
- color: colors.primary1,
733
- iconColor: colors.primary1
734
- },
735
- clicked: {
736
- bgColor: colors.primary2,
737
- borderColor: colors.greyscale1,
738
- color: colors.greyscale1,
739
- iconColor: colors.greyscale1
740
- },
741
- disabled: {
742
- bgColor: 'transparent',
743
- borderColor: colors.greyscale3,
744
- color: colors.greyscale3,
745
- iconColor: colors.greyscale3
746
- }
747
- },
748
- tertiary: {
749
- borderRadius: exports.globalTheme.BorderRadius,
750
- fontWeight: exports.globalTheme.FontWeightBold,
751
- textTransform: 'none',
752
- static: {
753
- bgColor: colors.tertiary1,
754
- borderColor: colors.tertiary1,
755
- color: colors.greyscale5,
756
- iconColor: colors.greyscale5
757
- },
758
- hover: {
759
- bgColor: colors.tertiary1,
760
- borderColor: colors.tertiary1,
761
- color: colors.primary1,
762
- iconColor: colors.primary1
763
- },
764
- clicked: {
765
- bgColor: colors.tertiary1,
766
- borderColor: colors.primary1,
767
- color: colors.primary1,
768
- iconColor: colors.primary1
769
- },
770
- disabled: {
771
- bgColor: colors.greyscale2,
772
- borderColor: colors.greyscale2,
773
- color: colors.greyscale3,
774
- iconColor: colors.greyscale1
775
- }
776
- },
777
- checkout: {
778
- borderRadius: exports.globalTheme.BorderRadius,
779
- fontWeight: exports.globalTheme.FontWeightBold,
780
- iconColor: colors.greyscale5,
781
- textTransform: 'none',
782
- static: {
783
- bgColor: colors.secondary1,
784
- borderColor: colors.secondary1,
785
- color: colors.greyscale1
786
- },
787
- hover: {
788
- bgColor: colors.secondary2,
789
- borderColor: colors.secondary2,
790
- color: colors.greyscale1
791
- },
792
- clicked: {
793
- bgColor: colors.secondary3,
794
- borderColor: colors.secondary3,
795
- color: colors.greyscale1
796
- },
797
- disabled: {
798
- bgColor: colors.secondary4,
799
- borderColor: colors.secondary4,
800
- color: colors.greyscale1
801
- }
802
- },
803
- quantityStepper: {
804
- borderColor: colors.greyscale3,
805
- borderRadius: exports.globalTheme.BorderRadius,
806
- textTransform: 'none',
807
- numericInput: {
808
- fontWeight: exports.globalTheme.FontWeightBold,
809
- fontSize: '0.875rem',
810
- letterSpacing: 'normal',
811
- lineHeight: '1.1875rem',
812
- static: {
813
- bgColor: colors.greyscale1,
814
- color: colors.greyscale5
815
- },
816
- focused: {
817
- bgColor: colors.primary5,
818
- color: colors.greyscale5
819
- }
820
- },
821
- plusMinusButtons: {
822
- plusMinusIconBgColor: colors.greyscale1,
823
- plusMinusIconColor: colors.primary1
824
- }
825
- },
826
- coupon: {
827
- borderRadius: exports.globalTheme.BorderRadius,
828
- borderStyle: 'dashed',
829
- fontWeight: exports.globalTheme.FontWeightBold,
830
- static: {
831
- bgColor: colors.greyscale1,
832
- borderColor: colors.greyscale3,
833
- color: colors.greyscale5,
834
- couponIconColor: colors.primary1
835
- },
836
- hover: {
837
- bgColor: colors.greyscale1,
838
- borderColor: colors.greyscale3,
839
- color: colors.greyscale5,
840
- couponIconColor: colors.primary1
841
- },
842
- clicked: {
843
- bgColor: colors.greyscale1,
844
- borderColor: colors.greyscale3,
845
- color: colors.greyscale5,
846
- couponIconColor: colors.primary1
847
- },
848
- clipped: {
849
- bgColor: colors.greyscale1,
850
- borderColor: colors.greyscale3,
851
- color: colors.greyscale5,
852
- clippedIconColor: colors.success,
853
- couponIconColor: colors.greyscale5
854
- }
855
- },
856
- addToCart: {
857
- borderRadius: exports.globalTheme.BorderRadius,
858
- fontWeight: exports.globalTheme.FontWeightBold,
859
- textTransform: 'none',
860
- static: {
861
- bgColor: colors.primary1,
862
- borderColor: colors.primary1,
863
- color: colors.greyscale1,
864
- iconColor: colors.secondary1
865
- },
866
- hover: {
867
- bgColor: colors.primary2,
868
- borderColor: colors.primary1,
869
- color: colors.greyscale1,
870
- iconColor: colors.greyscale1
871
- },
872
- clicked: {
873
- bgColor: colors.primary3,
874
- borderColor: colors.primary2,
875
- color: colors.greyscale1,
876
- iconColor: colors.greyscale1
877
- },
878
- disabled: {
879
- bgColor: colors.primary4,
880
- borderColor: colors.primary4,
881
- color: colors.greyscale1,
882
- iconColor: colors.greyscale3
883
- }
884
- },
885
- pills: {
886
- borderRadius: '500px',
887
- textTransform: 'none',
888
- active: {
889
- fontWeight: exports.globalTheme.FontWeightBold,
890
- fontWeightHover: exports.globalTheme.FontWeightBold,
891
- color: colors.greyscale6,
892
- colorHover: colors.greyscale6,
893
- colorVisited: colors.greyscale6,
894
- backgroundColor: colors.primary5,
895
- borderColor: colors.primary1,
896
- borderColorSelected: colors.primary1,
897
- textDecoration: 'none',
898
- textDecorationHover: 'underline',
899
- padding: '4px 16px'
900
- },
901
- small: {
902
- fontWeight: exports.globalTheme.FontWeightBold,
903
- fontWeightHover: exports.globalTheme.FontWeight,
904
- color: colors.greyscale5,
905
- colorHover: colors.greyscale5,
906
- colorVisited: colors.greyscale5,
907
- backgroundColor: colors.primary5,
908
- borderColor: colors.primary5,
909
- borderColorSelected: colors.primary1,
910
- textDecoration: 'none',
911
- textDecorationHover: 'underline',
912
- padding: '2px 8px'
913
- },
914
- regular: {
915
- fontWeight: exports.globalTheme.FontWeight,
916
- fontWeightHover: exports.globalTheme.FontWeight,
917
- color: colors.primary1,
918
- colorHover: colors.primary1,
919
- colorVisited: colors.primary1,
920
- backgroundColor: colors.greyscale1,
921
- borderColor: colors.greyscale3,
922
- borderColorSelected: colors.primary1,
923
- textDecoration: 'none',
924
- textDecorationHover: 'underline',
925
- padding: '4px 16px'
926
- }
927
- },
928
- facets: {
929
- borderRadius: '500px',
930
- textTransform: 'none',
931
- fontWeight: 400,
932
- active: {
933
- iconColor: colors.greyscale6,
934
- fontWeight: exports.globalTheme.FontWeightBold,
935
- fontWeightHover: exports.globalTheme.FontWeightBold,
936
- color: colors.greyscale6,
937
- colorHover: colors.greyscale6,
938
- colorVisited: colors.greyscale6,
939
- backgroundColor: colors.primary5,
940
- borderColor: colors.primary1,
941
- borderColorSelected: colors.primary1,
942
- textDecoration: 'none',
943
- textDecorationHover: 'underline',
944
- padding: '4px 16px'
945
- },
946
- small: {
947
- iconColor: colors.greyscale6,
948
- fontWeight: exports.globalTheme.FontWeightBold,
949
- fontWeightHover: exports.globalTheme.FontWeight,
950
- color: colors.greyscale5,
951
- colorHover: colors.greyscale5,
952
- colorVisited: colors.greyscale5,
953
- backgroundColor: colors.primary5,
954
- borderColor: colors.primary5,
955
- borderColorSelected: colors.primary1,
956
- textDecoration: 'none',
957
- textDecorationHover: 'underline',
958
- padding: '2px 8px'
959
- },
960
- regular: {
961
- iconColor: colors.greyscale6,
962
- fontWeight: exports.globalTheme.FontWeight,
963
- fontWeightHover: exports.globalTheme.FontWeight,
964
- color: colors.primary1,
965
- colorHover: colors.greyscale5,
966
- colorVisited: colors.primary1,
967
- backgroundColor: colors.greyscale1,
968
- borderColor: colors.greyscale3,
969
- borderColorSelected: colors.primary1,
970
- textDecoration: 'none',
971
- textDecorationHover: 'underline',
972
- padding: '4px 16px'
973
- }
974
- },
975
- sliderArrows: {
976
- backgroundColor: colors.greyscale2,
977
- sideBorderColor: colors.greyscale3,
978
- iconColor: colors.greyscale4
979
- },
980
- filterSort: {
981
- color: colors.primary1,
982
- hoverColor: colors.primary2,
983
- borderRadius: exports.globalTheme.BorderRadius
984
- },
985
- activeAddress: {
986
- backgroundColor: colors.primary3,
987
- borderColor: colors.primary3
988
- },
989
- timeSlotPaginationDay: {
990
- selected: {
991
- backgroundColor: colors.tertiary1
992
- }
993
- },
994
- paginationNumber: {
995
- static: {
996
- color: colors.primary1,
997
- backgroundColor: "none",
998
- },
999
- hover: {
1000
- color: colors.primary1,
1001
- backgroundColor: colors.primary5,
1002
- },
1003
- disabled: {
1004
- color: colors.greyscale1,
1005
- backgroundColor: colors.primary1,
1006
- },
1007
- visited: {
1008
- color: colors.primary1,
1009
- backgroundColor: "none",
1010
- },
1011
- },
1012
- },
1013
- carousel: {
1014
- bannerBackgroundColor: colors.greyscale5,
1015
- carouselPagination: {
1016
- dotBackground: colors.greyscale3,
1017
- activeDotBackground: colors.primary1,
1018
- wrapperBackground: 'transparent',
1019
- wrapperHeight: '24px'
1020
- },
1021
- carouselArrows: {
1022
- borderRadius: '50%',
1023
- backgroundColor: 'rgba(146, 146, 146, 0.5)',
1024
- activeBackgroundColor: colors.greyscale4,
1025
- iconColor: colors.greyscale1,
1026
- buttonDimension: 56
1027
- }
1028
- },
1029
- modal: {
1030
- header: {
1031
- mobileBackgroundColor: colors.greyscale2
1032
- },
1033
- storeIcon: {
1034
- bgColor: colors.tertiary1,
1035
- borderColor: colors.tertiary1,
1036
- color: colors.greyscale5,
1037
- hoverBGColor: colors.tertiary1,
1038
- hoverBorderColor: colors.tertiary1,
1039
- iconColor: colors.greyscale6
1040
- }
1041
- },
1042
- selectedOption: {
1043
- bgColor: colors.successLight
1044
- },
1045
- input: {
1046
- borderRadius: '4px',
1047
- static: {
1048
- bgColor: colors.greyscale1,
1049
- borderColor: colors.greyscale3,
1050
- color: colors.greyscale4,
1051
- placeholderColor: colors.greyscale4
1052
- },
1053
- hover: {
1054
- bgColor: colors.greyscale1,
1055
- borderColor: colors.greyscale3,
1056
- color: colors.greyscale6,
1057
- placeholderColor: colors.greyscale4
1058
- },
1059
- focus: {
1060
- bgColor: colors.tertiary1,
1061
- borderColor: colors.primary1,
1062
- color: colors.greyscale5,
1063
- placeholderColor: colors.greyscale5
1064
- },
1065
- disabled: {
1066
- bgColor: colors.greyscale2,
1067
- borderColor: colors.greyscale3,
1068
- color: colors.greyscale4,
1069
- placeholderColor: colors.greyscale2
1070
- }
1071
- },
1072
- productGrid: {
1073
- borderColor: colors.greyscale2
1074
- },
1075
- logoHeight: {
1076
- header: {
1077
- desktop: '34px',
1078
- tablet: '30px',
1079
- mobile: '26px'
1080
- },
1081
- modal: {
1082
- desktop: '34px',
1083
- tablet: '30px',
1084
- mobile: '30px'
1085
- },
1086
- content: {
1087
- desktop: '34px',
1088
- tablet: '30px',
1089
- mobile: '26px'
1090
- }
1091
- },
1092
- globalAnimations: {
1093
- confettiAnimation: {
1094
- successModals: {
1095
- colors: []
1096
- }
1097
- }
1098
- },
1099
- metadata: [
1100
- { name: 'msapplication-TileColor', content: '#ffffff' },
1101
- {
1102
- name: 'msapplication-TileImage',
1103
- content: "/favicons/ms-icon-144x144.png"
1104
- },
1105
- { name: 'theme-color', content: '#ffffff' }
1106
- ],
1107
- scripts: {}
1108
- });
1109
- };
1110
- exports.default = DefaultThemeSFUI;
1111
- exports.globalTheme = {
1112
- BorderRadius: '4px',
1113
- FontFamily: 'Cabin, sans-serif',
1114
- baseFontSize: '16px',
1115
- FontWeight: 400,
1116
- FontWeightBold: 700,
1117
- bodyFontColor: '#111111',
1118
- HeadlineFontFamily: 'Cabin, sans-serif',
1119
- HeadlineFontWeight: 700,
1120
- bodyBackgroundColor: '#f3f4f6'
1121
- };
1122
- exports.DefaultThemeColors = {
1123
- primary1: '#016abc',
1124
- primary2: '#004f8c',
1125
- primary3: '#002a4b',
1126
- primary4: '#80b4dd',
1127
- primary5: '#e6f0f8',
1128
- secondary1: '#d83A22',
1129
- secondary2: '#aa2003',
1130
- secondary3: '#5b1102',
1131
- secondary4: '#f19582',
1132
- secondary5: '#fceae6',
1133
- tertiary1: '#e6f0f8',
1134
- tertiary2: '#fcefe6',
1135
- tertiary3: '#09448A',
1136
- tertiary4: '',
1137
- tertiary5: '',
1138
- promotion1: '#bc3e31',
1139
- promotion2: '#09448A',
1140
- success: '#4fbf76',
1141
- successDark: '#2e7c49',
1142
- successLight: '#e6f6ec',
1143
- warn: '#fcc260',
1144
- warnDark: '#8f7344',
1145
- warnLight: '#fff6e6',
1146
- alert: '#bc3e31',
1147
- alertDark: '#8c2e24',
1148
- alertLight: '#ffe5e2',
1149
- greyscale1: '#ffffff',
1150
- greyscale2: '#f3f4f6',
1151
- greyscale3: '#ccced0',
1152
- greyscale4: '#71777b',
1153
- greyscale5: '#40464b',
1154
- greyscale6: '#111111',
1155
- greyscale7: '#31363A'
1156
- };
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.DefaultThemeColors = exports.globalTheme = void 0;
4
+ var DefaultThemeSFUI = function (colors) {
5
+ if (colors === void 0) { colors = exports.DefaultThemeColors; }
6
+ return ({
7
+ colors: {
8
+ brandColors: {
9
+ primary1: colors.primary1,
10
+ primary2: colors.primary2,
11
+ primary3: colors.primary3,
12
+ primary4: colors.primary4,
13
+ primary5: colors.primary5,
14
+ secondary1: colors.secondary1,
15
+ secondary2: colors.secondary2,
16
+ secondary3: colors.secondary3,
17
+ secondary4: colors.secondary4,
18
+ secondary5: colors.secondary5,
19
+ tertiary1: colors.tertiary1,
20
+ tertiary2: colors.tertiary2,
21
+ tertiary3: colors.tertiary3,
22
+ tertiary4: colors.tertiary4,
23
+ tertiary5: colors.tertiary5
24
+ },
25
+ uiColors: {
26
+ success: colors.success,
27
+ successDark: colors.successDark,
28
+ successLight: colors.successLight,
29
+ warn: colors.warn,
30
+ warnDark: colors.warnDark,
31
+ warnLight: colors.warnLight,
32
+ alert: colors.alert,
33
+ alertDark: colors.alertDark,
34
+ alertLight: colors.alertLight,
35
+ promotion1: colors.promotion1,
36
+ promotion2: colors.promotion2,
37
+ greyscale1: colors.greyscale1,
38
+ greyscale2: colors.greyscale2,
39
+ greyscale3: colors.greyscale3,
40
+ greyscale4: colors.greyscale4,
41
+ greyscale5: colors.greyscale5,
42
+ greyscale6: colors.greyscale6,
43
+ greyscale7: colors.greyscale7
44
+ }
45
+ },
46
+ header: {
47
+ notifications: {
48
+ counter: {
49
+ backgroundColor: colors.alert,
50
+ },
51
+ text: {
52
+ color: colors.greyscale1,
53
+ hoverColor: colors.greyscale3,
54
+ },
55
+ seeAllNotifications: { color: colors.greyscale4 },
56
+ },
57
+ badge: {
58
+ cart: {
59
+ color: colors.secondary1,
60
+ bgColor: colors.greyscale1
61
+ }
62
+ },
63
+ topMenu: {
64
+ color: colors.greyscale6,
65
+ hoverColor: colors.greyscale6,
66
+ backgroundColor: colors.greyscale2,
67
+ links: {
68
+ static: {
69
+ color: colors.primary1,
70
+ textDecoration: 'none'
71
+ },
72
+ hover: {
73
+ color: colors.primary1,
74
+ textDecoration: 'underline'
75
+ },
76
+ clicked: {
77
+ color: colors.primary1,
78
+ textDecoration: 'underline'
79
+ },
80
+ visited: {
81
+ color: colors.primary1,
82
+ textDecoration: 'none'
83
+ }
84
+ }
85
+ },
86
+ mainMenu: {
87
+ color: colors.greyscale6,
88
+ hoverColor: colors.greyscale6,
89
+ backgroundColor: colors.greyscale1,
90
+ links: {
91
+ static: {
92
+ color: colors.primary1,
93
+ textDecoration: 'none'
94
+ },
95
+ hover: {
96
+ color: colors.primary1,
97
+ textDecoration: 'underline'
98
+ },
99
+ clicked: {
100
+ color: colors.primary1,
101
+ textDecoration: 'underline'
102
+ },
103
+ visited: {
104
+ color: colors.primary1,
105
+ textDecoration: 'none'
106
+ }
107
+ }
108
+ },
109
+ bottomMenu: {
110
+ color: colors.greyscale6,
111
+ hoverColor: colors.primary1,
112
+ backgroundColor: colors.greyscale1,
113
+ textTransform: 'capitalize',
114
+ fontWeight: exports.globalTheme.FontWeight,
115
+ links: {
116
+ static: {
117
+ color: colors.primary1,
118
+ textDecoration: 'none'
119
+ },
120
+ hover: {
121
+ color: colors.primary1,
122
+ textDecoration: 'underline'
123
+ },
124
+ clicked: {
125
+ color: colors.primary1,
126
+ textDecoration: 'underline'
127
+ },
128
+ visited: {
129
+ color: colors.primary1,
130
+ textDecoration: 'none'
131
+ }
132
+ }
133
+ },
134
+ mobileMenu: {
135
+ color: colors.primary1,
136
+ hoverColor: colors.primary1,
137
+ backgroundColor: colors.greyscale1,
138
+ links: {
139
+ static: {
140
+ color: colors.primary1,
141
+ textDecoration: 'none'
142
+ },
143
+ hover: {
144
+ color: colors.primary1,
145
+ textDecoration: 'underline'
146
+ },
147
+ clicked: {
148
+ color: colors.primary1,
149
+ textDecoration: 'underline'
150
+ },
151
+ visited: {
152
+ color: colors.primary1,
153
+ textDecoration: 'none'
154
+ }
155
+ }
156
+ },
157
+ search: {
158
+ borderColor: colors.greyscale3,
159
+ borderRadius: '4px',
160
+ clearBtnColor: colors.greyscale3,
161
+ searchButton: {
162
+ desktop: {
163
+ static: { color: colors.primary1, backgroundColor: 'transparent' },
164
+ hover: { color: colors.primary1, backgroundColor: colors.greyscale2 },
165
+ clicked: {
166
+ color: colors.greyscale1,
167
+ backgroundColor: colors.primary1
168
+ }
169
+ },
170
+ tablet: {
171
+ static: { color: colors.primary1 },
172
+ clicked: {
173
+ color: colors.greyscale1
174
+ }
175
+ },
176
+ mobile: {
177
+ static: { color: colors.primary1 }
178
+ }
179
+ },
180
+ suggestions: {
181
+ links: {
182
+ color: {
183
+ static: 'inherit',
184
+ hover: 'inherit',
185
+ visited: 'inherit'
186
+ }
187
+ }
188
+ },
189
+ multisearchBtn: {
190
+ static: {
191
+ color: colors.greyscale5,
192
+ backgroundColor: colors.primary5
193
+ },
194
+ hover: {
195
+ color: colors.primary1,
196
+ backgroundColor: colors.primary5
197
+ }
198
+ }
199
+ },
200
+ storePopover: {
201
+ backgroundColor: colors.primary5,
202
+ activeBackgroundColor: colors.secondary5,
203
+ color: colors.greyscale5,
204
+ activeColor: colors.greyscale5,
205
+ borderColor: 'transparent',
206
+ borderRadius: '4px',
207
+ reserveTimeIconPosition: 'center'
208
+ },
209
+ accountPopover: {
210
+ backgroundColor: colors.greyscale2,
211
+ borderColor: 'transparent',
212
+ borderRadius: '4px',
213
+ color: colors.greyscale5,
214
+ links: {
215
+ color: {
216
+ static: colors.greyscale5,
217
+ hover: 'inherit',
218
+ visited: colors.greyscale5
219
+ }
220
+ }
221
+ },
222
+ headerActionLinks: {
223
+ activeBackgroundColor: colors.greyscale2,
224
+ activeColor: colors.primary1,
225
+ backgroundColor: 'none',
226
+ borderRadius: exports.globalTheme.BorderRadius,
227
+ color: colors.greyscale5,
228
+ hoverColor: colors.greyscale5,
229
+ fontFamily: exports.globalTheme.FontFamily,
230
+ fontWeight: exports.globalTheme.FontWeightBold,
231
+ links: {
232
+ static: {
233
+ color: colors.primary1,
234
+ textDecoration: 'none'
235
+ },
236
+ hover: {
237
+ color: colors.primary1,
238
+ textDecoration: 'underline'
239
+ },
240
+ clicked: {
241
+ color: colors.primary1,
242
+ textDecoration: 'underline'
243
+ },
244
+ visited: {
245
+ color: colors.primary1,
246
+ textDecoration: 'none'
247
+ }
248
+ }
249
+ },
250
+ headerLinks: {
251
+ color: colors.greyscale5,
252
+ hoverColor: colors.greyscale5,
253
+ backgroundColor: 'none',
254
+ activeColor: colors.greyscale5,
255
+ activeBackgroundColor: colors.greyscale2,
256
+ fontWeight: exports.globalTheme.FontWeightBold,
257
+ borderRadius: exports.globalTheme.BorderRadius,
258
+ links: {
259
+ static: {
260
+ color: colors.primary1,
261
+ textDecoration: 'none'
262
+ },
263
+ hover: {
264
+ color: colors.primary1,
265
+ textDecoration: 'underline'
266
+ },
267
+ clicked: {
268
+ color: colors.primary1,
269
+ textDecoration: 'underline'
270
+ },
271
+ visited: {
272
+ color: colors.primary1,
273
+ textDecoration: 'none'
274
+ }
275
+ }
276
+ },
277
+ departments: {
278
+ wrapCategoryTitle: false,
279
+ backgroundColor: {
280
+ active: 'inherit',
281
+ static: colors.greyscale2
282
+ },
283
+ color: {
284
+ static: colors.greyscale5,
285
+ hover: colors.primary1
286
+ },
287
+ iconColor: {
288
+ static: colors.greyscale3,
289
+ hover: colors.greyscale3
290
+ }
291
+ }
292
+ },
293
+ body: {
294
+ fontSize: exports.globalTheme.baseFontSize,
295
+ color: exports.globalTheme.bodyFontColor,
296
+ backgroundColor: exports.globalTheme.bodyBackgroundColor
297
+ },
298
+ footer: {
299
+ mainFooter: {
300
+ color: colors.greyscale6,
301
+ hoverColor: colors.greyscale6,
302
+ backgroundColor: colors.greyscale2,
303
+ links: {
304
+ static: {
305
+ color: colors.primary1,
306
+ textDecoration: 'none'
307
+ },
308
+ hover: {
309
+ color: colors.primary1,
310
+ textDecoration: 'underline'
311
+ },
312
+ clicked: {
313
+ color: colors.primary1,
314
+ textDecoration: 'underline'
315
+ },
316
+ visited: {
317
+ color: colors.primary1,
318
+ textDecoration: 'none'
319
+ }
320
+ }
321
+ },
322
+ bottomFooter: {
323
+ color: colors.greyscale1,
324
+ hoverColor: colors.greyscale1,
325
+ backgroundColor: colors.greyscale5,
326
+ links: {
327
+ static: {
328
+ color: colors.primary1,
329
+ textDecoration: 'none'
330
+ },
331
+ hover: {
332
+ color: colors.primary1,
333
+ textDecoration: 'underline'
334
+ },
335
+ clicked: {
336
+ color: colors.primary1,
337
+ textDecoration: 'underline'
338
+ },
339
+ visited: {
340
+ color: colors.primary1,
341
+ textDecoration: 'none'
342
+ }
343
+ }
344
+ },
345
+ bottomFooterNavHeaderLink: {
346
+ color: colors.greyscale6,
347
+ hoverColor: colors.greyscale6,
348
+ backgroundColor: 'transparent',
349
+ links: {
350
+ static: {
351
+ color: colors.primary1,
352
+ textDecoration: 'none'
353
+ },
354
+ hover: {
355
+ color: colors.primary1,
356
+ textDecoration: 'underline'
357
+ },
358
+ clicked: {
359
+ color: colors.primary1,
360
+ textDecoration: 'underline'
361
+ },
362
+ visited: {
363
+ color: colors.primary1,
364
+ textDecoration: 'none'
365
+ }
366
+ }
367
+ },
368
+ mediaIcons: {
369
+ color: colors.greyscale5
370
+ }
371
+ },
372
+ orderConfirmation: {
373
+ iconColor: colors.greyscale1,
374
+ backgroundColor: colors.successLight
375
+ },
376
+ minimalHeader: {
377
+ desktop: {
378
+ color: colors.secondary1,
379
+ hoverColor: colors.secondary1,
380
+ backgroundColor: colors.greyscale1,
381
+ iconColor: colors.secondary1,
382
+ links: {
383
+ static: {
384
+ color: colors.primary1,
385
+ textDecoration: 'none'
386
+ },
387
+ hover: {
388
+ color: colors.primary1,
389
+ textDecoration: 'underline'
390
+ },
391
+ clicked: {
392
+ color: colors.primary1,
393
+ textDecoration: 'underline'
394
+ },
395
+ visited: {
396
+ color: colors.primary1,
397
+ textDecoration: 'none'
398
+ }
399
+ }
400
+ },
401
+ mobile: {
402
+ color: colors.secondary1,
403
+ hoverColor: colors.secondary1,
404
+ backgroundColor: colors.greyscale1,
405
+ iconColor: colors.secondary1,
406
+ links: {
407
+ static: {
408
+ color: colors.primary1,
409
+ textDecoration: 'none'
410
+ },
411
+ hover: {
412
+ color: colors.primary1,
413
+ textDecoration: 'underline'
414
+ },
415
+ clicked: {
416
+ color: colors.primary1,
417
+ textDecoration: 'underline'
418
+ },
419
+ visited: {
420
+ color: colors.primary1,
421
+ textDecoration: 'none'
422
+ }
423
+ }
424
+ }
425
+ },
426
+ subHeaderBoxes: {
427
+ backgroundColor: colors.greyscale2,
428
+ color: colors.greyscale5,
429
+ contentBorder: colors.greyscale2
430
+ },
431
+ breadcrumb: {
432
+ textTransform: 'capitalize',
433
+ backgroundColor: colors.greyscale2,
434
+ color: colors.primary1,
435
+ activeColor: colors.greyscale6,
436
+ backIconColor: colors.greyscale4
437
+ },
438
+ breadcrumbTitle: {
439
+ textTransform: 'capitalize',
440
+ backgroundColor: colors.greyscale2,
441
+ color: colors.primary1,
442
+ activeColor: colors.greyscale6,
443
+ backIconColor: colors.greyscale4
444
+ },
445
+ payment: {
446
+ selectedCardBackground: colors.primary5,
447
+ selectedCardColor: colors.greyscale5,
448
+ summary: {
449
+ listItemBackground: colors.greyscale2
450
+ },
451
+ checkoutCards: {
452
+ borderRadius: '4px'
453
+ }
454
+ },
455
+ productPage: {
456
+ detailsBackgroundColor: colors.greyscale2,
457
+ badges: {
458
+ borderRadius: '4px'
459
+ },
460
+ priceReductionColor: colors.alert,
461
+ previouslyPurchased: {
462
+ color: colors.greyscale5,
463
+ bgColor: colors.primary5
464
+ }
465
+ },
466
+ accountPage: {
467
+ passwordRequirements: {
468
+ backgroundColor: colors.primary5
469
+ }
470
+ },
471
+ favorites: {
472
+ headerIconStyle: 'FavSolid',
473
+ productColors: {
474
+ static: {
475
+ color: colors.greyscale3,
476
+ hoverColor: colors.alert
477
+ },
478
+ active: {
479
+ color: colors.alert,
480
+ hoverColor: colors.alertDark
481
+ }
482
+ }
483
+ },
484
+ promoBadges: {
485
+ backgroundColor: {
486
+ promotion: colors.promotion1,
487
+ pointsBasedPromo: colors.promotion2
488
+ },
489
+ fontWeight: exports.globalTheme.FontWeightBold,
490
+ color: {
491
+ promotion: colors.greyscale1,
492
+ pointsBasedPromo: colors.greyscale1
493
+ }
494
+ },
495
+ loyaltyCard: {
496
+ backgroundColor: colors.primary5,
497
+ borderColor: colors.primary5,
498
+ borderRadius: '16px',
499
+ cardTextColor: colors.greyscale5,
500
+ dimensions: {
501
+ width: 325,
502
+ height: 190
503
+ },
504
+ input: {
505
+ borderRadius: '4px',
506
+ backgroundColor: colors.greyscale1,
507
+ borderColor: colors.greyscale3,
508
+ idFields: {
509
+ staticBorder: colors.greyscale4,
510
+ hoverBorder: colors.greyscale5,
511
+ activeBorder: colors.primary1,
512
+ errorBorder: colors.alert
513
+ }
514
+ },
515
+ infoList: {
516
+ color: colors.greyscale4,
517
+ borderColor: colors.greyscale2
518
+ }
519
+ },
520
+ typography: {
521
+ webFonts: [
522
+ 'https://fonts.googleapis.com/css?family=Cabin:400,400i,700,700i&display=swap'
523
+ ],
524
+ embeddedFonts: [],
525
+ weights: {
526
+ normal: exports.globalTheme.FontWeight,
527
+ bold: exports.globalTheme.FontWeightBold
528
+ },
529
+ text: {
530
+ body: {
531
+ color: colors.greyscale6,
532
+ fontFamily: exports.globalTheme.FontFamily,
533
+ fontSize: '1rem',
534
+ fontWeight: exports.globalTheme.FontWeight,
535
+ capitalization: 'none',
536
+ lineHeight: '1.1875rem',
537
+ letterSpacing: 'normal'
538
+ },
539
+ fontXS: {
540
+ fontFamily: exports.globalTheme.FontFamily,
541
+ fontSize: '0.75rem',
542
+ fontWeight: exports.globalTheme.FontWeight,
543
+ capitalization: 'none',
544
+ lineHeight: '0.9375rem',
545
+ letterSpacing: 'normal'
546
+ },
547
+ fontSM: {
548
+ fontFamily: exports.globalTheme.FontFamily,
549
+ fontSize: '0.875rem',
550
+ fontWeight: exports.globalTheme.FontWeightBold,
551
+ capitalization: 'none',
552
+ lineHeight: '1rem',
553
+ letterSpacing: 'normal'
554
+ },
555
+ fontMD: {
556
+ fontFamily: exports.globalTheme.FontFamily,
557
+ fontSize: '1rem',
558
+ fontWeight: exports.globalTheme.FontWeightBold,
559
+ capitalization: 'none',
560
+ lineHeight: '1.1875rem',
561
+ letterSpacing: 'normal'
562
+ },
563
+ fontLG: {
564
+ fontFamily: exports.globalTheme.HeadlineFontFamily,
565
+ fontSize: '1.5rem',
566
+ fontWeight: exports.globalTheme.HeadlineFontWeight,
567
+ capitalization: 'none',
568
+ lineHeight: '1.8125rem',
569
+ letterSpacing: 'normal'
570
+ },
571
+ fontXL: {
572
+ fontFamily: exports.globalTheme.HeadlineFontFamily,
573
+ fontSize: '2rem',
574
+ fontWeight: exports.globalTheme.HeadlineFontWeight,
575
+ capitalization: 'none',
576
+ lineHeight: '2.4375rem',
577
+ letterSpacing: 'normal'
578
+ }
579
+ },
580
+ links: {
581
+ static: {
582
+ color: colors.primary1,
583
+ textDecoration: 'none'
584
+ },
585
+ hover: {
586
+ color: colors.primary1,
587
+ textDecoration: 'underline'
588
+ },
589
+ clicked: {
590
+ color: colors.primary1,
591
+ textDecoration: 'underline'
592
+ },
593
+ visited: {
594
+ color: colors.primary1,
595
+ textDecoration: 'none'
596
+ }
597
+ }
598
+ },
599
+ buttonLinks: { color: colors.primary1 },
600
+ buttons: {
601
+ globalThemeBorderRadius: exports.globalTheme.BorderRadius,
602
+ globalThemeFontWeight: exports.globalTheme.FontWeightBold,
603
+ globalThemeFontFamily: exports.globalTheme.FontFamily,
604
+ iconPosition: 'left',
605
+ miniCart: {
606
+ minicartContentPadding: 0,
607
+ textTransform: 'capitalize',
608
+ backgroundColor: 'none',
609
+ borderRadius: exports.globalTheme.BorderRadius,
610
+ activeBackgroundColor: colors.secondary1,
611
+ hoverBackgroundColor: colors.secondary5,
612
+ tabletSettings: {
613
+ enabled: false,
614
+ backgroundColor: '',
615
+ backgroundColorHover: '',
616
+ iconColor: '',
617
+ iconColorHover: '',
618
+ showText: false,
619
+ textColor: '',
620
+ textColorHover: ''
621
+ },
622
+ color: colors.secondary1,
623
+ activeColor: colors.greyscale1,
624
+ mobileColor: colors.secondary1,
625
+ iconColor: colors.secondary1,
626
+ activeIconColor: colors.greyscale1,
627
+ mobileIconColor: colors.secondary1,
628
+ tabletIconColor: 'none',
629
+ desktopIconSize: '16px',
630
+ mobileIconSize: '24px'
631
+ },
632
+ primary: {
633
+ borderRadius: exports.globalTheme.BorderRadius,
634
+ fontWeight: exports.globalTheme.FontWeightBold,
635
+ textTransform: 'none',
636
+ static: {
637
+ bgColor: colors.primary1,
638
+ borderColor: colors.primary1,
639
+ color: colors.greyscale1,
640
+ iconColor: colors.greyscale1
641
+ },
642
+ hover: {
643
+ bgColor: colors.primary2,
644
+ borderColor: colors.primary2,
645
+ color: colors.greyscale1,
646
+ iconColor: colors.greyscale1
647
+ },
648
+ clicked: {
649
+ bgColor: colors.primary3,
650
+ borderColor: colors.primary3,
651
+ color: colors.greyscale1,
652
+ iconColor: colors.greyscale1
653
+ },
654
+ disabled: {
655
+ bgColor: colors.primary4,
656
+ borderColor: colors.primary4,
657
+ color: colors.greyscale1,
658
+ iconColor: colors.greyscale3
659
+ }
660
+ },
661
+ primaryLight: {
662
+ borderRadius: exports.globalTheme.BorderRadius,
663
+ fontWeight: exports.globalTheme.FontWeightBold,
664
+ textTransform: 'none',
665
+ static: {
666
+ bgColor: colors.greyscale1,
667
+ borderColor: colors.greyscale1,
668
+ color: colors.primary1,
669
+ iconColor: colors.primary1
670
+ },
671
+ hover: {
672
+ bgColor: colors.greyscale1,
673
+ borderColor: colors.greyscale1,
674
+ color: colors.primary2,
675
+ iconColor: colors.primary2
676
+ },
677
+ clicked: {
678
+ bgColor: colors.greyscale1,
679
+ borderColor: colors.greyscale1,
680
+ color: colors.primary3,
681
+ iconColor: colors.primary3
682
+ },
683
+ disabled: {
684
+ bgColor: colors.greyscale1,
685
+ borderColor: colors.greyscale1,
686
+ color: colors.greyscale3,
687
+ iconColor: colors.greyscale3
688
+ }
689
+ },
690
+ secondary: {
691
+ borderRadius: exports.globalTheme.BorderRadius,
692
+ fontWeight: exports.globalTheme.FontWeightBold,
693
+ textTransform: 'none',
694
+ static: {
695
+ bgColor: colors.greyscale1,
696
+ borderColor: colors.primary1,
697
+ color: colors.primary1,
698
+ iconColor: colors.primary1
699
+ },
700
+ hover: {
701
+ bgColor: colors.primary1,
702
+ borderColor: colors.primary1,
703
+ color: colors.greyscale1,
704
+ iconColor: colors.greyscale1
705
+ },
706
+ clicked: {
707
+ bgColor: colors.primary2,
708
+ borderColor: colors.primary2,
709
+ color: colors.greyscale1,
710
+ iconColor: colors.greyscale1
711
+ },
712
+ disabled: {
713
+ bgColor: colors.greyscale1,
714
+ borderColor: colors.greyscale3,
715
+ color: colors.greyscale3,
716
+ iconColor: colors.greyscale3
717
+ }
718
+ },
719
+ secondaryLight: {
720
+ borderRadius: exports.globalTheme.BorderRadius,
721
+ fontWeight: exports.globalTheme.FontWeightBold,
722
+ textTransform: 'none',
723
+ static: {
724
+ bgColor: 'transparent',
725
+ borderColor: colors.greyscale1,
726
+ color: colors.greyscale1,
727
+ iconColor: colors.greyscale1
728
+ },
729
+ hover: {
730
+ bgColor: colors.greyscale1,
731
+ borderColor: colors.greyscale1,
732
+ color: colors.primary1,
733
+ iconColor: colors.primary1
734
+ },
735
+ clicked: {
736
+ bgColor: colors.primary2,
737
+ borderColor: colors.greyscale1,
738
+ color: colors.greyscale1,
739
+ iconColor: colors.greyscale1
740
+ },
741
+ disabled: {
742
+ bgColor: 'transparent',
743
+ borderColor: colors.greyscale3,
744
+ color: colors.greyscale3,
745
+ iconColor: colors.greyscale3
746
+ }
747
+ },
748
+ tertiary: {
749
+ borderRadius: exports.globalTheme.BorderRadius,
750
+ fontWeight: exports.globalTheme.FontWeightBold,
751
+ textTransform: 'none',
752
+ static: {
753
+ bgColor: colors.tertiary1,
754
+ borderColor: colors.tertiary1,
755
+ color: colors.greyscale5,
756
+ iconColor: colors.greyscale5
757
+ },
758
+ hover: {
759
+ bgColor: colors.tertiary1,
760
+ borderColor: colors.tertiary1,
761
+ color: colors.primary1,
762
+ iconColor: colors.primary1
763
+ },
764
+ clicked: {
765
+ bgColor: colors.tertiary1,
766
+ borderColor: colors.primary1,
767
+ color: colors.primary1,
768
+ iconColor: colors.primary1
769
+ },
770
+ disabled: {
771
+ bgColor: colors.greyscale2,
772
+ borderColor: colors.greyscale2,
773
+ color: colors.greyscale3,
774
+ iconColor: colors.greyscale1
775
+ }
776
+ },
777
+ checkout: {
778
+ borderRadius: exports.globalTheme.BorderRadius,
779
+ fontWeight: exports.globalTheme.FontWeightBold,
780
+ iconColor: colors.greyscale5,
781
+ textTransform: 'none',
782
+ static: {
783
+ bgColor: colors.secondary1,
784
+ borderColor: colors.secondary1,
785
+ color: colors.greyscale1
786
+ },
787
+ hover: {
788
+ bgColor: colors.secondary2,
789
+ borderColor: colors.secondary2,
790
+ color: colors.greyscale1
791
+ },
792
+ clicked: {
793
+ bgColor: colors.secondary3,
794
+ borderColor: colors.secondary3,
795
+ color: colors.greyscale1
796
+ },
797
+ disabled: {
798
+ bgColor: colors.secondary4,
799
+ borderColor: colors.secondary4,
800
+ color: colors.greyscale1
801
+ }
802
+ },
803
+ quantityStepper: {
804
+ borderColor: colors.greyscale3,
805
+ borderRadius: exports.globalTheme.BorderRadius,
806
+ textTransform: 'none',
807
+ numericInput: {
808
+ fontWeight: exports.globalTheme.FontWeightBold,
809
+ fontSize: '0.875rem',
810
+ letterSpacing: 'normal',
811
+ lineHeight: '1.1875rem',
812
+ static: {
813
+ bgColor: colors.greyscale1,
814
+ color: colors.greyscale5
815
+ },
816
+ focused: {
817
+ bgColor: colors.primary5,
818
+ color: colors.greyscale5
819
+ }
820
+ },
821
+ plusMinusButtons: {
822
+ plusMinusIconBgColor: colors.greyscale1,
823
+ plusMinusIconColor: colors.primary1
824
+ }
825
+ },
826
+ coupon: {
827
+ borderRadius: exports.globalTheme.BorderRadius,
828
+ borderStyle: 'dashed',
829
+ fontWeight: exports.globalTheme.FontWeightBold,
830
+ static: {
831
+ bgColor: colors.greyscale1,
832
+ borderColor: colors.greyscale3,
833
+ color: colors.greyscale5,
834
+ couponIconColor: colors.primary1
835
+ },
836
+ hover: {
837
+ bgColor: colors.greyscale1,
838
+ borderColor: colors.greyscale3,
839
+ color: colors.greyscale5,
840
+ couponIconColor: colors.primary1
841
+ },
842
+ clicked: {
843
+ bgColor: colors.greyscale1,
844
+ borderColor: colors.greyscale3,
845
+ color: colors.greyscale5,
846
+ couponIconColor: colors.primary1
847
+ },
848
+ clipped: {
849
+ bgColor: colors.greyscale1,
850
+ borderColor: colors.greyscale3,
851
+ color: colors.greyscale5,
852
+ clippedIconColor: colors.success,
853
+ couponIconColor: colors.greyscale5
854
+ }
855
+ },
856
+ addToCart: {
857
+ borderRadius: exports.globalTheme.BorderRadius,
858
+ fontWeight: exports.globalTheme.FontWeightBold,
859
+ textTransform: 'none',
860
+ static: {
861
+ bgColor: colors.primary1,
862
+ borderColor: colors.primary1,
863
+ color: colors.greyscale1,
864
+ iconColor: colors.secondary1
865
+ },
866
+ hover: {
867
+ bgColor: colors.primary2,
868
+ borderColor: colors.primary1,
869
+ color: colors.greyscale1,
870
+ iconColor: colors.greyscale1
871
+ },
872
+ clicked: {
873
+ bgColor: colors.primary3,
874
+ borderColor: colors.primary2,
875
+ color: colors.greyscale1,
876
+ iconColor: colors.greyscale1
877
+ },
878
+ disabled: {
879
+ bgColor: colors.primary4,
880
+ borderColor: colors.primary4,
881
+ color: colors.greyscale1,
882
+ iconColor: colors.greyscale3
883
+ }
884
+ },
885
+ pills: {
886
+ borderRadius: '500px',
887
+ textTransform: 'none',
888
+ active: {
889
+ fontWeight: exports.globalTheme.FontWeightBold,
890
+ fontWeightHover: exports.globalTheme.FontWeightBold,
891
+ color: colors.greyscale6,
892
+ colorHover: colors.greyscale6,
893
+ colorVisited: colors.greyscale6,
894
+ backgroundColor: colors.primary5,
895
+ borderColor: colors.primary1,
896
+ borderColorSelected: colors.primary1,
897
+ textDecoration: 'none',
898
+ textDecorationHover: 'underline',
899
+ padding: '4px 16px'
900
+ },
901
+ small: {
902
+ fontWeight: exports.globalTheme.FontWeightBold,
903
+ fontWeightHover: exports.globalTheme.FontWeight,
904
+ color: colors.greyscale5,
905
+ colorHover: colors.greyscale5,
906
+ colorVisited: colors.greyscale5,
907
+ backgroundColor: colors.primary5,
908
+ borderColor: colors.primary5,
909
+ borderColorSelected: colors.primary1,
910
+ textDecoration: 'none',
911
+ textDecorationHover: 'underline',
912
+ padding: '2px 8px'
913
+ },
914
+ regular: {
915
+ fontWeight: exports.globalTheme.FontWeight,
916
+ fontWeightHover: exports.globalTheme.FontWeight,
917
+ color: colors.primary1,
918
+ colorHover: colors.primary1,
919
+ colorVisited: colors.primary1,
920
+ backgroundColor: colors.greyscale1,
921
+ borderColor: colors.greyscale3,
922
+ borderColorSelected: colors.primary1,
923
+ textDecoration: 'none',
924
+ textDecorationHover: 'underline',
925
+ padding: '4px 16px'
926
+ }
927
+ },
928
+ facets: {
929
+ borderRadius: '500px',
930
+ textTransform: 'none',
931
+ fontWeight: 400,
932
+ active: {
933
+ iconColor: colors.greyscale6,
934
+ fontWeight: exports.globalTheme.FontWeightBold,
935
+ fontWeightHover: exports.globalTheme.FontWeightBold,
936
+ color: colors.greyscale6,
937
+ colorHover: colors.greyscale6,
938
+ colorVisited: colors.greyscale6,
939
+ backgroundColor: colors.primary5,
940
+ borderColor: colors.primary1,
941
+ borderColorSelected: colors.primary1,
942
+ textDecoration: 'none',
943
+ textDecorationHover: 'underline',
944
+ padding: '4px 16px'
945
+ },
946
+ small: {
947
+ iconColor: colors.greyscale6,
948
+ fontWeight: exports.globalTheme.FontWeightBold,
949
+ fontWeightHover: exports.globalTheme.FontWeight,
950
+ color: colors.greyscale5,
951
+ colorHover: colors.greyscale5,
952
+ colorVisited: colors.greyscale5,
953
+ backgroundColor: colors.primary5,
954
+ borderColor: colors.primary5,
955
+ borderColorSelected: colors.primary1,
956
+ textDecoration: 'none',
957
+ textDecorationHover: 'underline',
958
+ padding: '2px 8px'
959
+ },
960
+ regular: {
961
+ iconColor: colors.greyscale6,
962
+ fontWeight: exports.globalTheme.FontWeight,
963
+ fontWeightHover: exports.globalTheme.FontWeight,
964
+ color: colors.primary1,
965
+ colorHover: colors.greyscale5,
966
+ colorVisited: colors.primary1,
967
+ backgroundColor: colors.greyscale1,
968
+ borderColor: colors.greyscale3,
969
+ borderColorSelected: colors.primary1,
970
+ textDecoration: 'none',
971
+ textDecorationHover: 'underline',
972
+ padding: '4px 16px'
973
+ }
974
+ },
975
+ sliderArrows: {
976
+ backgroundColor: colors.greyscale2,
977
+ sideBorderColor: colors.greyscale3,
978
+ iconColor: colors.greyscale4
979
+ },
980
+ filterSort: {
981
+ color: colors.primary1,
982
+ hoverColor: colors.primary2,
983
+ borderRadius: exports.globalTheme.BorderRadius
984
+ },
985
+ activeAddress: {
986
+ backgroundColor: colors.primary3,
987
+ borderColor: colors.primary3
988
+ },
989
+ timeSlotPaginationDay: {
990
+ selected: {
991
+ backgroundColor: colors.tertiary1
992
+ }
993
+ },
994
+ paginationNumber: {
995
+ static: {
996
+ color: colors.primary1,
997
+ backgroundColor: "none",
998
+ },
999
+ hover: {
1000
+ color: colors.primary1,
1001
+ backgroundColor: colors.primary5,
1002
+ },
1003
+ disabled: {
1004
+ color: colors.greyscale1,
1005
+ backgroundColor: colors.primary1,
1006
+ },
1007
+ visited: {
1008
+ color: colors.primary1,
1009
+ backgroundColor: "none",
1010
+ },
1011
+ },
1012
+ },
1013
+ carousel: {
1014
+ bannerBackgroundColor: colors.greyscale5,
1015
+ carouselPagination: {
1016
+ dotBackground: colors.greyscale3,
1017
+ activeDotBackground: colors.primary1,
1018
+ wrapperBackground: 'transparent',
1019
+ wrapperHeight: '24px'
1020
+ },
1021
+ carouselArrows: {
1022
+ borderRadius: '50%',
1023
+ backgroundColor: 'rgba(146, 146, 146, 0.5)',
1024
+ activeBackgroundColor: colors.greyscale4,
1025
+ iconColor: colors.greyscale1,
1026
+ buttonDimension: 56
1027
+ }
1028
+ },
1029
+ modal: {
1030
+ header: {
1031
+ mobileBackgroundColor: colors.greyscale2
1032
+ },
1033
+ storeIcon: {
1034
+ bgColor: colors.tertiary1,
1035
+ borderColor: colors.tertiary1,
1036
+ color: colors.greyscale5,
1037
+ hoverBGColor: colors.tertiary1,
1038
+ hoverBorderColor: colors.tertiary1,
1039
+ iconColor: colors.greyscale6
1040
+ }
1041
+ },
1042
+ selectedOption: {
1043
+ bgColor: colors.successLight
1044
+ },
1045
+ input: {
1046
+ borderRadius: '4px',
1047
+ static: {
1048
+ bgColor: colors.greyscale1,
1049
+ borderColor: colors.greyscale3,
1050
+ color: colors.greyscale4,
1051
+ placeholderColor: colors.greyscale4
1052
+ },
1053
+ hover: {
1054
+ bgColor: colors.greyscale1,
1055
+ borderColor: colors.greyscale3,
1056
+ color: colors.greyscale6,
1057
+ placeholderColor: colors.greyscale4
1058
+ },
1059
+ focus: {
1060
+ bgColor: colors.tertiary1,
1061
+ borderColor: colors.primary1,
1062
+ color: colors.greyscale5,
1063
+ placeholderColor: colors.greyscale5
1064
+ },
1065
+ disabled: {
1066
+ bgColor: colors.greyscale2,
1067
+ borderColor: colors.greyscale3,
1068
+ color: colors.greyscale4,
1069
+ placeholderColor: colors.greyscale2
1070
+ }
1071
+ },
1072
+ productGrid: {
1073
+ borderColor: colors.greyscale2
1074
+ },
1075
+ logoHeight: {
1076
+ header: {
1077
+ desktop: '34px',
1078
+ tablet: '30px',
1079
+ mobile: '26px'
1080
+ },
1081
+ modal: {
1082
+ desktop: '34px',
1083
+ tablet: '30px',
1084
+ mobile: '30px'
1085
+ },
1086
+ content: {
1087
+ desktop: '34px',
1088
+ tablet: '30px',
1089
+ mobile: '26px'
1090
+ }
1091
+ },
1092
+ globalAnimations: {
1093
+ confettiAnimation: {
1094
+ successModals: {
1095
+ colors: []
1096
+ }
1097
+ }
1098
+ },
1099
+ metadata: [
1100
+ { name: 'msapplication-TileColor', content: '#ffffff' },
1101
+ {
1102
+ name: 'msapplication-TileImage',
1103
+ content: "/favicons/ms-icon-144x144.png"
1104
+ },
1105
+ { name: 'theme-color', content: '#ffffff' }
1106
+ ],
1107
+ scripts: {}
1108
+ });
1109
+ };
1110
+ exports.default = DefaultThemeSFUI;
1111
+ exports.globalTheme = {
1112
+ BorderRadius: '4px',
1113
+ FontFamily: 'Cabin, sans-serif',
1114
+ baseFontSize: '16px',
1115
+ FontWeight: 400,
1116
+ FontWeightBold: 700,
1117
+ bodyFontColor: '#111111',
1118
+ HeadlineFontFamily: 'Cabin, sans-serif',
1119
+ HeadlineFontWeight: 700,
1120
+ bodyBackgroundColor: '#f3f4f6'
1121
+ };
1122
+ exports.DefaultThemeColors = {
1123
+ primary1: '#016abc',
1124
+ primary2: '#004f8c',
1125
+ primary3: '#002a4b',
1126
+ primary4: '#80b4dd',
1127
+ primary5: '#e6f0f8',
1128
+ secondary1: '#d83A22',
1129
+ secondary2: '#aa2003',
1130
+ secondary3: '#5b1102',
1131
+ secondary4: '#f19582',
1132
+ secondary5: '#fceae6',
1133
+ tertiary1: '#e6f0f8',
1134
+ tertiary2: '#fcefe6',
1135
+ tertiary3: '#09448A',
1136
+ tertiary4: '',
1137
+ tertiary5: '',
1138
+ promotion1: '#bc3e31',
1139
+ promotion2: '#09448A',
1140
+ success: '#4fbf76',
1141
+ successDark: '#2e7c49',
1142
+ successLight: '#e6f6ec',
1143
+ warn: '#fcc260',
1144
+ warnDark: '#8f7344',
1145
+ warnLight: '#fff6e6',
1146
+ alert: '#bc3e31',
1147
+ alertDark: '#8c2e24',
1148
+ alertLight: '#ffe5e2',
1149
+ greyscale1: '#ffffff',
1150
+ greyscale2: '#f3f4f6',
1151
+ greyscale3: '#ccced0',
1152
+ greyscale4: '#71777b',
1153
+ greyscale5: '#40464b',
1154
+ greyscale6: '#111111',
1155
+ greyscale7: '#31363A'
1156
+ };