@trafilea/afrodita-components 7.1.2 → 7.1.4

package/build/theme/shapermint.theme.js

@@ -67,6 +67,12 @@ var DEFAULT_BREAKPOINTS = {
     mobile: 640,
     tablet: 1024,
     desktop: 1280,
+    xs: '480px',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
 };
 
 var shapermint = {
@@ -853,6 +859,26 @@ var shapermint = {
                 },
             },
         },
+        productCard: {
+            image: {
+                aspectRatio: '3/4',
+                sizes: {
+                    small: {
+                        width: '165px',
+                    },
+                    large: {
+                        width: '260px',
+                        mobile: {
+                            width: '165px',
+                        },
+                    },
+                },
+            },
+            spacing: {
+                small: 2,
+                large: 8,
+            },
+        },
     },
     typography: {
         config: {
@@ -860,10 +886,38 @@ var shapermint = {
                 heavy: 900,
                 bold: 700,
                 demi: 600,
+                medium: 500,
                 regular: 400,
             },
         },
+        size: {
+            xxs: '10px',
+            xs: '12px',
+            sm: '14px',
+            md: '16px',
+            lg: '18px',
+            xl: '20px',
+            '2xl': '24px',
+            '3xl': '30px',
+            '4xl': '36px',
+            '5xl': '42px',
+            '6xl': '52px',
+            '7xl': '60px',
+        },
+        lineHeight: {
+            xs: '16px',
+            sm: '20px',
+            md: '22px',
+            lg: '24px',
+            xl: '28px',
+            '2xl': '32px',
+            '3xl': '40px',
+            '4xl': '48px',
+            '5xl': '68px',
+            '6xl': '76px',
+        },
         variants: {
+            // to be removed after new foundation is implemented starting here
             hero1: {
                 fontSize: 76,
                 lineHeight: '92px',
@@ -991,6 +1045,230 @@ var shapermint = {
                 fontSize: 8,
                 lineHeight: '12px',
             },
+            // to be removed after new foundation is implemented ending here
+            // new foundation
+            // display1new: {
+            //   desktop: {
+            //     fontSize: '--typography-size-7xl-desktop',
+            //     lineHeight: '--typography-line-height-6xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-7xl-mobile',
+            //     lineHeight: '--typography-line-height-6xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-7xl-tablet',
+            //     lineHeight: '--typography-line-height-6xl-tablet',
+            //   },
+            // },
+            // display2new: {
+            //   desktop: {
+            //     fontSize: '--typography-size-6xl-desktop',
+            //     lineHeight: '--typography-line-height-5xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-6xl-mobile',
+            //     lineHeight: '--typography-line-height-5xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-6xl-tablet',
+            //     lineHeight: '--typography-line-height-5xl-tablet',
+            //   },
+            // },
+            // h1: {
+            //   desktop: {
+            //     fontSize: '--typography-size-5xl-desktop',
+            //     lineHeight: '--typography-line-height-4xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-5xl-mobile',
+            //     lineHeight: '--typography-line-height-4xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-5xl-tablet',
+            //     lineHeight: '--typography-line-height-4xl-tablet',
+            //   },
+            // },
+            // h2: {
+            //   desktop: {
+            //     fontSize: '--typography-size-4xl-desktop',
+            //     lineHeight: '--typography-line-height-3xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-4xl-mobile',
+            //     lineHeight: '--typography-line-height-3xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-4xl-tablet',
+            //     lineHeight: '--typography-line-height-3xl-tablet',
+            //   },
+            // },
+            // h3: {
+            //   desktop: {
+            //     fontSize: '--typography-size-3xl-desktop',
+            //     lineHeight: '--typography-line-height-3xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-3xl-mobile',
+            //     lineHeight: '--typography-line-height-3xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-3xl-tablet',
+            //     lineHeight: '--typography-line-height-3xl-tablet',
+            //   },
+            // },
+            // h4: {
+            //   desktop: {
+            //     fontSize: '--typography-size-2xl-desktop',
+            //     lineHeight: '--typography-line-height-2xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-2xl-mobile',
+            //     lineHeight: '--typography-line-height-2xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-2xl-tablet',
+            //     lineHeight: '--typography-line-height-2xl-tablet',
+            //   },
+            // },
+            // h5: {
+            //   desktop: {
+            //     fontSize: '--typography-size-xl-desktop',
+            //     lineHeight: '--typography-line-height-xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-xl-mobile',
+            //     lineHeight: '--typography-line-height-xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-xl-tablet',
+            //     lineHeight: '--typography-line-height-xl-tablet',
+            //   },
+            // },
+            // h6: {
+            //   desktop: {
+            //     fontSize: '--typography-size-lg-desktop',
+            //     lineHeight: '--typography-line-height-lg-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-lg-mobile',
+            //     lineHeight: '--typography-line-height-lg-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-lg-tablet',
+            //     lineHeight: '--typography-line-height-lg-tablet',
+            //   },
+            // },
+            // 'body-lg': {
+            //   desktop: {
+            //     fontSize: '--typography-size-lg-desktop',
+            //     lineHeight: '--typography-line-height-xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-lg-mobile',
+            //     lineHeight: '--typography-line-height-xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-lg-tablet',
+            //     lineHeight: '--typography-line-height-xl-tablet',
+            //   },
+            // },
+            // 'body-md': {
+            //   desktop: {
+            //     fontSize: '--typography-size-md-desktop',
+            //     lineHeight: '--typography-line-height-lg-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-md-mobile',
+            //     lineHeight: '--typography-line-height-lg-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-md-tablet',
+            //     lineHeight: '--typography-line-height-lg-tablet',
+            //   },
+            // },
+            // 'body-sm': {
+            //   desktop: {
+            //     fontSize: '--typography-size-sm-desktop',
+            //     lineHeight: '--typography-line-height-md-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-sm-mobile',
+            //     lineHeight: '--typography-line-height-md-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-sm-tablet',
+            //     lineHeight: '--typography-line-height-md-tablet',
+            //   },
+            // },
+            // 'button-md': {
+            //   desktop: {
+            //     fontSize: '--typography-size-md-desktop',
+            //     lineHeight: '--typography-line-height-md-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-md-mobile',
+            //     lineHeight: '--typography-line-height-md-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-md-tablet',
+            //     lineHeight: '--typography-line-height-md-tablet',
+            //   },
+            // },
+            // 'button-sm': {
+            //   desktop: {
+            //     fontSize: '--typography-size-sm-desktop',
+            //     lineHeight: '--typography-line-height-sm-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-sm-mobile',
+            //     lineHeight: '--typography-line-height-sm-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-sm-tablet',
+            //     lineHeight: '--typography-line-height-sm-tablet',
+            //   },
+            // },
+            // 'caption-xxs': {
+            //   // to be replaced with caption after new foundation is implemented
+            //   desktop: {
+            //     fontSize: '--typography-size-xs-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-xs-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-xs-tablet',
+            //   },
+            // },
+            // 'label-md': {
+            //   desktop: {
+            //     fontSize: '--typography-size-sm-desktop',
+            //     lineHeight: '--typography-line-height-sm-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-sm-mobile',
+            //     lineHeight: '--typography-line-height-sm-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-sm-tablet',
+            //     lineHeight: '--typography-line-height-sm-tablet',
+            //   },
+            // },
+            // 'label-sm': {
+            //   desktop: {
+            //     fontSize: '--typography-size-xs-desktop',
+            //     lineHeight: '--typography-line-height-xs-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-xs-mobile',
+            //     lineHeight: '--typography-line-height-xs-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-xs-tablet',
+            //     lineHeight: '--typography-line-height-xs-tablet',
+            //   },
+            // },
         },
     },
     fonts: {

package/build/theme/thebodcon.theme.d.ts

@@ -20,9 +20,7 @@ declare type Theme = {
     fontWeights: number[];
     lineHeights: number[];
     mediaQueries: ThemeBreakpoints;
-    radius: {
-        regular: string;
-    };
+    radius: ThemeRadius;
     zIndex: {
         modal: number;
         overlay: number;
@@ -35,11 +33,19 @@ declare type Theme = {
     label: {
         member: string;
     };
+    space?: ThemeSpacing;
+    shadow?: ThemeElevation;
 };
 declare type ThemeBreakpoints = {
     mobile: number;
     tablet: number;
     desktop: number;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
 };
 declare type ThemeBasicPallete = {
     color: string;
@@ -868,6 +874,40 @@ declare type ThemeComponent = {
             };
         };
     };
+    productCard: {
+        image: {
+            aspectRatio: string;
+            sizes: {
+                [ComponentSize.Large]: {
+                    width: string;
+                    mobile: {
+                        width: string;
+                    };
+                };
+                [ComponentSize.Small]: {
+                    width: string;
+                };
+            };
+        };
+        spacing: {
+            [ComponentSize.Large]: number;
+            [ComponentSize.Small]: number;
+        };
+    };
+};
+declare type SizeConfig = {
+    xxs?: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl'?: string;
 };
 declare type ThemeTypography = {
     config: {
@@ -875,9 +915,12 @@ declare type ThemeTypography = {
             heavy: number;
             bold: number;
             demi: number;
+            medium?: number;
             regular: number;
         };
     };
+    size?: SizeConfig;
+    lineHeight?: Omit<SizeConfig, 'xxs' | '7xl'>;
     variants: Record<string, CSSProperties>;
 };
 declare type ThemeFonts = {
@@ -954,6 +997,41 @@ declare type ThemeAssets = {
         };
     };
     [key: string]: any;
+};
+declare type ThemeSpacing = {
+    0?: string;
+    25?: string;
+    50: string;
+    75: string;
+    100: string;
+    150: string;
+    200: string;
+    250: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    800?: string;
+    1000?: string;
+    1200?: string;
+    1600?: string;
+    2000?: string;
+};
+declare type ThemeRadius = {
+    regular: string;
+    none?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    full?: string;
+};
+declare type ThemeElevation = {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
 };
 
 declare const thebodcon: Theme;

package/build/theme/thebodcon.theme.js

@@ -67,6 +67,12 @@ var DEFAULT_BREAKPOINTS = {
     mobile: 640,
     tablet: 1024,
     desktop: 1280,
+    xs: '480px',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
 };
 
 var thebodcon = {
@@ -868,6 +874,26 @@ var thebodcon = {
                 },
             },
         },
