@carbon/storybook-addon-theme

Storybook addon for Carbon themes

This addon for storybook allows you to change the theme used with Carbon Components!

Supports

• React
• Vue

Install

npm install @carbon/storybook-addon-theme

Requirements

• Use of Carbon Components
• Use of Custom CSS Properties feature flag

🙌 Contributing

We are always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide and Carbon's Developer Handbook! 👀

Usage

.storybook/main.js:

module.exports = {
  addons: ['@carbon/storybook-addon-theme/register'],
};

Use with a feature flag switch is possible if you construct the addons array.

const addons = [
  /* other addons */
];

if (process.env.CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES === 'true') {
  addons.push('@carbon/storybook-addon-theme/register');
}

module.exports = {
  addons,
  stories: ['../src/**/*-story.js', '../src/**/*.stories.mdx'],
};

Global Decorator

.storybook/preview.js:

import { withCarbonTheme } from '@carbon/storybook-addon-theme'; // for React
// import { withCarbonTheme } from '@carbon/storybook-addon-theme/vue'; // for Vue
// for Angular (not yet supported)
// .
// for all (including story decorators)
import index from './index.scss';
// .
addDecorator(withCarbonTheme);
// .

// Adding the decorator
const decorators = [withCarbonTheme];
const parameters = {
  carbonTheme: {
    theme: 'g10',
  },
};
export { decorators, parameters };

// Older storybook versions
addParameters({
  // optional
  carbonTheme: {
    theme: 'g10', // optional default carbon theme
    themes: ['g10', 'g90'], // optional carbonTheme filter
  },
});

Story decorator

import { withCarbonTheme } from '@carbon/storybook-addon-theme'; // for React
// import { withCarbonTheme } from '@carbon/storybook-addon-theme/vue'; // for Vue
// for Angular
// .
// .
// .
storiesOf('Component', module)
  .addDecorator(withCarbonTheme)
  .add(() => story, {
    carbonTheme: {
      // optional
      theme: 'g10', // optional default carbon theme
      themes: ['g10', 'g90'], // optional carbonTheme filter (additive to global)
    },
  });

SCSS

.storybook/index.scss

@import '@carbon/themes/scss/themes';

:root {
  @include carbon--theme(
    $theme: $carbon--theme--white,
    $emit-custom-properties: true
  );
}

:root[storybook-carbon-theme='g10'] {
  @include carbon--theme(
    $theme: $carbon--theme--g10,
    $emit-custom-properties: true
  );
}

:root[storybook-carbon-theme='g90'] {
  @include carbon--theme(
    $theme: $carbon--theme--g90,
    $emit-custom-properties: true
  );
}

:root[storybook-carbon-theme='g100'] {
  @include carbon--theme(
    $theme: $carbon--theme--g100,
    $emit-custom-properties: true
  );
}