I absolutely love the property update to variants and I’m working on integrating it in the company design system, but one issue I still have that leads to a lot of redundancy is button colors.
The design system I’m working in has a button that can be one of several colors (green, blue, neutral and red)
Each of these have to have an idle, hover and active state, and this leads to a LOT of redundancy when setting up the component since each button needs its own hover and active state in the correct colors. The redundancy is made even worse since each of these buttons can also have a “disabled” style, which looks the same across all colors, but need to be duplicated for each color for the variant to work as expected.
It would be nice if there was a “Style Switch” property where you could switch between groups of styles. I could then have a style folder called “button color: alert” containing idle, hover and active Styles that could be switched for another Style folder called “button color: CTA”.
Having a style switcher that could switch out text styles would be really useful too, in cases where component can have two text sizes.