@pandacss/core - npm Package Versions

[1.0.1] - 2025-08-05

Fixed

• createStyleContext: Ensure the defaultProps.className is applied correctly when no explicit class prop is provided
• Fix issue where bgGradient did not respect the gradient token.

[1.0.0] - 2025-08-04

Fixed

• Fix issue where rtl and ltr variants does not work with [dir=auto]
• Fix issue where @property fallbacks does not work correctly when global vars are used in no initial-value
• Sort fieldSizing property properly

Changed

• Add ::-webkit-details-marker to marker condition
• Add new inset-2xs, inset-xs and inset-sm shadows
• Add new noscript and inverted-colors conditions
• Add :popover-open to open condition
• Removed inner shadow in favor of inset-sm
• Remap blur tokens:
  • blurs.sm -> blurs.xs
  • blurs.base -> blurs.sm

Added

• Add support for bgLinear, bgRadial and bgConic properties.

<div
  className={css({
    bgLinear: 'to-r',
    gradientFrom: 'cyan.500',
    gradientTo: 'blue.500',
  })}
/>

<div
  className={css({
    bgRadial: 'in srgb',
    gradientFrom: 'pink.400',
    gradientFromPosition: '40%',
    gradientTo: 'fuchsia.700',
  })}
/>

<div
  className={css({
    bgConic: 'in srgb',
    gradientFrom: 'blue.600',
    gradientTo: 'sky.400',
    gradientToPosition: '50%',
  })}
/>

• Add support for boxSize property that maps to width and height properties.

<div className={css({ boxSize: '24' })} />

• Add createStyleContext function to framework artifacts for React, Preact, Solid, and Vue frameworks

import { sva } from 'styled-system/css'
import { createStyleContext } from 'styled-system/jsx'

const card = sva({
  slots: ['root', 'label'],
  base: {
    root: {
      color: 'red',
      bg: 'red.300',
    },
    label: {
      fontWeight: 'medium',
    },
  },
  variants: {
    size: {
      sm: {
        root: {
          padding: '10px',
        },
      },
      md: {
        root: {
          padding: '20px',
        },
      },
    },
  },
  defaultVariants: {
    size: 'sm',
  },
})

const { withProvider, withContext } = createStyleContext(card)

const CardRoot = withProvider('div', 'root')
const CardLabel = withContext('label', 'label')

Then, use like this:

<CardRoot size="sm">
  <CardLabel>Hello</CardLabel>
</CardRoot>

[0.54.0] - 2025-06-12

Fixed

• Fix issue where borderWidth token reference adds an extra px to the generated css value
• Fix TS generated pattern dts code when strict: true is set
• Fix issue where text (or layer) styles that use conditions don't render correctly
• Revert tinyglobally to fast-glob change to fix issues with glob matching

Added

• Add more aria attributes to conditions for better accessibility and styling hooks:
  • [aria-disabled=true] was added to disabled, peerDisabled, and groupDisabled conditions
  • [aria-readonly=true] was added to the readOnly condition
  • [aria-invalid=true] was added to invalid and groupInvalid conditions

Changed

• Improve algorithm for deterministic property order:

  • Longhand (padding, margin, inset)
  • Shorthand of longhands (padding-inline, margin-inline)
  • Shorthand of shorthands (padding-inline-start, margin-inline-start)

  css({
    p: '4',
    pr: '2',
    px: '10',
  })
  

  Will result in the following css regardless of the order of the properties:

  .p-4 {
    padding: 4px;
  }
  
  .px-10 {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .pr-2 {
    padding-right: 2px;
  }
  

• Reduce the size of the generated Token type by referencing category tokens

  Before:

  export type Token = 'colors.green.400' | 'colors.red.400'
  
  export type ColorToken = 'green.400' | 'red.400'
  

  After:

  export type Token = `colors.${ColorToken}`
  
  export type ColorToken = 'green.400' | 'red.400'