@mailstep/design-system 0.8.16-beta.2 → 0.8.16-beta.21

package/ui/ThemeProvider/themes/default.js

@@ -11,7 +11,9 @@ var defaultTheme = {
         lightGray5: '#A3B3C1',
         lightGray6: '#D2D8DF',
         lightGray7: '#E7EBEF',
+        neutral10: '#FAFBFC',
         neutral20: '#F1F5F9',
+        neutral30: '#F1F5F9',
         neutral300: '#5E6C84',
         neutral500: '#42526E',
         gray: '#8594A5',
@@ -91,10 +93,12 @@ var defaultTheme = {
         magenta70: '#D12771',
         magenta80: '#9F1853',
         magenta90: '#7B1340',
+        // specific place for dark / light mode
+        // sideMenuSelectedText: '#ffffff',
     },
     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 +108,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 +129,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 +146,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], // same as xstyled default
+    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,7 +12,9 @@ declare const themes: {
             lightGray5: string;
             lightGray6: string;
             lightGray7: string;
+            neutral10: string;
             neutral20: string;
+            neutral30: string;
             neutral300: string;
             neutral500: string;
             gray: string;
@@ -150,7 +152,6 @@ declare const themes: {
         };
         zIndices: number[];
     };
-    light: import('..').Theme;
     mailwise: {
         screens: {
             _: number;
@@ -354,5 +355,158 @@ 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;
+            neutral30: 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/themes/mailwise.js

@@ -156,7 +156,7 @@ var defaultTheme = {
         smooth: '0px 4px 25px 0px #0000001a',
         // redesign:
         dialogShadow: '0px 4px 23px 0px rgba(0, 0, 0, 0.08)',
-        tooltipShadow: '0px 1px 4px 0 #B1B8C3', // color is grayIII
+        tooltipShadow: '0px 1px 4px 0 #B1B8C3',
         headerShadow: '1px 2px 3px #00000029',
         headerShadowB: '1px 1px 3px #00000029',
         headerShadowNotifications: '1px 1px 2px #00000029',

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;
 }