@mailstep/design-system 0.2.0-beta.0 → 0.2.0-beta.2

package/ThemeProvider/themes/default.js

@@ -0,0 +1,144 @@
+var defaultTheme = {
+    breakpoints: ['0'],
+    colors: {
+        white: '#FFFFFF',
+        bgLightGray: '#FAFBFC',
+        bgLightGray1: '#F1F5F9',
+        lightGray1: '#F5F7FA',
+        lightGray2: '#EFF3F8',
+        lightGray3: '#D4D8DE',
+        lightGray4: '#B9BFC9',
+        lightGray5: '#A3B3C1',
+        lightGray6: '#D2D8DF',
+        lightGray7: '#E7EBEF',
+        neutral20: '#F1F5F9',
+        neutral300: '#5E6C84',
+        neutral500: '#42526E',
+        gray: '#8594A5',
+        gray1: '#7A90A1',
+        gray2: '#9AA1A7',
+        gray3: '#5F6C76',
+        gray4: '#455665',
+        gray5: '#647483',
+        blue1: '#2C4052',
+        blue2: '#22394E',
+        blue3: '#162C3F',
+        blue4: '#0C1F2F',
+        textPrimary: '#091E42',
+        textTertiary: '#7A869A',
+        typoPrimary: '#22394E',
+        blue10: '#F3F9FF',
+        blue20: '#DCEFFF',
+        blue60: '#0065FF',
+        blue70: '#0052CC',
+        blue80: '#0747A6',
+        blue90: '#1d3557',
+        teal20: '#E6FCFF',
+        teal40: '#a8dadc',
+        teal50: '#1aa1a7',
+        teal60: '#00B1D0',
+        teal70: '#1aa1da',
+        teal80: '#06718C',
+        teal90: '#035361',
+        green10: '#F2FFF5',
+        green20: '#DEFBE6',
+        green30: '#b8ecb8',
+        green50: '#81dd91',
+        green60: '#00A445',
+        green70: '#06d6a0',
+        green80: '#0E6027',
+        green90: '#067164',
+        green: '#13CE62',
+        successColor: '#24A148',
+        darkGreen: '#00A445',
+        orange20: '#FFF3E0',
+        orange30: '#FFE6CC',
+        orange50: '#ff9f43',
+        orange60: '#FF9800',
+        orange80: '#9E4800',
+        yellow10: '#FFFDE8',
+        yellow20: '#FFF9C4',
+        yellow60: '#FFE600',
+        yellow70: '#FFD702',
+        yellow1: '#FFD702',
+        yellow2: '#F2E871',
+        red10: '#FFF6F4',
+        red20: '#FFEBE6',
+        red30: '#fec1cb',
+        red50: '#ff7c7b',
+        red1: '#DB2B19',
+        red2: '#E94324',
+        red3: '#991E12',
+        red60: '#DB2B19',
+        red80: '#B71C1C',
+        dangerColor: '#E32C1E',
+        purple20: '#F0EDFF',
+        purple40: '#0072A0',
+        purple50: '#4573B3',
+        purple60: '#6554C0',
+        purple80: '#403294',
+        purple90: '#03235f',
+        magenta20: '#FCF1F7',
+        magenta60: '#EE5396',
+        magenta80: '#9F1853',
+        magenta90: '#872e8b',
+    },
+    fonts: {
+        primary: 'Inter, sans-serif',
+        heading: 'Inter, sans-serif',
+    },
+    fontLinks: ['https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'],
+    fontSizes: ['10px', '12px', '14px', '16px', '18px', '21px', '24px', '32px'],
+    lineHeights: [1.7],
+    fontWeights: {
+        default: null,
+        normal: 400,
+        medium: 500,
+        semiBold: 600,
+        bold: 700,
+    },
+    letterSpacings: {
+        default: null,
+        sm: '2px',
+        md: '4px',
+        lg: '8px',
+    },
+    borders: {
+        slim: '1px solid',
+        mediumSlim: '2px solid',
+        medium: '3px solid',
+        mediumThick: '6px solid',
+        thick: '10px solid',
+    },
+    // ...........................
+    radii: {
+        sm: '2px',
+        md: '4px',
+        ml: '6px',
+        lg: '8px',
+        xl: '16px',
+    },
+    shadows: {
+        boxShadow: '0px 5px 60px rgba(0, 0, 0, 0.1)',
+        dropShadow: '0px 5px 40px rgba(0, 0, 0, 0.1)',
+        inputFocusBoxShadow: '0 3px 10px 0 rgba(0, 0, 0, 0.15)',
+        dropdownMenuShadow: '0 5px 25px rgba(0, 0, 0, 0.1)',
+        tooltipBoxShadow: '0px 2px 20px rgba(0, 0, 0, 0.1)',
+        cardShadow: '0 3px 10px 0 rgba(0, 0, 0, 0.15)',
+        smooth: '0px 4px 25px 0px #0000001a',
+        // redesign:
+        dialogShadow: '1px 4px 7px rgba(0, 0, 0, 0.4)',
+        tooltipShadow: '0px 1px 4px 0 #B1B8C3',
+        headerShadow: '1px 2px 3px #00000029',
+        headerShadowB: '1px 1px 3px #00000029',
+        headerShadowNotifications: '1px 1px 2px #00000029',
+        cornerDialogShadow: '1px 1px 3px 1px #00000029',
+    },
+    space: [0, 4, 8, 16, 24, 48, 96, 144, 192, 240],
+    transitions: {
+        simpleLong: 'all 2s',
+        inputTransition: 'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out',
+    },
+    zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999],
+};
+export default defaultTheme;

