README
@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.