@trafilea/afrodita-components 7.1.2 → 7.1.4

package/build/theme/thespadr.theme.js

@@ -36,6 +36,12 @@ var DEFAULT_BREAKPOINTS = {
     mobile: 640,
     tablet: 1024,
     desktop: 1280,
+    xs: '480px',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
 };
 
 var thespadr = {
@@ -46,6 +52,11 @@ var thespadr = {
     mediaQueries: DEFAULT_BREAKPOINTS,
     radius: {
         regular: '8px',
+        none: '0px',
+        md: '4px',
+        lg: '8px',
+        xl: '16px',
+        full: '9999px',
     },
     zIndex: {
         modal: 50,
@@ -1026,6 +1037,26 @@ var thespadr = {
                 },
             },
         },
+        productCard: {
+            image: {
+                aspectRatio: '3/4',
+                sizes: {
+                    small: {
+                        width: '165px',
+                    },
+                    large: {
+                        width: '260px',
+                        mobile: {
+                            width: '165px',
+                        },
+                    },
+                },
+            },
+            spacing: {
+                small: 2,
+                large: 8,
+            },
+        },
     },
     typography: {
         config: {
@@ -1033,10 +1064,38 @@ var thespadr = {
                 heavy: 800,
                 bold: 700,
                 demi: 500,
+                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 from here
             hero1: {
                 fontSize: 76,
                 lineHeight: '92px',
@@ -1156,6 +1215,83 @@ var thespadr = {
                 fontSize: 12,
                 lineHeight: '14px',
             },
+            // to be removed after new foundation is implemented ending here
+            display: {
+                fontSize: '--typography-size-6xl',
+                lineHeight: '--typography-line-height-5xl',
+            },
+            'heading-xl': {
+                fontSize: '--typography-size-3xl',
+                lineHeight: '--typography-line-height-3xl',
+            },
+            'heading-lg': {
+                fontSize: '--typography-size-2xl',
+                lineHeight: '--typography-line-height-2xl',
+            },
+            'subtitle-md': {
+                fontSize: '--typography-size-xl',
+                lineHeight: '--typography-line-height-xl',
+            },
+            'subtitle-sm': {
+                fontSize: '--typography-size-lg',
+                lineHeight: '--typography-line-height-lg',
+            },
+            'body-md': {
+                fontSize: '--typography-size-md',
+                lineHeight: '--typography-line-height-lg',
+            },
+            'body-sm': {
+                fontSize: '--typography-size-sm',
+                lineHeight: '--typography-line-height-md',
+            },
+            'price-lg': {
+                fontSize: '--typography-size-lg',
+                lineHeight: '--typography-line-height-xl',
+            },
+            'price-md': {
+                fontSize: '--typography-size-md',
+                lineHeight: '--typography-line-height-lg',
+            },
+            'button-lg': {
+                fontSize: '--typography-size-lg',
+                lineHeight: '--typography-line-height-lg',
+            },
+            'button-md': {
+                fontSize: '--typography-size-md',
+                lineHeight: '--typography-line-height-md',
+            },
+            'button-sm': {
+                fontSize: '--typography-size-sm',
+                lineHeight: '--typography-line-height-sm',
+            },
+            'caption-xxs': {
+                // to be replaced with caption after new foundation is implemented
+                fontSize: '--typography-size-xxs',
+            },
+            'label-md': {
+                fontSize: '--typography-size-md',
+                lineHeight: '--typography-line-height-lg',
+            },
+            'label-sm': {
+                fontSize: '--typography-size-sm',
+                lineHeight: '--typography-line-height-sm',
+            },
+            'label-xs': {
+                fontSize: '--typography-size-xs',
+                lineHeight: '--typography-line-height-xs',
+            },
+            'link-md': {
+                fontSize: '--typography-size-md',
+                lineHeight: '--typography-line-height-lg',
+            },
+            'link-sm': {
+                fontSize: '--typography-size-sm',
+                lineHeight: '--typography-line-height-md',
+            },
+            'link-xs': {
+                fontSize: '--typography-size-xs',
+                lineHeight: '--typography-line-height-sm',
+            },
         },
     },
     fonts: {
@@ -1335,6 +1471,33 @@ var thespadr = {
     label: {
         member: '',
     },
+    space: {
+        0: '0px',
+        25: '2px',
+        50: '4px',
+        75: '6px',
+        100: '8px',
+        150: '12px',
+        200: '16px',
+        250: '20px',
+        300: '24px',
+        400: '32px',
+        500: '40px',
+        600: '48px',
+        800: '64px',
+        1000: '80px',
+        1200: '96px',
+        1600: '128px',
+        2000: '160px',
+    },
+    shadow: {
+        100: '0px 1px 4px 0px rgba(12, 12, 13, 0.05);',
+        200: '0px 4px 6px -2px rgba(12, 12, 13, 0.10), 0px 2px 4px -2px rgba(12, 12, 13, 0.05)',
+        300: '0px 12px 16px -4px rgba(12, 12, 13, 0.08), 0px 4px 4px -2px rgba(12, 12, 13, 0.05)',
+        400: '0px 16px 32px -4px rgba(12, 12, 13, 0.10), 0px 4px 4px -4px rgba(12, 12, 13, 0.05)',
+        500: '0px 16px 32px -8px rgba(12, 12, 13, 0.40)',
+        600: '0px 0px 0px 4px rgba(69, 122, 65, 0.30)',
+    },
 };
 
 exports["default"] = thespadr;

package/build/theme/truekind.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 truekind: Theme;

package/build/theme/truekind.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 truekind = {
@@ -949,6 +955,26 @@ var truekind = {
                 },
             },
         },
+        productCard: {
+            image: {
+                aspectRatio: '3/4',
+                sizes: {
+                    small: {
+                        width: '165px',
+                    },
+                    large: {
+                        width: '260px',
+                        mobile: {
+                            width: '165px',
+                        },
+                    },
+                },
+            },
+            spacing: {
+                small: 2,
+                large: 8,
+            },
+        },
     },
     fonts: {
         url: 'https://cdn.truekind.com/assets/fonts/truekind',

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "7.1.2",
+  "version": "7.1.4",
   "private": false,
   "main": "build/lib/index.js",
   "style": "build/es/index.css",