Color style variations don't resolve CSS custom properties

[fabiankaegy]

When defining a color palette in theme.json it is possible to reference external colors by using CSS custom properties as follows:

{
    "settings": {
        "custom": {
            "color": {
                "foo": "#39ab00"
            }
        },
        "color": {
            "palette": [
                {
                    "slug": "foo",
                    "name": "Foo",
                    "color": "var(--wp--custom--color--foo)"
                }
            ]
        }
    }
}

Doing this will resolve the colors correctly everywhere in the UI. However, this is not the case in the new design of style variations, which showcases the different color palettes defined in block theme style variations. There, they appear in greyscale.

[fabiankaegy]

CC: @richtabor as I know you worked on this