@trafilea/afrodita-components 4.0.2-beta.8 → 4.3.0

package/build/{dts/core/theme/Theme.d.ts → theme/shapermint.theme.d.ts}

@@ -1,38 +1,33 @@
-import { CSSProperties, ElementType, FC, ReactNode } from 'react';
-export declare const ThemeProvider: FC<{
-    theme: Theme;
-    children: ReactNode;
-}>;
-export declare const useTheme: () => Theme;
-export declare const ThemeVariables: FC<{
-    theme: Theme;
-    Container?: ElementType;
-}>;
-export declare const AssetsProvider: FC<{
-    assets: ThemeAssets;
-}>;
-export declare const useThemeAssets: () => ThemeAssets;
-export declare type Theme = {
+import { CSSProperties } from 'react';
+
+declare type Theme = {
     name: string;
     fontSizes: number[];
     fontWeights: number[];
     lineHeights: number[];
     mediaQueries: ThemeBreakpoints;
+    radius: {
+        regular: string;
+    };
+    zIndex: {
+        modal: number;
+        overlay: number;
+    };
     colors: ThemeColors;
     component: ThemeComponent;
     typography: ThemeTypography;
     fonts: ThemeFonts;
     assets: ThemeAssets;
 };
-export declare type ThemeBreakpoints = {
+declare type ThemeBreakpoints = {
     mobile: number;
     desktop: number;
 };
-export declare type ThemeBasicPallete = {
+declare type ThemeBasicPallete = {
     color: string;
     contrast: string;
 };
-export declare type ThemeColorPallete = ThemeBasicPallete & {
+declare type ThemeColorPallete = ThemeBasicPallete & {
     soft: ThemeBasicPallete;
 };
 declare type ThemeColorPrimaryPallete = ThemeColorPallete & {
@@ -41,7 +36,7 @@ declare type ThemeColorPrimaryPallete = ThemeColorPallete & {
     60: ThemeColorPallete;
     80: ThemeColorPallete;
 };
-export declare type ThemeColors = {
+declare type ThemeColors = {
     pallete: {
         primary: ThemeColorPrimaryPallete;
         secondary: ThemeColorPrimaryPallete;
@@ -92,7 +87,7 @@ export declare type ThemeColors = {
         disabled: string;
     };
 };
-export declare type ThemeComponent = {
+declare type ThemeComponent = {
     button: {
         border: string;
         borderRadius: string;
@@ -350,8 +345,11 @@ export declare type ThemeComponent = {
             color: string;
         };
     };
+    modal: {
+        minWidth: string;
+    };
 };
-export declare type ThemeTypography = {
+declare type ThemeTypography = {
     config: {
         weight: {
             heavy: number;
@@ -362,7 +360,7 @@ export declare type ThemeTypography = {
     };
     variants: Record<string, CSSProperties>;
 };
-export declare type ThemeFonts = {
+declare type ThemeFonts = {
     url: string;
     config: Array<{
         src: string;
@@ -372,11 +370,14 @@ export declare type ThemeFonts = {
         stretch?: string;
     }>;
 };
-export declare type ThemeAssets = {
+declare type ThemeAssets = {
     images: {
         favicon: string;
         logo: string;
     };
     [key: string]: any;
-};
-export {};
+};
+
+declare const shapermint: Theme;
+
+export { shapermint as default };

package/build/theme/shapermint.theme.js

@@ -35,6 +35,13 @@ var shapermint = {
         mobile: 0,
         desktop: 1200,
     },
+    radius: {
+        regular: '8px',
+    },
+    zIndex: {
+        modal: 50,
+        overlay: 49,
+    },
     colors: {
         pallete: {
             primary: {
@@ -133,9 +140,9 @@ var shapermint = {
             200: { color: '#bbbbbb', contrast: '--colors-shades-700-color' },
             250: { color: '#a6a6a6', contrast: '--colors-shades-700-color' },
             300: { color: '#9e9e9e', contrast: '--colors-shades-700-color' },
-            350: { color: '#949494', contrast: '--colors-shades-700-color' },
-            400: { color: '#808080', contrast: '--colors-shades-700-color' },
-            450: { color: '#767676', contrast: '--colors-shades-700-color' },
+            350: { color: '#949494', contrast: '--colors-shades-white-color' },
+            400: { color: '#808080', contrast: '--colors-shades-white-color' },
+            450: { color: '#767676', contrast: '--colors-shades-white-color' },
             500: { color: '#5a5a5a', contrast: '--colors-shades-white-color' },
             550: { color: '#3a3a3a', contrast: '--colors-shades-white-color' },
             600: { color: '#343434', contrast: '--colors-shades-white-color' },
@@ -175,16 +182,16 @@ var shapermint = {
             fontWeight: 600,
             size: {
                 small: {
-                    fontSize: '1rem',
-                    padding: '0.875rem 2rem',
+                    fontSize: '0.75rem',
+                    padding: '0.625rem 2rem',
                 },
                 medium: {
                     fontSize: '0.875rem',
                     padding: '0.688rem 2rem',
                 },
                 large: {
-                    fontSize: '0.75rem',
-                    padding: '0.625rem 2rem',
+                    fontSize: '1rem',
+                    padding: '0.875rem 2rem',
                 },
             },
             primary: {
@@ -426,6 +433,9 @@ var shapermint = {
                 color: '--colors-shades-700-color',
             },
         },
+        modal: {
+            minWidth: '540px',
+        },
     },
     typography: {
         config: {
@@ -551,7 +561,7 @@ var shapermint = {
         },
     },
     fonts: {
-        url: 'https://cdn.jsdelivr.net/gh/igor-ribeiro/storefront-static@main/fonts/shapermint',
+        url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/fonts/shapermint',
         config: [
             {
                 family: 'AvenirNextLTPro',
@@ -561,30 +571,30 @@ var shapermint = {
             {
                 family: 'AvenirNextLTPro',
                 src: 'AvenirNextLTPro-Demi.otf',
-                weight: 'bold',
+                weight: 600,
             },
             {
                 family: 'AvenirNextLTPro',
                 src: 'AvenirNextLTPro-Bold.otf',
-                weight: '800 900',
+                weight: 700,
             },
             {
                 family: 'AvenirNextLTPro',
                 src: 'AvenirNextLTPro-DemiCn.otf',
-                weight: 'bold',
+                weight: 600,
                 stretch: 'condensed',
             },
             {
                 family: 'AvenirNextLTPro',
                 src: 'AvenirNextLTPro-DemiCnIt.otf',
-                weight: 'bold',
+                weight: 600,
                 stretch: 'condensed',
                 style: 'italic',
             },
             {
                 family: 'AvenirNextLTPro',
                 src: 'AvenirNextLTPro-DemiIt.otf',
-                weight: 'bold',
+                weight: 600,
                 style: 'italic',
             },
             {
@@ -613,16 +623,21 @@ var shapermint = {
                 style: 'italic',
                 stretch: 'condensed',
             },
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-Heavy.otf',
+                weight: '800 900',
+            },
             {
                 family: 'AvenirNextLTPro',
                 src: 'AvenirNextLTPro-HeavyCn.otf',
-                weight: 900,
+                weight: '800 900',
                 stretch: 'condensed',
             },
             {
                 family: 'AvenirNextLTPro',
                 src: 'AvenirNextLTPro-HeavyCnIt.otf',
-                weight: 900,
+                weight: '800 900',
                 style: 'italic',
                 stretch: 'condensed',
             },

package/build/theme/truekind.theme.d.ts

@@ -0,0 +1,383 @@
+import { CSSProperties } from 'react';
+
+declare type Theme = {
+    name: string;
+    fontSizes: number[];
+    fontWeights: number[];
+    lineHeights: number[];
+    mediaQueries: ThemeBreakpoints;
+    radius: {
+        regular: string;
+    };
+    zIndex: {
+        modal: number;
+        overlay: number;
+    };
+    colors: ThemeColors;
+    component: ThemeComponent;
+    typography: ThemeTypography;
+    fonts: ThemeFonts;
+    assets: ThemeAssets;
+};
+declare type ThemeBreakpoints = {
+    mobile: number;
+    desktop: number;
+};
+declare type ThemeBasicPallete = {
+    color: string;
+    contrast: string;
+};
+declare type ThemeColorPallete = ThemeBasicPallete & {
+    soft: ThemeBasicPallete;
+};
+declare type ThemeColorPrimaryPallete = ThemeColorPallete & {
+    20: ThemeColorPallete;
+    40: ThemeColorPallete;
+    60: ThemeColorPallete;
+    80: ThemeColorPallete;
+};
+declare type ThemeColors = {
+    pallete: {
+        primary: ThemeColorPrimaryPallete;
+        secondary: ThemeColorPrimaryPallete;
+    } & Partial<Record<string, ThemeColorPallete>>;
+    shades: {
+        black: ThemeBasicPallete;
+        white: ThemeBasicPallete;
+        5: ThemeBasicPallete;
+        10: ThemeBasicPallete;
+        50: ThemeBasicPallete;
+        100: ThemeBasicPallete;
+        150: ThemeBasicPallete;
+        200: ThemeBasicPallete;
+        250: ThemeBasicPallete;
+        300: ThemeBasicPallete;
+        350: ThemeBasicPallete;
+        400: ThemeBasicPallete;
+        450: ThemeBasicPallete;
+        500: ThemeBasicPallete;
+        550: ThemeBasicPallete;
+        600: ThemeBasicPallete;
+        650: ThemeBasicPallete;
+        700: ThemeBasicPallete;
+        750: ThemeBasicPallete;
+        800: ThemeBasicPallete;
+        850: ThemeBasicPallete;
+        900: ThemeBasicPallete;
+        950: ThemeBasicPallete;
+        990: ThemeBasicPallete;
+    };
+    semantic: {
+        positive: ThemeBasicPallete;
+        urgent: ThemeBasicPallete;
+        attention: ThemeBasicPallete;
+        informative: ThemeBasicPallete;
+    };
+    border: {
+        color: string;
+        disabled: string;
+        highlight: string;
+    };
+    background: {
+        color: string;
+        disabled: string;
+    };
+    text: {
+        color: string;
+        disabled: string;
+    };
+};
+declare type ThemeComponent = {
+    button: {
+        border: string;
+        borderRadius: string;
+        fontWeight: number;
+        size: {
+            small: {
+                fontSize: string;
+                padding: string;
+            };
+            medium: {
+                fontSize: string;
+                padding: string;
+            };
+            large: {
+                fontSize: string;
+                padding: string;
+            };
+        };
+        primary: {
+            active: {
+                backgroundColor: string;
+                color: string;
+            };
+            hover: {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+        secondary: {
+            active: {
+                backgroundColor: string;
+                color: string;
+            };
+            hover: {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+    };
+    input: {
+        background: string;
+        color: string;
+        placeholderColor: string;
+        borderRadius: string;
+        fontSize: string;
+        fontWeight: number;
+        padding: string;
+        lineHeight: string;
+        border: string;
+        boxShadow: string;
+    };
+    inputCustom: {
+        button: {
+            borderRadius: string;
+        };
+        input: {
+            borderRadius: string;
+        };
+    };
+    selector: {
+        size: {
+            small: {
+                padding: string;
+                borderRadius: string;
+            };
+            medium: {
+                padding: string;
+                borderRadius: string;
+            };
+        };
+        default: {
+            fontWeight: number;
+            border: string;
+            background: string;
+            color: string;
+        };
+        hover: {
+            fontWeight: number;
+            background: string;
+            border: string;
+            color: string;
+        };
+        disabled: {
+            border: string;
+        };
+        fontSize: string;
+    };
+    rating: {
+        fontWeight: number;
+        size: {
+            xsmall: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            small: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            medium: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            large: {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+    };
+    card: {
+        borderRadius: string;
+    };
+    radio: {
+        borderColor: string;
+        background: string;
+        size: {
+            small: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+            medium: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+            large: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+        };
+    };
+    label: {
+        fontSize: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+        lineHeight: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+    };
+    checkbox: {
+        background: string;
+        borderColor: string;
+        active: {
+            background: string;
+        };
+        size: {
+            large: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+            medium: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+            small: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+        };
+    };
+    accordion: {
+        variant: {
+            box: {
+                container: {
+                    border: string;
+                    borderColor: string;
+                    borderRadius: string;
+                    padding: string;
+                };
+                summary: {
+                    fontWeight: number;
+                    fontSize: string;
+                    lineHeight: string;
+                    color: string;
+                };
+                details: {
+                    margin: string;
+                };
+                icon: {
+                    width: number;
+                    height: number;
+                    color: string;
+                };
+            };
+            simple: {
+                container: {
+                    borderTop: string;
+                    borderBottom: string;
+                    borderColor: string;
+                    borderRadius: string;
+                    padding: string;
+                };
+                summary: {
+                    fontWeight: number;
+                    fontSize: string;
+                    lineHeight: string;
+                    color: string;
+                };
+                details: {
+                    margin: string;
+                };
+                icon: {
+                    width: number;
+                    height: number;
+                    color: string;
+                };
+            };
+        };
+    };
+    dropdown: {
+        borderRadius: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        padding: string;
+        color: string;
+        fill: string;
+        options: {
+            borderColor: string;
+            color: string;
+        };
+    };
+    modal: {
+        minWidth: string;
+    };
+};
+declare type ThemeTypography = {
+    config: {
+        weight: {
+            heavy: number;
+            bold: number;
+            demi: number;
+            regular: number;
+        };
+    };
+    variants: Record<string, CSSProperties>;
+};
+declare type ThemeFonts = {
+    url: string;
+    config: Array<{
+        src: string;
+        family: string;
+        weight?: number | string;
+        style?: string;
+        stretch?: string;
+    }>;
+};
+declare type ThemeAssets = {
+    images: {
+        favicon: string;
+        logo: string;
+    };
+    [key: string]: any;
+};
+
+declare const truekind: Theme;
+
+export { truekind as default };

package/build/theme/truekind.theme.js

@@ -35,6 +35,13 @@ var truekind = {
         mobile: 0,
         desktop: 1200,
     },
+    radius: {
+        regular: '8px',
+    },
+    zIndex: {
+        modal: 50,
+        overlay: 49,
+    },
     colors: {
         pallete: {
             primary: __assign({
@@ -507,9 +514,12 @@ var truekind = {
                 color: '#292929',
             },
         },
+        modal: {
+            minWidth: '540px',
+        },
     },
     fonts: {
-        url: 'https://cdn.jsdelivr.net/gh/igor-ribeiro/storefront-static@main/fonts/truekind',
+        url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/fonts/truekind',
         config: [
             {
                 family: 'CircularXX',
@@ -632,7 +642,7 @@ var truekind = {
     assets: {
         images: {
             favicon: 'https://cdn.shopify.com/s/files/1/2679/8624/files/shapermint_favicon-128x128.png',
-            logo: 'https://cdn.jsdelivr.net/gh/igor-ribeiro/storefront-static@main/images/shapermint/shapermint_logo_black.svg',
+            logo: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/shapermint/shapermint_logo_black.svg',
         },
     },
 };

package/package.json

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

package/build/dts/components/Demo.stories.d.ts

@@ -1,7 +0,0 @@
-import { Story } from '@storybook/react';
-declare const _default: {
-    title: string;
-    component: null;
-};
-export default _default;
-export declare const Demo: Story<{}>;

package/build/dts/components/Icon-wrapper/IconWrapper.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-export interface IconWrapperProps {
-    width?: number;
-    height?: number;
-    title?: string;
-    viewBoxX: number;
-    viewBoxY: number;
-    children: React.ReactNode;
-    testid?: string;
-    fill?: string;
-}
-export declare const IconWrapper: ({ height, width, title, viewBoxX, viewBoxY, children, testid, fill, }: IconWrapperProps) => JSX.Element;

package/build/dts/components/Icon-wrapper/IconWrapper.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/dts/components/accordion/Accordion.d.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-import { IconType } from '../icons';
-export interface AccordionProps {
-    defaultOpen?: boolean;
-    variant: 'simple' | 'box';
-    header: ReactNode;
-    content: ReactNode;
-    disabled?: boolean;
-    openIcon: IconType;
-    closeIcon: IconType;
-}
-declare const Accordion: ({ header, content, defaultOpen, variant, disabled, openIcon, closeIcon, }: AccordionProps) => JSX.Element;
-export default Accordion;