Deprecations

Deprecating tokens, utilities, patterns and config recipes.

Deprecations are mostly relevant for large teams that want to deprecate certain utilities, patterns, recipes, or tokens before removing them from the codebase.

Deprecating a Utility

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

panda.config.ts

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.

panda.config.ts

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.

panda.config.ts

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.

panda.config.ts

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.

panda.config.ts

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

panda.config.ts

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