Skip to content

fix(web): remove vestigial className="app-root" tokens #31389

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ashleeradka merged 1 commit into from
May 20, 2026
Merged

fix(web): remove vestigial className="app-root" tokens #31389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/src/components/native-splash.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import type { ReactNode } from "react";
*/
export function NativeSplash({ children }: { children?: ReactNode }) {
return (
<div className="app-root fixed inset-0 z-50 flex flex-col items-center justify-center bg-[var(--surface-base)] text-[var(--content-default)]">
<div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-[var(--surface-base)] text-[var(--content-default)]">
<img
src="/vellum-logo.svg"
alt="Vellum"
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/domains/account/pages/login-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ function WebLoginForm({ returnTo }: { returnTo: string | null }) {

return (
<div className="dark">
<div className="app-root relative min-h-screen overflow-x-hidden bg-[var(--surface-base)] text-[var(--content-default)]">
<div className="relative min-h-screen overflow-x-hidden bg-[var(--surface-base)] text-[var(--content-default)]">
<LoginBackground />
<div className="relative z-10 flex min-h-screen flex-col items-center justify-center px-4">
<LoginCard>
Expand Down
19 changes: 11 additions & 8 deletions packages/design-library/src/utils/portal-container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<html>`), 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<HTMLDivElement>(null);
* const [container, setContainer] = useState<HTMLElement | null>(null);
* useEffect(() => { setContainer(ref.current); }, []);
*
* return (
* <div ref={ref} className="app-root">
* <div ref={ref} role="dialog">
* <PortalContainerProvider container={container}>
* {children}
* </PortalContainerProvider>
Expand Down
Loading