Standardizing required theme CSS Variables

[richtabor]

What problem does this address?

We need a standardized method for implementing CSS variables/properties across the board. We're getting there with #29568, but this references other areas of the theme that should be standardized, such as body background color and font sizes.

Why is this important?

Having a standardized system for variables that every theme will need, such as background, font families, etc will make switching themes much easier - as they'd all use the same variables. Plugins and other third party integrations can fit in aesthetically by referencing these CSS variables if they're standardized. That means they'll instantly look and feel as the theme's styles decided — instead of requiring custom CSS to override.

• So what should be the appropriate prefix?
• How do we ensure these are standardized?
• Can we update themes such as Twenty Twenty to have the proper FSE prefixes, instead of --global, if --wp--custom-... is the appropriate method?
• How do we better educate theme developers on what this standard is, so that we can build this next class of themes as intended?

Screenshots:

From Twenty Twenty One:

From BlockBase:

[richtabor]

I'd say anything that is required should be a --wp--preset... value, such as site background color, normal font size (which is), line height, font weights, and font families for headings/body.

Some initial explorations:

--wp--preset--color--background: 
--wp--preset--color--foreground: 
--wp--preset--body--typography--line-height: 
--wp--preset--body--typography--font-family: 
--wp--preset--heading--typography--line-height: 
--wp--preset--heading--typography--font-family: 

Here's another screenshot of what's from the Quadrat theme.

[skorasaurus]

another example I anticipate with this is predefined margin and padding, controls; e.g. perhaps building upon $block-bg-padding--v ?
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/group/theme.scss#L4

[richtabor]

Agreed @skorasaurus — I've been exploring ...--spacing--baseline

I'm also looking at ...--spacing--baseline-lg for some scenarios as well, such as additional padding for when a core/group block has a background color and is alignfull.