Use styles.color.background and styles.color.text as variables

[mikachan]

What problem does this address?

In theme.json, we can currently set styles.color.background and styles.color.text, but I believe these are only used by default to set background-color and color inline styles for the body and certain blocks, and they're not made available as variables.

What is your proposed solution?

It would be great if these two settings were also assigned to CSS variables that could then be referenced in many more places, such as block markup. Perhaps something like var(--wp--preset--styles--color--background) and var(--wp--preset--styles--color--text).

We can already do something similar within theme.json using ref:

":hover": {
	"color": {
		"background": {
			"ref": "styles.color.background"
		},
		"text": {
			"ref": "styles.color.text"
		}
	}
},

[ghost]

related to #39372

[mikachan]

Also related to / duplicate of #39432.

[mikachan]

Related: #49279