Mixed theme and mode conditions

[cgatian]

Description

When I create a style that contains conditions for a specific theme and mode, I expect the element to be styled appropriately.

Link to Reproduction

Multi-Theme Tokens
https://play.panda-css.com/tSFQVNcX_t

Multi-Theme
https://play.panda-css.com/UvRRJln-EQ

Steps to reproduce

1. Use the mulit-theme example where pink and blue are defined as themes with selectors.
2. Notice the generated Tokens CSS contains the proper selector [data-theme="pink"][data-color-mode="dark"] targeting a single element.
3. Create a style that targets the blue theme and dark mode conditions.

<div data-theme="primary" data-color-mode="dark">
 <div className={css({
            _blueTheme: {
              color: {
                base: 'red',
                _dark: 'yellow'
              }
            }
        })}
      >
</div>

4. The output Utility CSS that is generated is:

	[data-color-mode="dark"] [data-theme="blue"] .blueTheme\:dark\:c_yellow {
		color: yellow;
	}

5. Notice that this selector will not target properly because theme and mode conditions are not targeting a single element:

Produced CSS:
[data-color-mode="dark"] [data-theme="blue"] ❌

Desired CSS:
[data-color-mode="dark"][data-theme="blue"] ✅

JS Framework

No response

Panda CSS Version

0.53.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

I can make additional conditions that properly match based on theme and mode:

  conditions: {
    light: '[data-color-mode=light] &',
    dark: '[data-color-mode=dark] &',
    primaryTheme: '[data-theme=primary] &',
    secondaryTheme: '[data-theme=secondary] &',
    darkPrimary: '[data-theme=primary][data-color-mode=dark] &', // Extra condition
    darkSecondary: '[data-theme=secondary][data-color-mode=dark] &' // Extra condition
  }

However, something feels off about how the conditions work as expected when generating the Token CSS and how the Utilities are generated in code.