Write specific Customizer settings to CSS variables (like colors currently are)

[slomeli79]

Use case: Let’s say I set an option in the Customizer, like Typography > All Headings, and I set a font family and font-size. Now I want all the headings of a 3rd party forms plugin to inherit those settings.

Ideally, my Customizer settings generated CSS variables that I can reference elsewhere to tie external styles together into my GP-generated styling.

I’d love to be able to declare something like:

.forms-plugin-headings-selector {
  font-family: var(--gp--all-headings--font-family);
  font-size: var(--gp--all-headings--font-size);
}

Currently, I add some base :root declarations like --default-border-radius and --default-body-font-size into Additional CSS, but so many downstream changes could be streamlined if I could make them automatically inherit settings from what I’ve done in the Customizer.

[Calvin-Susan]

+1 for this!

[markman77]

Would be a great feature for sure!

[tdrayson]

+1 😃

[jakewoods-io]

Yep, this would be a killer addition

[larshallen]

• 1

[fernandoazarcon2]

+1 https://generate.support/topic/feature-request-use-of-vars-in-generatepress-customiser/

[Graphnic]

+1 https://generate.support/topic/feature-request-use-of-vars-in-generatepress-customiser/

Just to add clarity to my above-mentioned forum post, I can also see benefit in being able to use pre-defined vars to set defaults in the customiser as well - so kind of the reverse of the feature suggested in this issue. It could perhaps be part of the same feature though.

My suggestion came about in response to the advent of several CSS frameworks that support Gutenberg and GenerateBlocks (Automatic CSS and Core Framework to name two). To be able to configure GP to use the fluid typography and spacing variables from these frameworks would be tremendously valuable in my opinion, as they are quite advanced and extend beyond what's currently possible in the theme without child-theme customisations.

I can see real value in both approaches.

[thisbit]

yep that is a good one

[QuantumDevQBL]

+1 https://generate.support/topic/feature-request-use-of-vars-in-generatepress-customiser/

[jmslbam]

+1 https://generate.support/topic/css-variables/#post-118628 just thought about this, and didn't thinnk about checking the GitHub repo, sorry!