@trafilea/afrodita-components 5.0.0 → 6.0.0

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

@@ -129,6 +129,7 @@ var truekind = {
             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' },
@@ -148,10 +149,10 @@ var truekind = {
             990: { color: '#0b0b0b', contrast: '--colors-shades-white-color' },
         },
         semantic: {
-            positive: { color: '#2579C8', contrast: '--colors-shades-white-color' },
-            urgent: { color: '#D82A2D', contrast: '--colors-shades-white-color' },
-            attention: { color: '#FFA877', contrast: '--colors-shades-700-color' },
-            informative: { color: '#686872', contrast: '--colors-shades-white-color' },
+            positive: { color: '#2f806a', contrast: '--colors-shades-white-color' },
+            urgent: { color: '#c64844', contrast: '--colors-shades-white-color' },
+            attention: { color: '#f2d96f', contrast: '--colors-shades-700-color' },
+            informative: { color: '#0a609b', contrast: '--colors-shades-700-color' },
         },
         border: {
             color: '',
@@ -221,6 +222,14 @@ var truekind = {
                 fontSize: 18,
                 lineHeight: '28px',
             },
+            heading7: {
+                fontSize: 20,
+                lineHeight: '28px',
+            },
+            heading8: {
+                fontSize: 18,
+                lineHeight: '28px',
+            },
             'body-regular': {
                 fontSize: 16,
                 lineHeight: '24px',
@@ -301,16 +310,16 @@ var truekind = {
             minHeight: 'unset',
             size: {
                 small: {
-                    fontSize: '1rem',
-                    padding: '0.75rem 3rem',
+                    fontSize: '0.75rem',
+                    padding: '0.25rem 2rem',
                 },
                 medium: {
                     fontSize: '0.875rem',
-                    padding: '0.5rem 2.5rem',
+                    padding: '0.688rem 2rem',
                 },
                 large: {
-                    fontSize: '0.75rem',
-                    padding: '0.25rem 2rem',
+                    fontSize: '1rem',
+                    padding: '0.75rem 3rem',
                 },
             },
             primary: {
@@ -519,14 +528,14 @@ var truekind = {
                     },
                 },
                 small: {
-                    width: '1.5rem',
-                    height: '1.5rem',
+                    width: '0.875rem',
+                    height: '0.875rem',
                     borderRadius: '0.25rem',
                     borderWidth: '0.094rem',
                     margin: '0.375rem',
                     icon: {
-                        width: '0.875rem',
-                        height: '0.625rem',
+                        width: '0.5rem',
+                        height: '0.375rem',
                     },
                 },
             },
@@ -586,12 +595,18 @@ var truekind = {
             fontWeight: 600,
             lineHeight: '1.125rem',
             padding: '0.5rem 0.75rem 0.5rem 1rem',
+            optionPadding: '0.75rem 1rem 0.625rem 0.75rem',
             color: '#292929',
             fill: '#292929',
             options: {
                 borderColor: '#8BBEEA',
                 color: '#292929',
-                borderRadius: '0.5rem',
+                borderRadius: '1.25rem',
+                borderRadiusV2: 'unset',
+            },
+            optionsWrapper: {
+                borderRadius: '1.25rem',
+                overflow: 'hidden',
             },
         },
         modal: {
@@ -698,11 +713,7 @@ var truekind = {
                     alignSelf: 'flex-end',
                 },
                 savings: {
-                    textFontSize: '16px',
-                    textLineHeight: '24px',
-                    amountFontSize: '16px',
                     amountFontWeight: 600,
-                    amountLineHeight: '24px',
                     color: '--colors-semantic-positive-color',
                 },
             },
@@ -726,20 +737,20 @@ var truekind = {
             },
         },
         orderSummary: {
-            headingTextAlign: 'left',
-            backgroundColor: '--colors-shades-5-color',
-            padding: '',
-            borderRadius: '',
-            maxWidth: '460px',
+            headingTextAlign: 'center',
+            backgroundColor: '--colors-shades-10-color',
+            padding: '20px',
+            borderRadius: '--radius-regular',
+            maxWidth: '100%',
             onMobile: {
                 maxWidth: '100%',
                 padding: '15px',
             },
         },
         expressCheckout: {
-            fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,Arial, sans-serif',
-            fontWeight: 500,
-            lineHeight: '16px',
+            button: {
+                borderRadius: '24px',
+            },
         },
         copyrightText: {
             fontSize: '16px',
@@ -747,21 +758,123 @@ var truekind = {
             lineHeight: '24px',
             color: '--colors-pallete-secondary-color',
         },
+        thankyouFooterText: {
+            fontSize: '14px',
+            fontWeight: '700',
+            lineHeight: '20px',
+        },
         textButton: {
             fontWeight: 500,
             lineHeight: 'normal',
         },
         deliveryDetails: {
+            title: {
+                fontSize: '1.25rem',
+                lineHeight: '1.75rem',
+                fontWeight: 600,
+            },
+            sectionTitle: {
+                fontSize: '1.125rem',
+                lineHeight: '1.25rem',
+                fontWeight: 700,
+            },
             note: {
                 accentColor: '--colors-semantic-urgent-color',
                 color: '--colors-text-color',
                 backgroundColor: '--colors-pallete-primary-20-color',
             },
+            sectionDetails: {
+                fontSize: '1rem',
+                lineHeight: '1.25rem',
+                fontWeight: 400,
+            },
         },
         text: {
             orderHeader: {
                 color: '--colors-pallete-primary-color',
             },
+            fitGuarantee: {
+                fontWeight: 200,
+            },
+            offerBanner: {
+                borderRadius: '1.25rem',
+            },
+        },
+        orderBar: {
+            backgroundColor: '#F7F4F2',
+            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: '24px',
+            },
+            creditCardSection: {
+                borderRadius: '24px',
+            },
+        },
+        upsell: {
+            banner: {
+                outlined: {
+                    color: '--colors-semantic-positive-color',
+                },
+            },
+            price: {
+                colors: {
+                    regular: '--colors-shades-400-color',
+                    deal: '--colors-pallete-primary-color',
+                    each: '--colors-shades-700-color',
+                    badgeBG: '--colors-pallete-primary-color',
+                    badgeColor: '--colors-shades-white-color',
+                },
+            },
+            hurryTimeCard: {
+                backgroundColor: '#FCD7B8',
+            },
+            guaranteedFit: {
+                backgroundColor: '#FFF5E9',
+            },
+        },
+        thankyou: {
+            orderBanner: {
+                text: {
+                    left: '53%',
+                },
+            },
+            emailSection: {
+                backgroundColor: '--colors-pallete-champagne-color',
+            },
+            socialIcon: {
+                color: '--colors-pallete-primary-color',
+            },
+            orderId: {
+                color: '--colors-shades-700-color',
+            },
+        },
+        hurryUp: {
+            borderRadius: '1.5rem',
+        },
+        qtyPicker: {
+            borderRadius: '1.125rem',
         },
     },
     fonts: {
@@ -886,12 +999,28 @@ var truekind = {
         ],
     },
     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',
-            logo: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/shapermint/shapermint_logo_black.svg',
+            favicon: 'https://cdn.shopify.com/s/files/1/0450/0901/0853/files/1_32x.png',
+            logo: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/truekind/tkd_logo_checkout.svg',
             logoSize: {
-                width: '230',
-                height: '46',
+                width: '204',
+                height: '35',
+            },
+            checkoutLogo: {
+                url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/truekind/tkd_logo_checkout.svg',
+                width: '204',
+                height: '35',
+            },
+            upsellLogo: {
+                url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/truekind/tkd_logo_checkout.svg',
+                width: '210',
+                height: '40',
+            },
+            tyLogo: {
+                url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/truekind/tkd_logo_checkout.svg',
+                width: '276',
+                height: '50',
             },
         },
     },

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "private": false,
   "main": "build/index.js",
   "style": "build/index.css",
@@ -35,7 +35,8 @@
     "build-storybook": "build-storybook",
     "chromatic": "npx chromatic --storybook-build-dir .\\\\storybook-static\\",
     "version:beta": "npm version prerelease --preid=beta",
-    "ts-check": "tsc -p ."
+    "ts-check": "tsc -p .",
+    "lint": "npx lint-staged"
   },
   "eslintConfig": {
     "extends": [