Locked Video

Please log in or buy the course to watch

Buy Now

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}' }
          }
        }
      },
    },
  },