using-panda-css

Enforce type-safe token usage in Panda CSS by wrapping token paths with the token() function inside css() and cva() calls. This prevents unsafe string literals and keeps your design system reliable.

Panda CSS token() usage prevents unsafe string literals by validating token paths at compile time. This keeps TypeScript design systems reliable by ensuring styling calls reference actual tokens instead of arbitrary strings.

Refactor Panda CSS string literals by scanning styling calls like css({ maxWidth: 'sizes.container.wide' }) and replacing the string with token('sizes.container.wide'). This enforces type-safe token references across your design system workflow.

String literals are forbidden for token paths in Panda CSS cva() calls. You must wrap paths with the token() function to ensure type safety and prevent unreliable design system token references in your TypeScript project.

TypeScript is required for Panda CSS token enforcement because the type safety relies on validating token paths during compilation. The token() function ensures your css() and cva() styling calls reference valid design system tokens.

You should not use token() for literal values that are not part of your design system tokens. The token() function is specifically for enforcing type-safe references to existing token paths within css() and cva() styling calls.