+        productCard: {
+            image: {
+                aspectRatio: '3/4',
+                sizes: {
+                    small: {
+                        width: '165px',
+                    },
+                    large: {
+                        width: '260px',
+                        mobile: {
+                            width: '165px',
+                        },
+                    },
+                },
+            },
+            spacing: {
+                small: 2,
+                large: 8,
+            },
+        },
     },
     typography: {
         config: {

package/build/theme/thespadr.theme.d.ts

@@ -20,9 +20,7 @@ declare type Theme = {
     fontWeights: number[];
     lineHeights: number[];
     mediaQueries: ThemeBreakpoints;
-    radius: {
-        regular: string;
-    };
+    radius: ThemeRadius;
     zIndex: {
         modal: number;
         overlay: number;
@@ -35,11 +33,19 @@ declare type Theme = {
     label: {
         member: string;
     };
+    space?: ThemeSpacing;
+    shadow?: ThemeElevation;
 };
 declare type ThemeBreakpoints = {
     mobile: number;
     tablet: number;
     desktop: number;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
 };
 declare type ThemeBasicPallete = {
     color: string;
@@ -868,6 +874,40 @@ declare type ThemeComponent = {
             };
         };
     };
+    productCard: {
+        image: {
+            aspectRatio: string;
+            sizes: {
+                [ComponentSize.Large]: {
+                    width: string;
+                    mobile: {
+                        width: string;
+                    };
+                };
+                [ComponentSize.Small]: {
+                    width: string;
+                };
+            };
+        };
+        spacing: {
+            [ComponentSize.Large]: number;
+            [ComponentSize.Small]: number;
+        };
+    };
+};
+declare type SizeConfig = {
+    xxs?: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl'?: string;
 };
 declare type ThemeTypography = {
     config: {
@@ -875,9 +915,12 @@ declare type ThemeTypography = {
             heavy: number;
             bold: number;
             demi: number;
+            medium?: number;
             regular: number;
         };
     };
+    size?: SizeConfig;
+    lineHeight?: Omit<SizeConfig, 'xxs' | '7xl'>;
     variants: Record<string, CSSProperties>;
 };
 declare type ThemeFonts = {
@@ -954,6 +997,41 @@ declare type ThemeAssets = {
         };
     };
     [key: string]: any;
+};
+declare type ThemeSpacing = {
+    0?: string;
+    25?: string;
+    50: string;
+    75: string;
+    100: string;
+    150: string;
+    200: string;
+    250: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    800?: string;
+    1000?: string;
+    1200?: string;
+    1600?: string;
+    2000?: string;
+};
+declare type ThemeRadius = {
+    regular: string;
+    none?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    full?: string;
+};
+declare type ThemeElevation = {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
 };
 
 declare const thespadr: Theme;