chakra-ui/panda @pandacss/token-dictionary@1.0.0

on GitHub

Major Changes

• a3bcbea: Stable release of PandaCSS

  Style Context

  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>

Patch Changes

• Updated dependencies [a3bcbea]
  • @pandacss/logger@1.0.0
  • @pandacss/shared@1.0.0
  • @pandacss/types@1.0.0