Skip to content

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

@mikachan

Description

@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"
		}
	}
},

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions