panda: Virtual color doesn't apply default color in palette

Description

When I use the colorPalette the DEFAULT value is missing. This may be expected but is is different to the behaviour when using the color directly. Nested defaults works as expected.

In the attached example the first two use the color directly and the second two use the color palette. We see that the default color is missing from the second two examples.

Screenshot 2023-09-26 at 11 55 39

Link to Reproduction

https://play.panda-css.com/eCtPDOmErD

Steps to reproduce

Use a DEFAULT value at the root of a color palette.

e.g.

{
  theme: {
    tokens: {
      colors: {
        red: {
          DEFAULT: { value: '#990000' },
          hot: {
            DEFAULT: { value: '#CC0000' },
            er: { value: '#FF0000' },
          },
        },
        blue: {
          DEFAULT: { value: '#000099' },
          hot: {
            DEFAULT: { value: '#0000CC' },
            er: { value: '#0000FF' },
          },
        },
      },
    },
  },
}

the the generated css contains

  .color-palette_red {
    --colors-color-palette-hot: var(--colors-red-hot);
    --colors-color-palette-hot-er: var(--colors-red-hot-er);
  }

  .text_colorPalette {
    color: colorPalette;
  }

Arguably should be:

  .color-palette_red {
    --colors-color-palette: var(--colors-red);
    --colors-color-palette-hot: var(--colors-red-hot);
    --colors-color-palette-hot-er: var(--colors-red-hot-er);
  }

  .text_colorPalette {
    color: var(--colors-color-palette);
  }

JS Framework

React

Panda CSS Version

0.15.0

Browser

Chrome 115

Operating System

  • macOS
  • Windows
  • Linux

Additional Information

No response

About this issue

  • Original URL
  • State: closed
  • Created 9 months ago
  • Comments: 16

Most upvoted comments

@theMasix It works in the playground which uses main https://play.panda-css.com/L_Zb7NbpPL