Customization

Customizing Conditions

Conditions allow you to apply different styles and behaviors based on specific conditions or states. They provide a way to target specific elements or apply styles in response to certain events or conditions.

Creating a condition

To create a condition, you can use the conditions property in the config. Let's say we want to create a groupHover pseudo condition that applies styles to an element when a parent container with the group role is hovered.

export default defineConfig({
  conditions: {
    extend: {
      groupHover: "[role=group]:where(:hover, [data-hover]) &",
    },
  },
});

Then you can run the following command to generate the conditions JS code:

pnpm panda codegen

npm panda codegen

yarn panda codegen

Now, we can use the groupHover condition in our components.

function App() {
  return (
    <div role="group">
      <span
        className={css({
          color: { base: "blue.400", _groupHover: "blue.600" },
        })}
      />
    </div>
  );
}