@plum-xoxo/dsm

Design System

This is a reusable UI component library,created with atomic design model principles. It consists of atoms,molecules,organisms,templates and pages.

Install

npm install --save @plum-xoxo/dsm

• Import GlobalStyle Component at Root of project which adds required fonts and global styles.
• Import Theme component add pass it as an argument to the theme provider
• For other component's usage pls refer [storybook]

• Example: in _app.js

import { GlobalStyle, theme, ThemeProvider } from '@plum-xoxo/dsm'

class MyApp extends App {
  render() {
    return (
      <Container>
        <ThemeProvider theme={theme}>
          <React.Fragment>
            <GlobalStyle />
          </React.Fragment>
        </ThemeProvider>
      </Container>
    )
  }
}

---

theme.js

export default {
  breakpoints: {
    keys: ['md', 'lg'],
    values: {
      md: 1024,
      lg: 1440,
    },
  },
  direction: 'ltr',
  spaces: {
    0: 0,
    1: 4,
    2: 8,
    3: 12,
    4: 16,
    5: 20,
    6: 24,
    7: 28,
  },
  palette: {
    product: {
      pink100: '#F8ECF1',
      pink200: '#D72D5A',
      pink300: '#BC0E3C',
      pink400: '#6C0431',
      purple100: '#F8E2FF',
      purple200: '#AA34D3',
      purple300: '#75009D',
      purple400: '#410058',
    },
    neutral: {
      white: '#FFFFFF',
      black: '#000000',
    },
    grayscale: {
      gray50: '#FCFCFD',
      gray100: '#F6F8FA',
      gray200: '#EEF0F2',
      gray300: '#D1D5DA',
      gray400: '#6A737D',
      gray500: '#24292E',
    },
    status: {
      green100: '#F3FDF3',
      green200: '#05944F',
      green300: '#03582F',
      yellow100: '#FFF2D9',
      yellow200: '#FFC043',
      yellow300: '#997328',
      red100: '#FAEAEA',
      red200: '#D21C1C',
      red300: '#970C0C',
      blue100: '#F3F7FD',
      blue200: '#4382E0',
      blue300: '#0C254A',
      orangeLight: '#FDF0E3',
      orangeNormal: '#E98305',
      orangeDark: '#A25100',
      orangeDarker: '#803F00',
    },
  },
  shadows: {
    small: '0px 1px 2px rgba(0, 0, 0, 0.05)',
    base: '0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1)',
    medium:
      '0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)',
    large:
      '0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)',
    xLarge:
      '0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 25px 50px -5px rgba(0, 0, 0, 0.1)',
    showCard: '0px 2px 12px rgba(0, 0, 0, 0.15)',
  },
  typography: {
    baseFontSize: 16,
    baseFontFamily: 'Inter, sans-serif',
    fontWeightLight: 300,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
    fontWeightSemiBold: 600,
    fontFamily: {
      regular: {
        fontWeight: 400,
      },
      medium: {
        fontWeight: 500,
      },
      semibold: {
        fontWeight: 600,
      },
    },
    bodyXXSmall: {
      fontSize: '10px',
      lineHeight: '14px',
      letterSpacing: '0px',
      margin: '0px',
      fontWeight: 400,
    },
    bodyXSmall: {
      fontSize: '12px',
      lineHeight: '16px',
      letterSpacing: '0px',
      margin: '0px',
      fontWeight: 400,
    },
    bodyXSmallMedium: {
      fontSize: '12px',
      lineHeight: '16px',
      letterSpacing: '0px',
      margin: '0px',
      fontWeight: 500,
    },
    bodySmall: {
      fontSize: '14px',
      lineHeight: '20px',
      letterSpacing: '0px',
      margin: '0px',
      fontWeight: 400,
    },
    bodyRegular: {
      fontSize: '14px',
      lineHeight: '20px',
      letterSpacing: '0px',
      margin: '0px',
      fontWeight: 400,
    },
    bodyMedium: {
      fontSize: '14px',
      lineHeight: '20px',
      letterSpacing: '0px',
      margin: '0px',
      fontWeight: 500,
    },
    bodyLarge: {
      fontSize: '16px',
      lineHeight: '24px',
      letterSpacing: '0px',
      margin: '0px',
      fontWeight: 400,
    },
    headingXsmallMedium: {
      fontSize: '16px',
      lineHeight: '20px',
      letterSpacing: '0px',
      margin: '0px',
      fontWeight: 500,
    },
    headingSmallMedium: {
      fontSize: '18px',
      lineHeight: '24px',
      letterSpacing: '0px',
      margin: '0px',
      fontWeight: 500,
    },
    headingMedium: {
      fontSize: '20px',
      lineHeight: '24px',
      letterSpacing: '0px',
      margin: '0px',
      fontWeight: 500,
    },
    headingRegular: {
      fontSize: '20px',
      lineHeight: '24px',
      letterSpacing: '0px',
      margin: '0px',
      fontWeight: 400,
    },
    headingLargeSemiBold: {
      fontSize: '24px',
      lineHeight: '32px',
      letterSpacing: '0px',
      margin: '0px',
      fontWeight: 600,
    },
    headingXLargeSemiBold: {
      fontSize: '30px',
      lineHeight: '36px',
      letterSpacing: '0px',
      margin: '0px',
      fontWeight: 600,
    },
    placeholder: {
      fontSize: '14px',
      lineHeight: '20px',
      fontWeight: 400,
    },
    helperText: {
      fontSize: '14px',
      lineHeight: '20px',
      fontWeight: 400,
    },
    // h1: {
    //   fontSize: '24px',
    //   lineHeight: '36px',
    //   letterSpacing: '0px',
    //   margin: '0px',
    //   fontWeight: 500,
    // },
    // h2: {
    //   fontSize: '18px',
    //   lineHeight: '28px',
    //   letterSpacing: '0.5px',
    //   margin: '0px',
    //   fontWeight: 500,
    // },
    // h3: {
    //   fontSize: '14px',
    //   lineHeight: '24px',
    //   letterSpacing: '0.15px',
    //   margin: '0px',
    //   fontWeight: 500,
    // },
    // body: {
    //   fontSize: '14px',
    //   letterSpacing: '0.25px',
    //   lineHeight: '20px',
    //   fontStyle: 'normal',
    //   fontWeight: 300,
    // },
    // bodyLight: {
    //   fontSize: '12px',
    //   lineHeight: '16px',
    //   letterSpacing: '0.25px',
    //   fontWeight: '400',
    // },
    // bodySmall: {
    //   fontSize: '12px',
    //   lineHeight: '16px',
    //   letterSpacing: '0.25px',
    //   fontWeight: 300,
    // },
    // bodySemiBold: {
    //   fontSize: '12px',
    //   lineHeight: '16px',
    //   letterSpacing: '0.25px',
    //   fontWeight: 500,
    // },
    // label: {
    //   fontSize: '12px',
    //   lineHeight: '18px',
    //   letterSpacing: '0.25px',
    //   fontWeight: 300,
    // },
    // placeholder: {
    //   fontSize: '14px',
    //   lineHeight: '20px',
    //   letterSpacing: '0.25px',
    //   fontWeight: 300,
    // },
    // buttonText: {
    //   fontSize: '14px',
    //   lineHeight: '20px',
    //   color: '#0070FF',
    //   letterSpacing: '0.25px',
    //   fontWeight: 400,
    // },
    // helperText: {
    //   fontSize: '12px',
    //   lineHeight: '18px',
    //   letterSpacing: '0.4px',
    //   fontWeight: 300,
    // },
    // captionText: {
    //   fontSize: '12px',
    //   lineHeight: '18px',
    //   textTransform: 'uppercase',
    //   letterSpacing: '0.5px',
    //   fontWeight: 300,
    // },
  },
  borderRadius: {
    primary: 4,
    secondary: 24,
    tertiary: 8,
  },
  transitions: {
    easing: {
      easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
      easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
      easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
      sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
    },
    duration: {
      shortest: 150,
      shorter: 200,
      short: 250,
      standard: 300,
      complex: 375,
      enteringScreen: 225,
      leavingScreen: 195,
    },
  },
  zIndex: {
    context: 800,
    hoverOver: 1000,
    appBar: 1100,
    drawer: 1200,
    modal: 1300,
    snackbar: 1400,
    tooltip: 1500,
    rail: 1600,
  },
}

License

MIT © Plum