@invisionag/iris-theme

themes

You need to wrap your application in a ThemeProvider from styled-components, like this:

import { ThemeProvider } from 'styled-components';
import themes from '@invisionag/iris-theme';
import { render } from 'react-dom';

render(
  <ThemeProvider theme={themes.injixo}>
    <App />
  </ThemeProvider>,
  document.querySelector('#root'),
);

As of now, a theme consists of the following structure:

const theme = {
  settings, // settings from iris-settings
  colors, // colored mappings, like primary.text or danger.background.
  baseColors, // raw colors like blue100, accent120, black80 etc, the same package as iris-colors
  tools, // iris-tools
  name: 'injixo',
};

withDefaultTheme

You can wrap your components with this function to set the injixo default Theme.

import styled from 'styled-components';
import { withDefaultTheme } from '@invisionag/iris-theme';

const StyledDiv = withDefaultTheme(styled.div`
  border-radius: ${({ theme }) => theme.settings.radiusTiny};
`);

Behind the scenes, this sets the theme in the defaultProps of the component.