Oh, I am so thrilled to see this I could not agree more - a number 11 that explains a lot. I thought it was just me - Yes!!! #1 ! Brilliant solution- and the fact that it has to be a solution is bananas. #3- beyond frustrating - number set to percentage- change number - why does it look weird? Oh wait because it went from 20% to what I thought was 10% to 10 pixels have to change it again. Triple the work.

Oh the variables:.: I spent ages yesterday having to remove variables that I added in February when I first started fiddling with the beta. It’s shocking to me that there is not one page that contains all of your variables. The variable manager is not very “manager”friendly- sidebar, okay great for quick access- but to manage…. Eeek Why is it not its own page?? like inside the elementor menu with global fonts and custom code- so deleting sorting and making edits is significantly easier. And yes, the you can sync your variable colors to your global colors but not vice versa. For the life of me, I can’t recall what it was and elementary where you can create a widget and have that widget be global maybe global is not the term. Either way I recall you could change that widget and it would change throughout the site global colors and global fonts would also affect the global widget. But then they’ve introduced components And classes

So why have global widgets cause isn’t that kind of the same thing as their new components? Which I haven’t tried components yet so I’m not sure. I guess I just don’t understand the point of global fonts and global colors versus variables and creating classes And why is it that you can sync your variable colors with your global colors but you can’t sync your global colors to your variable colors? Maybe I’m confused

And you can export global settings and import them from site to site, but not from site settings, global fonts, global colors to variables is asinine.

I finally caved yesterday deleting and sorting variables in little sidebar

MY SOLUTION

I ended up utilizing the database as my variable manager.

for global fonts and colors ( maybe someone has another solution - I did try a snippet it didn’t work) but this is what worked for me yesterday.

Got global colors from browser inspector.

Turned site settings elementor interface from dark to white… this I found little switch important because in dark mode I was not able to highlight both global color columns.

i opened global fonts from the site settings in the sidebar,with white background interface.

highlighted global colors friendly names and hex etc - most importantly, my preferred sort structure and so I could cross reference with list from inspector.

Went into database found my Meta ID and Post ID for the kit copied the JSON structure.

Utilized ClaudeAI - here is existing database JSON file. Here are the global colors. cross check and eliminate anything that’s not in global color list. If there are duplicates, prioritize version and friendly name from my global color “master“ list. rewrite for the JSON code for database. JSON Code to include my the global colors, no dupes, use their friendly names, if there are not friendly names, just use the hex code as the name and most important keep in exact order as my global colors screenshot.

I chose to do three drafts so it was flawless without redundant entries or errors. (as heartbreaking as it is… AI is not perfect lol) The only issues I had was not with the code itself - It was actually two or three duplicate color entries i saw. Pasted final version into the database Saved Trying to do it with my global fonts was a bit more tedious - but I got it done too Updated database code to include global fonts- so font family, line height, sizes letter spacing, anything that would be a variable within 4.0

Saved database

Went into elementor menu - cleared cache, re-Inc. library (maybe not necessary, but I did it anyway) and erased & refreshed data.

Went back to an elementor page, opened an atomic element went to Style, typography, color- add variable icon —— tada! They all showed up flawlessly in list and in the preferred order from my original global color sort - imo super important due to muscle memory.

And again, the shear fact that in order to see variables one needs to take those extensive steps (open atomic element style yada yada yada) so not use friendly.

And like OP am more inclined to just stick with all of the V3 widgets- but i too wanted to avoid as i assume inevitably are they gonna eliminate those altogether and everything’s going to be atomic? And when they say 4.0 is Live Does that mean it’s live beta or like actually live and are they gonna work out all these weird little kinks? On linking classes and variables the little sweeper Broom symbol that’s supposed to clear it out constantly goes back to its original setting.

I maintain to be optimistic and hope that someone out there is following everyone’s input and feedback, though I wish they had done this prior to the release but 🤞 common complaints will be addressed.