@trafilea/afrodita-components 5.0.0 → 6.0.0

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

@@ -1,5 +1,11 @@
 import { CSSProperties } from 'react';
-import { ComponentSize } from 'src/types/enums';
+
+declare enum ComponentSize {
+    Large = "large",
+    Medium = "medium",
+    Small = "small",
+    XSmall = "xsmall"
+}
 
 declare type Theme = {
     name: string;
@@ -22,6 +28,7 @@ declare type Theme = {
 };
 declare type ThemeBreakpoints = {
     mobile: number;
+    tablet?: number;
     desktop: number;
 };
 declare type ThemeBasicPallete = {
@@ -29,7 +36,7 @@ declare type ThemeBasicPallete = {
     contrast: string;
 };
 declare type ThemeColorPallete = ThemeBasicPallete & {
-    soft: ThemeBasicPallete;
+    soft?: ThemeBasicPallete;
 };
 declare type ThemeColorPrimaryPallete = ThemeColorPallete & {
     20: ThemeColorPallete;
@@ -41,6 +48,7 @@ declare type ThemeColors = {
     pallete: {
         primary: ThemeColorPrimaryPallete;
         secondary: ThemeColorPrimaryPallete;
+        tertiary?: ThemeColorPrimaryPallete;
     } & Partial<Record<string, ThemeColorPallete>>;
     shades: {
         black: ThemeBasicPallete;
@@ -50,6 +58,7 @@ declare type ThemeColors = {
         50: ThemeBasicPallete;
         100: ThemeBasicPallete;
         150: ThemeBasicPallete;
+        175: ThemeBasicPallete;
         200: ThemeBasicPallete;
         250: ThemeBasicPallete;
         300: ThemeBasicPallete;
@@ -78,6 +87,8 @@ declare type ThemeColors = {
         color: string;
         disabled: string;
         highlight: string;
+        shadow?: string;
+        isChecked?: string;
     };
     background: {
         color: string;
@@ -384,12 +395,20 @@ declare type ThemeComponent = {
         fontWeight: number;
         lineHeight: string;
         padding: string;
+        optionPadding: string;
         color: string;
         fill: string;
+        borderWidth?: string;
         options: {
             borderColor: string;
             color: string;
             borderRadius: string;
+            borderRadiusV2?: string;
+            backgroundColor?: string;
+        };
+        optionsWrapper: {
+            borderRadius: string;
+            overflow: string;
         };
     };
     modal: {
@@ -496,11 +515,7 @@ declare type ThemeComponent = {
                 alignSelf?: string;
             };
             savings: {
-                textFontSize: string;
-                textLineHeight: string;
-                amountFontSize: string;
                 amountFontWeight: number;
-                amountLineHeight: string;
                 color?: string;
             };
         };
@@ -520,15 +535,35 @@ declare type ThemeComponent = {
                 size: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
                 originalPriceColor: string;
                 actualPriceColor: string;
+                defaultFontSize?: {
+                    large: string;
+                    medium: string;
+                    small: string;
+                };
+                smallFontSize?: {
+                    large: string;
+                    medium: string;
+                    small: string;
+                };
+                largeFontSize?: {
+                    large: string;
+                    medium: string;
+                    small: string;
+                };
+                discountFontSize?: {
+                    large: string;
+                    medium: string;
+                    small: string;
+                };
             };
         };
     };
     orderSummary: {
         headingTextAlign: string;
-        backgroundColor: string;
-        maxWidth?: string;
+        backgroundColor?: string;
         padding?: string;
         borderRadius?: string;
+        maxWidth?: string;
         onMobile: {
             maxWidth?: string;
             padding?: string;
@@ -536,9 +571,9 @@ declare type ThemeComponent = {
         };
     };
     expressCheckout: {
-        fontFamily: string;
-        fontWeight: number;
-        lineHeight: string;
+        button: {
+            borderRadius: string;
+        };
     };
     copyrightText: {
         fontSize: string;
@@ -546,24 +581,126 @@ declare type ThemeComponent = {
         lineHeight: string;
         color: string;
     };
+    thankyouFooterText: {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
     textButton: {
         fontWeight: number;
         lineHeight: string;
     };
     deliveryDetails: {
+        title: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
         note: {
             accentColor: string;
             color: string;
             backgroundColor: string;
         };
-        SectionDetails?: {
-            marginLeft: string;
+        sectionTitle: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        sectionDetails: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            marginLeft?: string;
         };
     };
     text: {
         orderHeader: {
             color: string;
         };
+        fitGuarantee: {
+            titleFontSize?: string;
+            titleFontWeight?: number | string;
+            fontWeight: number | string;
+        };
+        offerBanner: {
+            borderRadius: string;
+        };
+    };
+    orderBar: {
+        backgroundColor: string;
+        fontColor: string;
+    };
+    banner: {
+        outlineColor: string;
+        filledColor: string;
+        fontColor: string;
+    };
+    offerTitleText: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+    };
+    linePrice: {
+        color: string;
+        badge: {
+            color: string;
+            borderRadius: string;
+        };
+    };
+    divider: {
+        color: string;
+    };
+    checkout: {
+        paymentInformation: {
+            borderRadius?: string;
+        };
+        creditCardSection: {
+            borderRadius?: string;
+        };
+    };
+    upsell: {
+        banner: {
+            outlined: {
+                color?: string;
+            };
+        };
+        price: {
+            colors: {
+                regular: string;
+                deal: string;
+                each: string;
+                badgeBG: string;
+                badgeColor: string;
+            };
+        };
+        hurryTimeCard: {
+            backgroundColor: string;
+        };
+        guaranteedFit?: {
+            backgroundColor: string;
+        };
+    };
+    thankyou: {
+        orderBanner?: {
+            text: {
+                left: string;
+            };
+        };
+        emailSection: {
+            backgroundColor?: string;
+        };
+        socialIcon: {
+            color?: string;
+        };
+        orderId: {
+            color: string;
+        };
+    };
+    hurryUp: {
+        borderRadius?: string;
+    };
+    qtyPicker: {
+        borderRadius: string;
     };
 };
 declare type ThemeTypography = {
@@ -588,6 +725,7 @@ declare type ThemeFonts = {
     }>;
 };
 declare type ThemeAssets = {
+    cdn: string;
     images: {
         favicon: string;
         logo: string;
@@ -596,6 +734,21 @@ declare type ThemeAssets = {
             height: string;
         };
         logoMobile?: string;
+        checkoutLogo?: {
+            url: string;
+            width: string;
+            height: string;
+        };
+        upsellLogo?: {
+            url: string;
+            width: string;
+            height: string;
+        };
+        tyLogo?: {
+            url: string;
+            width: string;
+            height: string;
+        };
     };
     [key: string]: any;
 };

package/build/theme/revel.theme.js

@@ -72,14 +72,14 @@ var revel = {
         pallete: {
             primary: {
                 color: '#EFD6D2',
-                contrast: '--colors-shades-700-color',
+                contrast: '--colors-shades-10-color',
                 soft: {
                     color: '#fcd9d1',
                     contrast: '--colors-shades-700-color',
                 },
                 20: {
                     color: '#FCF7F6',
-                    contrast: '--colors-shades-700-color',
+                    contrast: '--colors-shades-10-color',
                     soft: {
                         color: '#fef7f6',
                         contrast: '--colors-shades-700-color',
@@ -87,7 +87,7 @@ var revel = {
                 },
                 40: {
                     color: '#F9EFED',
-                    contrast: '--colors-shades-700-color',
+                    contrast: '--colors-shades-10-color',
                     soft: {
                         color: '#fef0ed',
                         contrast: '--colors-shades-700-color',
@@ -95,7 +95,7 @@ var revel = {
                 },
                 60: {
                     color: '#F5E6E4',
-                    contrast: '--colors-shades-700-color',
+                    contrast: '--colors-shades-10-color',
                     soft: {
                         color: '#fde8e3',
                         contrast: '--colors-shades-700-color',
@@ -103,7 +103,7 @@ var revel = {
                 },
                 80: {
                     color: '#F2DEDB',
-                    contrast: '--colors-shades-700-color',
+                    contrast: '--colors-shades-10-color',
                     soft: {
                         color: '#fde1da',
                         contrast: '--colors-shades-700-color',
@@ -170,6 +170,26 @@ var revel = {
                     contrast: '--colors-shades-700-color',
                 },
             },
+            softpink: {
+                color: '#E3B7B2',
+                contrast: '--colors-shades-10-color',
+            },
+            earth: {
+                color: '#E7B8A6',
+                contrast: '--colors-shades-10-color',
+            },
+            salmon: {
+                color: '#DA918A',
+                contrast: '--colors-shades-10-color',
+            },
+            softocean: {
+                color: '#B5D6D0',
+                contrast: '--colors-shades-10-color',
+            },
+            darkcreamy: {
+                color: '#F5DECE',
+                contrast: '--colors-shades-10-color',
+            },
         },
         shades: {
             black: { color: '#000', contrast: '--colors-shades-white-color' },
@@ -179,6 +199,7 @@ var revel = {
             50: { color: '#efefef', contrast: '--colors-shades-700-color' },
             100: { color: '#e5e5e5', contrast: '--colors-shades-700-color' },
             150: { color: '#d1d1d1', contrast: '--colors-shades-700-color' },
+            175: { color: '#c4c4c4', contrast: '--colors-shades-700-color' },
             200: { color: '#bbbbbb', contrast: '--colors-shades-700-color' },
             250: { color: '#a6a6a6', contrast: '--colors-shades-700-color' },
             300: { color: '#9e9e9e', contrast: '--colors-shades-700-color' },
@@ -242,7 +263,7 @@ var revel = {
             },
             primary: {
                 active: {
-                    backgroundColor: '--component-stars-element-color',
+                    backgroundColor: '#DA918A',
                     color: '--colors-pallete-primary-contrast',
                 },
                 hover: {
@@ -513,12 +534,18 @@ var revel = {
             fontWeight: 600,
             lineHeight: '1.125rem',
             padding: '0.5rem 0.75rem 0.5rem 1rem',
+            optionPadding: '0.75rem 1rem 0.625rem 0.75rem',
             color: '--colors-shades-700-color',
             fill: '--colors-shades-700-color',
             options: {
                 borderColor: '--colors-shades-700-color',
                 color: '--colors-shades-700-color',
                 borderRadius: '0.5rem',
+                borderRadiusV2: '0.5rem',
+            },
+            optionsWrapper: {
+                borderRadius: 'unset',
+                overflow: 'unset',
             },
         },
         modal: {
@@ -625,11 +652,7 @@ var revel = {
                     alignSelf: 'flex-end',
                 },
                 savings: {
-                    textFontSize: '14px',
-                    textLineHeight: '22px',
-                    amountFontSize: '18px',
                     amountFontWeight: 700,
-                    amountLineHeight: '20px',
                     color: '--colors-semantic-positive-color',
                 },
             },
@@ -657,16 +680,16 @@ var revel = {
             backgroundColor: '--colors-shades-10-color',
             padding: '20px',
             borderRadius: '--radius-regular',
-            maxWidth: '',
+            maxWidth: '100%',
             onMobile: {
                 maxWidth: '100%',
                 padding: '15px',
             },
         },
         expressCheckout: {
-            fontFamily: 'Jost',
-            fontWeight: 600,
-            lineHeight: '22px',
+            button: {
+                borderRadius: '4px',
+            },
         },
         copyrightText: {
             fontSize: '14px',
@@ -674,24 +697,116 @@ var revel = {
             lineHeight: '22px',
             color: '--colors-shades-400-color',
         },
+        thankyouFooterText: {
+            fontSize: '14px',
+            fontWeight: '700',
+            lineHeight: '20px',
+        },
         textButton: {
             fontWeight: 600,
             lineHeight: '22px',
         },
         deliveryDetails: {
+            title: {
+                fontSize: '1.25rem',
+                lineHeight: '1.75rem',
+                fontWeight: 600,
+            },
+            sectionTitle: {
+                fontSize: '1rem',
+                lineHeight: '1.25rem',
+                fontWeight: 600,
+            },
             note: {
                 accentColor: '--colors-semantic-urgent-color',
                 color: '--colors-text-color',
                 backgroundColor: '#F5DECE',
             },
-            SectionDetails: {
+            sectionDetails: {
                 marginLeft: '1.813rem',
+                fontSize: '1rem',
+                lineHeight: '1.25rem',
+                fontWeight: 400,
             },
         },
         text: {
             orderHeader: {
                 color: '--colors-shades-650-color',
             },
+            fitGuarantee: {
+                fontWeight: 'unset',
+            },
+            offerBanner: {
+                borderRadius: '0.125rem',
+            },
+        },
+        orderBar: {
+            backgroundColor: '#FAF7F2',
+            fontColor: '--colors-shades-700-color',
+        },
+        banner: {
+            outlineColor: '--colors-semantic-positive-color',
+            filledColor: '--colors-semantic-positive-color',
+            fontColor: '--colors-shades-white-color',
+        },
+        offerTitleText: {
+            size: '18px',
+            weight: 700,
+            lineHeight: '1.7rem',
+        },
+        linePrice: {
+            color: '--colors-semantic-urgent-color',
+            badge: {
+                color: '--colors-semantic-urgent-color',
+                borderRadius: '8px',
+            },
+        },
+        divider: {
+            color: '--colors-pallete-secondary-soft-color',
+        },
+        checkout: {
+            paymentInformation: {
+                borderRadius: '8px',
+            },
+            creditCardSection: {
+                borderRadius: '8px',
+            },
+        },
+        upsell: {
+            banner: {
+                outlined: {
+                    color: '--colors-semantic-positive-color',
+                },
+            },
+            price: {
+                colors: {
+                    regular: '--colors-shades-400-color',
+                    deal: '#DA918A',
+                    each: '--colors-shades-700-color',
+                    badgeBG: '#DA918A',
+                    badgeColor: '--colors-shades-white-color',
+                },
+            },
+            hurryTimeCard: {
+                backgroundColor: '#EFD6D2',
+            },
+        },
+        thankyou: {
+            emailSection: {
+                backgroundColor: '#F5DECE',
+            },
+            socialIcon: {
+                color: '#DA918A',
+            },
+            orderId: {
+                color: '--colors-shades-700-color',
+            },
+        },
+        hurryUp: {
+            borderRadius: 'unset',
+        },
+        qtyPicker: {
+            borderRadius: '0.5rem',
         },
     },
     typography: {
@@ -748,6 +863,14 @@ var revel = {
                 fontSize: 18,
                 lineHeight: '22px',
             },
+            heading7: {
+                fontSize: 20,
+                lineHeight: '28px',
+            },
+            heading8: {
+                fontSize: 18,
+                lineHeight: '28px',
+            },
             'body-regular': {
                 fontSize: 16,
                 lineHeight: '24px',
@@ -934,14 +1057,25 @@ var revel = {
         ],
     },
     assets: {
+        cdn: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@1.3.1/common',
         images: {
-            favicon: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/revel/revel_favicon.png',
+            favicon: 'https://cdn11.bigcommerce.com/s-fjtlubkm6t/images/stencil/original/image-manager/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',
+            logoMobile: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/revel/revelbeauty_logo_mobile.svg',
+            upsellLogo: {
+                url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/revel/revelbeauty.svg',
+                width: '210',
+                height: '60',
+            },
+            tyLogo: {
+                url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/revel/revelbeauty.svg',
+                width: '410',
+                height: '28',
+            },
         },
     },
 };