npm - @thryveai/theme-interfaces - Versions diffs - 2.8.25 → 2.8.26 - Mend

@thryveai/theme-interfaces 2.8.25 → 2.8.26

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 (67) hide show

package/dist/storefront/defaultThemeStorefront.js ADDED Viewed

@@ -0,0 +1,1290 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultThemeColors = exports.globalTheme = void 0;
+var DefaultThemeSFUI = function (colors) {
+    if (colors === void 0) { colors = exports.DefaultThemeColors; }
+    return ({
+        colors: {
+            brandColors: {
+                primary1: colors.primary1,
+                primary2: colors.primary2,
+                primary3: colors.primary3,
+                primary4: colors.primary4,
+                primary5: colors.primary5,
+                secondary1: colors.secondary1,
+                secondary2: colors.secondary2,
+                secondary3: colors.secondary3,
+                secondary4: colors.secondary4,
+                secondary5: colors.secondary5,
+                tertiary1: colors.tertiary1,
+                tertiary2: colors.tertiary2,
+                tertiary3: colors.tertiary3,
+                tertiary4: colors.tertiary4,
+                tertiary5: colors.tertiary5,
+            },
+            uiColors: {
+                success: colors.success,
+                successDark: colors.successDark,
+                successLight: colors.successLight,
+                warn: colors.warn,
+                warnDark: colors.warnDark,
+                warnLight: colors.warnLight,
+                alert: colors.alert,
+                alertDark: colors.alertDark,
+                alertLight: colors.alertLight,
+                promotion1: colors.promotion1,
+                promotion2: colors.promotion2,
+                greyscale1: colors.greyscale1,
+                greyscale2: colors.greyscale2,
+                greyscale3: colors.greyscale3,
+                greyscale4: colors.greyscale4,
+                greyscale5: colors.greyscale5,
+                greyscale6: colors.greyscale6,
+                greyscale7: colors.greyscale7,
+            },
+        },
+        header: {
+            notifications: {
+                counter: {
+                    backgroundColor: colors.alert,
+                },
+                text: {
+                    color: colors.greyscale1,
+                    hoverColor: colors.greyscale3,
+                },
+                seeAllNotifications: { color: colors.greyscale4 },
+            },
+            badge: {
+                cart: {
+                    color: colors.secondary1,
+                    bgColor: colors.greyscale1,
+                },
+                cartCurrency: {
+                    color: colors.secondary1,
+                    bgColor: colors.greyscale1,
+                },
+            },
+            topMenu: {
+                color: colors.greyscale6,
+                hoverColor: colors.greyscale6,
+                backgroundColor: colors.greyscale2,
+                links: {
+                    static: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                    hover: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    clicked: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    visited: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                },
+            },
+            mainMenu: {
+                color: colors.greyscale6,
+                hoverColor: colors.greyscale6,
+                backgroundColor: colors.greyscale1,
+                links: {
+                    static: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                    hover: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    clicked: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    visited: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                },
+            },
+            bottomMenu: {
+                color: colors.greyscale6,
+                hoverColor: colors.primary1,
+                backgroundColor: colors.greyscale1,
+                textTransform: "capitalize",
+                fontWeight: exports.globalTheme.FontWeight,
+                links: {
+                    static: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                    hover: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    clicked: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    visited: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                },
+                subMenu: {
+                    backgroundColor: colors.greyscale1,
+                    links: {
+                        static: {
+                            color: colors.greyscale5,
+                            textDecoration: "none",
+                            backgroundColor: colors.greyscale1,
+                        },
+                        hover: {
+                            color: colors.primary1,
+                            textDecoration: "underline",
+                            backgroundColor: colors.greyscale1,
+                        },
+                        clicked: {
+                            color: colors.primary1,
+                            textDecoration: "underline",
+                            backgroundColor: colors.greyscale1,
+                        },
+                        visited: {
+                            color: colors.greyscale5,
+                            textDecoration: "none",
+                            backgroundColor: colors.greyscale1,
+                        },
+                    },
+                },
+                subMenuCategories: {
+                    backgroundColor: colors.greyscale1,
+                    links: {
+                        static: {
+                            color: colors.greyscale5,
+                            backgroundColor: colors.greyscale1,
+                            arrowColor: colors.greyscale3,
+                            fontWeight: exports.globalTheme.FontWeight,
+                        },
+                        hover: {
+                            color: colors.greyscale5,
+                            backgroundColor: colors.greyscale2,
+                            arrowColor: colors.greyscale4,
+                            fontWeight: exports.globalTheme.FontWeightBold,
+                        },
+                        clicked: {
+                            color: colors.greyscale5,
+                            backgroundColor: colors.greyscale2,
+                            arrowColor: colors.greyscale4,
+                            fontWeight: exports.globalTheme.FontWeightBold,
+                        },
+                    },
+                },
+            },
+            mobileMenu: {
+                color: colors.primary1,
+                hoverColor: colors.primary1,
+                backgroundColor: colors.greyscale1,
+                links: {
+                    static: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                    hover: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    clicked: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    visited: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                },
+            },
+            search: {
+                borderColor: colors.greyscale3,
+                borderRadius: "4px",
+                clearBtnColor: colors.greyscale4,
+                searchButton: {
+                    desktop: {
+                        static: { color: colors.primary1, backgroundColor: "transparent" },
+                        hover: { color: colors.primary1, backgroundColor: colors.greyscale2 },
+                        clicked: {
+                            color: colors.greyscale1,
+                            backgroundColor: colors.primary1,
+                        },
+                    },
+                    tablet: {
+                        static: { color: colors.primary1 },
+                        clicked: {
+                            color: colors.greyscale1,
+                        },
+                    },
+                    mobile: {
+                        static: { color: colors.primary1 },
+                    },
+                },
+                suggestions: {
+                    links: {
+                        color: {
+                            static: "inherit",
+                            hover: "inherit",
+                            visited: "inherit",
+                        },
+                    },
+                },
+                multisearchBtn: {
+                    static: {
+                        color: colors.greyscale5,
+                        backgroundColor: colors.primary5,
+                    },
+                    hover: {
+                        color: colors.primary1,
+                        backgroundColor: colors.primary5,
+                    },
+                },
+            },
+            storePopover: {
+                backgroundColor: colors.primary5,
+                activeBackgroundColor: colors.secondary5,
+                color: colors.greyscale5,
+                activeColor: colors.greyscale5,
+                borderColor: "transparent",
+                borderRadius: "4px",
+                reserveTimeIconPosition: "center",
+            },
+            accountPopover: {
+                backgroundColor: colors.greyscale2,
+                borderColor: "transparent",
+                borderRadius: "4px",
+                color: colors.greyscale5,
+                links: {
+                    color: {
+                        static: colors.greyscale5,
+                        hover: "inherit",
+                        visited: colors.greyscale5,
+                    },
+                },
+            },
+            headerActionLinks: {
+                activeBackgroundColor: colors.greyscale2,
+                activeColor: colors.primary1,
+                backgroundColor: "none",
+                borderRadius: exports.globalTheme.BorderRadius,
+                color: colors.greyscale5,
+                hoverColor: colors.greyscale5,
+                fontFamily: exports.globalTheme.FontFamily,
+                fontWeight: exports.globalTheme.FontWeightBold,
+                links: {
+                    static: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                    hover: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    clicked: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    visited: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                },
+            },
+            headerLinks: {
+                color: colors.greyscale5,
+                hoverColor: colors.greyscale5,
+                backgroundColor: "none",
+                activeColor: colors.greyscale5,
+                activeBackgroundColor: colors.greyscale2,
+                fontWeight: exports.globalTheme.FontWeightBold,
+                borderRadius: exports.globalTheme.BorderRadius,
+                links: {
+                    static: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                    hover: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    clicked: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    visited: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                },
+            },
+            departments: {
+                wrapCategoryTitle: false,
+                backgroundColor: {
+                    active: "inherit",
+                    static: colors.greyscale2,
+                },
+                color: {
+                    static: colors.greyscale5,
+                    hover: colors.primary1,
+                },
+                iconColor: {
+                    static: colors.greyscale3,
+                    hover: colors.greyscale3,
+                },
+            },
+        },
+        body: {
+            fontSize: exports.globalTheme.baseFontSize,
+            color: exports.globalTheme.bodyFontColor,
+            backgroundColor: exports.globalTheme.bodyBackgroundColor,
+        },
+        footer: {
+            mainFooter: {
+                color: colors.greyscale6,
+                hoverColor: colors.greyscale6,
+                backgroundColor: colors.greyscale2,
+                links: {
+                    static: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                    hover: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    clicked: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    visited: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                },
+            },
+            bottomFooter: {
+                color: colors.greyscale1,
+                hoverColor: colors.greyscale1,
+                backgroundColor: colors.greyscale5,
+                links: {
+                    static: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                    hover: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    clicked: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    visited: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                },
+            },
+            bottomFooterNavHeaderLink: {
+                color: colors.greyscale6,
+                hoverColor: colors.greyscale6,
+                backgroundColor: "transparent",
+                links: {
+                    static: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                    hover: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    clicked: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    visited: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                },
+            },
+            mediaIcons: {
+                color: colors.greyscale5,
+            },
+        },
+        orderConfirmation: {
+            iconColor: colors.greyscale1,
+            backgroundColor: colors.successLight,
+        },
+        minimalHeader: {
+            desktop: {
+                color: colors.secondary1,
+                hoverColor: colors.secondary1,
+                backgroundColor: colors.greyscale1,
+                iconColor: colors.secondary1,
+                links: {
+                    static: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                    hover: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    clicked: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    visited: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                },
+            },
+            mobile: {
+                color: colors.secondary1,
+                hoverColor: colors.secondary1,
+                backgroundColor: colors.greyscale1,
+                iconColor: colors.secondary1,
+                links: {
+                    static: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                    hover: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    clicked: {
+                        color: colors.primary1,
+                        textDecoration: "underline",
+                    },
+                    visited: {
+                        color: colors.primary1,
+                        textDecoration: "none",
+                    },
+                },
+            },
+        },
+        subHeaderBoxes: {
+            backgroundColor: colors.greyscale2,
+            color: colors.greyscale5,
+            contentBorder: colors.greyscale2,
+        },
+        breadcrumb: {
+            textTransform: "capitalize",
+            backgroundColor: colors.greyscale2,
+            color: colors.primary1,
+            activeColor: colors.greyscale6,
+            backIconColor: colors.greyscale4,
+        },
+        breadcrumbTitle: {
+            textTransform: "capitalize",
+            backgroundColor: colors.greyscale2,
+            color: colors.primary1,
+            activeColor: colors.greyscale6,
+            backIconColor: colors.greyscale4,
+        },
+        payment: {
+            selectedCardBackground: colors.primary5,
+            selectedCardColor: colors.greyscale5,
+            summary: {
+                listItemBackground: colors.greyscale2,
+            },
+            checkoutCards: {
+                borderRadius: "4px",
+            },
+        },
+        productPage: {
+            detailsBackgroundColor: colors.greyscale2,
+            badges: {
+                borderRadius: "4px",
+            },
+            priceReductionColor: colors.alert,
+            previouslyPurchased: {
+                color: colors.greyscale5,
+                bgColor: colors.primary5,
+            },
+        },
+        accountPage: {
+            passwordRequirements: {
+                backgroundColor: colors.primary5,
+            },
+        },
+        favorites: {
+            headerIconStyle: "FavSolid",
+            productColors: {
+                static: {
+                    color: colors.greyscale3,
+                    hoverColor: colors.alert,
+                },
+                active: {
+                    color: colors.alert,
+                    hoverColor: colors.alertDark,
+                },
+            },
+        },
+        promoBadges: {
+            backgroundColor: {
+                promotion: colors.promotion1,
+                pointsBasedPromo: colors.promotion2,
+            },
+            targetedRewardsIcon: colors.primary1,
+            fontWeight: exports.globalTheme.FontWeightBold,
+            color: {
+                promotion: colors.greyscale1,
+                pointsBasedPromo: colors.greyscale1,
+            },
+        },
+        loyaltyCard: {
+            backgroundColor: colors.primary5,
+            borderColor: colors.primary5,
+            borderRadius: "16px",
+            cardTextColor: colors.greyscale5,
+            dimensions: {
+                width: 325,
+                height: 190,
+            },
+            input: {
+                borderRadius: "4px",
+                backgroundColor: colors.greyscale1,
+                borderColor: colors.greyscale3,
+                idFields: {
+                    staticBorder: colors.greyscale4,
+                    hoverBorder: colors.greyscale5,
+                    activeBorder: colors.primary1,
+                    errorBorder: colors.alert,
+                },
+            },
+            infoList: {
+                color: colors.greyscale4,
+                borderColor: colors.greyscale2,
+            },
+        },
+        typography: {
+            webFonts: [
+                "https://fonts.googleapis.com/css?family=Cabin:400,400i,700,700i&display=swap",
+            ],
+            embeddedFonts: [],
+            weights: {
+                normal: exports.globalTheme.FontWeight,
+                bold: exports.globalTheme.FontWeightBold,
+            },
+            text: {
+                body: {
+                    color: colors.greyscale6,
+                    fontFamily: exports.globalTheme.FontFamily,
+                    fontSize: "1rem",
+                    fontWeight: exports.globalTheme.FontWeight,
+                    capitalization: "none",
+                    lineHeight: "1.1875rem",
+                    letterSpacing: "normal",
+                },
+                fontXS: {
+                    fontFamily: exports.globalTheme.FontFamily,
+                    fontSize: "0.75rem",
+                    fontWeight: exports.globalTheme.FontWeight,
+                    capitalization: "none",
+                    lineHeight: "0.9375rem",
+                    letterSpacing: "normal",
+                },
+                fontSM: {
+                    fontFamily: exports.globalTheme.FontFamily,
+                    fontSize: "0.875rem",
+                    fontWeight: exports.globalTheme.FontWeightBold,
+                    capitalization: "none",
+                    lineHeight: "1rem",
+                    letterSpacing: "normal",
+                },
+                fontMD: {
+                    fontFamily: exports.globalTheme.FontFamily,
+                    fontSize: "1rem",
+                    fontWeight: exports.globalTheme.FontWeightBold,
+                    capitalization: "none",
+                    lineHeight: "1.1875rem",
+                    letterSpacing: "normal",
+                },
+                fontLG: {
+                    fontFamily: exports.globalTheme.HeadlineFontFamily,
+                    fontSize: "1.5rem",
+                    fontWeight: exports.globalTheme.HeadlineFontWeight,
+                    capitalization: "none",
+                    lineHeight: "1.8125rem",
+                    letterSpacing: "normal",
+                },
+                fontXL: {
+                    fontFamily: exports.globalTheme.HeadlineFontFamily,
+                    fontSize: "2rem",
+                    fontWeight: exports.globalTheme.HeadlineFontWeight,
+                    capitalization: "none",
+                    lineHeight: "2.4375rem",
+                    letterSpacing: "normal",
+                },
+            },
+            links: {
+                static: {
+                    color: colors.primary1,
+                    textDecoration: "none",
+                },
+                hover: {
+                    color: colors.primary1,
+                    textDecoration: "underline",
+                },
+                clicked: {
+                    color: colors.primary1,
+                    textDecoration: "underline",
+                },
+                visited: {
+                    color: colors.primary1,
+                    textDecoration: "none",
+                },
+            },
+        },
+        buttonLinks: { color: colors.primary1 },
+        buttons: {
+            globalThemeBorderRadius: exports.globalTheme.BorderRadius,
+            globalThemeFontWeight: exports.globalTheme.FontWeightBold,
+            globalThemeFontFamily: exports.globalTheme.FontFamily,
+            iconPosition: "left",
+            miniCart: {
+                minicartContentPadding: {
+                    bottom: "",
+                    left: "",
+                    right: "",
+                    top: "",
+                    icon: "",
+                },
+                textTransform: "capitalize",
+                backgroundColor: "none",
+                borderRadius: exports.globalTheme.BorderRadius,
+                activeBackgroundColor: colors.secondary1,
+                hoverBackgroundColor: colors.secondary5,
+                tabletSettings: {
+                    enabled: false,
+                    backgroundColor: "",
+                    backgroundColorHover: "",
+                    iconColor: "",
+                    iconColorHover: "",
+                    showText: false,
+                    textColor: "",
+                    textColorHover: "",
+                },
+                color: colors.secondary1,
+                activeColor: colors.greyscale1,
+                mobileColor: colors.secondary1,
+                iconColor: colors.secondary1,
+                activeIconColor: colors.greyscale1,
+                mobileIconColor: colors.secondary1,
+                tabletIconColor: "none",
+                desktopIconSize: "16px",
+                mobileIconSize: "24px",
+            },
+            primary: {
+                borderRadius: exports.globalTheme.BorderRadius,
+                fontWeight: exports.globalTheme.FontWeightBold,
+                textTransform: "none",
+                static: {
+                    bgColor: colors.primary1,
+                    borderColor: colors.primary1,
+                    color: colors.greyscale1,
+                    iconColor: colors.greyscale1,
+                },
+                hover: {
+                    bgColor: colors.primary2,
+                    borderColor: colors.primary2,
+                    color: colors.greyscale1,
+                    iconColor: colors.greyscale1,
+                },
+                clicked: {
+                    bgColor: colors.primary3,
+                    borderColor: colors.primary3,
+                    color: colors.greyscale1,
+                    iconColor: colors.greyscale1,
+                },
+                disabled: {
+                    bgColor: colors.primary4,
+                    borderColor: colors.primary4,
+                    color: colors.greyscale1,
+                    iconColor: colors.greyscale3,
+                },
+            },
+            primaryLight: {
+                borderRadius: exports.globalTheme.BorderRadius,
+                fontWeight: exports.globalTheme.FontWeightBold,
+                textTransform: "none",
+                static: {
+                    bgColor: colors.greyscale1,
+                    borderColor: colors.greyscale1,
+                    color: colors.primary1,
+                    iconColor: colors.primary1,
+                },
+                hover: {
+                    bgColor: colors.greyscale1,
+                    borderColor: colors.greyscale1,
+                    color: colors.primary2,
+                    iconColor: colors.primary2,
+                },
+                clicked: {
+                    bgColor: colors.greyscale1,
+                    borderColor: colors.greyscale1,
+                    color: colors.primary3,
+                    iconColor: colors.primary3,
+                },
+                disabled: {
+                    bgColor: colors.greyscale1,
+                    borderColor: colors.greyscale1,
+                    color: colors.greyscale3,
+                    iconColor: colors.greyscale3,
+                },
+            },
+            secondary: {
+                borderRadius: exports.globalTheme.BorderRadius,
+                fontWeight: exports.globalTheme.FontWeightBold,
+                textTransform: "none",
+                static: {
+                    bgColor: colors.greyscale1,
+                    borderColor: colors.primary1,
+                    color: colors.primary1,
+                    iconColor: colors.primary1,
+                },
+                hover: {
+                    bgColor: colors.primary1,
+                    borderColor: colors.primary1,
+                    color: colors.greyscale1,
+                    iconColor: colors.greyscale1,
+                },
+                clicked: {
+                    bgColor: colors.primary2,
+                    borderColor: colors.primary2,
+                    color: colors.greyscale1,
+                    iconColor: colors.greyscale1,
+                },
+                disabled: {
+                    bgColor: colors.greyscale1,
+                    borderColor: colors.greyscale3,
+                    color: colors.greyscale3,
+                    iconColor: colors.greyscale3,
+                },
+            },
+            secondaryLight: {
+                borderRadius: exports.globalTheme.BorderRadius,
+                fontWeight: exports.globalTheme.FontWeightBold,
+                textTransform: "none",
+                static: {
+                    bgColor: "transparent",
+                    borderColor: colors.greyscale1,
+                    color: colors.greyscale1,
+                    iconColor: colors.greyscale1,
+                },
+                hover: {
+                    bgColor: colors.greyscale1,
+                    borderColor: colors.greyscale1,
+                    color: colors.primary1,
+                    iconColor: colors.primary1,
+                },
+                clicked: {
+                    bgColor: colors.primary2,
+                    borderColor: colors.greyscale1,
+                    color: colors.greyscale1,
+                    iconColor: colors.greyscale1,
+                },
+                disabled: {
+                    bgColor: "transparent",
+                    borderColor: colors.greyscale3,
+                    color: colors.greyscale3,
+                    iconColor: colors.greyscale3,
+                },
+            },
+            tertiary: {
+                borderRadius: exports.globalTheme.BorderRadius,
+                fontWeight: exports.globalTheme.FontWeightBold,
+                textTransform: "none",
+                static: {
+                    bgColor: colors.tertiary1,
+                    borderColor: colors.tertiary1,
+                    color: colors.greyscale5,
+                    iconColor: colors.greyscale5,
+                },
+                hover: {
+                    bgColor: colors.tertiary1,
+                    borderColor: colors.tertiary1,
+                    color: colors.primary1,
+                    iconColor: colors.primary1,
+                },
+                clicked: {
+                    bgColor: colors.tertiary1,
+                    borderColor: colors.primary1,
+                    color: colors.primary1,
+                    iconColor: colors.primary1,
+                },
+                disabled: {
+                    bgColor: colors.greyscale2,
+                    borderColor: colors.greyscale2,
+                    color: colors.greyscale3,
+                    iconColor: colors.greyscale1,
+                },
+            },
+            checkout: {
+                borderRadius: exports.globalTheme.BorderRadius,
+                fontWeight: exports.globalTheme.FontWeightBold,
+                iconColor: colors.greyscale5,
+                textTransform: "none",
+                static: {
+                    bgColor: colors.secondary1,
+                    borderColor: colors.secondary1,
+                    color: colors.greyscale1,
+                },
+                hover: {
+                    bgColor: colors.secondary2,
+                    borderColor: colors.secondary2,
+                    color: colors.greyscale1,
+                },
+                clicked: {
+                    bgColor: colors.secondary3,
+                    borderColor: colors.secondary3,
+                    color: colors.greyscale1,
+                },
+                disabled: {
+                    bgColor: colors.secondary4,
+                    borderColor: colors.secondary4,
+                    color: colors.greyscale1,
+                },
+            },
+            quantityStepper: {
+                borderColor: colors.greyscale3,
+                borderRadius: exports.globalTheme.BorderRadius,
+                textTransform: "none",
+                numericInput: {
+                    fontWeight: exports.globalTheme.FontWeightBold,
+                    fontSize: "0.875rem",
+                    letterSpacing: "normal",
+                    lineHeight: "1.1875rem",
+                    static: {
+                        bgColor: colors.greyscale1,
+                        color: colors.greyscale5,
+                    },
+                    focused: {
+                        bgColor: colors.primary5,
+                        color: colors.greyscale5,
+                    },
+                },
+                plusMinusButtons: {
+                    plusMinusIconBgColor: colors.greyscale1,
+                    plusMinusIconColor: colors.primary1,
+                },
+            },
+            coupon: {
+                borderRadius: exports.globalTheme.BorderRadius,
+                borderStyle: "dashed",
+                fontWeight: exports.globalTheme.FontWeightBold,
+                static: {
+                    bgColor: colors.greyscale1,
+                    borderColor: colors.greyscale3,
+                    color: colors.greyscale5,
+                    couponIconColor: colors.primary1,
+                },
+                hover: {
+                    bgColor: colors.greyscale1,
+                    borderColor: colors.greyscale3,
+                    color: colors.greyscale5,
+                    couponIconColor: colors.primary1,
+                },
+                clicked: {
+                    bgColor: colors.greyscale1,
+                    borderColor: colors.greyscale3,
+                    color: colors.greyscale5,
+                    couponIconColor: colors.primary1,
+                },
+                clipped: {
+                    bgColor: colors.greyscale1,
+                    borderColor: colors.greyscale3,
+                    color: colors.greyscale5,
+                    clippedIconColor: colors.success,
+                    couponIconColor: colors.greyscale5,
+                },
+            },
+            addToCart: {
+                borderRadius: exports.globalTheme.BorderRadius,
+                fontWeight: exports.globalTheme.FontWeightBold,
+                textTransform: "none",
+                static: {
+                    bgColor: colors.primary1,
+                    borderColor: colors.primary1,
+                    color: colors.greyscale1,
+                    iconColor: colors.secondary1,
+                },
+                hover: {
+                    bgColor: colors.primary2,
+                    borderColor: colors.primary1,
+                    color: colors.greyscale1,
+                    iconColor: colors.greyscale1,
+                },
+                clicked: {
+                    bgColor: colors.primary3,
+                    borderColor: colors.primary2,
+                    color: colors.greyscale1,
+                    iconColor: colors.greyscale1,
+                },
+                disabled: {
+                    bgColor: colors.primary4,
+                    borderColor: colors.primary4,
+                    color: colors.greyscale1,
+                    iconColor: colors.greyscale3,
+                },
+            },
+            pills: {
+                borderRadius: "500px",
+                textTransform: "none",
+                active: {
+                    fontWeight: exports.globalTheme.FontWeightBold,
+                    fontWeightHover: exports.globalTheme.FontWeightBold,
+                    color: colors.greyscale6,
+                    colorHover: colors.greyscale6,
+                    colorVisited: colors.greyscale6,
+                    backgroundColor: colors.primary5,
+                    borderColor: colors.primary1,
+                    borderColorSelected: colors.primary1,
+                    textDecoration: "none",
+                    textDecorationHover: "underline",
+                    padding: "4px 16px",
+                },
+                small: {
+                    fontWeight: exports.globalTheme.FontWeightBold,
+                    fontWeightHover: exports.globalTheme.FontWeight,
+                    color: colors.greyscale5,
+                    colorHover: colors.greyscale5,
+                    colorVisited: colors.greyscale5,
+                    backgroundColor: colors.primary5,
+                    borderColor: colors.primary5,
+                    borderColorSelected: colors.primary1,
+                    textDecoration: "none",
+                    textDecorationHover: "underline",
+                    padding: "2px 8px",
+                },
+                regular: {
+                    fontWeight: exports.globalTheme.FontWeight,
+                    fontWeightHover: exports.globalTheme.FontWeight,
+                    color: colors.primary1,
+                    colorHover: colors.primary1,
+                    colorVisited: colors.primary1,
+                    backgroundColor: colors.greyscale1,
+                    borderColor: colors.greyscale3,
+                    borderColorSelected: colors.primary1,
+                    textDecoration: "none",
+                    textDecorationHover: "underline",
+                    padding: "4px 16px",
+                },
+            },
+            facets: {
+                borderRadius: "500px",
+                textTransform: "none",
+                fontWeight: 400,
+                active: {
+                    iconColor: colors.greyscale6,
+                    fontWeight: exports.globalTheme.FontWeightBold,
+                    fontWeightHover: exports.globalTheme.FontWeightBold,
+                    color: colors.greyscale6,
+                    colorHover: colors.greyscale6,
+                    colorVisited: colors.greyscale6,
+                    backgroundColor: colors.primary5,
+                    borderColor: colors.primary1,
+                    borderColorSelected: colors.primary1,
+                    textDecoration: "none",
+                    textDecorationHover: "underline",
+                    padding: "4px 16px",
+                },
+                small: {
+                    iconColor: colors.greyscale6,
+                    fontWeight: exports.globalTheme.FontWeightBold,
+                    fontWeightHover: exports.globalTheme.FontWeight,
+                    color: colors.greyscale5,
+                    colorHover: colors.greyscale5,
+                    colorVisited: colors.greyscale5,
+                    backgroundColor: colors.primary5,
+                    borderColor: colors.primary5,
+                    borderColorSelected: colors.primary1,
+                    textDecoration: "none",
+                    textDecorationHover: "underline",
+                    padding: "2px 8px",
+                },
+                regular: {
+                    iconColor: colors.greyscale6,
+                    fontWeight: exports.globalTheme.FontWeight,
+                    fontWeightHover: exports.globalTheme.FontWeight,
+                    color: colors.primary1,
+                    colorHover: colors.greyscale5,
+                    colorVisited: colors.primary1,
+                    backgroundColor: colors.greyscale1,
+                    borderColor: colors.greyscale3,
+                    borderColorSelected: colors.primary1,
+                    textDecoration: "none",
+                    textDecorationHover: "underline",
+                    padding: "4px 16px",
+                },
+            },
+            sliderArrows: {
+                backgroundColor: colors.greyscale2,
+                sideBorderColor: colors.greyscale3,
+                iconColor: colors.greyscale4,
+            },
+            filterSort: {
+                color: colors.primary1,
+                hoverColor: colors.primary2,
+                borderRadius: exports.globalTheme.BorderRadius,
+            },
+            activeAddress: {
+                backgroundColor: colors.primary3,
+                borderColor: colors.primary3,
+            },
+            timeSlotPaginationDay: {
+                selected: {
+                    backgroundColor: colors.tertiary1,
+                },
+            },
+            paginationNumber: {
+                static: {
+                    color: colors.primary1,
+                    backgroundColor: "none",
+                },
+                hover: {
+                    color: colors.primary1,
+                    backgroundColor: colors.primary5,
+                },
+                disabled: {
+                    color: colors.greyscale1,
+                    backgroundColor: colors.primary1,
+                },
+                visited: {
+                    color: colors.primary1,
+                    backgroundColor: "none",
+                },
+            },
+        },
+        carousel: {
+            bannerBackgroundColor: colors.greyscale5,
+            carouselPagination: {
+                dotBackground: colors.greyscale3,
+                activeDotBackground: colors.primary1,
+                wrapperBackground: "transparent",
+                wrapperHeight: "24px",
+            },
+            carouselArrows: {
+                borderRadius: "50%",
+                backgroundColor: "rgba(146, 146, 146, 0.5)",
+                activeBackgroundColor: colors.greyscale4,
+                iconColor: colors.greyscale1,
+                buttonDimension: 56,
+            },
+        },
+        carouselComponent: {
+            carouselPagination: {
+                dotBackground: colors.greyscale3,
+                activeDotBackground: colors.primary1,
+                playBtnColor: colors.primary1,
+                dotsWrapperBackground: colors.greyscale1,
+                dotsWrapperBackgroundShadow: "".concat(colors.greyscale6, "05"),
+                dotsWrapperAccentShadow: "".concat(colors.primary3, "1a"),
+            },
+            scrollbarBackground: colors.greyscale3,
+            carouselArrows: {
+                backgroundColor: colors.greyscale1,
+                backgroundShadow: "".concat(colors.greyscale6, "0d"),
+                accentShadow: "".concat(colors.primary3, "26"),
+                iconColor: colors.primary1,
+                hover: {
+                    backgroundColor: colors.greyscale1,
+                    borderColor: colors.primary1,
+                    iconColor: colors.primary1,
+                },
+            },
+            viewAllProductsCard: {
+                textColor: colors.primary1,
+                iconColor: colors.greyscale1,
+                iconBackgroundColor: colors.primary1,
+                hover: {
+                    backgroundColor: colors.primary5,
+                    borderColor: colors.primary1,
+                    textColor: colors.primary2,
+                    iconColor: colors.greyscale1,
+                    iconBackgroundColor: colors.primary2,
+                },
+            },
+        },
+        modal: {
+            header: {
+                mobileBackgroundColor: colors.greyscale2,
+            },
+            storeIcon: {
+                bgColor: colors.tertiary1,
+                borderColor: colors.tertiary1,
+                color: colors.greyscale5,
+                hoverBGColor: colors.tertiary1,
+                hoverBorderColor: colors.tertiary1,
+                iconColor: colors.greyscale6,
+            },
+        },
+        selectedOption: {
+            bgColor: colors.successLight,
+        },
+        input: {
+            borderRadius: "4px",
+            static: {
+                bgColor: colors.greyscale1,
+                borderColor: colors.greyscale3,
+                color: colors.greyscale4,
+                placeholderColor: colors.greyscale4,
+            },
+            hover: {
+                bgColor: colors.greyscale1,
+                borderColor: colors.greyscale3,
+                color: colors.greyscale6,
+                placeholderColor: colors.greyscale4,
+            },
+            focus: {
+                bgColor: colors.tertiary1,
+                borderColor: colors.primary1,
+                color: colors.greyscale5,
+                placeholderColor: colors.greyscale5,
+            },
+            disabled: {
+                bgColor: colors.greyscale2,
+                borderColor: colors.greyscale3,
+                color: colors.greyscale4,
+                placeholderColor: colors.greyscale2,
+            },
+        },
+        dropdown: {
+            iconColor: colors.greyscale4,
+            static: {
+                bgColor: colors.greyscale1,
+                borderColor: colors.greyscale3,
+                color: colors.greyscale4,
+            },
+            hover: {
+                bgColor: colors.greyscale1,
+                borderColor: colors.greyscale3,
+                color: colors.greyscale5,
+            },
+            open: {
+                bgColor: colors.tertiary1,
+                borderColor: colors.primary1,
+                color: colors.greyscale4,
+            },
+            options: {
+                static: {
+                    bgColor: colors.greyscale1,
+                    borderColor: colors.greyscale3,
+                    color: colors.greyscale4,
+                },
+                hover: {
+                    bgColor: colors.tertiary1,
+                    borderColor: colors.greyscale3,
+                    color: colors.greyscale4,
+                },
+            },
+        },
+        productGrid: {
+            borderColor: colors.greyscale2,
+        },
+        cms: {
+            heading: {
+                color: colors.greyscale5,
+            },
+            subheading: {
+                color: colors.greyscale4,
+            },
+            bodyText: {
+                color: colors.greyscale5,
+            },
+        },
+        logoHeight: {
+            header: {
+                desktop: "34px",
+                tablet: "30px",
+                mobile: "26px",
+            },
+            modal: {
+                desktop: "34px",
+                tablet: "30px",
+                mobile: "30px",
+            },
+            content: {
+                desktop: "34px",
+                tablet: "30px",
+                mobile: "26px",
+            },
+        },
+        globalAnimations: {
+            confettiAnimation: {
+                successModals: {
+                    colors: [],
+                },
+            },
+        },
+        metadata: [
+            { name: "msapplication-TileColor", content: "#ffffff" },
+            {
+                name: "msapplication-TileImage",
+                content: "/favicons/ms-icon-144x144.png",
+            },
+            { name: "theme-color", content: "#ffffff" },
+        ],
+        scripts: {},
+    });
+};
+exports.default = DefaultThemeSFUI;
+exports.globalTheme = {
+    BorderRadius: "4px",
+    FontFamily: "Cabin, sans-serif",
+    baseFontSize: "16px",
+    FontWeight: 400,
+    FontWeightBold: 700,
+    bodyFontColor: "#111111",
+    HeadlineFontFamily: "Cabin, sans-serif",
+    HeadlineFontWeight: 700,
+    bodyBackgroundColor: "#f3f4f6",
+};
+exports.DefaultThemeColors = {
+    primary1: "#016abc",
+    primary2: "#004f8c",
+    primary3: "#002a4b",
+    primary4: "#80b4dd",
+    primary5: "#e6f0f8",
+    secondary1: "#d83A22",
+    secondary2: "#aa2003",
+    secondary3: "#5b1102",
+    secondary4: "#f19582",
+    secondary5: "#fceae6",
+    tertiary1: "#e6f0f8",
+    tertiary2: "#fcefe6",
+    tertiary3: "#09448A",
+    tertiary4: "",
+    tertiary5: "",
+    promotion1: "#bc3e31",
+    promotion2: "#09448A",
+    success: "#218820",
+    successDark: "#2e7c49",
+    successLight: "#e6f6ec",
+    warn: "#fcc260",
+    warnDark: "#8f7344",
+    warnLight: "#fff6e6",
+    alert: "#bc3e31",
+    alertDark: "#8c2e24",
+    alertLight: "#ffe5e2",
+    greyscale1: "#ffffff",
+    greyscale2: "#f3f4f6",
+    greyscale3: "#ccced0",
+    greyscale4: "#71777b",
+    greyscale5: "#40464b",
+    greyscale6: "#111111",
+    greyscale7: "#31363A",
+};