BigDesign Theme

BigDesign design system.

Documentation

You can find documentation and examples on our docs page.

Note

BigDesign components use this theme by default. This package is only meant to be used directly when more advanced features are needed such as:

• When you app uses an html font size different than 16px.
• Creating a brand new theme.
• Typescript typings.

Quick start guide

Add the BigDesign theme and styled-components@5 to your project using npm:

npm install @bigcommerce/big-design-theme styled-components@5

or with pnpm:

pnpm add @bigcommerce/big-design-theme styled-components@5

1// index.tsx
2
3import { theme } from '@bigcommerce/big-design-theme';
4import { ThemeProvider } from 'styled-components';
5
6// ...
7
8ReactDOM.render(
9  <ThemeProvider theme={theme}>
10      <App />
11  </ThemeProvider>,
12  document.getElementById('root'),
13);

Using a different html font size

When your app uses an html font size different than 16px you will need to create a new theme that uses your app's html font size internally to calculate spacings and sizes.

The following example show how to create a theme using a 14px html font size and provide the theme to your app.

1import { createTheme } from '@bigcommerce/big-design-theme';
2import { ThemeProvider } from 'styled-components';
3
4const theme = createTheme({ htmlFontSize: 14 });
5
6// ...
7
8<ThemeProvider theme={theme}>
9  <App />
10</ThemeProvider>;