Duotone: Presets with custom variables don't work

[hanneslsm]

Description

When defining a duotone palette in the theme.json but using colors from the color palette, those duotone filters won't work then. (the name is also not correctly displayed as in here #52733)

Step-by-step reproduction instructions

1. Define colors in your theme.json
2. Try to use those colors for duotone filters

Screenshots, screen recording, code snippet

  "settings": {
    "appearanceTools": true,
    "color": {
      "duotone": [
        {
          "colors": [
            "var(--wp--preset--color--light)",
            "var(--wp--preset--color--dark)"
          ],
          "name": "Light",
          "slug": "light"
        },
        {
          "colors": [
            "var(--wp--preset--color--dark)",
            "var(--wp--preset--color--light)"
          ],
          "name": "Dark",
          "slug": "dark"
        },
        {
          "colors": [
            "var(--wp--preset--color--primary-90)",
            "var(--wp--preset--color--primary-120)"
          ],
          "name": "Primary 90",
          "slug": "primary-110"
        }

…

However, it is possible to select from the color palette in the editor:

Environment info

• Wp 6.2.2
• GB 16.2.1

Please confirm that you have searched existing issues in the repo.

No

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Olein-jp]

I was thinking exactly the same thing.

I find it quite useful to be able to set the colours of the colour palette defined in theme.json with CSS variables, so that I can control the colour scheme even when switching between Style Variations.

[ajlende]

This is a duplicate of #33905