🐼 Panda v0.29.0

[anubra266]

To upgrade to v0.29.0:

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

What's Changed

Fixed

• Fix an issue where the curly token references would not be escaped if the token path was not found.

Added

Add config validation

• Check for duplicate between token & semanticTokens names
• Check for duplicate between recipes/patterns/slots names
• Check for token / semanticTokens paths (must end/contain 'value')
• Check for self/circular token references
• Check for missing tokens references
• Check for conditions selectors (must contain '&')
• Check for breakpoints units (must be the same)

You can set validate: 'warn' in your config to only warn about errors or set it to none to disable validation
entirely.

Default values in patterns

You can now set and override defaultValues in pattern configurations.

Here's an example of how to define a new hstack pattern with a default gap value of 40px:

defineConfig({
  patterns: {
    hstack: {
      properties: {
        justify: { type: 'property', value: 'justifyContent' },
        gap: { type: 'property', value: 'gap' },
      },
      // you can also use a token like '10'
      defaultValues: { gap: '40px' },
      transform(props) {
        const { justify, gap, ...rest } = props
        return {
          display: 'flex',
          alignItems: 'center',
          justifyContent: justify,
          gap,
          ...rest,
        }
      },
    },
  },
})

Media query curly braces tokens

Add support for token references with curly braces like {path.to.token} in media queries, just like the
token(path.to.token) alternative already could.

css({
  // ✅ this is fine now, will resolve to something like
  // `@container (min-width: 56em)`
  '@container (min-width: {sizes.4xl})': {
    color: 'green',
  },
})

Color opacifier

Update every utilities connected to the colors tokens in the @pandacss/preset-base (included by default) to use the
color-mix CSS function.

This function allows you to mix two colors together, and we use it to change the opacity of a color using the
{color}/{opacity} syntax.

You can use it like this:

css({
  bg: 'red.300/40',
  color: 'white',
})

This will generate:

@layer utilities {
  .bg_red\.300\/40 {
    --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
    background: var(--mix-background, var(--colors-red-300));
  }

  .text_white {
    color: var(--colors-white);
  }
}

• If you're not using any opacity, the utility will not use color-mix
• The utility will automatically fallback to the original color if the color-mix function is not supported by the
  browser.
• You can use any of the color tokens, and any of the opacity tokens.

---

The utilities transform function also receives a new utils object that contains the colorMix function, so you can
also use it on your own utilities:

export default defineConfig({
  utilities: {
    background: {
      shorthand: 'bg',
      className: 'bg',
      values: 'colors',
      transform(value, args) {
        const mix = args.utils.colorMix(value)
        // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
        if (mix.invalid) return { background: value }

        return {
          background: mix.value,
        }
      },
    },
  },
})

---

Here's a cool snippet (that we use internally !) that makes it easier to create a utility transform for a given
property:

import type { PropertyTransform } from '@pandacss/types'

export const createColorMixTransform =
  (prop: string): PropertyTransform =>
  (value, args) => {
    const mix = args.utils.colorMix(value)
    if (mix.invalid) return { [prop]: value }

    const cssVar = '--mix-' + prop

    return {
      [cssVar]: mix.value,
      [prop]: `var(${cssVar}, ${mix.color})`,
    }
  }

then the same utility transform as above can be written like this:

export default defineConfig({
  utilities: {
    background: {
      shorthand: 'bg',
      className: 'bg',
      values: 'colors',
      transform: createColorMixTransform('background'),
    },
  },
})

Container queries Theme

Improve support for CSS container queries by adding a new containerNames and containerSizes theme options.

You can new define container names and sizes in your theme configuration and use them in your styles.

export default defineConfig({
  // ...
  theme: {
    extend: {
      containerNames: ['sidebar', 'content'],
      containerSizes: {
        xs: '40em',
        sm: '60em',
        md: '80em',
      },
    },
  },
})

The default container sizes in the @pandacss/preset-panda preset are shown below:

export const containerSizes = {
  xs: '320px',
  sm: '384px',
  md: '448px',
  lg: '512px',
  xl: '576px',
  '2xl': '672px',
  '3xl': '768px',
  '4xl': '896px',
  '5xl': '1024px',
  '6xl': '1152px',
  '7xl': '1280px',
  '8xl': '1440px',
}

Then use them in your styles by referencing using @<container-name>/<container-size> syntax:

The default container syntax is @/<container-size>.

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

function Demo() {
  return (
    <nav className={css({ containerType: 'inline-size' })}>
      <div
        className={css({
          fontSize: { '@/sm': 'md' },
        })}
      />
    </nav>
  )
}

This will generate the following CSS:

.cq-type_inline-size {
  container-type: inline-size;
}

@container (min-width: 60em) {
  .\@\/sm:fs_md {
    container-type: inline-size;
  }
}

