Right now, the only options for setting background colors on sections are rgb(a) and hex according to the documentation here. Allowing for custom properties like var(--grey-bg-1) to be set at the section level would not only be convenient for those themes leveraging custom properties, but also allow for dynamic switching of those colors based on user preferences like prefers-contrast: more and allow theme authors to build in functionality like a “dark mode” switcher that carries over to the background colors set by content editors.
Status: Idea Submitted
Yeah, for sure something that we need. Or at least I do. I’ve been trying to think of work arounds for this myself. Even better, I think this should be added directly into the color picker popup, with a select input at the bottom of it allowing you to choose from a list of predefined CSS variables, for instance. This way it could be used in sections, custom module fields, rich content colors, gradients, etc. There would be a couple of challenges to overcome with this, such as where and how to define the predefined CSS variables list, and validating CSS variables.