@mailstep/design-system 0.8.16-beta.1 → 0.8.16-beta.11

package/ui/ThemeProvider/ThemeProvider.d.ts

@@ -1,5 +1,6 @@
+import { FC } from 'react';
 import { Props } from './types';
 
 export declare const LanguageContext: import('react').Context<string>;
-declare const MailstepThemeProvider: ({ children, theme, preflight, language }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const MailstepThemeProvider: FC<Props>;
 export default MailstepThemeProvider;

package/ui/ThemeProvider/ThemeProvider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext } from 'react';
 import { ThemeProvider, Preflight } from '@xstyled/styled-components';
 import themes from './themes';
-import { createContext } from 'react';
 export var LanguageContext = createContext('en');
 var MailstepThemeProvider = function (_a) {
     var children = _a.children, _b = _a.theme, theme = _b === void 0 ? 'default' : _b, _c = _a.preflight, preflight = _c === void 0 ? true : _c, _d = _a.language, language = _d === void 0 ? 'en' : _d;

package/ui/ThemeProvider/themes/dark.d.ts

@@ -0,0 +1,153 @@
+declare const darkTheme: {
+    colors: {
+        bgLightGray: string;
+        bgLightGray1: string;
+        typoPrimary: string;
+        textPrimary: string;
+        white: string;
+        lightGray7: string;
+        neutral20: string;
+        red1: string;
+        red20: string;
+        red30: string;
+        blue2: string;
+        lightGray1: string;
+        blue3: string;
+        lightGray2: string;
+        lightGray3: string;
+        lightGray4: string;
+        lightGray5: string;
+        lightGray6: string;
+        neutral10: string;
+        neutral300: string;
+        neutral500: string;
+        gray: string;
+        gray1: string;
+        gray2: string;
+        gray3: string;
+        gray4: string;
+        gray5: string;
+        blue1: string;
+        blue4: string;
+        textTertiary: string;
+        blue10: string;
+        blue20: string;
+        blue30: string;
+        blue40: string;
+        blue50: 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;
+        red50: string;
+        red70: string;
+        red2: string;
+        red3: string;
+        red60: string;
+        red80: string;
+        dangerColor: string;
+        purple20: string;
+        purple40: string;
+        purple50: string;
+        purple60: string;
+        purple80: string;
+        purple90: string;
+        magenta10: string;
+        magenta20: string;
+        magenta30: string;
+        magenta40: string;
+        magenta50: string;
+        magenta60: string;
+        magenta70: string;
+        magenta80: string;
+        magenta90: string;
+    };
+    shadows: {
+        dialogShadow: string;
+        boxShadow: string;
+        dropShadow: string;
+        inputFocusBoxShadow: string;
+        dropdownMenuShadow: string;
+        tooltipBoxShadow: string;
+        cardShadow: string;
+        smooth: string;
+        headerShadow: string;
+        headerShadowB: string;
+        headerShadowNotifications: string;
+        cornerDialogShadow: string;
+        gridShadow: string;
+        tooltipShadow: string;
+    };
+    breakpoints: string[];
+    fonts: {
+        primary: string;
+        heading: string;
+    };
+    fontLinks: string[];
+    fontSizes: string[];
+    lineHeights: number[];
+    fontWeights: {
+        light: number;
+        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;
+    };
+    space: number[];
+    transitions: {
+        simpleLong: string;
+        inputTransition: string;
+    };
+    zIndices: number[];
+};
+export default darkTheme;

package/ui/ThemeProvider/themes/dark.js

@@ -0,0 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import defaultTheme from './default';
+var darkTheme = __assign(__assign({}, defaultTheme), { colors: __assign(__assign({}, defaultTheme.colors), { bgLightGray: '#131A27', bgLightGray1: '#2a4054', typoPrimary: '#ffffff', textPrimary: '#ffffff', white: '#2a4054', lightGray7: '#5f5f5f', neutral20: '#2a4054', red1: '#d0d0d0', red20: '#5f5f5f', red30: '#8594A5', blue2: '#ffffff', lightGray1: '#162C3F', blue3: '#2a4054' }), shadows: __assign(__assign({}, defaultTheme.shadows), { dialogShadow: '0px 4px 23px 0px rgba(255, 255, 255, 0.08)' }) });
+export default darkTheme;

package/ui/ThemeProvider/themes/default.d.ts

@@ -11,6 +11,7 @@ declare const defaultTheme: {
         lightGray5: string;
         lightGray6: string;
         lightGray7: string;
+        neutral10: string;
         neutral20: string;
         neutral300: string;
         neutral500: string;

package/ui/ThemeProvider/themes/default.js

@@ -11,6 +11,7 @@ var defaultTheme = {
         lightGray5: '#A3B3C1',
         lightGray6: '#D2D8DF',
         lightGray7: '#E7EBEF',
+        neutral10: '#FAFBFC',
         neutral20: '#F1F5F9',
         neutral300: '#5E6C84',
         neutral500: '#42526E',
@@ -90,11 +91,11 @@ var defaultTheme = {
         magenta60: '#EE5396',
         magenta70: '#D12771',
         magenta80: '#9F1853',
-        magenta90: '#7B1340',
+        magenta90: '#7B1340'
     },
     fonts: {
         primary: 'Inter, sans-serif',
-        heading: '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'],
@@ -104,20 +105,20 @@ var defaultTheme = {
         normal: 400,
         medium: 500,
         semiBold: 600,
-        bold: 700,
+        bold: 700
     },
     letterSpacings: {
         default: null,
         sm: '2px',
         md: '4px',
-        lg: '8px',
+        lg: '8px'
     },
     borders: {
         slim: '1px solid',
         mediumSlim: '2px solid',
         medium: '3px solid',
         mediumThick: '6px solid',
-        thick: '10px solid',
+        thick: '10px solid'
     },
     // ...........................
     radii: {
@@ -125,7 +126,7 @@ var defaultTheme = {
         md: '4px',
         ml: '6px',
         lg: '8px',
-        xl: '16px',
+        xl: '16px'
     },
     shadows: {
         boxShadow: '0px 5px 60px rgba(0, 0, 0, 0.1)',
@@ -142,13 +143,13 @@ var defaultTheme = {
         headerShadowNotifications: '1px 1px 2px #00000029',
         cornerDialogShadow: '1px 1px 3px 1px #00000029',
         gridShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.12)',
-        tooltipShadow: '0px 2px 20px 0px rgba(0, 0, 0, 0.10)',
+        tooltipShadow: '0px 2px 20px 0px rgba(0, 0, 0, 0.10)'
     },
     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',
+        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],
+    zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999]
 };
 export default defaultTheme;

package/ui/ThemeProvider/themes/index.d.ts

@@ -12,6 +12,7 @@ declare const themes: {
             lightGray5: string;
             lightGray6: string;
             lightGray7: string;
+            neutral10: string;
             neutral20: string;
             neutral300: string;
             neutral500: string;
@@ -150,7 +151,6 @@ declare const themes: {
         };
         zIndices: number[];
     };
-    light: import('..').Theme;
     mailwise: {
         screens: {
             _: number;
@@ -354,5 +354,157 @@ declare const themes: {
         };
         zIndices: number[];
     };
+    dark: {
+        colors: {
+            bgLightGray: string;
+            bgLightGray1: string;
+            typoPrimary: string;
+            textPrimary: string;
+            white: string;
+            lightGray7: string;
+            neutral20: string;
+            red1: string;
+            red20: string;
+            red30: string;
+            blue2: string;
+            lightGray1: string;
+            blue3: string;
+            lightGray2: string;
+            lightGray3: string;
+            lightGray4: string;
+            lightGray5: string;
+            lightGray6: string;
+            neutral10: string;
+            neutral300: string;
+            neutral500: string;
+            gray: string;
+            gray1: string;
+            gray2: string;
+            gray3: string;
+            gray4: string;
+            gray5: string;
+            blue1: string;
+            blue4: string;
+            textTertiary: string;
+            blue10: string;
+            blue20: string;
+            blue30: string;
+            blue40: string;
+            blue50: 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;
+            red50: string;
+            red70: string;
+            red2: string;
+            red3: string;
+            red60: string;
+            red80: string;
+            dangerColor: string;
+            purple20: string;
+            purple40: string;
+            purple50: string;
+            purple60: string;
+            purple80: string;
+            purple90: string;
+            magenta10: string;
+            magenta20: string;
+            magenta30: string;
+            magenta40: string;
+            magenta50: string;
+            magenta60: string;
+            magenta70: string;
+            magenta80: string;
+            magenta90: string;
+        };
+        shadows: {
+            dialogShadow: string;
+            boxShadow: string;
+            dropShadow: string;
+            inputFocusBoxShadow: string;
+            dropdownMenuShadow: string;
+            tooltipBoxShadow: string;
+            cardShadow: string;
+            smooth: string;
+            headerShadow: string;
+            headerShadowB: string;
+            headerShadowNotifications: string;
+            cornerDialogShadow: string;
+            gridShadow: string;
+            tooltipShadow: string;
+        };
+        breakpoints: string[];
+        fonts: {
+            primary: string;
+            heading: string;
+        };
+        fontLinks: string[];
+        fontSizes: string[];
+        lineHeights: number[];
+        fontWeights: {
+            light: number;
+            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;
+        };
+        space: number[];
+        transitions: {
+            simpleLong: string;
+            inputTransition: string;
+        };
+        zIndices: number[];
+    };
 };
 export default themes;

package/ui/ThemeProvider/themes/index.js

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

package/ui/ThemeProvider/types.d.ts

@@ -1,8 +1,6 @@
-import { default as React } from 'react';
+import { ReactNode } from 'react';
 
-export type Color = {
-    [key: string]: string;
-};
+export type Color = Record<string, string>;
 export type Theme = {
     breakpoints?: {
         xs: number;
@@ -11,42 +9,24 @@ export type Theme = {
         lg: number;
         xl: number;
     };
-    colors?: {
-        [key: string]: string | Color;
-    };
-    fonts?: {
-        [key: string]: string;
-    };
+    colors?: Record<string, string | Color>;
+    fonts?: Record<string, string>;
     fontLinks?: string[];
     fontSizes?: string[];
-    fontWeights?: {
-        [key: string]: number | null;
-    };
-    letterSpacings?: {
-        [key: string]: string | null;
-    };
-    borders?: {
-        [key: string]: string;
-    };
-    radii?: {
-        [key: string]: string;
-    };
-    shadows?: {
-        [key: string]: string;
-    };
+    fontWeights?: Record<string, number | null>;
+    letterSpacings?: Record<string, string | null>;
+    borders?: Record<string, string>;
+    radii?: Record<string, string>;
+    shadows?: Record<string, string>;
     spaces?: number[];
     lineHeights?: number[];
-    transitions?: {
-        [key: string]: string;
-    };
+    transitions?: Record<string, string>;
     zIndices?: number[];
 };
-export type Themes = {
-    [key: string]: Theme;
-};
+export type Themes = Record<string, Theme>;
 export interface Props {
-    children: React.ReactNode;
-    theme: 'default' | 'light' | 'mailwise';
+    children: ReactNode;
+    theme: 'default' | 'mailwise' | 'dark';
     preflight?: boolean;
     language?: string;
 }