@mailstep/design-system 0.0.6 → 0.0.7

package/src/ui/ThemeProvider/ThemeProvider.tsx

@@ -1,14 +0,0 @@
-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/ui/ThemeProvider/index.d.ts

@@ -1,8 +0,0 @@
-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/ui/ThemeProvider/index.ts

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

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

@@ -1,144 +0,0 @@
-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/ui/ThemeProvider/themes/index.ts

@@ -1,11 +0,0 @@
-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/ui/ThemeProvider/themes/light.ts

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

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

@@ -1,215 +0,0 @@
-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/ui/ThemeProvider/types.ts

@@ -1,54 +0,0 @@
-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/ui/ThemeProvider/yarn.lock

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

package/src/ui/index.ts

@@ -1,2 +0,0 @@
-
-export { default as Button } from './Elements/Button'

package/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "noImplicitAny": false,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,31 +0,0 @@
-import react from '@vitejs/plugin-react-swc'
-import path from 'node:path';
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-
-export default defineConfig({
-    plugins: [
-        react(),
-        dts({
-            insertTypesEntry: true,
-        }),
-    ],
-    build: {
-        lib: {
-            entry: path.resolve(__dirname, 'src/ui/index.ts'),
-            name: 'index',
-            formats: ['es', 'umd'],
-            fileName: (format) => `index.${format}.js`,
-        },
-        rollupOptions: {
-            external: ['react', 'react-dom', 'react-router-dom','styled-components'],
-            output: {
-                globals: {
-                    react: 'React',
-                    'react-dom': 'ReactDOM',
-                    'styled-components': 'styled',
-                },
-            },
-        },
-    },
-});