Is it possible to activate specific sets of tokens on a layer element instead of globally? Our Design System knows something called local dark mode or local light mode, depending on the background that’s currently active. This changes the active token set within that layer from light to dark or vice versa. As token sets in penpot are global, we’re struggling to migrate our current implementation.
We’d like a control on the layer element that let’s us specify which token themes are currently active within that layer so that the global design can be light mode, but that one teaser that has a dark surface switches components inside to dark mode.
I think they are component specific in the end. Thanks for the hint, I’ll check that. The use case might extend to other cases though, for example our system has responsive tokens for mobile, tablet and desktop. Usually when designing screens, the three views are next to each other, each in a board. With this, we would need to toggle token sets for each board individually if I understand correctly.
It really depends on what works best for your team and dev process. I’ve been playing with using breakpoints as sets, because it works really well with the theme switcher, and that translates well to how you’d structure CSS: https://www.youtube.com/live/TmVuRMf5Ojg?si=xvecpwbw0S8kUGxH&t=1220
But, like we discussed for colour modes, you could create variants for a component with a breakpoint property with values for mobile, tablet, desktop etc, and then display each of these on boards alongside each other.
In fact, creating a main component with these variants would display like this by default. Please excuse the quick rectangle mockup, but hopefully this helps show what I mean! Demo file below:
