Description

We've introduced a new mechanism to refer to a different style dynamically at #41696 which allows us to do things such as:

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

In the example, the result would be that the text and background colors are the same (yellow).

While this works in the front-end it doesn't in the site editor:

• the styles box does not render the background
• the color tools do not render the background
• the site editor breaks if the user tries to edit the background color

Styles	Color tools	Site editor

Step-by-step reproduction instructions

• Use TwentyTwentyTwo theme and update the styles.color values to be:

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

• Go to the front-end and verify that it works as expected.
• Go to the site editor and open the Global Styles Toolbar. Click on Colors and then in the Backgound element. It'll throw an error.

Environment info

I can reproduce this is trunk.