chakra-ui/panda @pandacss/studio@0.37.1

on GitHub

Patch Changes

• 93dc9f5: Public changes: Some quality of life fixes for the Studio:

  • Handle displaying values using the [xxx] escape-hatch syntax for textStyles in the studio
  • Display an empty state when there's no token in a specific token page in the studio

  ---

  (mostly) Internal changes:

  • Add deepResolveReference in TokenDictionary, helpful to get the raw value from a semantic token by recursively
    traversing the token references.
  • Added some exports in the @pandacss/token-dictionary package, mostly useful when building tooling around Panda
    (Prettier/ESLint/VSCode plugin etc)

• 885963c: - Fix an issue where the 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>
    )
  }

  • Add a 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" }

• Updated dependencies [93dc9f5]

• Updated dependencies [88049c5]

• Updated dependencies [885963c]

• Updated dependencies [99870bb]

  • @pandacss/token-dictionary@0.37.1
  • @pandacss/config@0.37.1
  • @pandacss/types@0.37.1
  • @pandacss/shared@0.37.1
  • @pandacss/logger@0.37.1
  • @pandacss/astro-plugin-studio@0.37.1