Customizing Core Tokens

Customizing or extending the core tokens in Panda CSS involves adding or overriding default tokens in the panda.config file. This ensures our design remains consistent with custom styles.

Extend Tokens Within Panda Config

Under the extend key within theme, add a tokens object to define custom tokens.

 theme: {
    extend: {
      tokens: {
       ...
      },
    },
  },

Token Format

Each token is an object containing:

• value: The underlying CSS value (e.g., 80px for font size).
• description: Describes the token's usage. This is optional.

To illustrate, this is how to define custom cobalt colors:

 theme: {
    extend: {
      tokens: {
        colors: {
          cobalt: {
             50: { value: '#EBEDF9', description: 'color for cobalt.50' },
             100: { value: '#D3D7EE', description: 'color for cobalt.100' },
          }
        },
      },
    },
  },