Editing Craft from Style Guide

Hey yeah as a workaround I added the attached so you can copy it out, add your styles, and paste it into advanced and it'll populate all those variables with the updated values

But really it's best practice to not assign raw colors to those semantic variables such as --foreground-primary. Instead it's best to edit the color palette variables like --gray-5, then assign gray 5 to foreground primary

Hi John! The Notes section I have already noticed. And yes: one can copy them and add styles, then past them into advanced. And yes, assigning already defined variables like --grey-5 to another variable like --foreground-primary is shurly good practise. But I have something more like a Style Guide Form in mind, which is populated with all available GlobalRoot/OpenProp-Variables and where you can set new values (i.e. color R, G, B values) or choose out of a list of appropriate OpenProp Values (i.e. --grey-5). The Changes would be visualised immediatly in the Browser, the Values of the GlobalRoot/OpenProp-Variables would nor be changed until klicken on an "apply" button. This way one could change the overall appearance visually in seconds.

I am not quite following. If you are working with a design system - to find the right color you just hover over the list of predefined variables or use arrow keys to shuffle through them.

If you want to change the design system you would go to the global root, find the variable and change it's value.

You can still see the page you want to see and see the changes of the variable in real-time

You could be on syle guide page or on any other page while changing variables, withouot loosing any context.

Yes, that's the way I dor it. But in the Global Root under Advanced is very long list of predefined Variables one has to scroll through to get to the variable to change. It would be nice, to have some kind of search field to narrow the results like you did with the Style Sources Field.

Now I got it. Yes we are going to add a search to advanced as well as global variables search

I'm not a 100% sure but I think what @Niels is looking for a separate token system window where tokens can be edited (Like what Webflow has) instead of finding it on the global advanced css panel. I think it's already in works if I am not wrong. It would be great to see and all variable in a single rather than looking at it under Advanced

Webflow only offers global variables where we offer them on any html element like it should be. So there can't be a single place, except a search

A search in advanced will do the trick!

we will have a search in both, advanced panel and inside cmd+k