@carbon/storybook-addon-theme
v2.2.0
Published
Carbon theme switcher for Storybook
Downloads
2,012
Readme
Storybook addon for Carbon themes
This addon for storybook allows you to change the theme used with Carbon Components!
Supports
- React
- Vue
No reason to suspect others are not supported, but have not been tested. If you use with another framework then please post an update to the README.md.
Install
npm install --save-dev @carbon/storybook-addon-theme
yarn install --dev @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 = {
// other addons...
addons: ['@carbon/storybook-addon-theme/preset.js'],
};
Global Decorator
.storybook/preview.js
:
import { withCarbonTheme } from '@carbon/storybook-addon-theme/withCarbonTheme';
import {
PARAM_KEY as CARBON_THEME_PARAM_KEY,
CARBON_THEMES,
} from '@carbon/storybook-addon-theme/constants';
const decorators = [
/// other decorators...
withCarbonTheme,
];
const globals = {
// other globals...
// default value of the theme selector
[CARBON_THEME_PARAM_KEY]: CARBON_THEMES.g10,
};
export { decorators, globals };
SCSS
.storybook/index.scss
Carbon 11
@use '@carbon/styles' as styles;
@use '@carbon/styles/scss/theme' as *;
[storybook-carbon-theme] {
@include styles.theme(styles.$white);
/* make sure background and color are set if theme in use */
background-color: $background;
color: $text-primary;
}
[storybook-carbon-theme='g10'],
.sb--use-carbon-theme-g10 {
@include styles.theme(styles.$g10);
}
[storybook-carbon-theme='g90'],
.sb--use-carbon-theme-g90 {
@include styles.theme(styles.$g90);
}
[storybook-carbon-theme='g100'],
.sb--use-carbon-theme-g100 {
@include styles.theme(styles.$g100);
}
Carbon 10
// Must happen before styles are loaded
$feature-flags: (
ui-shell: true,
grid-columns-16: true,
enable-css-custom-properties: true
);
@import "carbon-components/scss/globals/scss/styles";
@import "@carbon/themes/scss/themes";
[storybook-carbon-theme] {
background: $ui-background;
color: $ui-01;
@include carbon--theme(
$theme: $carbon--theme--white,
$emit-custom-properties: true
);
}
[storybook-carbon-theme="g10"] {
@include carbon--theme(
$theme: $carbon--theme--g10,
$emit-custom-properties: true
);
}
[storybook-carbon-theme="g90"] {
z-index: 90;
@include carbon--theme(
$theme: $carbon--theme--g90,
$emit-custom-properties: true
);
}
[storybook-carbon-theme="g100"] {
@include carbon--theme(
$theme: $carbon--theme--g100,
$emit-custom-properties: true
);
}
IBM Telemetry
This package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see Opting out of IBM Telemetry data collection. For more information on the data being collected, please see the IBM Telemetry documentation.