chakra-ui/panda @pandacss/types@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",
    })}
  />

• 6247dfb: Allow multiple importMap (or multiple single import entrypoints if using the object format).

  It can be useful to use a component library's styled-system while also using your own styled-system in your app.

  import { defineConfig } from "@pandacss/dev";
  
  export default defineConfig({
    importMap: [
      "@acme/styled-system",
      "@ui-lib/styled-system",
      "styled-system",
    ],
  });

  Now you can use any of the @acme/styled-system, @ui-lib/styled-system and styled-system import sources:

  import { css } from "@acme/css";
  import { css as uiCss } from "@ui-lib/styled-system/css";
  import { css as appCss } from "@ui-lib/styled-system/css";