@pandacss/logger - npm Package Versions

[1.2.0] - 2025-08-27

Added

• Global CSS: Added reset styles for ::selection pseudo element that maps to --global-color-selection css variable. You can configure it in the globalCss config.

  // panda.config.ts
  export default defineConfig({
    globalCss: {
      html: {
        '--global-color-selection': 'colors.gray.300',
      },
    },
  })
  

• JSX Styled Factory: Added support for unstyled prop in the styled factory, allowing users to opt out of recipe styles as needed.

  const Notice = styled('div', {
    base: {
      bg: 'red',
      color: 'white',
    },
  })
  
  // This will remove the recipe styles and only apply the inline styles
  <Notice unstyled bg="pink" color="green">
    Hello
  </Notice>
  

• Focus Ring Utilities: Introduced new utilities for managing focus rings with focusRing and focusVisibleRing properties to the @pandacss/preset-base preset.

  <div
    className={css({
      focusRing: 'outside',
      focusVisibleRing: 'inside',
      focusRingColor: 'blue.300',
    })}
  >
    Click me
  </div>
  

  • focusRing: Style focus states using &:is(:focus, [data-focus]) selector with outside, inside, mixed, or none values.
  • focusVisibleRing: Style keyboard-only focus using &:is(:focus-visible, [data-focus-visible]) selector
  • focusRingColor, focusRingWidth, focusRingStyle, and focusRingOffset for fine-tuned control
  • Configure the global focus ring color with --global-color-focus-ring in global CSS

• Theme: Add 4.5 spacing and sizing tokens to the @pandacss/preset-panda preset.

[1.1.0] - 2025-08-18

Added

• Add support for preset:resolved hook to pick/omit specific preset properties.

  import { defineConfig } from '@pandacss/dev'
  
  export default defineConfig({
    // ...
    hooks: {
      'preset:resolved': ({ utils, preset, name }) => {
        if (name === '@pandacss/preset-panda') {
          return utils.omit(preset, ['theme.tokens.colors', 'theme.semanticTokens.colors'])
        }
        return preset
      },
    },
  })
  

• Add missing WebKit CSS properties to resolve TypeScript errors. Adds support for:

  • WebkitUserDrag / -webkit-user-drag - Controls element drag behavior
  • WebkitAppRegion / -webkit-app-region - For Electron window controls
  • WebkitBorderHorizontalSpacing / -webkit-border-horizontal-spacing - Table border spacing
  • WebkitBorderVerticalSpacing / -webkit-border-vertical-spacing - Table border spacing
  • WebkitTextSecurity / -webkit-text-security - Text obscuring for passwords

Fixed

• Fixes TypeScript errors when using vendor-prefixed properties in Panda CSS.

[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'