Customizing Semantic Tokens

Semantic tokens are designed for specific contexts and typically reference existing core tokens.

Creating Semantic Tokens

Inside the panda.config file, under the extend key within theme, add a semanticTokens object to create semantic tokens.

 theme: {
    extend: {
      semanticTokens: {
       ...
      },
    },
  },

Defining Semantic Tokens

• Raw value example

 theme: {
    extend: {
      semanticTokens: {
        colors: {
          { primary:
              { value: '#443434' }
          }
        }
      },
    },
  },

• Referencing existing core tokens

 theme: {
    extend: {
      semanticTokens: {
        colors: {
          { primary:
            { value: '{colors.blue.400}' }
          }
        }
      },
    },
  },