Panda Token Resolution — Are Non-Color Tokens Actually Supported?

[tbenci]

Hi team

We’ve been building a system around Panda and Radix Theme and loving the structured token approach — especially the clarity around colours. However, we’ve hit a wall when trying to apply non-colour tokens (e.g. blurs, opacities, spacing, etc.) in actual style declarations — and I’m wondering if we’re doing something wrong, or if this is a current limitation.

What We Tried

We defined tokens like this:

export const tokens = defineTokens({
  colors: {
    overlayBackground: { value: "rgba(0, 0, 0, 0.5)" },
  },
  blurs: {
    overlay: { value: "8px" },
  },
});

We then attempted to use them in css() style objects:

export const overlayStyle = css({
  backgroundColor: "overlayBackground",      // ✅ Works perfectly
  backdropFilter: "blur(overlay)",           // ❌ Fails
});

What We Observed

• backgroundColor resolves and compiles correctly via the colour token;
• blur(overlay) compiles to invalid CSS → backdrop-filter: blur(overlay);
• we can see the token exists in the dev console class name (bkdp_blurOverlay) but there’s no CSS rule associated with it in the final stylesheet; and,
• hardcoding values (e.g. "blur(8px)") works — but defeats the point of tokenisation

Questions

• Are only colours actually supported as top-level resolved tokens?
• Should we avoid trying to use tokens in function-based properties (e.g. blur(...), translate(...), etc.)?
• If non-colour token groups (e.g. blurs, opacities, sizes) aren’t meant to be resolved directly, what is their intended use?
• And if it is a known limitation, is function-wrapper token resolution on the roadmap?

Why This Matters

We’re building a token-governed system under a styling doctrine that avoids inline values unless strictly necessary. Colour tokens work great — but consistency falls apart when blur, opacity or sizing tokens fail silently. We’d love to know if this is a usage issue or a compiler limitation.

Thanks for the fantastic work — really hoping we’re just missing something obvious!

[segunadebayo]

There are two ways to resolve this:

1 - Using backdropFilter auto and setting the individual backdrop properties

const overlayStyle = css({
  backgroundColor: "overlayBackground",
  backdropFilter: "auto",
  backdropBlur: "overlay"
})

2 - Use the token reference syntax {blurs.<TOKEN>}

const overlayStyle2 = css({
  backgroundColor: "overlayBackground",
  backdropFilter: "blur({blurs.overlay})",
})