🎨 storybook-themepack
Better themepacks for Storybook
Storybook addon for custom themes.
Ideal for themes based on CSS custom properties (CSS variables).
Demo
Online demo link here.
Demo source code.
Feel free to test this addon in your local environment: npm run demo
.
Usage
Install:
npm install --save-dev storybook-themepack
Then register addon:
// addons.js;
And add some configuration:
// config.js; const gaps = // Some pretty plain CSS in this values gapSmall: '--gap: 12px;' gapMedium: '--gap: 16px;'; ;
Voilà! Now you can use all the power of themes based on CSS custom properties.
Also you can add per-story configuration:
;
TypeScript
You can find an example repo here: examples/storybook-themepack-example
Configuration and options
Example configuration
// config.js; ;
pack
Main themepack configuration. Every field of this object is an array.
Every option (for example, brand
) contain sources for tooltips that can switch theme and preview your themed component. Packs' content for any option is merged in tooltip options.
Syntax:
[ <theme name>, <pack(...)>, <pack(...)>, ... ]
Packs' syntax:
; ;
icon
Icon for the first item.
Variants are in @storybook/components
.
Default value is mirror
.
usePreview
Adds preview for every option of the tooltips.
You can set up preview styles in configuration property styles.preview
.
Default value is true
.
labelForClear
Text for the element that clears tooltip.
Default value is -
.
sortFunction
Function that sorts keys of your themepack.
Default value is not set.
styles
Object {preview: 'string', iframe 'string'}
with CSS styles.
It contains styles for a themepack item preview inside every tooltip and global style for your component preview inside Storybook.
Default value is not set.
TODO
[ ] Update Readme and examples to Storybook v6