Support Nested and Combined Data-Attribute Theme Resolution

[storchk]

Description

Support nested and combined data-attribute conditions to resolve tokens correctly when themes and modes are set on different parent elements.

Playground with use cases:
👉 https://play.panda-css.com/6-Xeoo5Vfj

Problem Statement/Justification

Currently, Panda CSS only resolves token conditions when all relevant data attributes are present on the same element.
In our setup, themes and modes are often structured hierarchically — e.g., a global brand theme (data-panda-theme), a color mode wrapper (data-color-mode), and a nested sub-theme (data-theme) to represent specialized contexts like “sustainable” or “inverted” themes.

Without support for resolving tokens across nested data attributes, tokens fail to match the expected theme combinations.

Proposed Solution or API

Panda should support contextual resolution of theme tokens across nested or combined data-attribute selectors.

<div data-panda-theme="red" data-color-mode="dark" data-theme="sustainable">
  <span className={css({ color: "text" })}>→ uses `red._dark._sustainable` tokens</span>
</div>

<div data-panda-theme="red" data-color-mode="dark">
  <div data-theme="sustainable">
    <span className={css({ color: "text" })}>→ should also use `red._dark._sustainable._dark` tokens</span>
  </div>
</div>

Possible technical direction:

• Enhance condition matching to consider ancestor data attributes when resolving theme, mode, and sub-theme tokens.
• Support nested selectors resolution like:

conditions: {
  dark: '[data-color-mode=dark] &',
  red: '[data-panda-theme=red] &',
  sustainable: '[data-theme=sustainable] &',
}

→ Should combine across parent wrappers.

Alternatives

No response

Additional Information

Panda playground: https://play.panda-css.com/6-Xeoo5Vfj
Gh discussion: #Cascading Themes #3313