Panda `token()` helper returns CSS variable instead of raw value

[Curetix]

Hello there, I'm trying to get the raw color value of a Park UI token using Panda's token() helper, but I only get the CSS variable like var(--colors-bg-default). The generated code in styled-system/tokens/index.mjs contains the correct values for "native" Panda tokens, but not (what I assume) Park UI tokens:

const tokens = {
  // ....
  // Native Panda:
  "sizes.full": {
    "value": "100%",
    "variable": "var(--sizes-full)"
  },
  // ....
  // Park UI:
  "colors.bg.default": {
    "value": "var(--colors-bg-default)",
    "variable": "var(--colors-bg-default)"
  },
  // ....

Cheers!

[cschroeter]

@Curetix I'm not sure If I fully understand but here is what I use in Park to resolve the raw value of a token:

import { token } from 'styled-system/tokens'

const rawValue =  token.var('colors.accent.a11')
console.log("--colors-accent-text",  rawValue)

[Curetix]

Ah sorry, I'm trying to get the raw CSS value like the HEX color code instead of the CSS variable name. This does not work for Park UI color values:

import { token } from "styled-system/tokens";

token("sizes.full"); // = 100% ✅
token.var("sizes.full"); // = var(--sizes-full) ✅

token("colors.bg.default"); // = var(--colors-bg-default) ❌ I'd like the HEX color value instead of a var()
token.var("colors.bg.default"); // = var(--colors-bg-default) ✅

[cschroeter]

colors.bg.default is a semantic token. I think there is a bit more to do.