🐼 Panda v0.15.1

[anubra266]

To upgrade to v0.15.1:

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

What's Changed

Fixed

• Fix an issue when wrapping a component with styled would display its name as styled.[object Object]
• Fix issue in css reset where number input field spinner still show.
• Fix issue where slot recipe breaks when slots is undefined

Added

• Reuse css variable in semantic token alias
• Add the property -moz-osx-font-smoothing: grayscale; to the reset.css under the html selector.
• Allow referencing tokens with the token() function in media queries or any other CSS at-rule.

import { css } from '../styled-system/css'

const className = css({
  '@media screen and (min-width: token(sizes.4xl))': {
    color: 'green.400',
  },
})

• Extract {fn}.raw as an identity fn

so this will now work:

import { css } from 'styled-system/css'

const paragraphSpacingStyle = css.raw({
  '&:not(:first-child)': { marginBlockEnd: '1em' },
})

export const proseCss = css.raw({
  maxWidth: '800px',
  '& p': {
    '&:not(:first-child)': { marginBlockStart: '1em' },
  },
  '& h1': paragraphSpacingStyle,
  '& h2': paragraphSpacingStyle,
})

• Use ECMA preset for ts-evaluator: This means that no other globals than those that are defined in the ECMAScript spec
  such as Math, Promise, Object, etc, are available but it allows for some basic evaluation of expressions like this:

import { cva } from '.panda/css'

const variants = () => {
  const spacingTokens = Object.entries({
    s: 'token(spacing.1)',
    m: 'token(spacing.2)',
    l: 'token(spacing.3)',
  })

  const spacingProps = {
    px: 'paddingX',
    py: 'paddingY',
  }

  // Generate variants programmatically
  return Object.entries(spacingProps)
    .map(([name, styleProp]) => {
      const variants = spacingTokens
        .map(([variant, token]) => ({ [variant]: { [styleProp]: token } }))
        .reduce((_agg, kv) => ({ ..._agg, ...kv }))

      return { [name]: variants }
    })
    .reduce((_agg, kv) => ({ ..._agg, ...kv }))
}

const baseStyle = cva({
  variants: variants(),
})

[benjaminpreiss]

Does the reset now antialias fonts, comparable to the tailwind property antialiased ?

If so, what were the considerations behind that (opposed to https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/)