@trafilea/afrodita-components 5.0.0-beta.99 → 5.0.0

package/build/theme/revel.theme.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+import { ComponentSize } from 'src/types/enums';
 
 declare type Theme = {
     name: string;
@@ -92,6 +93,10 @@ declare type ThemeComponent = {
         border: string;
         borderRadius: string;
         fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        minWidth: string;
+        minHeight: string;
         size: {
             small: {
                 fontSize: string;
@@ -176,6 +181,12 @@ declare type ThemeComponent = {
             border: string;
             color: string;
         };
+        noStock: {
+            fontWeight: number;
+            background: string;
+            border: string;
+            color: string;
+        };
         disabled: {
             border: string;
         };
@@ -229,10 +240,13 @@ declare type ThemeComponent = {
     };
     card: {
         borderRadius: string;
+        backgroundColor: string;
     };
     radio: {
         borderColor: string;
         background: string;
+        textSize: string;
+        lineHeight: string;
         size: {
             small: {
                 borderWidth: string;
@@ -261,6 +275,7 @@ declare type ThemeComponent = {
         };
     };
     label: {
+        color: string;
         fontSize: {
             small: string;
             medium: string;
@@ -374,6 +389,7 @@ declare type ThemeComponent = {
         options: {
             borderColor: string;
             color: string;
+            borderRadius: string;
         };
     };
     modal: {
@@ -387,6 +403,168 @@ declare type ThemeComponent = {
         selectedContrast: string;
         tagColor: string;
     };
+    slideNavigation: {
+        slideDots: {
+            unselectedDotColor: string;
+            selectedDotColor: string;
+            dotsOpacity: number;
+        };
+    };
+    beforeAfter: {
+        size: {
+            small: {
+                image: {
+                    minHeight: string;
+                    minWidth: string;
+                    mobile: {
+                        minHeight: string;
+                        minWidth: string;
+                    };
+                };
+                imageContainer: {
+                    maxWidth: string;
+                    padding: string;
+                    mobile: {
+                        maxWidth: string;
+                    };
+                };
+                userInfoText: {
+                    fontSize: string;
+                    mobile: {
+                        fontSize: string;
+                    };
+                };
+            };
+            medium: {
+                image: {
+                    minHeight: string;
+                    minWidth: string;
+                    mobile: {
+                        minHeight: string;
+                        minWidth: string;
+                    };
+                };
+                imageContainer: {
+                    maxWidth: string;
+                    padding: string;
+                    mobile: {
+                        maxWidth: string;
+                    };
+                };
+                userInfoText: {
+                    fontSize: string;
+                    mobile: {
+                        fontSize: string;
+                    };
+                };
+            };
+            large: {
+                image: {
+                    minHeight: string;
+                    minWidth: string;
+                    mobile: {
+                        minHeight: string;
+                        minWidth: string;
+                    };
+                };
+                imageContainer: {
+                    maxWidth: string;
+                    padding: string;
+                    mobile: {
+                        maxWidth: string;
+                    };
+                };
+                userInfoText: {
+                    fontSize: string;
+                    mobile: {
+                        fontSize: string;
+                    };
+                };
+            };
+        };
+    };
+    total: {
+        basicTotal: {
+            amount: {
+                color: string;
+                fontSize: string;
+            };
+            currency: {
+                color: string;
+                fontSize: string;
+                lineHeight: string;
+                alignSelf?: string;
+            };
+            savings: {
+                textFontSize: string;
+                textLineHeight: string;
+                amountFontSize: string;
+                amountFontWeight: number;
+                amountLineHeight: string;
+                color?: string;
+            };
+        };
+    };
+    subTotal: {
+        basicSubTotal: {
+            family: string;
+            size: string;
+            weight: number;
+            lineHeight: string;
+            color: string;
+        };
+    };
+    pricing: {
+        priceLabel: {
+            price: {
+                size: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+                originalPriceColor: string;
+                actualPriceColor: string;
+            };
+        };
+    };
+    orderSummary: {
+        headingTextAlign: string;
+        backgroundColor: string;
+        maxWidth?: string;
+        padding?: string;
+        borderRadius?: string;
+        onMobile: {
+            maxWidth?: string;
+            padding?: string;
+            backgroundColor?: string;
+        };
+    };
+    expressCheckout: {
+        fontFamily: string;
+        fontWeight: number;
+        lineHeight: string;
+    };
+    copyrightText: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        color: string;
+    };
+    textButton: {
+        fontWeight: number;
+        lineHeight: string;
+    };
+    deliveryDetails: {
+        note: {
+            accentColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        SectionDetails?: {
+            marginLeft: string;
+        };
+    };
+    text: {
+        orderHeader: {
+            color: string;
+        };
+    };
 };
 declare type ThemeTypography = {
     config: {
@@ -413,6 +591,11 @@ declare type ThemeAssets = {
     images: {
         favicon: string;
         logo: string;
+        logoSize?: {
+            width: string;
+            height: string;
+        };
+        logoMobile?: string;
     };
     [key: string]: any;
 };

package/build/theme/revel.theme.js

@@ -26,6 +26,32 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+var CardSectionType;
+(function (CardSectionType) {
+    CardSectionType[CardSectionType["Header"] = 0] = "Header";
+    CardSectionType[CardSectionType["Footer"] = 1] = "Footer";
+})(CardSectionType || (CardSectionType = {}));
+var ComponentSize;
+(function (ComponentSize) {
+    ComponentSize["Large"] = "large";
+    ComponentSize["Medium"] = "medium";
+    ComponentSize["Small"] = "small";
+    ComponentSize["XSmall"] = "xsmall";
+})(ComponentSize || (ComponentSize = {}));
+var ComponentPosition;
+(function (ComponentPosition) {
+    ComponentPosition[ComponentPosition["Top"] = 0] = "Top";
+    ComponentPosition[ComponentPosition["Bottom"] = 1] = "Bottom";
+    ComponentPosition[ComponentPosition["Left"] = 2] = "Left";
+    ComponentPosition[ComponentPosition["Right"] = 3] = "Right";
+})(ComponentPosition || (ComponentPosition = {}));
+var InputValidationType;
+(function (InputValidationType) {
+    InputValidationType[InputValidationType["Error"] = 0] = "Error";
+    InputValidationType[InputValidationType["Valid"] = 1] = "Valid";
+    InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
+})(InputValidationType || (InputValidationType = {}));
+
 var revel = {
     name: 'Revel',
     fontSizes: [10, 12, 14, 16, 18, 20, 24, 30, 36, 42, 52, 60, 68, 72, 76],
@@ -194,25 +220,29 @@ var revel = {
     component: {
         button: {
             border: 'none',
-            borderRadius: '1.5rem',
+            borderRadius: '2.5rem',
             fontWeight: 700,
+            lineHeight: '20px',
+            letterSpacing: '0.2em',
+            minWidth: '300px',
+            minHeight: '48px',
             size: {
                 small: {
-                    fontSize: '1rem',
-                    padding: '0.75rem 3rem',
+                    fontSize: '0.75rem',
+                    padding: '0.25rem 1rem',
                 },
                 medium: {
                     fontSize: '0.875rem',
-                    padding: '0.5rem 2.5rem',
+                    padding: '0.5rem 1.5rem',
                 },
                 large: {
-                    fontSize: '0.75rem',
-                    padding: '0.25rem 2rem',
+                    fontSize: '1rem',
+                    padding: '0.75rem 2rem',
                 },
             },
             primary: {
                 active: {
-                    backgroundColor: '--colors-pallete-primary-color',
+                    backgroundColor: '--component-stars-element-color',
                     color: '--colors-pallete-primary-contrast',
                 },
                 hover: {
@@ -235,7 +265,7 @@ var revel = {
             background: '--colors-shades-white-color',
             color: '--colors-shades-700-color',
             placeholderColor: '--colors-shades-250-color',
-            borderRadius: '0.5rem',
+            borderRadius: '2.5rem',
             fontSize: '1rem',
             fontWeight: 400,
             padding: '0.75rem 1rem',
@@ -246,7 +276,7 @@ var revel = {
         },
         inputPlaceholder: {
             fontSize: '0.875rem',
-            padding: '1.125rem 0.9375rem 0 0.9375rem',
+            padding: '1.125rem 0.9375rem 0.3rem 0.9375rem',
             focusBorder: '0.09375rem solid #1990c6',
         },
         inputCustom: {
@@ -280,6 +310,12 @@ var revel = {
                 border: 'none',
                 color: '--colors-shades-white-color',
             },
+            noStock: {
+                fontWeight: 600,
+                background: 'transparent',
+                border: '1px solid #3a3a3a4d',
+                color: '#3a3a3a4d',
+            },
             disabled: {
                 border: 'none',
             },
@@ -332,11 +368,14 @@ var revel = {
             },
         },
         card: {
-            borderRadius: '0.5rem',
+            borderRadius: '1.25rem',
+            backgroundColor: '#F5DECE',
         },
         radio: {
             borderColor: '--colors-shades-700-color',
             background: '--colors-shades-white-color',
+            textSize: '14px',
+            lineHeight: '22px',
             size: {
                 large: {
                     borderWidth: '0.094rem',
@@ -365,6 +404,7 @@ var revel = {
             },
         },
         label: {
+            color: '--colors-shades-400-color',
             fontSize: {
                 small: '0.75rem',
                 medium: '0.75rem',
@@ -468,7 +508,7 @@ var revel = {
             },
         },
         dropdown: {
-            borderRadius: '0.5rem',
+            borderRadius: '2.5rem',
             fontSize: '0.875rem',
             fontWeight: 600,
             lineHeight: '1.125rem',
@@ -478,6 +518,7 @@ var revel = {
             options: {
                 borderColor: '--colors-shades-700-color',
                 color: '--colors-shades-700-color',
+                borderRadius: '0.5rem',
             },
         },
         modal: {
@@ -491,6 +532,167 @@ var revel = {
             selectedContrast: '--colors-semantic-positive-contrast',
             tagColor: '--colors-semantic-attention-color',
         },
+        slideNavigation: {
+            slideDots: {
+                unselectedDotColor: 'transparent',
+                selectedDotColor: '--colors-shades-700-color',
+                dotsOpacity: 0.9,
+            },
+        },
+        beforeAfter: {
+            size: {
+                small: {
+                    image: {
+                        minHeight: 'auto',
+                        minWidth: '92px',
+                        mobile: {
+                            minHeight: '138px',
+                            minWidth: '128px',
+                        },
+                    },
+                    imageContainer: {
+                        maxWidth: '214px',
+                        padding: '12px',
+                        mobile: {
+                            maxWidth: '286px',
+                        },
+                    },
+                    userInfoText: {
+                        fontSize: '12px',
+                        mobile: {
+                            fontSize: '12px',
+                        },
+                    },
+                },
+                medium: {
+                    image: {
+                        minHeight: '200px',
+                        minWidth: '187px',
+                        mobile: {
+                            minHeight: '157px',
+                            minWidth: '150px',
+                        },
+                    },
+                    imageContainer: {
+                        maxWidth: '427px',
+                        padding: '18px',
+                        mobile: {
+                            maxWidth: '342px',
+                        },
+                    },
+                    userInfoText: {
+                        fontSize: '18px',
+                        mobile: {
+                            fontSize: '14px',
+                        },
+                    },
+                },
+                large: {
+                    image: {
+                        minHeight: '200px',
+                        minWidth: '187px',
+                        mobile: {
+                            minHeight: '157px',
+                            minWidth: '150px',
+                        },
+                    },
+                    imageContainer: {
+                        maxWidth: '427px',
+                        padding: '18px',
+                        mobile: {
+                            maxWidth: '342px',
+                        },
+                    },
+                    userInfoText: {
+                        fontSize: '18px',
+                        mobile: {
+                            fontSize: '14px',
+                        },
+                    },
+                },
+            },
+        },
+        total: {
+            basicTotal: {
+                amount: {
+                    color: '--colors-pallete-secondary-color',
+                    fontSize: '24px',
+                },
+                currency: {
+                    color: '#A6A6A6',
+                    fontSize: '16px',
+                    lineHeight: '24px',
+                    alignSelf: 'flex-end',
+                },
+                savings: {
+                    textFontSize: '14px',
+                    textLineHeight: '22px',
+                    amountFontSize: '18px',
+                    amountFontWeight: 700,
+                    amountLineHeight: '20px',
+                    color: '--colors-semantic-positive-color',
+                },
+            },
+        },
+        subTotal: {
+            basicSubTotal: {
+                family: 'Jost',
+                size: '14px',
+                weight: 700,
+                lineHeight: '20px',
+                color: '--colors-pallete-secondary-color',
+            },
+        },
+        pricing: {
+            priceLabel: {
+                price: {
+                    size: ComponentSize.Medium,
+                    originalPriceColor: '--colors-shades-400-color',
+                    actualPriceColor: '--colors-semantic-urgent-color',
+                },
+            },
+        },
+        orderSummary: {
+            headingTextAlign: 'center',
+            backgroundColor: '--colors-shades-10-color',
+            padding: '20px',
+            borderRadius: '--radius-regular',
+            maxWidth: '',
+            onMobile: {
+                maxWidth: '100%',
+                padding: '15px',
+            },
+        },
+        expressCheckout: {
+            fontFamily: 'Jost',
+            fontWeight: 600,
+            lineHeight: '22px',
+        },
+        copyrightText: {
+            fontSize: '14px',
+            fontWeight: 400,
+            lineHeight: '22px',
+            color: '--colors-shades-400-color',
+        },
+        textButton: {
+            fontWeight: 600,
+            lineHeight: '22px',
+        },
+        deliveryDetails: {
+            note: {
+                accentColor: '--colors-semantic-urgent-color',
+                color: '--colors-text-color',
+                backgroundColor: '#F5DECE',
+            },
+            SectionDetails: {
+                marginLeft: '1.813rem',
+            },
+        },
+        text: {
+            orderHeader: {
+                color: '--colors-shades-650-color',
+            },
+        },
     },
     typography: {
         config: {
@@ -544,7 +746,7 @@ var revel = {
             },
             heading6: {
                 fontSize: 18,
-                lineHeight: '28px',
+                lineHeight: '22px',
             },
             'body-regular': {
                 fontSize: 16,
@@ -620,99 +822,104 @@ var revel = {
         config: [
             {
                 family: 'Jost',
-                src: 'Jost-Regular.otf',
+                src: 'Jost400Book.otf',
                 weight: 400,
             },
             {
                 family: 'Jost',
-                src: 'Jost-SemiBold.otf',
-                weight: 600,
+                src: 'Jost100Hairline.otf',
+                weight: 100,
             },
             {
                 family: 'Jost',
-                src: 'Jost-Bold.otf',
-                weight: 700,
+                src: 'Jost200Thin.otf',
+                weight: 200,
             },
             {
                 family: 'Jost',
-                src: 'Jost-SemiBold.otf',
-                weight: 600,
-                stretch: 'condensed',
+                src: 'Jost300Light.otf',
+                weight: 300,
             },
             {
                 family: 'Jost',
-                src: 'Jost-SemiBoldItalic.otf',
-                weight: 600,
-                stretch: 'condensed',
-                style: 'italic',
+                src: 'Jost500Medium.otf',
+                weight: 500,
             },
             {
                 family: 'Jost',
-                src: 'Jost-SemiBoldItalic.otf',
+                src: 'Jost600Semi.otf',
                 weight: 600,
-                style: 'italic',
             },
             {
                 family: 'Jost',
-                src: 'Jost-Medium.otf',
-                weight: 500,
-                stretch: 'condensed',
+                src: 'Jost700Bold.otf',
+                weight: 700,
             },
             {
                 family: 'Jost',
-                src: 'Jost-MediumItalic.otf',
-                weight: 500,
-                style: 'italic',
+                src: 'Jost800Heavy.otf',
+                weight: 800,
                 stretch: 'condensed',
             },
             {
                 family: 'Jost',
-                src: 'Jost-ExtraLight.otf',
-                weight: 200,
+                src: 'Jost900Black.otf',
+                weight: 900,
                 stretch: 'condensed',
             },
             {
                 family: 'Jost',
-                src: 'Jost-ExtraLightItalic.otf',
+                src: 'Jost100HairlineItalic.otf',
+                weight: 100,
+                style: 'italic',
+            },
+            {
+                family: 'Jost',
+                src: 'Jost200ThinItalic.otf',
                 weight: 200,
                 style: 'italic',
-                stretch: 'condensed',
             },
             {
                 family: 'Jost',
-                src: 'Jost-ExtraBold.otf',
-                weight: 800,
+                src: 'Jost300LightItalic.otf',
+                weight: 300,
+                style: 'italic',
             },
             {
                 family: 'Jost',
-                src: 'Jost-ExtraBold.otf',
-                weight: 800,
-                stretch: 'condensed',
+                src: 'Jost400BookItalic.otf',
+                weight: 400,
+                style: 'italic',
             },
             {
                 family: 'Jost',
-                src: 'Jost-ExtraBoldItalic.otf',
-                weight: 800,
+                src: 'Jost500MediumItalic.otf',
+                weight: 500,
                 style: 'italic',
-                stretch: 'condensed',
             },
             {
                 family: 'Jost',
-                src: 'Jost-Black.otf',
-                weight: 900,
+                src: 'Jost600SemiItalic.otf',
+                weight: 600,
+                style: 'italic',
             },
             {
                 family: 'Jost',
-                src: 'Jost-Black.otf',
-                weight: 900,
-                stretch: 'condensed',
+                src: 'Jost700BoldItalic.otf',
+                weight: 700,
+                style: 'italic',
+            },
+            {
+                family: 'Jost',
+                src: 'Jost800HeavyItalic.otf',
+                weight: 800,
+                style: 'italic',
             },
             {
                 family: 'Jost',
-                src: 'Jost-BlackItalic.otf',
+                src: 'Jost900BlackItalic.otf',
                 weight: 900,
                 style: 'italic',
-                stretch: 'condensed',
             },
             {
                 family: 'Georgia',
@@ -730,6 +937,11 @@ var revel = {
         images: {
             favicon: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/revel/revel_favicon.png',
             logo: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/revel/revelbeauty.svg',
+            logoSize: {
+                width: '342',
+                height: '22',
+            },
+            logoMobile: 'https://cdn11.bigcommerce.com/s-fjtlubkm6t/images/stencil/original/image-manager/mobilelogo.png?t=1667205066&_gl=1*1rjjnv8*_ga*MTM1MjY2Nzk4OS4xNjYzMjQ5ODIy*_ga_WS2VZYPC6G*MTY2NzIwNDk0OS41Ni4xLjE2NjcyMDUwNTguMTQuMC4w',
         },
     },
 };