HOw to override colors

[satelin2002]

when i do

    extend: {
      tokens: {
        colors: {
          red: {
            50: "#ffebee",
            100: "#ffcdd2",
            200: "#ef9a9a",
            300: "#e57373",
            400: "#ef5350",
            500: "#f44336",
            600: "#e53935",
            700: "#d32f2f",
            800: "#c62828",
            900: "#b71c1c",
          },
        },
      },
    },
  },```

i get the following error

```- error ./src/styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[3]!./src/styles/globals.css
Error: Invalid token format: "#ffebee"
    at Array.reduce (<anonymous>)
Import trace for requested module:
./src/styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[3]!./src/styles/globals.css
./src/styles/globals.css

[satelin2002]

typescript error

Type 'string' is not assignable to type 'DeepPartial<Token | Recursive<Token>> | undefined'.ts(2322)
⚠ Error (TS2322) |
Type
is not assignable to type:
.
(property) 50: string

[segunadebayo]

The token's value should be { value: "#ffebee" } instead of just a string value.

https://panda-css.com/docs/theming/tokens