Add different backgrounds for stories on a per variant basis

[iuscare]

Is your feature request related to a problem? Please describe. From time to time we are creating pieces of a component (e.g. atoms/molecules etc.), whose root component (e.g. organism) has a dark background color, thus the atom or molecule itself mainly uses light text colors. In that case it is difficult to check the isolated atom/molecule, because storybook has a light background/story canvas as a default behavior.

Describe the solution you'd like It would be great to have the ability to change the background of a story in both, the canvas and doc mode on a variant basis. With minor changes I got it already working with the help of the themes plugin, but only for a whole story with all of its variants.

Things I tried so far:

1. The following config seems to be deprecated (see here): https://github.com/wingsuit-designsystem/wingsuit/blob/d239d7d9c3aa970c492ed325c54fc5bf474df0e5/starter-kits/tailwind/apps/storybook/preview.js#L8-L12 so I've updated it by following the docs to:

   addParameters({
      themes: {
      default: 'Dark',
      list: [
         { name: 'Dark', class: ['dark', 'bg-black'], color: '#000000' },
         { name: 'Anthracite', class: ['dark', 'bg-gray-900'], color: '#242424' },
         { name: 'Gray', class: ['bg-gray-100'], color: '#cecece' },
       ],
     },
   

2. After that I was able to change the canvas of a whole component by adjusting its correspondending stories.jsx file e.g.:

   import './index';
   
   const patternDefinition = require('./menu.wingsuit.yml');
   
   export const wingsuit = {
      patternDefinition,
     parameters: {
      themes: {
         default: 'Anthracite',
       },
     },
   };
   

3. However doing it that way, it seems to be impossible to grab only a specific variant of the component. So the real question is how to add parameters to specific variants only, instead to all of them via the stories.jsx file.

4. Another disadvantage is that the method described above only changes background of a whole story in canvas mode. When looking at the story in docs mode, the background is still white. A workaround is to target the specific story id by css and change its background for docmode manually by adjusting the preview-head.html, e.g.:

   #story--molecules-menu--primary,
   /*#story--molecules-menu--secondary,
   #story--molecules-menu--footer*/ {
     background: #242424
   }
   

5. However this feels rather like a hacky workaround than a real solution. Maybe it would be possible to add the background color on the fly with javascript when rendering the docs of a specific story/variant like the storybook background plugin tries to do see here

Describe alternatives you've considered Like mentioned above there is also the official background addon (see here) and it seems they've solved the exact same problem with docmode (here) in storybook 6.1. Maybe exchanging the theme plugin with the background plugin could save us time. This would only solve the docmode problem and we'd still need to come up with a solution for adding parameters on a variant basis.

[justintemps]

@iuscare Is there a recommended way to handle this now in v1.2.0?