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

on GitHub

Minor Changes

• bcfb5c5: ### Fixed

  • Fix className collisions between utilities by using unique class names per property in the default preset.

  Changed

  • Color Mode Selectors: Changed the default selectors for _light and _dark to target parent elements. This
    ensures consistent behavior with using these conditions to style pseudo elements (like ::before and ::after).

  const conditions = {
  -  _dark: '&.dark, .dark &',
  +  _dark: '.dark &',
  -  _light: '&.light, .light &',
  +  _light: '.light &',
  }

  • Changed divideX and divideY now maps to the borderWidths token group.

  Added

  • Spacing Utilities: Add new spaceX and spaceY utilities for applying margin between elements. Especially useful
    when applying negative margin to child elements.

  <div className={flex({ spaceX: "-1" })}>
    <div className={circle({ size: "5", bg: "red" })} />
    <div className={circle({ size: "5", bg: "pink" })} />
  </div>

  • Added new _starting condition to support the new @starting-style at-rule.
    Learn more here
  • Gradient Position: Add new gradientFromPosition and gradientToPosition utilities for controlling the position
    of the gradient color stops.

  <div
    className={css({
      bgGradient: "to-r",
      // from
      gradientFrom: "red",
      gradientFromPosition: "top left",
      // to
      gradientTo: "blue",
      gradientToPosition: "bottom right",
    })}
  />

Patch Changes

• Updated dependencies [bcfb5c5]
• Updated dependencies [6247dfb]
  • @pandacss/types@0.37.0