New updates let us use css variables, but how do we declare them?

[thisbit]

Description

I want to set some cusom variables so I can use them accross the site to maintain consistency.

so something like

:root { --var-one" value-one; --var-one" value-one; --var-one" value-one; --var-one" value-one; }

And then have it available accross the site. In customizer, in blocks too. Applying a variable to

.element { font-weight: var(--var-one); }

that should reflect in the customizer view, in the block editor, and ofcourse on the live site. I realize there is no UI to do this yet, but is there a workaround, what is the recomended way for this?

References

[diggeddy]

Custom CSS Variables should be declared in your child theme stylesheet. There is no planned UI in the theme for adding them. We are considering writing CSS variables for the main theme settings. Which will be raised under a new issue. Closed

[thisbit]

Including custom vars in theme makes a lot of sense since now we have them in blocks and not there ... good progress