Similar to this feature request:
I widh to have a possibility to connect and set CSS variables via Component propetties.
Use Case
I have a Component with some advanced design that needs to calculate values via calc(var()) based on a base value like a height or flex-basis in conjunction with margins or an absolute positioned element.
To make the Component reusable with different values (heights or something) I need to allow the content editor to set the value (e.g: the height) individually per Component instance. And the variable needs to be set in the local hierarchy of the Component to override the :root default values.
Since custom CSS is not allowed to connect to component properties (Make "Advanced" view/ Custom CSS available for component styles) and Attributes are not allowed to connect to component properties (Add data attribute to Components and their properties) there is no easy workaround to this limitation (at least I was not able to come up with one yet, maybe someone has an idea?!).
Simple solution:
Add the Advanced>Custom CSS panel to the Component or allow to connect it like the “Connect Component Class” functionality => “Connect Component Custom CSS”
Ideal solution:
Make an additional panel for CSS Variables like the Attributes panel. So that the variable is created like an attribute.
Than allow each CSS variable to be connected individually to a Component property (Toggle, Option, Number, …) just like the normal CSS properties
