3.0.17 • Published 5 years ago
@invisionag/iris-theme v3.0.17
@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.
3.0.17
5 years ago
3.0.16
5 years ago
3.0.15
5 years ago
3.0.14
5 years ago
3.0.13
5 years ago
3.0.11
5 years ago
3.0.10
5 years ago
3.0.9
5 years ago
3.0.8
5 years ago
3.0.7
5 years ago
3.0.6
5 years ago
3.0.5
5 years ago
3.0.4
5 years ago
3.0.1
5 years ago
3.0.0
5 years ago
3.0.0-alpha.0
5 years ago
2.2.5
5 years ago
2.2.4
5 years ago
2.2.3
5 years ago
2.2.1
6 years ago
2.2.0
6 years ago
2.1.2
6 years ago
2.1.1
6 years ago
2.1.0
6 years ago
2.0.1
6 years ago
2.0.0
6 years ago
1.1.4
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.1
6 years ago