Ability to use css variables in addition to ui values

I think it would do a lot for team work if we could have css variables work in the UI. Instead of using a colour from the colour swatches, I might want to define what a colour is in the header_include or even in the css field of a parent cell and then just use that variable directly in the UI.
It would be awesome if there was an option for this besides the tiny css input field. Same for any other parameters such as width, opacity, alignment, layout…

It would not even necessitate any UI changes to Antetype, if css variables could just be used in all input fields. So, instead of using “500” for width (if set to “manual”), I would type in --blockWidth and that would use that variable. Instead of a colour from the swatches list I might just use the name field to type in the variable and it would change according to what that variable has been set to.

I can get by using VS Code while I am doing projects that nobody else needs to interact with but if I wanted to provide templates for, say, dialog design to a whole team, it would go a long way if css variables were more of a first class citizen. Especially with colours!

Bringing variables to the front would open up this very powerful feature (which is undocumented AFAIK and only known to a few select users) to a wider audience.

A version 2.0 would be to have pulldown menus that store these variables but that would require a lot more thought about how and where these variables are defined.

here is an example for use of accent colours in a macOS prototype

1 Like