Customization

Deprecations

Deprecations are mostly relevant for large teams that want to deprecate certain utility, pattern, recipe, token, before removing them from the codebase.

Deprecating a Utility

To deprecate a utility, set the deprecated property to true in the utility object.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  utilities: {
    ta: {
      deprecated: true,
      transform(value) {
        return { textAlign: value }
      }
    }
  }
})

Deprecating a Token

To deprecate a token, set the deprecated property to true in the token object.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  theme: {
    tokens: {
      spacing: {
        lg: { value: '8px', deprecated: true }
      }
    }
  }
})

Deprecating a Pattern

To deprecate a pattern, set the deprecated property to true in the pattern definition.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  patterns: {
    customStack: {
      deprecated: true
    }
  }
})

Deprecating a Recipe

To deprecate a recipe, set the deprecated property to true in the recipe definition.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  theme: {
    recipes: {
      btn: {
        deprecated: true
      }
    }
  }
})

Custom Deprecation Messages

You can also provide a custom deprecation message by setting the deprecated property to a string. i.e. the migration message.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  theme: {
    tokens: {
      colors: {
        primary: { value: 'blue.500', deprecated: 'use `blue.600` instead' }
      }
    }
  }
})

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  theme: {
    recipes: {
      btn: {
        deprecated: 'will be removed in v2.0'
      }
    }
  }
})

Config Functions Background