@otovo/rainbow

🌈 Rainbow

Otovo's Design System

Getting started

1. Install Rainbow and its peer dependencies

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

2. Add the Rainbow theme your app.js

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

/** Optionally add custom theme overrides */
const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    blue_60: 'pink',
  },
};

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

3. 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 @emotion/babel-plugin 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 --dev @emotion/babel-plugin

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

Alternatively, if you're having trouble with yarn link (for instance when linking between a yarn@1.x repo with a yarn@2.x repo), you can check out yalc.

cd ~/projects/rainbow
yalc publish

cd ~/projects/rainbow-documentation
yalc add @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.

Upgrade from v3.x to v4.x

Version 4 upgrades to emotion@11.x. This introduces some breaking changes. For instance @emotion/core is renamed to @emotion/react. Make sure to run:

yarn remove @emotion/core
yarn add @emotion/react

Then update all import statements in your project from @emotion/core to @emotion/react.

Also, get() is deprecated. Replace occurrences with alternative syntax:

/** Replace: */
css`
  border-top: 1px solid ${get('colors.grey_1')};
`;
/** With: */
css`
  border-top: 1px solid ${(props) => props.theme.colors.grey_1};
`;