150 DAI

Update to Storybook v4 so we can have our own theme and the latest nice things





This is a bounty issue to upgrade all dependencies in this project to the latest Storybook version.

My research led me here: https://medium.com/storybookjs/migrating-to-storybook-4-c65b19a03d2c

But I could not solve it in the time I set aside as there are some sticky errors I still need to learn more about Storybook to fix. @millnitzluan probably has a good idea though. The reason for wanting to upgrade is so that we can make our own theme: https://storybook.js.org/configurations/theming/ and include this more natively on the main site, under https://status.im/developer_tools/.


All storybook dependencies updated to ^4. No babel weirdness. Everything working as it does now, and a new block in .storybook/config.js that looks something like this and allows us to control most aspects of the overall theme:

import { setOptions } from '@storybook/addon-options';

    theme: {
      mainBackground: 'linear-gradient(to bottom right, black, gray)', // applied to root `background`
      mainBorder: '1px solid rgba(0,0,0,0.1)', // applied to panels `border`
      mainBorderColor: 'rgba(0,0,0,0.1)', // applied for most borders
      mainBorderRadius: '4px', // applied to panels, buttons, inputs 
      mainFill: 'rgba(255,255,255,0.89)', // applied to panels `background`
      barFill: 'rgba(255,255,255,1)', // applied to TabsBar `background`
      inputFill: 'rgba(0,0,0,0.05)', // applied to Input `background`
      mainTextFace: 'sans-serif', // applied to root `font-family`
      mainTextColor: '#000',
      mainTextSize: '13px', // applied to root
      dimmedTextColor: 'rgba(0,0,0,0.4)', // applied in less important text
      highlightColor: '#9fdaff', // applied to indicate selection
      successColor: '#0edf62', // applied to indicate positive
      failColor: '#ff3f3f', //applied to indicate negative
      warnColor: 'orange', // applied to indicate ow-ow
      monoTextFace: 'roboto-mono', //applied to pre
      layoutMargin: '10px', // applied to space panels
      overlayBackground: 'linear-gradient(to bottom right, rgba(233, 233, 233, 0.6), rgba(255, 255, 255, 0.8))' // applied to overlay `background`
    brand: {
      background: 'url("logo.svg")',





  • There are 0 comments

    Submit a comment using the form above.