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.

panda.config.ts
import { defineConfig } from '@pandacss/dev'
 
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

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

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

Customizing Built-in Conditions

You can extend the default conditions by using the conditions.extend property in the config.

panda.config.ts
import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  conditions: {
    extend: {
      // Extend the default `dark` condition
      dark: '.dark &, [data-theme="dark"] &',
    },
  },
});

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

pnpm panda codegen
PatternsUtilities