chakra-ui/panda @pandacss/preset-base@0.29.0

on GitHub

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/types@0.29.0