tokens/
The tokens/ folder — token() and token.var() for reading theme values in JavaScript.
Folder: styled-system/tokens/
Import: import { token } from '../styled-system/tokens'
Usually a single tokens/index module. Use it when you need a resolved token value (or CSS variable) outside a
style object — charts, canvas, third-party APIs, inline styles.
import { token } from '../styled-system/tokens'
token('colors.blue.500')
// => "var(--colors-blue-500)" (or the raw value, depending on usage)
token.var('colors.blue.500')
// => "var(--colors-blue-500)"Both accept an optional fallback:
token('colors.brand', '#0af')
token.var('colors.brand', '#0af')Prefer style objects first
For normal UI, put tokens in css() or style props (color: 'blue.500'). Panda resolves them
in the generated CSS. Reach for token() when you must read the value in JS.
Inside style strings you can also use the token() string helper or {path.to.token} reference syntax; that is
documented under Token Usage, not this generated module.
Defining tokens
Theme authoring lives under Theming → Tokens. This page is only the generated runtime reader.