Add CSS Variable without a value, to be able to define them outiside of the manager

TLDR:
add ability to define a CSS Variable inside the Builder’s Variable Manager without providing a value (only name), so that you can define the value’s part inside a CSS Stylesheets and having the varile name suggested in the dropdown that appear on every Bricks controls.

Context

The CSS Variable manager it’s a great addition, and the main benefits is that now we have a dropdown to pick variable accessibile from every control in Bricks. Awesome.

The workflow for now (1.9.8) is to open the Variable Manager from Builder, then define variables there, so that the dropdown is populated with them.
To define a Variable we provide a “name” and “value”. This is expected behavior of course.

But CSS Varibels defined somewhere else are not “shown” in the control’s dropdown…

CSS Variables defined outside of this Variable Manager are not used to populate the dropdown. Typical places are:

  • in “Bricks > Settings > Custom Code > Custom CSS”
  • in Child Theme’s CSS file

For now (1.9.8) if you try to add a new variable without a value, the variable previously defined is overwritten with “empty” value, resulting in “broken” variable.

Requested Feature

The final goal is to be able to define CSS Variable in every “outside” places:

  • in “Bricks > Settings > Custom Code > Custom CSS”
  • in Child Theme’s CSS file
  • in Code Snippets plugin

and then add only “names” inside the Builder’s Variable Manager, so them are shown in the dropdown.