Enable container-scoped theming for theme previews

[ravisuhag]

Summary

Currently, theme CSS selectors use html[data-theme="dark"] which restricts theme variables to the document root only. This prevents scoping themes to container elements, which is needed for features like theme preview cards in documentation.

Problem

The following files use html[data-theme="dark"] selector:

• packages/raystack/styles/primitives/appearance.css (line 137)
• packages/raystack/style.css (line 117)

This means you cannot create isolated theme contexts within a page.

Proposed Solution

Change the selector from:

html[data-theme="dark"] {

To:

[data-theme="dark"] {

This allows theme variables to cascade within any element with the data attribute:

<div data-theme="dark" data-style="traditional" data-accent-color="orange">
  {/* Content here inherits themed variables */}
</div>

Use Cases

• Theme preview cards in documentation showing different theme combinations
• Split-screen theme comparisons
• Nested theme contexts (e.g., dark sidebar in light app)

Files to Update

1. packages/raystack/styles/primitives/appearance.css
2. packages/raystack/style.css