chore(deps): update panda-css monorepo to ^0.29.0

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@pandacss/dev (source)	^0.28.0 -> ^0.29.0
@pandacss/types (source)	^0.28.0 -> ^0.29.0

---

Release Notes

chakra-ui/panda (@​pandacss/dev)

v0.29.0

Compare Source

Minor Changes

• a2fb5cc: - 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)

Patch Changes

• Updated dependencies [5fcdeb7]
• Updated dependencies [7c7340e]
• Updated dependencies [ea3f554]
• Updated dependencies [250b4d1]
• Updated dependencies [a2fb5cc]
  • @​pandacss/types@​0.29.0
  • @​pandacss/token-dictionary@​0.29.0
  • @​pandacss/config@​0.29.0
  • @​pandacss/node@​0.29.0
  • @​pandacss/preset-panda@​0.29.0
  • @​pandacss/postcss@​0.29.0
  • @​pandacss/logger@​0.29.0
  • @​pandacss/shared@​0.29.0

chakra-ui/panda (@​pandacss/types)

v0.29.0

Compare Source

Minor Changes

• 5fcdeb7: 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"),
    },
  });

• 250b4d1: ### Container Query 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: { '@&#8203;/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', '@&#8203;/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', '@&#8203;sidebar/sm': 'md' },
        })}
      />
    </nav>
  )
}

• a2fb5cc: - 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)

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by Mend Renovate. View repository job log here.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9f103f2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Deploy preview for ui-storybook ready!

✅ Preview
https://ui-storybook-429diyi5n-animareflection.vercel.app

Built with commit 1fc54eb.
This pull request is being automatically deployed with vercel-action