Component color and style themes
Let's say I create a simple button component. Then I want to have an outlined button. Then I want to have both buttons have a state containing an icon. Then I want all these to have a hover, active, and disabled states. On top of all this, I want a version of all of this for light mode and a version for dark mode.
See where I am getting at? I am creating a design system that my team can reuse for their designs. Many of the components I am trying to create are fairly complex and creating a separate component for each of these states is very tedious and will not scale well. Is there currently a good way to handle this? If not we really need something like this.
6 comments
-
plainclothes
commented
This would be hugely useful.
If two long-standing feature gaps were addressed this could be done without a separate theme capability:
- One component can be based on another, complete with states
- Secondary states inherit default state changesThen you could quickly create a component based on the primary "theme", make a few style changes, and have everything else managed from the parent.
-
Justin Arendt
commented
Have another level about component states to create a different theme of that component with out having to duplicate. Example, I want to create a dark mode or high contrast mode of all my components while keeping all my current states(active, clicked, toggled, etc..) intact without have to recreate a new component with same states or new XD doc and call it dark.
-
Jeroen
commented
Absolutely! This is something that I miss as well! I am currently working on a UI library of components, which have a light mode and a dark mode. It would be great if components with states would have multiple mains (or call it multiple themes).
-
Anonymous
commented
Often I am designing for many system which could have the same components across them but I need to switch the theme based on their branding. This would require a named colour swatch to be completely replaced on mass by a saved one from some other assets.
Lets say I have a blue theme, I have named all the colours.
The red theme has all the same colour IDs but different colours.This would allow me to demo the same design with different colours offered.
-
CArlito
commented
Create and change the theme easyless.
Like :
Pass all the project in dark mode.
Or,
pass Only this component in "Market theme" (promotion, ...)Switch the theme by component or page (when this is build before)
-
Austin Condiff commented
Another example would be checkboxes, radio buttons, and toggle switches. They all have on and off states, but those on and off states also have hover, pressed, and disabled states as well. They also can have a light and dark mode variation.