@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 @styled-system/theme-get

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 } 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.

1. Add the dependency

yarn add babel-plugin-emotion

1. 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.