BlackBoard

BlackBoard is a Quipper Design System.

Installation

Install Blackboard by running either of the following:

npm i quipper-blackboard @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5

yarn add quipper-blackboard @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5

And then setup the provider on your root app

import * as React from 'react'

import { ChakraProvider, extendTheme } from '@chakra-ui/react'
// blackboard theme
import { theme as blackboardTheme } from 'quipper-blackboard';
// your custom theme
import { customTheme } from 'path-to-your-custom-theme';


function App({ Component }) {
  return (
    <ChakraProvider theme={extendTheme(blackboardTheme.light, customTheme)}>
      <Component />
    </ChakraProvider>
  )
}

Last one, because we are using Open Sans as default font, we need to load the font. Add these codes to the root app.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet"
/>