@otovo/rainbow

🌈 Rainbow

Otovo's Design System

Getting started

1. Install Rainbow and its peer dependencies

yarn add @otovo/rainbow @emotion/core @emotion/styled emotion-theming styled-system

1. Add the Rainbow theme your app.js

import { ThemeProvider } from 'emotion-theming';
import { theme } from '@otovo/rainbow';

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <Page />
      </ThemeProvider>
    );
  }
}

1. Go to town

import { H2, BodyM, CORE, BORDER } from '@otovo/rainbow';
import styled from '@emotion/styled';

const CustomCard = styled.div`
  ${CORE}
  ${BORDER}
`;

export default () => (
  <CustomCard bg="green.10" p="4" mb="3" borderRadius="2">
    <H2 color="green.4">Welcome...</H2>
    <BodyM color="green.2">to Zombo.com</BodyM>
  </CustomCard>
);

Documentation 📚

To learn more about Rainbow, take a look at https://rainbow.otovo.com.

It might also be worth reading up on its dependencies, Emotion and Styled System.

Updates to Rainbow should be reflected in the rainbow-documentation repo.

Development 👩🏼‍💻

Before you start making changes to rainbow, you should set up a link to rainbow-documentation. This will make it a lot easier to test your changes. Linking the repo can be done as follows (assuming you have placed the repos in ~/projects):

cd ~/projects/rainbow
yarn link

cd ~/projects/rainbow-documentation
yarn link @otovo/rainbow

Great! You're almost set. To rebuild the distribution whenever you change something, run...

yarn dev

Psst! Remember to update the rainbow-documentation whenever you make changes to rainbow 🤓

Publishing 📦

To release a new version to NPM, run...

yarn run release

The script will hold your hand through the rest of the process. Remember to use semantic versioning.