From 6816ef48255f5a3b6d3e3d6b3a148a5dc600faa9 Mon Sep 17 00:00:00 2001
From: michael <operations@dangerousthings.com>
Date: Sun, 8 Mar 2026 15:39:25 -0700
Subject: [PATCH] Add documentLevel mode to DTWebThemeProvider

When documentLevel is true, sets data-brand and data-theme on
document.documentElement instead of rendering a wrapper div.
This is needed for apps where CSS ancestor selectors must match
from the document root (e.g. [data-brand="dt"] .card).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/DTWebThemeProvider.tsx     | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/DTWebThemeProvider.tsx b/packages/react/src/components/DTWebThemeProvider.tsx
index 13cc51d..97c7122 100644
--- a/packages/react/src/components/DTWebThemeProvider.tsx
+++ b/packages/react/src/components/DTWebThemeProvider.tsx
@@ -1,11 +1,12 @@
 /**
  * DTWebThemeProvider
  *
- * Sets data-brand and data-theme attributes on a wrapper div.
+ * Sets data-brand and data-theme attributes on a wrapper div (default)
+ * or on document.documentElement (documentLevel mode).
  * Provides React context for child components to read the active brand/theme.
  */
 
-import { createContext, type ReactNode } from 'react';
+import { createContext, useEffect, type ReactNode } from 'react';
 import type { ThemeBrand, ThemeMode } from '@dangerousthings/tokens';
 import { cx } from '../utils/cx';
 
@@ -21,7 +22,9 @@ interface DTWebThemeProviderProps {
   brand?: ThemeBrand;
   /** Theme mode @default 'dark' */
   theme?: ThemeMode;
-  /** Additional className for the wrapper div */
+  /** When true, sets data-brand/data-theme on document.documentElement instead of a wrapper div */
+  documentLevel?: boolean;
+  /** Additional className for the wrapper div (ignored when documentLevel is true) */
   className?: string;
   children: ReactNode;
 }
@@ -29,14 +32,26 @@ interface DTWebThemeProviderProps {
 export function DTWebThemeProvider({
   brand = 'dt',
   theme = 'dark',
+  documentLevel,
   className,
   children,
 }: DTWebThemeProviderProps) {
+  useEffect(() => {
+    if (documentLevel) {
+      document.documentElement.dataset.brand = brand;
+      document.documentElement.dataset.theme = theme;
+    }
+  }, [documentLevel, brand, theme]);
+
   return (
     <DTWebThemeContext.Provider value={{ brand, theme }}>
-      <div data-brand={brand} data-theme={theme} className={cx('dt-theme-root', className)}>
-        {children}
-      </div>
+      {documentLevel ? (
+        children
+      ) : (
+        <div data-brand={brand} data-theme={theme} className={cx('dt-theme-root', className)}>
+          {children}
+        </div>
+      )}
     </DTWebThemeContext.Provider>
   );
 }