@mailstep/design-system 0.0.0

package/src/stories/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/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "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,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

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

package/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})