🐼 Panda v1 🎊

[anubra266]

To upgrade to v1.0.0:

pnpm up "@pandacss/*"
#or
yarn up '@pandacss/*'

What's Changed

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>