What is the proper way to specify the scrollbar-color property?

[aharisu]

The scrollbar-color property always requires two color values to be specified.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#formal_syntax

However, in PandaCSS, when I try to specify two colors using tokens, Panda does not recognize them as tokens and does not convert them to variables.

demo:
https://play.panda-css.com/EmVHWyDh-4

// NG 
scrollbarColor: "red.100 blue.100"

↓

.scr-bar-c_red\.100_blue\.100 {
    scrollbar-color: red.100 blue.100;
}

To make it work correctly, I have to write the variable names directly:

// OK
scrollbarColor: "var(--colors-red-100) var(--colors-blue-100)"

This breaks type safety, so if there is a better way to write this, please let me know.

[aharisu]

Ah, I should have read the documentation more carefully.
What I wanted to do was actually described here: https://panda-css.com/docs/theming/usage#composite-values

By writing:

scrollbarColor: "token(colors.thumb) token(colors.track)"

I was able to reference the tokens as intended.