I’m currently implementing a complex design system in WeWeb where we are working with Primitives that have influence on other color variables. So I was wondering: Is there any way to define a color variable within a library dynamically so that it points to another color variable?
I know it’s not possible in the Editor, however maybe via the Dev View somehow?!
I definitely do not want to work with global variables since I want to keep everything inside the library so it stays centralised and maintainable and can serve other projects as well.
However, WeWeb doesn’t allow for this yet so that the styles are visible during build-mode in the editor.
I saw a tutorial on linking an uploaded stylesheet in the head section, but I think this is highly impractical considering that I would want to access the variables during development.
Thanks for your reply. How would you do this in WeWeb editor?
Just as I replied to danlopes, I don’t see a convenient way to do this as of today in the editor. Would appreciate your thoughts and feedback on this one!
You can use variables in WeWeb as you described with the CSS vars, it’s how WeWeb does it as well. You just need to make a formula that puts your variables into a var(—format) also you need to find a way to add the CSS to your project. Linking variable within variables in WeWeb natively is not supported, had this issue many times.
I have also been thinking to go into a similar direction.
Here is an outline of my (best) idea so far:
I would add my design primitives (e.g. brand colors, grays, etc) as global variables, so they could also potentially be updated or exchanged by a developer or even app users to customize the look and feel.
based on those primitives, I would create all my other color variables as global formulas. in those formulas I would be able to a) have a static color value OR reference to a primitive if necessary and b) account for the currently active theme to switch between light and dark shades as I wouldn’t be able to use the native light/dark switch of color variables anymore. (Side-Question: If a user changes the theme - would all formulas “refresh” and update their values?! → if not, that would be the killer for my idea )
I have already created some design effects such as shadows and blurs as global formulas since it it’s simply not possible in weweb yet to have complex style variables in a library. This works fine, but brings to me to my 2 major concerns regarding this strategy:
I’m transcending the boundaries of the “library” definition, as global variables and formulas are project specific and won’t get shared with other projects importing this library. If I wanted to use my design system in any other project or share it with the weweb community through the marketplace, this would not work.
I’m a bit worried about potential performance degradations to the extent that every time I reference a color through a formula, that formula would need to “run” to return the requested value, right?! So when thinking of formulas as the equivalent of a JS function (idk if that’s correct in the context of weweb but I made that assumption), that wouldn’t be considered best-practice development, right?! - but I’m happy to be convinced otherwise by the weweb team, if it turns out to be the best way to go for me here!
As an alternative approach I have been considering storing my entire design system in a custom CSS file where the ability of referencing other variables comes out of box, but this comes with the big downside of not seeing any styles during build phase, only once published, right?!
Thanks at everyone who is reading this and trying to come up with creative solutions and opinions!
@Joyce@flo I was planning to bring up my thread for discussion during today’s office hour. Since it was canceled, could you please take a look at this issue here in the forum?
I will ask the tech team and get back to you asap.
)