@mailstep/design-system 0.8.30 → 0.8.31-beta.2

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

@@ -1,4 +1,96 @@
-declare const defaultTheme: {
+declare const mailwiseTheme: {
+    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;
+    };
+    radii: {
+        sm: string;
+        md: string;
+        ml: string;
+        lg: string;
+        xl: string;
+    };
+    shadows: {
+        tooltipShadow: string;
+        boxShadow: string;
+        dropShadow: string;
+        inputFocusBoxShadow: string;
+        dropdownMenuShadow: string;
+        tooltipBoxShadow: string;
+        cardShadow: string;
+        smooth: string;
+        dialogShadow: string;
+        headerShadow: string;
+        headerShadowB: string;
+        headerShadowNotifications: string;
+        cornerDialogShadow: string;
+        gridShadow: 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;
+    };
+    zIndices: number[];
     screens: {
         _: number;
         xs: number;
@@ -8,10 +100,13 @@ declare const defaultTheme: {
         xl: number;
         '2xl': number;
     };
+    breakpoints: string[];
     colors: {
+        black: string;
         white: string;
         bgLightGray: string;
         bgLightGray1: string;
+        bgLightGray2: string;
         lightGray1: string;
         lightGray2: string;
         lightGray3: string;
@@ -19,22 +114,29 @@ declare const defaultTheme: {
         lightGray5: string;
         lightGray6: string;
         lightGray7: string;
+        neutral10: string;
         neutral20: string;
+        neutral30: string;
+        neutral300: string;
+        neutral500: 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;
+        textTertiary: string;
         typoPrimary: string;
         blue10: string;
         blue20: string;
+        blue30: string;
+        blue40: string;
+        blue50: string;
         blue60: string;
         blue70: string;
         blue80: string;
@@ -66,12 +168,15 @@ declare const defaultTheme: {
         yellow20: string;
         yellow60: string;
         yellow70: string;
+        yellow80: string;
+        yellow90: string;
         yellow1: string;
         yellow2: string;
         red10: string;
         red20: string;
         red30: string;
         red50: string;
+        red70: string;
         red1: string;
         red2: string;
         red3: string;
@@ -84,50 +189,23 @@ declare const defaultTheme: {
         purple60: string;
         purple80: string;
         purple90: string;
+        magenta10: string;
         magenta20: string;
+        magenta30: string;
+        magenta40: string;
+        magenta50: string;
         magenta60: string;
+        magenta70: string;
         magenta80: string;
         magenta90: string;
-        primary: string;
-        black: string;
         error: string;
-        secondary: string;
+        sideMenuSelectedText: 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;
-    };
+    fontLinks: string[];
     borders: {
         slim: string;
         mediumSlim: string;
@@ -135,70 +213,9 @@ declare const defaultTheme: {
         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;
-        gridShadow: 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 defaultTheme;
+export default mailwiseTheme;

package/ui/ThemeProvider/themes/mailwise.js

@@ -1,230 +1,83 @@
-//#region packages/ui/ThemeProvider/themes/mailwise.ts
-const defaultTheme = {
-	screens: {
-		_: 0,
-		xs: 479,
-		sm: 721,
-		md: 768,
-		lg: 1024,
-		xl: 1280,
-		"2xl": 1536
-	},
-	colors: {
-		white: "#fff",
-		bgLightGray: "#FAFBFC",
-		bgLightGray1: "#F1F5F9",
-		lightGray1: "#F5F7FA",
-		lightGray2: "#EFF3F8",
-		lightGray3: "#D4D8DE",
-		lightGray4: "#B9BFC9",
-		lightGray5: "#A3B3C1",
-		lightGray6: "#D2D8DF",
-		lightGray7: "#E7EBEF",
-		neutral20: "#F1F5F9",
-		gray: "#8594A5",
-		gray1: "#7A90A1",
-		gray2: "#9AA1A7",
-		gray3: "#5F6C76",
-		gray4: "#455665",
-		gray5: "#647483",
-		neutral300: "#5E6C84",
-		blue1: "#2C4052",
-		blue2: "#22394E",
-		blue3: "#162C3F",
-		blue4: "#0C1F2F",
-		textPrimary: "#091E42",
-		typoPrimary: "#22394E",
-		blue10: "#F3F9FF",
-		blue20: "#dcf2ff",
-		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: "#FFDAD1",
-		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",
-		primary: "#626262",
-		black: "#333333",
-		error: "#ea5455",
-		secondary: "#E15B63"
-	},
-	fonts: {
-		primary: "Inter, sans-serif",
-		heading: "Inter, sans-serif"
-	},
-	fontSizes: [
-		"0rem",
-		"0.87rem",
-		"1rem",
-		"1.25rem",
-		"1.5rem",
-		"1.8rem",
-		"2.0rem",
-		"2.4rem",
-		"2.8rem",
-		"3.5rem",
-		"4rem"
-	],
-	lineHeights: {
-		none: 1.2,
-		tight: 1.2,
-		snug: 1.2,
-		normal: 1.2,
-		relaxed: 1.2,
-		loose: 1.2,
-		3: "1.2",
-		4: "1.2",
-		5: "1.2",
-		6: "1.2",
-		7: "1.2",
-		8: "1.2",
-		9: "1.2",
-		10: "1.2"
-	},
-	fontWeights: {
-		normal: 400,
-		medium: 500,
-		semiBold: 600,
-		bold: 700
-	},
-	letterSpacings: {
-		tighter: "2",
-		tight: "2",
-		normal: "4",
-		wide: "8",
-		wider: "8",
-		widest: "8"
-	},
-	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",
-		dialogShadow: "0px 4px 23px 0px rgba(0, 0, 0, 0.08)",
-		tooltipShadow: "0px 1px 4px 0 #B1B8C3",
-		headerShadow: "1px 2px 3px #00000029",
-		headerShadowB: "1px 1px 3px #00000029",
-		headerShadowNotifications: "1px 1px 2px #00000029",
-		gridShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.12)",
-		cornerDialogShadow: "1px 1px 3px 1px #00000029"
-	},
-	space: {
-		px: "1px",
-		0: "0",
-		.5: "0.125rem",
-		1: "0.25rem",
-		1.5: "0.375rem",
-		2: "0.5rem",
-		2.5: "0.625rem",
-		3: "0.75rem",
-		3.5: "0.875rem",
-		4: "1rem",
-		5: "1.25rem",
-		6: "1.5rem",
-		7: "1.75rem",
-		8: "2rem",
-		9: "2.25rem",
-		10: "2.5rem",
-		11: "2.75rem",
-		12: "3rem",
-		14: "3.5rem",
-		16: "4rem",
-		20: "5rem",
-		24: "6rem",
-		28: "7rem",
-		32: "8rem",
-		36: "9rem",
-		40: "10rem",
-		44: "11rem",
-		48: "12rem",
-		52: "13rem",
-		56: "14rem",
-		60: "15rem",
-		64: "16rem",
-		72: "18rem",
-		80: "20rem",
-		96: "24rem"
-	},
-	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
-	]
+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);
 };
-//#endregion
-export { defaultTheme as default };
+import defaultTheme from './default';
+var mailwiseTheme = __assign(__assign({}, defaultTheme), { fontSizes: ['0rem', '0.87rem', '1rem', '1.25rem', '1.5rem', '1.8rem', '2.0rem', '2.4rem', '2.8rem', '3.5rem', '4rem'], lineHeights: {
+        none: 1.2,
+        tight: 1.2,
+        snug: 1.2,
+        normal: 1.2,
+        relaxed: 1.2,
+        loose: 1.2,
+        3: '1.2',
+        4: '1.2',
+        5: '1.2',
+        6: '1.2',
+        7: '1.2',
+        8: '1.2',
+        9: '1.2',
+        10: '1.2'
+    }, fontWeights: {
+        normal: 400,
+        medium: 500,
+        semiBold: 600,
+        bold: 700
+    }, letterSpacings: {
+        tighter: '2',
+        tight: '2',
+        normal: '4',
+        wide: '8',
+        wider: '8',
+        widest: '8'
+    }, radii: {
+        sm: '2px',
+        md: '4px',
+        ml: '6px',
+        lg: '8px',
+        xl: '16px'
+    }, shadows: __assign(__assign({}, defaultTheme.shadows), { tooltipShadow: '0px 1px 4px 0 #B1B8C3' }), space: {
+        px: '1px',
+        0: '0',
+        0.5: '0.125rem',
+        1: '0.25rem',
+        1.5: '0.375rem',
+        2: '0.5rem',
+        2.5: '0.625rem',
+        3: '0.75rem',
+        3.5: '0.875rem',
+        4: '1rem',
+        5: '1.25rem',
+        6: '1.5rem',
+        7: '1.75rem',
+        8: '2rem',
+        9: '2.25rem',
+        10: '2.5rem',
+        11: '2.75rem',
+        12: '3rem',
+        14: '3.5rem',
+        16: '4rem',
+        20: '5rem',
+        24: '6rem',
+        28: '7rem',
+        32: '8rem',
+        36: '9rem',
+        40: '10rem',
+        44: '11rem',
+        48: '12rem',
+        52: '13rem',
+        56: '14rem',
+        60: '15rem',
+        64: '16rem',
+        72: '18rem',
+        80: '20rem',
+        96: '24rem'
+    }, zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999] });
+export default mailwiseTheme;

package/ui/ThemeProvider/types.d.ts

@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
+
 export type Color = Record<string, string>;
 export type Theme = {
     breakpoints?: {
@@ -25,7 +26,7 @@ export type Theme = {
 export type Themes = Record<string, Theme>;
 export interface Props {
     children: ReactNode;
-    theme: 'default' | 'light' | 'mailwise';
+    theme: 'default' | 'mailwise' | 'dark';
     preflight?: boolean;
     language?: string;
 }

package/ui/hooks/useToggleAndClose.js

@@ -1,18 +1,12 @@
-import { useState } from "react";
-//#region packages/ui/hooks/useToggleAndClose.ts
-const useToggleAndClose = (initialValue = true) => {
-	const [state, setState] = useState(initialValue);
-	const toggleHandler = () => {
-		setState((prev) => !prev);
-	};
-	const onClose = () => {
-		setState(false);
-	};
-	return [
-		state,
-		toggleHandler,
-		onClose
-	];
+import { useState } from 'react';
+export var useToggleAndClose = function (initialValue) {
+    if (initialValue === void 0) { initialValue = true; }
+    var _a = useState(initialValue), state = _a[0], setState = _a[1];
+    var toggleHandler = function () {
+        setState(function (prev) { return !prev; });
+    };
+    var onClose = function () {
+        setState(false);
+    };
+    return [state, toggleHandler, onClose];
 };
-//#endregion
-export { useToggleAndClose };