@mailstep/design-system 0.0.0

package/src/packages/ui/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,14 @@
+import { ThemeProvider, Preflight } from '@xstyled/styled-components'
+import themes from './themes'
+import { Props } from './types'
+
+const MailstepThemeProvider = ({ children, theme = 'default', preflight = true }: Props) => {
+  return (
+    <ThemeProvider theme={themes[theme]}>
+      {preflight && <Preflight />}
+      {children}
+    </ThemeProvider>
+  )
+}
+
+export default MailstepThemeProvider

package/src/packages/ui/ThemeProvider/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react'
+import { Props, Color, Theme, Themes } from './types'
+
+declare const ThemeProvider: FC<Props>
+declare const themes: Themes
+
+export { Color, Theme, Themes, themes }
+export default ThemeProvider

package/src/packages/ui/ThemeProvider/index.ts

@@ -0,0 +1,6 @@
+import ThemeProvider from './ThemeProvider'
+import themes from './themes'
+
+export * from './types'
+export { themes }
+export default ThemeProvider

package/src/packages/ui/ThemeProvider/themes/default.ts

@@ -0,0 +1,144 @@
+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',
+    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',
+    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: '#fec1cb',
+    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',
+  },
+  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: {
+    default: null,
+    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: '1px 4px 7px rgba(0, 0, 0, 0.4)',
+    tooltipShadow: '0px 1px 4px 0 #B1B8C3', // color is grayIII
+    headerShadow: '1px 2px 3px #00000029',
+    headerShadowB: '1px 1px 3px #00000029',
+    headerShadowNotifications: '1px 1px 2px #00000029',
+    cornerDialogShadow: '1px 1px 3px 1px #00000029',
+  },
+  space: [0, 4, 8, 16, 24, 48, 96, 144, 192, 240], // same as xstyled default
+  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],
+}
+
+export default defaultTheme

package/src/packages/ui/ThemeProvider/themes/index.ts

@@ -0,0 +1,11 @@
+import defaultTheme from './default'
+import light from './light'
+import mailwise from './mailwise'
+
+const themes = {
+  default: defaultTheme,
+  light: light,
+  mailwise: mailwise
+}
+
+export default themes

package/src/packages/ui/ThemeProvider/themes/light.ts

@@ -0,0 +1,10 @@
+import { Theme } from "../types";
+
+const lightTheme: Theme = {
+  colors: {
+    primary: "#219615",
+    warning: "purple",
+  },
+};
+
+export default lightTheme;

package/src/packages/ui/ThemeProvider/themes/mailwise.ts

@@ -0,0 +1,215 @@
+const defaultTheme = {
+  screens: {
+    // same as xstyled default
+    _: 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: '#fec1cb',
+    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',
+   },
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  fontSizes: ['0rem', '0.87rem', '1rem', '1.25rem', '1.5rem', '1.8rem', '2.0rem', '2.4rem', '2.8rem', '3.5rem', '4rem'],
+  // @ts-ignore
+  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: {
+    none: '2px',
+    sm: '5px',
+    default: '10px',
+    md: '20px',
+    lg: '20px',
+    xl: '20px',
+    '2xl': '20px',
+    '3xl': '20px',
+    full: '20px',
+  },
+  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: '1px 4px 7px rgba(0, 0, 0, 0.4)',
+    tooltipShadow: '0px 1px 4px 0 #B1B8C3', // color is grayIII
+    headerShadow: '1px 2px 3px #00000029',
+    headerShadowB: '1px 1px 3px #00000029',
+    headerShadowNotifications: '1px 1px 2px #00000029',
+    cornerDialogShadow: '1px 1px 3px 1px #00000029',
+  },
+  space: {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    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',
+  },
+  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],
+}
+
+export default defaultTheme

package/src/packages/ui/ThemeProvider/types.ts

@@ -0,0 +1,54 @@
+import React from 'react'
+
+export type Color = {
+  [key: string]: string
+}
+
+export type Theme = {
+  breakpoints?: {
+    xs: number
+    sm: number
+    md: number
+    lg: number
+    xl: number
+  }
+  colors?: {
+    [key: string]: string | Color
+  }
+  fonts?: {
+    [key: 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
+  }
+  spaces?: number[]
+  lineHeights?: number[]
+  transitions?: {
+    [key: string]: string
+  }
+  zIndices?: number[]
+}
+
+export type Themes = {
+  [key: string]: Theme
+}
+
+export interface Props {
+  children: React.ReactNode
+  theme: 'default' | 'light' | 'mailwise'
+  preflight?: boolean
+}

package/src/packages/ui/ThemeProvider/yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

package/src/stories/themes/default.ts

@@ -0,0 +1,144 @@
+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',
+    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',
+    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: '#fec1cb',
+    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',
+  },
+  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: {
+    default: null,
+    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: '1px 4px 7px rgba(0, 0, 0, 0.4)',
+    tooltipShadow: '0px 1px 4px 0 #B1B8C3', // color is grayIII
+    headerShadow: '1px 2px 3px #00000029',
+    headerShadowB: '1px 1px 3px #00000029',
+    headerShadowNotifications: '1px 1px 2px #00000029',
+    cornerDialogShadow: '1px 1px 3px 1px #00000029',
+  },
+  space: [0, 4, 8, 16, 24, 48, 96, 144, 192, 240], // same as xstyled default
+  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],
+}
+
+export default defaultTheme

package/src/stories/themes/index.ts

@@ -0,0 +1,11 @@
+import defaultTheme from './default'
+import light from './light'
+import mailwise from './mailwise'
+
+const themes = {
+  default: defaultTheme,
+  light: light,
+  mailwise: mailwise
+}
+
+export default themes

package/src/stories/themes/light.ts

@@ -0,0 +1,10 @@
+import { Theme } from "../types";
+
+const lightTheme: Theme = {
+  colors: {
+    primary: "#219615",
+    warning: "purple",
+  },
+};
+
+export default lightTheme;