Clean and recognisable custom CSS variable names

Prerequisites • I have searched for similar features requests in both open and closed tickets and cannot find a duplicate. • The feature is still missing in the latest stable version of Elementor ( Elementor Pro ) What problem is your feature request going to solve? Please describe. I create a custom colour and then I want to add it into custom CSS but I find it has a cryptic randomised name. It makes it hard to distinguish what the CSS variable represents. Describe the solution you'd like If I add a custom colour such as Mid Grey, Elementor would incorporate it into the variable name. Eg. --{Elementor prefix}-custom-mid-grey. So it goes lowercase and spaces become hyphens. To save duplication, if a person adds a name that is already taken, they are told that it is already in use. For reference, I have been told the apparently Bricks Builder and GeneratePress have it working and would be great to see in Elementor. Describe alternatives you've considered …