@trafilea/afrodita-components 5.0.0 → 6.0.1

package/build/theme/shapermint.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/shapermint.theme.js

@@ -179,6 +179,7 @@ var shapermint = {
             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' },
@@ -264,9 +265,9 @@ var shapermint = {
         input: {
             background: '--colors-shades-white-color',
             color: '--colors-shades-700-color',
-            placeholderColor: '--colors-shades-250-color',
+            placeholderColor: '--colors-shades-400-color',
             borderRadius: '0.5rem',
-            fontSize: '1rem',
+            fontSize: '14px',
             fontWeight: 400,
             padding: '0.75rem 1rem',
             lineHeight: '1.5rem',
@@ -513,12 +514,18 @@ var shapermint = {
             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: {
@@ -619,17 +626,13 @@ var shapermint = {
                     fontSize: '24px',
                 },
                 currency: {
-                    color: '--colors-shades-550-color',
+                    color: '--colors-shades-250-color',
                     fontSize: '14px',
                     lineHeight: '22px',
                     alignSelf: 'flex-end',
                 },
                 savings: {
-                    textFontSize: '16px',
-                    textLineHeight: '24px',
-                    amountFontSize: '16px',
                     amountFontWeight: 600,
-                    amountLineHeight: '24px',
                     color: '--colors-semantic-positive-color',
                 },
             },
@@ -654,19 +657,16 @@ var shapermint = {
         },
         orderSummary: {
             headingTextAlign: 'left',
-            backgroundColor: '--colors-shades-5-color',
-            padding: '',
-            borderRadius: '',
-            maxWidth: '460px',
+            maxWidth: '428px',
             onMobile: {
                 maxWidth: '100%',
                 padding: '15px',
             },
         },
         expressCheckout: {
-            fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,Arial, sans-serif',
-            fontWeight: 500,
-            lineHeight: '16px',
+            button: {
+                borderRadius: '8px',
+            },
         },
         copyrightText: {
             fontSize: '16px',
@@ -674,21 +674,115 @@ var shapermint = {
             lineHeight: '24px',
             color: '--colors-pallete-secondary-color',
         },
+        thankyouFooterText: {
+            fontSize: '14px',
+            fontWeight: '700',
+            lineHeight: '20px',
+        },
         textButton: {
             fontWeight: 500,
             lineHeight: 'normal',
         },
         deliveryDetails: {
+            title: {
+                fontSize: '1rem',
+                lineHeight: '1.5rem',
+                fontWeight: 700,
+            },
+            sectionTitle: {
+                fontSize: '0.875rem',
+                lineHeight: '1.375rem',
+                fontWeight: 700,
+            },
             note: {
-                accentColor: '--colors-semantic-urgent-color',
+                accentColor: '#D3373C',
                 color: '--colors-text-color',
-                backgroundColor: '--colors-pallete-primary-20-color',
+                backgroundColor: '#FDF1EF',
+            },
+            sectionDetails: {
+                fontSize: '0.875rem',
+                lineHeight: '1.375rem',
+                fontWeight: 400,
             },
         },
         text: {
             orderHeader: {
                 color: '--colors-pallete-primary-color',
             },
+            fitGuarantee: {
+                fontWeight: 'unset',
+            },
+            offerBanner: {
+                borderRadius: '0.125rem',
+            },
+        },
+        orderBar: {
+            backgroundColor: '#dfefeb',
+            fontColor: '--colors-shades-700-color',
+        },
+        banner: {
+            outlineColor: '--colors-semantic-urgent-color',
+            filledColor: '--colors-semantic-urgent-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-urgent-color',
+                },
+            },
+            price: {
+                colors: {
+                    regular: '--colors-shades-400-color',
+                    deal: '--colors-semantic-urgent-color',
+                    each: '--colors-shades-700-color',
+                    badgeBG: '--colors-semantic-urgent-color',
+                    badgeColor: '--colors-shades-white-color',
+                },
+            },
+            hurryTimeCard: {
+                backgroundColor: '#F7ECE4',
+            },
+        },
+        thankyou: {
+            emailSection: {
+                backgroundColor: '#FDF1EF',
+            },
+            socialIcon: {
+                color: '--colors-pallete-primary-color',
+            },
+            orderId: {
+                color: '--colors-pallete-primary-color',
+            },
+        },
+        hurryUp: {
+            borderRadius: 'unset',
+        },
+        qtyPicker: {
+            borderRadius: '0.5rem',
         },
     },
     typography: {
@@ -745,6 +839,14 @@ var shapermint = {
                 fontSize: 18,
                 lineHeight: '28px',
             },
+            heading7: {
+                fontSize: 20,
+                lineHeight: '28px',
+            },
+            heading8: {
+                fontSize: 18,
+                lineHeight: '28px',
+            },
             'body-regular': {
                 fontSize: 16,
                 lineHeight: '24px',
@@ -822,6 +924,13 @@ var shapermint = {
                 src: 'AvenirNextLTPro-Regular.woff2',
                 weight: 'normal',
             },
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-It.otf',
+                weight: 'normal',
+                stretch: 'condensed',
+                style: 'italic',
+            },
             {
                 family: 'AvenirNextLTPro',
                 src: 'AvenirNextLTPro-Demi.otf',
@@ -898,12 +1007,23 @@ var shapermint = {
         ],
     },
     assets: {
+        cdn: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@1.3.1/common',
         images: {
-            favicon: 'https://cdn.shopify.com/s/files/1/2679/8624/files/shapermint_favicon-128x128.png',
+            favicon: 'https://cdn.shopify.com/s/files/1/0021/4889/2732/files/Favicon_pink_196x_fedce07d-d19c-4ca4-a53a-5a55869cfc1e.png?v=1619463864',
             logo: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/shapermint/shapermint_logo_black.svg',
             logoSize: {
-                width: '230',
-                height: '46',
+                width: '204',
+                height: '35',
+            },
+            upsellLogo: {
+                url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/shapermint/shapermint_logo_black.svg',
+                width: '210',
+                height: '40',
+            },
+            tyLogo: {
+                url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/shapermint/shapermint_logo_black.svg',
+                width: '192',
+                height: '36',
             },
         },
     },