Container Query Pattern

To make it easier to use container queries, we've added a new cq pattern to @pandacss/preset-base.

import { cq } from 'styled-system/patterns'

function Demo() {
  return (
    <nav className={cq()}>
      <div
        className={css({
          fontSize: { base: 'lg', '@/sm': 'md' },
        })}
      />
    </nav>
  )
}

You can also named container queries:

import { cq } from 'styled-system/patterns'

function Demo() {
  return (
    <nav className={cq({ name: 'sidebar' })}>
      <div
        className={css({
          fontSize: { base: 'lg', '@sidebar/sm': 'md' },
        })}
      />
    </nav>
  )
}

Config

• Add support for explicitly specifying config related files that should trigger a context reload on change.

  We automatically track the config file and (transitive) files imported by the config file as much as possible, but
  sometimes we might miss some. You can use this option as a workaround for those edge cases.

  Set the dependencies option in panda.config.ts to a glob or list of files.

  export default defineConfig({
    // ...
    dependencies: ['path/to/files/**.ts'],
  })

• Invoke config:change hook in more situations (when the --watch flag is passed to panda codegen, panda cssgen,
  panda ship)

• Watch for more config options paths changes, so that the related artifacts will be regenerated a bit more reliably
  (ex: updating the config.hooks will now trigger a full regeneration of styled-system)

Changed

• Set display: none for hidden elements in reset css
• Updated the default preset in Panda to use the new defaultValues feature.

To override the default values, consider using the extend pattern.

defineConfig({
  patterns: {
    extend: {
      stack: {
        defaultValues: { gap: '20px' },
      },
    },
  },
})

[kiruushaaa]

Am I right thinking that the latest dependencies array for main config can help regenerating code for recipes defined with defineRecipe by saving an edited file? 🥹 I'm kinda tired running codegen each time saving a file since I was learning proper token names

[astahmer]

if that recipe file is not automatically tracked by esbuild/Panda, then yes it should help !

[astahmer]

you can use the PANDA_DEBUG env var to see the list of automatically tracked "config dependencies" https://panda-css.com/docs/guides/debugging#panda_debug-env-variable

[peterbartels]

I just initialized a new project and panda init failed.
Cannot find config file panda.config.{ts,js,mjs,mts}

After reverting back to 0.28.0 it worked so I think it's related to this version.

[anubra266]

@peterbartels We'll release the fix for this shortly. in the meantime you can use npx @pandacss/[email protected] init. You don't need to downgrade.

[anubra266]

@peterbartels we've released the fix for this in 0.29.1

[lalexdotcom]

Is it possible to use the opacity modifier with a var?
Let's say bgColor: 'var(--highlightColor)/50' ?

[kiruushaaa]

seems you need this https://panda-css.com/docs/guides/dynamic-styling#using-token

[lalexdotcom]

Not really this use case...

I sometimes use CVA to set a CSS variable applied by the base CSS, it would be perfect with opacity modifiers
Something like

button = cva({
base: {
color: 'var(--intentColor)';
bgColor: 'var(--intentColor)/30';
},
variants: {
intent:{
success: {
--intentColor: 'green.400';
},
danger: {
--intentColor: 'red.500'
}
}
}
});

(sorry for indent, I'm on my phone 😅)

[lalexdotcom]

Actually, I'm currently using color-mix for this...

[astahmer]

this looks fine here https://play.panda-css.com/j47gSOzRPc

[lalexdotcom]

Great news then! Thanks for taking time to answer 😉

[JonnyDawe]

Is it possible to use the opacity modifier within a semantic token config definition where the {} syntax is being used?

For example something like:

selection: {
            background: {
              value: {
                base: "{colors.red.100}/70",
                _dark: "{colors.red.900}/70",
              },
            },
          },

[my-lalex]

I second this one: can be useful to for composed css values: boxShadow: '0 0 0 {sizes.border} {colors.black}/50'

[lalexdotcom]

Actually, if easier as the match seam to be with the pattern ending by "/xx", this could be boxShadow: '0 0 0 {sizes.border} {colors.black/50}'

[caseybaggz]

I'm starting to get this error now:

- [tokens]: Token paths must end with 'value': `theme.tokens.fonts.display.description`

But when I update the font token to follow the pattern of fonts.display.description.value it breaks the config. I know the team releases like daily so totally possible I missed something - so please forgive me if I did.

Everything still works with the ⚠️Invalid config: warning, but it's hella clogging up my console. Which is the correct way I should be creating font/zIndex tokens?

[caseybaggz]

Here's the file:
https://github.com/nurl-inc/dev-tools/blob/main/packages/panda-preset/src/theme/tokens.ts

[astahmer]

related: #2167
that's my bad, I didn't consider the other properties like description/extensions

will fix asap, in the meantime you can set the config option validation to warn or none