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

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