@pandacss/types
Advanced tools
Changelog
[0.37.1] - 2024-04-02
tokens
and compositve values like borders
and shadows
which could be objects.jsx
option with dot notation didn't work.import { defineConfig } from '@pandacss/dev'
export default defineConfig({
// ...
patterns: {
extend: {
grid: {
jsx: ['Form.Group', 'Grid'],
},
stack: {
jsx: ['Form.Action', 'Stack'],
},
},
},
})
compoundVariants
classes would not be present at runtime when using config recipes
// panda.config.ts
import { defineConfig } from '@pandacss/dev'
export default defineConfig({
theme: {
extend: {
recipes: {
button: {
// ...
variants: {
size: {
sm: {
fontSize: 'sm',
},
// ...
},
},
compoundVariants: [
{
size: 'sm',
css: { color: 'blue.100'},
},
],
},
},
},
},
})
// app.tsx
const Button = styled('button', button)
const App = () => {
return (
// ❌ this would only have the classes `button button--size_sm`
// the `text_blue` was missing
// ✅ it's now fixed -> `button button--size_sm text_blue`
<Button size="sm">Click me</Button>
)
}
getVariantProps
helper to the recipes API (cva
and config recipes
)import { cva } from '../styled-system/css'
import { getVariantProps } from '../styled-system/recipes'
const button = cva({
// ...
variants: {
size: {
sm: {
fontSize: 'sm',
},
md: {
fontSize: 'md',
},
},
variant: {
primary: {
backgroundColor: 'blue.500',
},
danger: {
backgroundColor: 'red.500',
}
}
}
defaultVariants: {
size: 'md',
variant: 'primary',
}
})
// ✅ this will return the computed variants based on the defaultVariants + props passed
const buttonProps = button.getVariantProps({ size: "sm" })
// ^? { size: "sm", variant: "primary" }
Public changes: Some quality of life fixes for the Studio:
[xxx]
escape-hatch syntax for textStyles
in the studio(mostly) Internal changes:
deepResolveReference
in TokenDictionary, helpful to get the raw value from a semantic token by recursively
traversing the token references.@pandacss/token-dictionary
package, mostly useful when building tooling around Panda
(Prettier/ESLint/VSCode plugin etc)