Trying to simplify the design system library, we decided to replace variants (*not variables) with Modes.
This would significantly reduce the size of our design library because instead of having buttons with thousands of variants, now we would only have the default button and the Modes would replace states such as Hover, Active, Focus, Disabled and so on.
The issue now is while prototyping!
When one single element triggers an interaction (this interaction was added to the child NOT the main component) ALL the elements within that wireframe will change.
Before hovering:
While hovering:
And as you can see in the image below, only the first button has an interaction applied.
Is there any way to prevent this content awareness cascading to all the elements and only apply it to that one specific element?