@otovo/rainbow

🌈 Rainbow

Otovo's Design System

Getting started

• Install Rainbow and its peer dependencies

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

• 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>
    );
  }
}

• Go to town

import { H2, BodyM } from '@otovo/rainbow';
import styled from '@emotion/styled';
import { compose, color, space, border } from 'styled-system';

const CustomCard = styled.div`
  ${compose(
    color,
    space,
    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>
);

Bonus tip!

If your project already has babel set up, I highly recommend adding babel-plugin-emotion to your project. It provides several benefits, such as added functionality, minification, dead code elimination, source maps. You can read more about it here.

• Add the dependency

yarn add babel-plugin-emotion

• Add the following to .babelrc

{
  "plugins": ["emotion"]
}

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.