It would be nice, if one could change the values of Craft/Open Props CSS variables direktly from within the Style Guide. For example right-clicking on the Text of the css-variable or on the Color Palette or of "--foreground-primary" would reveal an option to restyle the Craft/Open Props CSS root-variable directly without switching to the Globel Root and identify the corresponding CSS variable in a painfully long list of variables and change them there.
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
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.
