Some elements on websites have special states while interacting with input devices (mouse, keyboard, touchscreen, …etc)
Those states, called pseudo-states (
:hover, …etc) might have different visual representations depending on the context and the styles you defined in your stylesheets (viewport, mobile/desktop, touchablescreen, dark/light theme, …etc)
Within story.to.design, for each story you defined, we propose to simulate those standard pseudo-states, while rendering the story.
This way when you import a component, you can now generate a variant for each pseudo-state combination even if you didn’t declare them inside Storybook or Backlight.
For instance for a button, you can have all those pseudo-states generated, and see the CSS impacting the button when story.to.design interacted with this button.