Theme
Theme is central to how our whole design system functions. It is the single most important component in our design system. Our theme component is a Styled Components ThemeProvider that specifies fonts, colors, breakpoints, spacing sizes and more. Each app using Mesh components should have a single high-level theme wrapping the rendered output.
Components must be wrapped by this Theme
Our components rely on being rendered inside this Theme component, otherwise they will render with incorrect styling, no responsive styling or break completely.
Installation
npm install @nib-group/mesh-theme
Usage
Import the ThemeProvider component from the root of the theme package, and the brand, or brands you want to use from the brand subpath.
import Theme from '@nib-group/mesh-theme';import nib from '@nib-group/mesh-theme/brand/nib';const App = ({children}) => <Theme theme={nib}>{children}</Theme>;
Interactive demo
// Try changing the theme to gu or iman
<Theme theme={nib}>
<Inline space={4}>
<PrimaryButton>Primary Button</PrimaryButton>
<SecondaryButton>Secondary Button</SecondaryButton>
</Inline>
</Theme>
Requirements for use
There are two requirements which prevent problems with individual components rendering incorrectly:
- You should always include the
Themecomponent once, at the root of your app. - Never should a mesh component be rendered outside of the
Themecomponent.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
theme (required) | object | The brand theme to use. Must be one of the exported themes from the brand subpath. |
ModeProvider
In v7.0.0 a new ModeProvider component was introduced to allow for the setting of a mode for a subtree of components.
Check out the ModeProvider docs for usage and guidelines.
token
A "token getter" function. The token function is typed to enable autocomplete and typescript errors when invalid token paths are provided.
The token function has a second parameter to provide a fallback value if the token cannot be found for whatever reason. During the initial migration to tokens it is recommended that fallbacks be provided for all token references. The fallback can be a string or a selector:
const Component = styled.div`background-color: ${token('theme.color.bg')};color: ${token('theme.color.fg')};padding: ${token('common.dimension.spacing.4')};`;