CSS Variables

[kof]

Enable using CSS variables in Advanced styles section. This will enable better design systems and unblock making a standard style guide for Webstudio.

TODO

• [x] when typing "var(" and going further with "var(--test" it would be good to still autocomplete, basically ignoring everything but the variable name, because when I have started typing var I won't get any completion and if I had a value inserted and now delete something - again I would expect it to auto complete
• [x] :root node in navigator
• [x] style panel support for :root node
• [x] css preview for :root node in builder
• [x] css generation for :root node in cli
• [x] move typography preset from body to :root
• [ ] Title in the variable tooltip could be just "CSS Variable"
• [x] Render color picker for colors (nice to have)
• [x] autocomplete either colors or lengths in style panel controls
• [x] infer types when update custom properties function (should ww explicitly annotate with types to support interpolations in the future?)
• [ ] Add search
• [x] Render var as user navigates them (nice to have) https://github.com/user-attachments/assets/ebf095c7-5750-4763-8c15-c2d0e764cc5a
• [x] The sort on vars puts 1 and 11 next to each other (low prio bug)
• [ ] When adding a new variable, change the tooltip from "Unknown CSS property" to "Create a CSS variable" (or whatever you think)... just something to indicate we support CSS vars :)
• [ ] Gradient previews on the variable definition (nice to have). Editing them is difficult as I have no idea which one is which
• [ ] Bug, low prio: Using unitless value appends "number". 1 set var. 2 set value 0 and select dash for unit. 3 select hover state. 4 set that var to 1 and see '1number'. https://github.com/user-attachments/assets/d5fd6738-1a13-4608-8edf-40568bdf716d

Ideas

Move above if valid/finalized

• [ ] Add expand option like we have for code
• [x] Separate vars into their own collapsible so 100s of vars aren't mixed in with opacity and stuff. This can also enable a custom UI like adding search to that collapsible. Update: inherited styles from root are hidden
• [ ] Var wrapping doesn't look great IMO but cutting off is probably worse
• [ ] Might make sense to add a copy option on single var... I would need to build a site using this to see my workflow but I could see me forgetting my vars, referencing the global list, then wanting to copy it. Though maybe autocomplete will solve this (autocomplete indeed does solve this)
• [ ] Ability to rename variables
• [ ] Remove var() from field display and just show --size-6. It adds a lot of clutter and often hides the details
• [ ] Alphabetize or maintain order on undo after removing a variable. I accidentally removed one and upon undo, it gets put at the top https://github.com/user-attachments/assets/37bd6161-d352-4e5d-8565-0431a855738e

[TrySound]

Remove var() from field display and just show --size-6. It adds a lot of clutter and often hides the details

we could do this but how user would add fallback?

[kof]

Remove var() from field display and just show --size-6. It adds a lot of clutter and often hides the details

we could do this but how user would add fallback?

alternative proposal: show the computed value in the spacing UI, then show full var() in the input when clicked

[kof]

Just checked WF does exactly that, in padding UI - computed value. Though they don't let you edit the original value when you click in either, but since we are using css value input everywhere - we can let user edit calc() and such in the input

[TrySound]

Gradient previews on the variable definition (nice to have). Editing them is difficult as I have no idea which one is which

I guess we could detect gradient values though we need gradient control there which we do not have yet