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

package/ui/ThemeProvider/themes/default.js

@@ -1,186 +1,171 @@
-//#region packages/ui/ThemeProvider/themes/default.ts
-const 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",
-		blue30: "#BFE0FF",
-		blue40: "#6FADFF",
-		blue50: "#2684FF",
-		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: "#198038",
-		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",
-		red70: "#CF2013",
-		red1: "#DB2B19",
-		red2: "#E94324",
-		red3: "#991E12",
-		red60: "#DB2B19",
-		red80: "#B71C1C",
-		dangerColor: "#E32C1E",
-		purple20: "#F0EDFF",
-		purple40: "#0072A0",
-		purple50: "#4573B3",
-		purple60: "#6554C0",
-		purple80: "#403294",
-		purple90: "#03235f",
-		magenta10: "#FFF7FB",
-		magenta20: "#FCF1F7",
-		magenta30: "#FFD6E8",
-		magenta40: "#FFAFD2",
-		magenta50: "#FF7EB6",
-		magenta60: "#EE5396",
-		magenta70: "#D12771",
-		magenta80: "#9F1853",
-		magenta90: "#7B1340"
-	},
-	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: {
-		light: 300,
-		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",
-		dialogShadow: "0px 4px 23px 0px rgba(0, 0, 0, 0.08)",
-		headerShadow: "1px 2px 3px #00000029",
-		headerShadowB: "1px 1px 3px #00000029",
-		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)"
-	},
-	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
-	]
+var defaultTheme = { screens: {
+        // same as xstyled default
+        _: 0,
+        xs: 479,
+        sm: 721,
+        md: 768,
+        lg: 1024,
+        xl: 1280,
+        '2xl': 1536
+    },
+    breakpoints: ['0'],
+    colors: {
+        black: '#333333',
+        white: '#FFFFFF',
+        bgLightGray: '#FAFBFC',
+        bgLightGray1: '#F1F5F9',
+        bgLightGray2: '#F1F5F9',
+        lightGray1: '#F5F7FA',
+        lightGray2: '#EFF3F8',
+        lightGray3: '#D4D8DE',
+        lightGray4: '#B9BFC9',
+        lightGray5: '#A3B3C1',
+        lightGray6: '#D2D8DF',
+        lightGray7: '#E7EBEF',
+        neutral10: '#FAFBFC',
+        neutral20: '#F1F5F9',
+        neutral30: '#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',
+        blue30: '#BFE0FF',
+        blue40: '#6FADFF',
+        blue50: '#2684FF',
+        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: '#198038',
+        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',
+        yellow80: '#D9B600',
+        yellow90: '#857000',
+        yellow1: '#FFD702',
+        yellow2: '#F2E871',
+        red10: '#FFF6F4',
+        red20: '#FFEBE6',
+        red30: '#FFDAD1',
+        red50: '#ff7c7b',
+        red70: '#CF2013',
+        red1: '#DB2B19',
+        red2: '#E94324',
+        red3: '#991E12',
+        red60: '#DB2B19',
+        red80: '#B71C1C',
+        dangerColor: '#E32C1E',
+        purple20: '#F0EDFF',
+        purple40: '#0072A0',
+        purple50: '#4573B3',
+        purple60: '#6554C0',
+        purple80: '#403294',
+        purple90: '#03235f',
+        magenta10: '#FFF7FB',
+        magenta20: '#FCF1F7',
+        magenta30: '#FFD6E8',
+        magenta40: '#FFAFD2',
+        magenta50: '#FF7EB6',
+        magenta60: '#EE5396',
+        magenta70: '#D12771',
+        magenta80: '#9F1853',
+        magenta90: '#7B1340',
+        error: '#ea5455',
+        // specific place for dark / light mode
+        sideMenuSelectedText: '#ffffff'
+    },
+    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: {
+        light: 300,
+        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: '0px 4px 23px 0px rgba(0, 0, 0, 0.08)',
+        headerShadow: '1px 2px 3px #00000029',
+        headerShadowB: '1px 1px 3px #00000029',
+        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)'
+    },
+    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]
 };
-//#endregion
-export { defaultTheme as default };
+export default defaultTheme;