@pandacss/[email protected]

Patch Changes

• @pandacss/[email protected]
• @pandacss/[email protected]
• @pandacss/[email protected]
• @pandacss/[email protected]
• @pandacss/[email protected]

@pandacss/[email protected]

Patch Changes

• Updated dependencies [a5c7560]
  • @pandacss/[email protected]

@pandacss/[email protected]

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: { '@/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>
    )
  }

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

@pandacss/[email protected]

Patch Changes

• 7c7340e: 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',
    },
  })

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

• Updated dependencies [5fcdeb7]

• Updated dependencies [250b4d1]

• Updated dependencies [a2fb5cc]

  • @pandacss/[email protected]
  • @pandacss/[email protected]
  • @pandacss/[email protected]

@pandacss/[email protected]

Patch Changes

• Updated dependencies [5fcdeb7]
• Updated dependencies [7c7340e]
• Updated dependencies [ea3f554]
• Updated dependencies [250b4d1]
• Updated dependencies [a2fb5cc]
  • @pandacss/[email protected]
  • @pandacss/[email protected]
  • @pandacss/[email protected]
  • @pandacss/[email protected]
  • @pandacss/[email protected]
  • @pandacss/[email protected]

@pandacss/[email protected]

@pandacss/[email protected]

@pandacss/[email protected]

Patch Changes

• Updated dependencies [5fcdeb7]
• Updated dependencies [250b4d1]
• Updated dependencies [a2fb5cc]
  • @pandacss/[email protected]

@pandacss/[email protected]

Patch Changes

• Updated dependencies [5fcdeb7]
• Updated dependencies [250b4d1]
• Updated dependencies [a2fb5cc]
  • @pandacss/[email protected]

@pandacss/[email protected]

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: { '@/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>
    )
  }

• f778d3e: 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' },
        },
      },
    },
  })

Patch Changes

• Updated dependencies [5fcdeb7]
• Updated dependencies [250b4d1]
• Updated dependencies [a2fb5cc]
  • @pandacss/[email protected]

@pandacss/[email protected]

Patch Changes

• Updated dependencies [5fcdeb7]
• Updated dependencies [250b4d1]
• Updated dependencies [a2fb5cc]
  • @pandacss/[email protected]