Simulated states

Some elements on websites have special states while interacting with input devices (mouse, keyboard, touchscreen, …etc)

Those states, called pseudo-states (:tap, :focus, :active, :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 your stories.

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.