@pandacss/preset-base - npm Package Versions

[0.50.0] - 2024-12-27

Added

• Add support for semantic tokens in composite shadow blur, offsetX, offsetY and spread properties.

This enables the use of semantic tokens in composite shadow properties.

// panda.config.ts

export default defineConfig({
  theme: {
    tokens: {
      // ...
      shadows: {
        sm: {
          value: {
            offsetX: '{spacing.3}',
            offsetY: '{spacing.3}',
            blur: '1rem',
            spread: '{spacing.3}',
            color: '{colors.red}',
          },
        },
      },
    },
  },
})

• Adds support for static analysis of used tokens and recipe variants. It helps to get a birds-eye view of how your design system is used and answers the following questions:

• What tokens are most used?

• What recipe variants are most used?

• How many hardcoded values vs tokens do we have?

panda analyze --scope=<token|recipe>

Still work in progress but we're excited to get your feedback!

Changed

Improve inference of slots in slot recipes when spreading and concatenating slot names.

This handles the following case gracefully:

const styles = sva({
  className: 'foo',
  slots: [...componentAnatomy.keys(), 'additional', 'slots', 'here'],
})

Panda will now infer the slots from the anatomy and add them to the recipe.

[0.49.0] - 2024-12-08

Add support for animation styles. Animation styles focus solely on animations, allowing you to orchestrate animation properties.

Pairing animation styles with text styles and layer styles can make your styles a lot cleaner.

Here's an example of this:

import { defineAnimationStyles } from '@pandacss/dev'

export const animationStyles = defineAnimationStyles({
  'slide-fade-in': {
    value: {
      transformOrigin: 'var(--transform-origin)',
      animationDuration: 'fast',
      '&[data-placement^=top]': {
        animationName: 'slide-from-top, fade-in',
      },
      '&[data-placement^=bottom]': {
        animationName: 'slide-from-bottom, fade-in',
      },
      '&[data-placement^=left]': {
        animationName: 'slide-from-left, fade-in',
      },
      '&[data-placement^=right]': {
        animationName: 'slide-from-right, fade-in',
      },
    },
  },
})

With that defined, I can use it in my recipe or css like so:

export const popoverSlotRecipe = defineSlotRecipe({
  slots: anatomy.keys(),
  base: {
    content: {
      _open: {
        animationStyle: 'scale-fade-in',
      },
      _closed: {
        animationStyle: 'scale-fade-out',
      },
    },
  },
})

This feature will drive consumers to lean in towards CSS for animations rather than JS. Composing animation names is a powerful feature we should encourage consumers to use.

Added

[0.48.1] - 2024-12-07

Fixed

• Fix issue where staticCss artifacts were not included in the build info json.
• Fix issue where scrollbarGutter property incorrectly referenced spacing tokens. The only valid values are auto, stable, and both-edges.