UI: Use on-root: to apply CSS variables from child layout components

.changeset/wise-actors-wash.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Use `on-root:` to apply CSS variables from child layout components

packages/ui/css/preset.css

@@ -244,22 +244,12 @@
     color: var(--color-fd-foreground);
   }
 
-  [data-rmiz-modal-overlay='visible'] {
-    background-color: var(--color-fd-background);
-  }
-
   :root,
   #nd-docs-layout {
     --fd-layout-offset: max(calc(50vw - var(--fd-layout-width) / 2), 0px);
   }
 }
 
-@variant max-xl {
-  #nd-docs-layout:has([data-toc-popover]) {
-    --fd-tocnav-height: calc(var(--spacing) * 10);
-  }
-}
-
 @utility fd-scroll-container {
   &::-webkit-scrollbar {
     width: 5px;
@@ -322,7 +312,14 @@
   margin-inline: auto;
   padding-inline: 1rem;
 
-  @apply 2xl:max-w-[1400px];
+  @apply 2xl:max-w-(--spacing-fd-container);
 }
 
 @variant dark (&:where(.dark, .dark *));
+
+/* Apply styles to :root */
+@custom-variant on-root {
+  :root:has(&) {
+    @slot;
+  }
+}

packages/ui/src/components/image-zoom.css

@@ -43,6 +43,10 @@
   inset: 0;
 }
 
+[data-rmiz-modal-overlay='visible'] {
+  background-color: var(--color-fd-background);
+}
+
 [data-rmiz-modal-overlay='hidden'] {
   background-color: transparent;
 }

packages/ui/src/layouts/docs/index.tsx

@@ -285,7 +285,7 @@ export function DocsLayout({
       <NavProvider transparentMode={transparentMode}>
         {nav.enabled !== false &&
           (nav.component ?? (
-            <Navbar className="h-14 md:hidden">
+            <Navbar className="h-(--fd-nav-height) on-root:[--fd-nav-height:56px] md:on-root:[--fd-nav-height:0px] md:hidden">
               <Link
                 href={nav.url ?? '/'}
                 className="inline-flex items-center gap-2.5 font-semibold"
@@ -317,9 +317,6 @@ export function DocsLayout({
           className={cn(
             'md:[&_#nd-page_article]:pt-12 xl:[--fd-toc-width:286px] xl:[&_#nd-page_article]:px-8',
             sidebarEnabled && sidebarVariables,
-            !nav.component &&
-              nav.enabled !== false &&
-              '[--fd-nav-height:56px] md:[--fd-nav-height:0px]',
             props.containerProps?.className,
           )}
         >

packages/ui/src/layouts/docs/page-client.tsx

@@ -11,8 +11,8 @@ import {
 import { ChevronDown, ChevronLeft, ChevronRight } from '@/icons';
 import Link from 'fumadocs-core/link';
 import { cn } from '@/utils/cn';
-import { useI18n } from '../../contexts/i18n';
-import { useTreeContext, useTreePath } from '../../contexts/tree';
+import { useI18n } from '@/contexts/i18n';
+import { useTreeContext, useTreePath } from '@/contexts/tree';
 import type { PageTree } from 'fumadocs-core/server';
 import { createContext, usePathname } from 'fumadocs-core/framework';
 import {
@@ -197,7 +197,7 @@ export function PageTOCPopover(props: ComponentProps<'div'>) {
           id="nd-tocnav"
           {...props}
           className={cn(
-            'fixed inset-x-0 z-10 border-b backdrop-blur-sm transition-colors xl:hidden',
+            'fixed inset-x-0 z-10 border-b backdrop-blur-sm transition-colors xl:hidden max-xl:on-root:[--fd-tocnav-height:40px]',
             (!isTransparent || open) && 'bg-fd-background/80',
             open && 'shadow-lg',
             props.className,

packages/ui/src/layouts/notebook/index.tsx

@@ -128,11 +128,6 @@ export function DocsLayout(props: DocsLayoutProps) {
     return [];
   }, [tabOptions, props.tree]);
 
-  const variables = cn(
-    '[--fd-nav-height:56px] md:[--fd-sidebar-width:286px] md:[--fd-nav-height:64px] xl:[--fd-toc-width:286px]',
-    tabs.length > 0 && tabMode === 'navbar' && 'lg:[--fd-nav-height:104px]',
-  );
-
   function sidebar() {
     const {
       banner,
@@ -306,7 +301,10 @@ export function DocsLayout(props: DocsLayoutProps) {
       <NavProvider transparentMode={transparentMode}>
         <LayoutBody
           {...props.containerProps}
-          className={cn(variables, props.containerProps?.className)}
+          className={cn(
+            'md:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px]',
+            props.containerProps?.className,
+          )}
         >
           {sidebar()}
           <DocsNavbar
@@ -336,7 +334,13 @@ function DocsNavbar({
   const sidebarCollapsible = props.sidebar?.collapsible ?? true;
 
   return (
-    <Navbar mode={navMode}>
+    <Navbar
+      mode={navMode}
+      className={cn(
+        'on-root:[--fd-nav-height:56px] md:on-root:[--fd-nav-height:64px]',
+        tabs.length > 0 && 'lg:on-root:[--fd-nav-height:104px]',
+      )}
+    >
       <div
         className={cn(
           'flex border-b px-4 gap-2 flex-1 md:px-6',