Skip to content

Color style variations don't resolve CSS custom properties #62245

Closed

Description

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.

CleanShot 2024-06-03 at 17 34 53@2x

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions