Make it easier to debug theme settings to css colours

@sime
Could you please re-upload the images. Thanks

Sorry about that.

@sime
CivicTheme uses a 2 layer mapping system: base variables (named after the fields in the colour selector UI on your screenshot) are mapped to the component's variables (what you are showing in the second screenshot). Such 2-level mapping is an industry standard that you may find in other frameworks such as Bootsrap and Tailwind.

To answer your question on "which settings is ct-promo-background-color` you would simply need to click on that CSS variable and it will show you the base CSS variable used for the mapping.

I'm closing this ticket as I do not see what else can be done to do the better that the Web Inspector does.