@invisionag/theming-helper v2.0.0

@invisionag/theming-helper

Examples

theme

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { theme } from '@invisionag/theming-helper';

const boxBackgroundColor = theme('mode', {
  light: '#fff',
  dark: '#000',
});

const Box = styled.div`
  background-color: ${boxBackgroundColor};
`;

export default function App() {
  return (
    <ThemeProvider theme={{ mode: 'light' }}>
      <Box>Hello World</Box>
    </ThemeProvider>
  );
}

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { theme } from '@invisionag/theming-helper';

const colors = {
  light: '#fff',
  dark: '#000',
};

const boxBackgroundColor = theme('mode', props => ({
  light: props.theme.colors.light,
  dark: props.theme.colors.dark,
}));

const Box = styled.div`
  background-color: ${boxBackgroundColor};
`;

export default function App() {
  return (
    <ThemeProvider theme={{ mode: 'light', colors }}>
      <Box>Hello World</Box>
    </ThemeProvider>
  );
}

import styled, { css } from 'styled-components';
import { theme } from '@invisionag/theming-helper';

const white = '#fff';
const black = '#000';

const boxStyles = theme('mode', {
  light: css`
    background: ${white};
    color: ${black};
  `,
  dark: css`
    background: ${black};
    color: ${white};
  `,
});

const Box = styled.div`
  ${boxStyles};
`;

variants

import styled from 'styled-components';
import { variants }  from '@invisionag/theming-helper';

const backgroundColor = variants('mode', 'variant', {
  default: { light: 'gray', dark: 'darkgray' },
  primary: { light: 'blue', dark: 'darkblue' },
  success: { light: 'green', dark: 'darkgreen' },
  warning: { light: 'orange', dark: 'darkorange' },
});

const Button = styled.button`
  background-color: ${backgroundColor};
`;

Button.defaultProps = {
  variant: 'default',
};

<Button />
<Button variant="primary"/>
<Button variant="success"/>
<Button variant="warning"/>

import styled from 'styled-components';
import { variants }  from '@invisionag/theming-helper';

const backgroundColor = variants('mode', 'variant', props => ({
  default: { light: props.theme.colors.light, dark: props.theme.colors.light },
  primary: { light: props.theme.colors.primary.light, dark: props.theme.colors.primary.dark },
  success: { light: props.theme.colors.success.light, dark: props.theme.colors.success.dark },
  warning: { light: props.theme.colors.warning.light, dark: props.theme.colors.success.dark },
}));

const Button = styled.button`
  background-color: ${backgroundColor};
`;

Button.defaultProps = {
  variant: 'default',
};

<Button />
<Button variant="primary"/>
<Button variant="success"/>
<Button variant="warning"/>

priority

import styled, { css } from 'styled-components';
import { priority }  from '@invisionag/theming-helper';

const color = priority('mode', props => ({
  default: { light: props.theme.colors.light, dark: props.theme.colors.dark },
  disabled: { light: 'value', dark: 'something' },
  primary: { light: props.theme.colors.light, dark: props.theme.colors.dark },
  success:  { light: props.theme.colors.light, dark: props.theme.colors.dark },
}));



const backgroundColor = priority('mode', {
  default: { light: 'gray', dark: 'darkgray' },
  disabled: { light: 'orange', dark: 'darkorange' },
  primary: { light: 'blue', dark: 'darkblue' },
  success: { light: 'green', dark: 'darkgreen' },
});

const transition = priority('mode', props => ({
  default: {
    light: css`
      transition: ${props.theme.settings.transition.speed} 0.15s
        ${props.theme.settings.transition.easing};
    `,
    dark: null,
  },
}));

const Button = styled.button`
  color: ${color};
  background-color: ${backgroundColor};
  ${transition};
`;

Button.defaultProps = {
  variant: 'default',
};

<Button /> // [1]
<Button primary /> // [2]
<Button primary disabled /> // [3]

1: Will have the default styling

2: Will have the styling for primary

3: Will have the styling for disabled, since disabled is defined first in the backgroundColor object. The order implies priority and only the first higher matched style will be applied.