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.
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
@theMasix It works in the playground which uses main https://play.panda-css.com/L_Zb7NbpPL