package/ThemeProvider/themes/index.d.ts

@@ -0,0 +1,351 @@
+declare const themes: {
+    default: {
+        breakpoints: string[];
+        colors: {
+            white: string;
+            bgLightGray: string;
+            bgLightGray1: string;
+            lightGray1: string;
+            lightGray2: string;
+            lightGray3: string;
+            lightGray4: string;
+            lightGray5: string;
+            lightGray6: string;
+            lightGray7: string;
+            neutral20: string;
+            neutral300: string;
+            neutral500: string;
+            gray: string;
+            gray1: string;
+            gray2: string;
+            gray3: string;
+            gray4: string;
+            gray5: string;
+            blue1: string;
+            blue2: string;
+            blue3: string;
+            blue4: string;
+            textPrimary: string;
+            textTertiary: string;
+            typoPrimary: string;
+            blue10: string;
+            blue20: string;
+            blue60: string;
+            blue70: string;
+            blue80: string;
+            blue90: string;
+            teal20: string;
+            teal40: string;
+            teal50: string;
+            teal60: string;
+            teal70: string;
+            teal80: string;
+            teal90: string;
+            green10: string;
+            green20: string;
+            green30: string;
+            green50: string;
+            green60: string;
+            green70: string;
+            green80: string;
+            green90: string;
+            green: string;
+            successColor: string;
+            darkGreen: string;
+            orange20: string;
+            orange30: string;
+            orange50: string;
+            orange60: string;
+            orange80: string;
+            yellow10: string;
+            yellow20: string;
+            yellow60: string;
+            yellow70: string;
+            yellow1: string;
+            yellow2: string;
+            red10: string;
+            red20: string;
+            red30: string;
+            red50: string;
+            red1: string;
+            red2: string;
+            red3: string;
+            red60: string;
+            red80: string;
+            dangerColor: string;
+            purple20: string;
+            purple40: string;
+            purple50: string;
+            purple60: string;
+            purple80: string;
+            purple90: string;
+            magenta20: string;
+            magenta60: string;
+            magenta80: string;
+            magenta90: string;
+        };
+        fonts: {
+            primary: string;
+            heading: string;
+        };
+        fontLinks: string[];
+        fontSizes: string[];
+        lineHeights: number[];
+        fontWeights: {
+            default: null;
+            normal: number;
+            medium: number;
+            semiBold: number;
+            bold: number;
+        };
+        letterSpacings: {
+            default: null;
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        borders: {
+            slim: string;
+            mediumSlim: string;
+            medium: string;
+            mediumThick: string;
+            thick: string;
+        };
+        radii: {
+            sm: string;
+            md: string;
+            ml: string;
+            lg: string;
+            xl: string;
+        };
+        shadows: {
+            boxShadow: string;
+            dropShadow: string;
+            inputFocusBoxShadow: string;
+            dropdownMenuShadow: string;
+            tooltipBoxShadow: string;
+            cardShadow: string;
+            smooth: string;
+            dialogShadow: string;
+            tooltipShadow: string;
+            headerShadow: string;
+            headerShadowB: string;
+            headerShadowNotifications: string;
+            cornerDialogShadow: string;
+        };
+        space: number[];
+        transitions: {
+            simpleLong: string;
+            inputTransition: string;
+        };
+        zIndices: number[];
+    };
+    light: import("..").Theme;
+    mailwise: {
+        screens: {
+            _: number;
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            '2xl': number;
+        };
+        colors: {
+            white: string;
+            bgLightGray: string;
+            bgLightGray1: string;
+            lightGray1: string;
+            lightGray2: string;
+            lightGray3: string;
+            lightGray4: string;
+            lightGray5: string;
+            lightGray6: string;
+            lightGray7: string;
+            neutral20: string;
+            gray: string;
+            gray1: string;
+            gray2: string;
+            gray3: string;
+            gray4: string;
+            gray5: string;
+            neutral300: string;
+            blue1: string;
+            blue2: string;
+            blue3: string;
+            blue4: string;
+            textPrimary: string;
+            typoPrimary: string;
+            blue10: string;
+            blue20: string;
+            blue60: string;
+            blue70: string;
+            blue80: string;
+            blue90: string;
+            teal20: string;
+            teal40: string;
+            teal50: string;
+            teal60: string;
+            teal70: string;
+            teal80: string;
+            teal90: string;
+            green10: string;
+            green20: string;
+            green30: string;
+            green50: string;
+            green60: string;
+            green70: string;
+            green80: string;
+            green90: string;
+            green: string;
+            successColor: string;
+            darkGreen: string;
+            orange20: string;
+            orange30: string;
+            orange50: string;
+            orange60: string;
+            orange80: string;
+            yellow10: string;
+            yellow20: string;
+            yellow60: string;
+            yellow70: string;
+            yellow1: string;
+            yellow2: string;
+            red10: string;
+            red20: string;
+            red30: string;
+            red50: string;
+            red1: string;
+            red2: string;
+            red3: string;
+            red60: string;
+            red80: string;
+            dangerColor: string;
+            purple20: string;
+            purple40: string;
+            purple50: string;
+            purple60: string;
+            purple80: string;
+            purple90: string;
+            magenta20: string;
+            magenta60: string;
+            magenta80: string;
+            magenta90: string;
+            primary: string;
+            black: string;
+            error: string;
+            secondary: string;
+        };
+        fonts: {
+            primary: string;
+            heading: string;
+        };
+        fontSizes: string[];
+        lineHeights: {
+            none: number;
+            tight: number;
+            snug: number;
+            normal: number;
+            relaxed: number;
+            loose: number;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+        fontWeights: {
+            normal: number;
+            medium: number;
+            semiBold: number;
+            bold: number;
+        };
+        letterSpacings: {
+            tighter: string;
+            tight: string;
+            normal: string;
+            wide: string;
+            wider: string;
+            widest: string;
+        };
+        borders: {
+            slim: string;
+            mediumSlim: string;
+            medium: string;
+            mediumThick: string;
+            thick: string;
+        };
+        radii: {
+            none: string;
+            sm: string;
+            default: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+            full: string;
+        };
+        shadows: {
+            boxShadow: string;
+            dropShadow: string;
+            inputFocusBoxShadow: string;
+            dropdownMenuShadow: string;
+            tooltipBoxShadow: string;
+            cardShadow: string;
+            smooth: string;
+            dialogShadow: string;
+            tooltipShadow: string;
+            headerShadow: string;
+            headerShadowB: string;
+            headerShadowNotifications: string;
+            cornerDialogShadow: string;
+        };
+        space: {
+            px: string;
+            0: string;
+            0.5: string;
+            1: string;
+            1.5: string;
+            2: string;
+            2.5: string;
+            3: string;
+            3.5: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+            11: string;
+            12: string;
+            14: string;
+            16: string;
+            20: string;
+            24: string;
+            28: string;
+            32: string;
+            36: string;
+            40: string;
+            44: string;
+            48: string;
+            52: string;
+            56: string;
+            60: string;
+            64: string;
+            72: string;
+            80: string;
+            96: string;
+        };
+        transitions: {
+            simpleLong: string;
+            inputTransition: string;
+        };
+        zIndices: number[];
+    };
+};
+export default themes;

package/ThemeProvider/themes/index.js

@@ -0,0 +1,9 @@
+import defaultTheme from './default';
+import light from './light';
+import mailwise from './mailwise';
+var themes = {
+    default: defaultTheme,
+    light: light,
+    mailwise: mailwise
+};
+export default themes;

package/ThemeProvider/themes/light.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from "../types";
+declare const lightTheme: Theme;
+export default lightTheme;

package/ThemeProvider/themes/light.js

@@ -0,0 +1,7 @@
+var lightTheme = {
+    colors: {
+        primary: "#219615",
+        warning: "purple",
+    },
+};
+export default lightTheme;