1.0.0 • Published 24 days ago

@bigcommerce/big-design-theme v1.0.0

Weekly downloads
387
License
(MIT AND CC-BY-3....
Repository
github
Last release
24 days ago

BigDesign Theme npm version CircleCI

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
// index.tsx

import { theme } from '@bigcommerce/big-design-theme';
import { ThemeProvider } from 'styled-components';

// ...

ReactDOM.render(
  <ThemeProvider theme={theme}>
      <App />
  </ThemeProvider>,
  document.getElementById('root'),
);

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.

import { createTheme } from '@bigcommerce/big-design-theme';
import { ThemeProvider } from 'styled-components';

const theme = createTheme({ htmlFontSize: 14 });

// ...

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>;
1.0.0

24 days ago

0.21.1

1 month ago

0.21.0

1 month ago

0.20.1

4 months ago

0.20.0

7 months ago

0.19.1

11 months ago

0.19.2

11 months ago

0.19.0

1 year ago

0.18.0

1 year ago

0.17.0

2 years ago

0.16.1

2 years ago

0.16.0

2 years ago

0.15.0

2 years ago

0.14.1

2 years ago

0.15.1-alpha.0

2 years ago

0.14.0

2 years ago

0.13.2-alpha.1

2 years ago

0.13.2-alpha.0

3 years ago

0.13.1

3 years ago

0.13.0

3 years ago

0.13.0-alpha.2

3 years ago

0.13.0-alpha.1

3 years ago

0.13.0-alpha.0

3 years ago

0.12.1

3 years ago

0.12.0

3 years ago

0.11.0

3 years ago

0.10.1

4 years ago

0.10.0

4 years ago

0.9.0

4 years ago

0.8.0

4 years ago

0.7.0

4 years ago

0.6.0

4 years ago

0.5.0

4 years ago

0.4.0

4 years ago

0.3.1

4 years ago

0.3.0

5 years ago

0.2.0

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago