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