From f777a19f84c05801dbb9ade3bc10a688aad7302b Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 20 May 2026 23:25:56 +0000 Subject: [PATCH] fix(web): remove vestigial className="app-root" tokens (LUM-1769) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PR #31324 deleted AppRootProvider after confirming zero CSS rules target `.app-root` in this repo — theme tokens live on `:root` and apply via `data-theme` on ``. Two `className="app-root"` strings survived that cleanup and are dead (target no CSS rule). The portal-container docstring example also still referenced the old wrapper pattern; it now reflects current conventions where overlays fall back to `document.body` directly and the provider is reserved for nested overlay scoping (dialogs, shadow DOM). Closes LUM-1769 --- apps/web/src/components/native-splash.tsx | 2 +- .../src/domains/account/pages/login-page.tsx | 2 +- .../src/utils/portal-container.tsx | 19 +++++++++++-------- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/apps/web/src/components/native-splash.tsx b/apps/web/src/components/native-splash.tsx index 503a17d18a4..8acdc0f7564 100644 --- a/apps/web/src/components/native-splash.tsx +++ b/apps/web/src/components/native-splash.tsx @@ -11,7 +11,7 @@ import type { ReactNode } from "react"; */ export function NativeSplash({ children }: { children?: ReactNode }) { return ( -
+
Vellum -
+
diff --git a/packages/design-library/src/utils/portal-container.tsx b/packages/design-library/src/utils/portal-container.tsx index 448ae8fb57c..1c0670e6a1d 100644 --- a/packages/design-library/src/utils/portal-container.tsx +++ b/packages/design-library/src/utils/portal-container.tsx @@ -28,22 +28,25 @@ export interface PortalContainerProviderProps { * Provides a portal target element to all descendant design library * components that render overlays (Popover, Modal, Menu, etc.). * - * Mount this at the top of your app shell, passing the element that has - * your theme's CSS variables in scope. Overlay components read this - * context internally and fall back to `document.body` when no provider - * is mounted. + * Overlay components read this context internally and fall back to + * `document.body` when no provider is mounted. Because theme tokens are + * defined on `:root` (scoped via `data-theme` on ``), the default + * `document.body` target already has access to design tokens, so most + * apps don't need to mount this provider at the top level. * - * Nestable — an inner provider overrides the outer one for its subtree, - * which is useful for rendering overlays inside dialogs or shadow DOM. + * The primary use case is nesting — an inner provider overrides the + * outer one for its subtree, which is useful for rendering overlays + * inside dialogs (so menus opened from within a modal portal into the + * modal rather than escaping to `document.body`) or shadow DOM. * * ```tsx - * function AppShell({ children }: { children: ReactNode }) { + * function Dialog({ children }: { children: ReactNode }) { * const ref = useRef(null); * const [container, setContainer] = useState(null); * useEffect(() => { setContainer(ref.current); }, []); * * return ( - *
+ *
* * {children} *