How to use preset tokens

[KatFishSnake]

I am trying to do a simple thing. I want to set red.500 to the background of a div.

import { css } from "../styled-system/css";

<div
  className={css({
    fontSize: "2xl",
    fontWeight: "bold",
    bg: "red.500",
  })}
>
  Hello 🐼!
</div>

And this is what I get

I came from ChakraUI where this works, so I am a bit confused.

Am I expected to add all of the tokens one by one in panda.config.ts.

Can anybody help me figure this out?

My setup:
node: v19.7.0, bun: 1.0.12

{
  "name": "...",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "prepare": "panda codegen",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@pandacss/dev": "^0.18.3",
    "typescript": "5.2.2"
  }
}

import { defineConfig } from "@pandacss/dev";

export default defineConfig({
  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: ["./src/**/*.{ts,tsx}", "./pages/**/*.{ts,tsx}"],

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  theme: {
    extend: {
      tokens: {
        colors: {

// Funny even this doesn't work
          "red.500": {
            value: "{colors.gray.100}",
          },
        },
      },
    },
  },

  // The output directory for your css system
  outdir: "styled-system",

  jsxFramework: "react",
});

[anubra266]

@KatFishSnake Must be something wrong with your setup. This works as you can see in the playground
https://play.panda-css.com/

[KatFishSnake]

Thanks for the response, i will cross-check with the playground 👌

[KatFishSnake]

Actually had park ui messing this up, so removing the following from defineConfig fixed it

  presets: ["@pandacss/preset-base", "@park-ui/panda-preset"],

[anubra266]

@KatFishSnake I use park UI a lot, doesn't cause any issues

[KatFishSnake]

@anubra266 Maybe its a latest version, i followed the setup guidlines on their website to the tea 🤔

[anubra266]

cc @cschroeter

[cschroeter]

@KatFishSnake @anubra266

Park UI dropped support for the colors that ship by default with @pandacss/preset-panda by using @pandacss/preset-base. Instead Park UI using the Radix Color System which offers greater flexibility and a more consistent color experience, particularly when toggling between dark and light modes.

Regarding your issue, it's important to note that you can no longer use color references like red.500. Instead, you should select red shades numbered from 1-12 under the new system. For more detailed information about this change, you can explore the colors overview

[KatFishSnake]

@cschroeter
thank you for the explanation it makes a lot of sense,
https://park-ui.com/docs/panda/theme/semantic-tokens and i can also see all of the token pairs

so in my situation i would do bg.red.5 ?

[cschroeter]

@KatFishSnake

red.light.5 for the light mode version
red.dark.5 for the dark mode version
red.5 that toggles automatically between dark and light depending on the color scheme you are in

Hope that helps