@fumadocs/ui 16.2.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Fuma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/css/base.css

@@ -0,0 +1,217 @@
+@import './shiki.css';
+@source '../dist/components/**/*.js';
+@plugin '../dist/typography/index.js';
+
+:root {
+  --fd-sidebar-drawer-offset: 100%;
+}
+
+[dir='rtl'] {
+  --fd-sidebar-drawer-offset: -100%;
+}
+
+@theme {
+  --animate-fd-fade-in: fd-fade-in 300ms ease;
+  --animate-fd-fade-out: fd-fade-out 300ms ease;
+
+  --animate-fd-dialog-in: fd-dialog-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-fd-dialog-out: fd-dialog-out 300ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  --animate-fd-popover-in: fd-popover-in 100ms ease;
+  --animate-fd-popover-out: fd-popover-out 100ms ease;
+
+  --animate-fd-enterFromLeft: fd-enterFromLeft 250ms ease;
+  --animate-fd-enterFromRight: fd-enterFromRight 250ms ease;
+
+  --animate-fd-sidebar-in: fd-sidebar-in 250ms ease;
+  --animate-fd-sidebar-out: fd-sidebar-out 250ms ease;
+
+  --animate-fd-exitToLeft: fd-exitToLeft 250ms ease;
+  --animate-fd-exitToRight: fd-exitToRight 250ms ease;
+
+  @keyframes fd-sidebar-in {
+    from {
+      transform: translateX(var(--fd-sidebar-drawer-offset));
+    }
+  }
+
+  @keyframes fd-sidebar-out {
+    to {
+      transform: translateX(var(--fd-sidebar-drawer-offset));
+    }
+  }
+
+  @keyframes fd-dialog-in {
+    from {
+      transform: scale(1.06);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes fd-dialog-out {
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(1.04);
+      opacity: 0;
+    }
+  }
+
+  @keyframes fd-popover-in {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes fd-popover-out {
+    to {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes fd-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fd-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes fd-enterFromRight {
+    from {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fd-enterFromLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fd-exitToRight {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+  }
+
+  @keyframes fd-exitToLeft {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+  }
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-fd-border, currentColor);
+  }
+
+  body {
+    background-color: var(--color-fd-background);
+    color: var(--color-fd-foreground);
+  }
+}
+
+@utility fd-scroll-container {
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: var(--color-fd-border);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+}
+
+@utility fd-steps {
+  counter-reset: step;
+  position: relative;
+  @apply pl-6 ml-2 border-l sm:ml-4 sm:pl-7;
+}
+
+@utility fd-step {
+  &:before {
+    background-color: var(--color-fd-secondary);
+    color: var(--color-fd-secondary-foreground);
+    content: counter(step);
+    counter-increment: step;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    display: flex;
+    position: absolute;
+    @apply size-8 -start-4 rounded-full;
+  }
+}
+
+@utility prose-no-margin {
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+@variant dark (&:where(.dark, .dark *));
+
+/* define/override layout variables */
+@variant layout {
+  #nd-docs-layout:has(&),
+  #nd-notebook-layout:has(&),
+  #nd-home-layout:has(&) {
+    @slot;
+  }
+}

package/css/colors/black.css

@@ -0,0 +1,39 @@
+@import './index.css';
+
+@theme {
+  --color-fd-background: hsl(0, 0%, 98%);
+  --color-fd-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-muted: hsl(0, 0%, 96.1%);
+  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
+  --color-fd-popover: hsl(0, 0%, 100%);
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-fd-card: hsl(0, 0%, 99.7%);
+  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-border: hsla(0, 0%, 60%, 0.2);
+  --color-fd-primary: hsl(0, 0%, 9%);
+  --color-fd-primary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary: hsl(0, 0%, 96.1%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
+  --color-fd-accent: hsl(0, 0%, 94.1%);
+  --color-fd-accent-foreground: hsl(0, 0%, 9%);
+  --color-fd-ring: hsl(0, 0%, 63.9%);
+}
+
+.dark {
+  --color-fd-background: hsl(0, 0%, 2%);
+  --color-fd-foreground: hsl(0, 0%, 98%);
+  --color-fd-muted: hsl(0, 0%, 8%);
+  --color-fd-muted-foreground: hsl(0, 0%, 60%);
+  --color-fd-popover: hsl(0, 0%, 4%);
+  --color-fd-popover-foreground: hsl(0, 0%, 98%);
+  --color-fd-card: hsl(0, 0%, 4%);
+  --color-fd-card-foreground: hsl(0, 0%, 98%);
+  --color-fd-border: hsl(0, 0%, 50%, 0.2);
+  --color-fd-primary: hsl(0, 0%, 98%);
+  --color-fd-primary-foreground: hsl(0, 0%, 9%);
+  --color-fd-secondary: hsl(0, 0%, 12.9%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 98%);
+  --color-fd-accent: hsl(0, 0%, 15%);
+  --color-fd-accent-foreground: hsl(0, 0%, 100%);
+  --color-fd-ring: hsl(0, 0%, 34.9%);
+}

package/css/colors/catppuccin.css

@@ -0,0 +1,49 @@
+@import './index.css';
+
+@theme {
+  --color-fd-popover: hsl(220, 22%, 92%);
+  --color-fd-popover-foreground: hsl(234, 16%, 35%);
+  --color-fd-secondary-foreground: hsl(234, 16%, 35%);
+  --color-fd-border: hsl(223, 16%, 83%);
+  --color-fd-primary: hsl(266, 85%, 58%);
+  --color-fd-primary-foreground: hsl(220, 22%, 92%);
+  --color-fd-muted: hsl(220, 22%, 92%);
+  --color-fd-card: hsl(220, 22%, 92%);
+  --color-fd-accent: hsl(223, 16%, 83%);
+  --color-fd-accent-foreground: hsl(234, 16%, 35%);
+  --color-fd-card-foreground: hsl(234, 16%, 35%);
+  --color-fd-muted-foreground: hsl(233, 10%, 47%);
+  --color-fd-foreground: hsl(234, 16%, 35%);
+  --color-fd-secondary: hsl(220, 22%, 92%);
+  --color-fd-background: hsl(220, 23%, 95%);
+  --color-fd-ring: hsl(267, 84%, 81%);
+}
+
+.dark {
+  --color-fd-background: hsl(240, 21%, 15%);
+  --color-fd-foreground: hsl(226, 64%, 88%);
+  --color-fd-ring: hsl(267, 84%, 81%);
+  --color-fd-primary: hsl(267, 84%, 81%);
+  --color-fd-popover: hsl(240, 23%, 9%);
+  --color-fd-card: hsl(240, 21%, 12%);
+  --color-fd-muted: hsl(240, 21%, 12%);
+  --color-fd-border: hsl(237, 16%, 23%);
+  --color-fd-accent: hsl(237, 16%, 23%);
+  --color-fd-secondary: hsl(240, 21%, 12%);
+  --color-fd-primary-foreground: hsl(240, 23%, 9%);
+  --color-fd-card-foreground: hsl(226, 64%, 88%);
+  --color-fd-secondary-foreground: hsl(226, 64%, 88%);
+  --color-fd-popover-foreground: hsl(226, 64%, 88%);
+  --color-fd-accent-foreground: hsl(226, 64%, 88%);
+  --color-fd-muted-foreground: hsl(228, 24%, 72%);
+}
+
+#nd-sidebar {
+  --color-fd-secondary: hsl(223, 16%, 83%);
+  --color-fd-muted: hsl(223, 16%, 83%);
+}
+
+.dark #nd-sidebar {
+  --color-fd-secondary: hsl(237, 16%, 23%);
+  --color-fd-muted: hsl(237, 16%, 23%);
+}

package/css/colors/dusk.css

@@ -0,0 +1,47 @@
+@import './index.css';
+
+@theme {
+  --color-fd-background: hsl(250, 20%, 92%);
+  --color-fd-primary: hsl(340, 40%, 48%);
+  --color-fd-border: hsl(240, 40%, 90%);
+  --color-fd-accent: hsl(250, 30%, 90%);
+  --color-fd-accent-foreground: hsl(250, 20%, 20%);
+  --color-fd-muted: hsl(240, 30%, 94%);
+  --color-fd-muted-foreground: hsl(240, 10%, 50%);
+  --color-fd-foreground: hsl(220, 20%, 30%);
+  --color-fd-secondary: hsl(250, 40%, 94%);
+  --color-fd-secondary-foreground: hsl(240, 40%, 10%);
+  --color-fd-card: hsl(250, 20%, 92%);
+  --color-fd-card-foreground: hsl(250, 20%, 20%);
+  --color-fd-popover-foreground: hsl(250, 40%, 20%);
+  --color-fd-popover: hsl(250, 40%, 96%);
+  --color-fd-primary-foreground: hsl(240, 80%, 20%);
+  --color-fd-ring: hsl(340, 40%, 48%);
+}
+
+.dark {
+  --color-fd-ring: hsl(340, 100%, 90%);
+  --color-fd-primary-foreground: hsl(240, 40%, 4%);
+  --color-fd-popover: hsl(240, 20%, 5%);
+  --color-fd-popover-foreground: hsl(250, 20%, 90%);
+  --color-fd-primary: hsl(340, 100%, 90%);
+  --color-fd-border: hsl(220, 15%, 15%);
+  --color-fd-background: hsl(220, 15%, 6%);
+  --color-fd-foreground: hsl(220, 15%, 87%);
+  --color-fd-muted: hsl(220, 20%, 15%);
+  --color-fd-muted-foreground: hsl(220, 15%, 60%);
+  --color-fd-accent: hsl(250, 20%, 15%);
+  --color-fd-secondary: hsl(240, 20%, 15%);
+  --color-fd-card-foreground: hsl(240, 15%, 87%);
+  --color-fd-card: hsl(240, 20%, 5%);
+  --color-fd-secondary-foreground: hsl(250, 20%, 90%);
+  --color-fd-accent-foreground: hsl(340, 5%, 90%);
+}
+
+#nd-sidebar {
+  background-color: hsl(250 20% 90%);
+}
+
+.dark #nd-sidebar {
+  background-color: hsl(240 20% 5%);
+}

package/css/colors/index.css

@@ -0,0 +1,51 @@
+@theme {
+  --color-fd-background: hsl(0, 0%, 96%);
+  --color-fd-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-muted: hsl(0, 0%, 96.1%);
+  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
+  --color-fd-popover: hsl(0, 0%, 98%);
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-fd-card: hsl(0, 0%, 94.7%);
+  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-border: hsla(0, 0%, 80%, 50%);
+  --color-fd-primary: hsl(0, 0%, 9%);
+  --color-fd-primary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary: hsl(0, 0%, 93.1%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
+  --color-fd-accent: hsla(0, 0%, 82%, 50%);
+  --color-fd-accent-foreground: hsl(0, 0%, 9%);
+  --color-fd-ring: hsl(0, 0%, 63.9%);
+  --color-fd-overlay: hsla(0, 0%, 0%, 0.2);
+}
+
+.dark {
+  --color-fd-background: hsl(0, 0%, 7.04%);
+  --color-fd-foreground: hsl(0, 0%, 92%);
+  --color-fd-muted: hsl(0, 0%, 12.9%);
+  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
+  --color-fd-popover: hsl(0, 0%, 11.6%);
+  --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
+  --color-fd-card: hsl(0, 0%, 9.8%);
+  --color-fd-card-foreground: hsl(0, 0%, 98%);
+  --color-fd-border: hsla(0, 0%, 40%, 20%);
+  --color-fd-primary: hsl(0, 0%, 98%);
+  --color-fd-primary-foreground: hsl(0, 0%, 9%);
+  --color-fd-secondary: hsl(0, 0%, 12.9%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
+  --color-fd-accent: hsla(0, 0%, 40.9%, 30%);
+  --color-fd-accent-foreground: hsl(0, 0%, 90%);
+  --color-fd-ring: hsl(0, 0%, 54.9%);
+  --color-fd-overlay: hsla(0, 0%, 0%, 0.2);
+}
+
+@theme static {
+  --color-fd-info: oklch(62.3% 0.214 259.815);
+  --color-fd-warning: oklch(76.9% 0.188 70.08);
+  --color-fd-error: oklch(63.7% 0.237 25.331);
+  --color-fd-success: oklch(72.3% 0.219 149.579);
+  --color-fd-idea: oklch(70.5% 0.209 60.849);
+  --color-fd-diff-remove: rgba(200, 10, 100, 0.12);
+  --color-fd-diff-remove-symbol: rgb(230, 10, 100);
+  --color-fd-diff-add: rgba(14, 180, 100, 0.1);
+  --color-fd-diff-add-symbol: rgb(10, 200, 100);
+}

package/css/colors/neutral.css

@@ -0,0 +1,7 @@
+@import './index.css';
+
+.dark #nd-sidebar {
+  --color-fd-muted: hsl(0, 0%, 16%);
+  --color-fd-secondary: hsl(0, 0%, 18%);
+  --color-fd-muted-foreground: hsl(0, 0%, 72%);
+}

package/css/colors/ocean.css

@@ -0,0 +1,48 @@
+@import './index.css';
+
+@theme {
+  --color-fd-background: hsl(0, 0%, 98%);
+  --color-fd-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-muted: hsl(220, 90%, 96.1%);
+  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
+  --color-fd-popover: hsl(0, 0%, 98%);
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-fd-card: hsl(220, 50%, 98%);
+  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-border: hsl(220, 50%, 89.8%);
+  --color-fd-primary: hsl(210, 80%, 20.2%);
+  --color-fd-primary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary: hsl(220, 90%, 96.1%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
+  --color-fd-accent: hsl(220, 50%, 94.1%);
+  --color-fd-accent-foreground: hsl(0, 0%, 9%);
+  --color-fd-ring: hsl(220, 100%, 63.9%);
+}
+
+.dark {
+  --color-fd-background: hsl(220, 60%, 8%);
+  --color-fd-foreground: hsl(220, 60%, 94.5%);
+  --color-fd-muted: hsl(220, 50%, 10%);
+  --color-fd-muted-foreground: hsl(220, 30%, 65%);
+  --color-fd-popover: hsl(220, 50%, 10%);
+  --color-fd-popover-foreground: hsl(220, 60%, 94.5%);
+  --color-fd-card: hsla(220, 56%, 15%, 0.4);
+  --color-fd-card-foreground: hsl(220, 60%, 94.5%);
+  --color-fd-border: hsla(220, 50%, 50%, 0.2);
+  --color-fd-primary: hsl(205, 100%, 85%);
+  --color-fd-primary-foreground: hsl(0, 0%, 9%);
+  --color-fd-secondary: hsl(220, 50%, 20%);
+  --color-fd-secondary-foreground: hsl(220, 80%, 90%);
+  --color-fd-accent: hsl(220, 40%, 20%);
+  --color-fd-accent-foreground: hsl(220, 80%, 90%);
+  --color-fd-ring: hsl(205, 100%, 85%);
+}
+
+.dark body {
+  background-image: linear-gradient(
+    rgba(5, 105, 255, 0.15),
+    transparent 20rem,
+    transparent
+  );
+  background-repeat: no-repeat;
+}

package/css/colors/purple.css

@@ -0,0 +1,39 @@
+@import './index.css';
+
+@theme {
+  --color-fd-background: hsl(256, 100%, 96%);
+  --color-fd-primary: hsl(270, 100%, 52%);
+  --color-fd-border: hsla(270, 40%, 80%, 0.5);
+  --color-fd-accent: hsl(270, 40%, 88%);
+  --color-fd-accent-foreground: hsl(270, 100%, 20%);
+  --color-fd-muted: hsl(256, 60%, 94%);
+  --color-fd-muted-foreground: hsl(256, 50%, 50%);
+  --color-fd-foreground: hsl(256, 60%, 26%);
+  --color-fd-secondary: hsl(270, 60%, 90%);
+  --color-fd-secondary-foreground: hsl(256, 60%, 10%);
+  --color-fd-card: hsl(256, 60%, 92%);
+  --color-fd-card-foreground: hsl(256, 100%, 20%);
+  --color-fd-popover-foreground: hsl(256, 100%, 20%);
+  --color-fd-popover: hsl(256, 60%, 96%);
+  --color-fd-primary-foreground: hsl(270, 100%, 20%);
+  --color-fd-ring: hsl(270, 100%, 52%);
+}
+
+.dark {
+  --color-fd-background: hsl(256, 20%, 6%);
+  --color-fd-primary: hsl(270, 100%, 86%);
+  --color-fd-border: hsla(270, 50%, 40%, 0.3);
+  --color-fd-accent: hsl(256, 23%, 22%);
+  --color-fd-accent-foreground: hsl(270, 40%, 86%);
+  --color-fd-muted: hsl(256, 23%, 10%);
+  --color-fd-foreground: hsl(256, 60%, 90%);
+  --color-fd-muted-foreground: hsl(256, 50%, 75%);
+  --color-fd-secondary: hsl(270, 23%, 20%);
+  --color-fd-secondary-foreground: hsl(256, 60%, 90%);
+  --color-fd-card: hsl(256, 23%, 10%);
+  --color-fd-card-foreground: hsl(256, 60%, 90%);
+  --color-fd-popover-foreground: hsl(256, 60%, 90%);
+  --color-fd-popover: hsl(256, 23%, 6%);
+  --color-fd-primary-foreground: hsl(256, 60%, 6%);
+  --color-fd-ring: hsl(270, 100%, 86%);
+}

package/css/colors/shadcn.css

@@ -0,0 +1,36 @@
+@import './index.css';
+
+:root,
+.dark {
+  --color-fd-background: var(--background);
+  --color-fd-foreground: var(--foreground);
+  --color-fd-muted: var(--muted);
+  --color-fd-muted-foreground: var(--muted-foreground);
+  --color-fd-popover: var(--popover);
+  --color-fd-popover-foreground: var(--popover-foreground);
+  --color-fd-card: var(--card);
+  --color-fd-card-foreground: var(--card-foreground);
+  --color-fd-border: var(--border);
+  --color-fd-primary: var(--primary);
+  --color-fd-primary-foreground: var(--primary-foreground);
+  --color-fd-secondary: var(--secondary);
+  --color-fd-secondary-foreground: var(--secondary-foreground);
+  --color-fd-accent: var(--accent);
+  --color-fd-accent-foreground: var(--accent-foreground);
+  --color-fd-ring: var(--ring);
+}
+
+#nd-sidebar {
+  background-color: var(--sidebar);
+  color: var(--sidebar-foreground);
+  border-color: var(--sidebar-border);
+
+  --color-fd-accent: var(--sidebar-accent);
+  --color-fd-accent-foreground: var(--sidebar-accent-foreground);
+  --color-fd-ring: var(--sidebar-ring);
+  --color-fd-primary-foreground: var(--sidebar-primary-foreground);
+}
+
+@theme static {
+  --color-fd-error: var(--destructive);
+}

package/css/colors/solar.css

@@ -0,0 +1,75 @@
+@import './index.css';
+
+@theme {
+  --color-fd-primary: oklch(0.487 0.083 262.691);
+  --color-fd-article: hsl(0, 0%, 97%);
+}
+
+:root {
+  letter-spacing: -0.25px;
+}
+
+.dark {
+  --color-fd-primary: oklch(0.902 0.0461 259.51);
+  --color-fd-article: hsl(0, 0%, 7.04%);
+  --color-fd-background: hsl(0, 0%, 5.04%);
+}
+
+@variant md {
+  #nd-docs-layout {
+    #nd-page {
+      @apply relative md:px-9 xl:px-12;
+    }
+
+    #nd-page:before {
+      content: '';
+      @apply absolute inset-0 bg-fd-article rounded-xl border shadow-xl m-4 mb-2 -z-1;
+    }
+
+    [data-toc-popover-trigger],
+    [data-toc-popover-content] {
+      @apply px-4;
+    }
+
+    [data-toc-popover] {
+      top: calc(var(--fd-docs-row-1) + 2.5 * var(--spacing));
+      @apply mx-4 mt-2.5;
+
+      header {
+        transform-origin: top center;
+        @apply border rounded-xl shadow-lg transition-[margin] has-data-[active=true]:-mx-2 has-data-[active=true]:bg-fd-popover/80;
+      }
+    }
+  }
+
+  #nd-notebook-layout {
+    #nd-page {
+      @apply relative md:px-9 xl:px-12;
+    }
+
+    #nd-page:before {
+      content: '';
+      @apply absolute inset-0 bg-fd-article rounded-xl border shadow-xl m-4 mb-2 -z-1;
+    }
+
+    [data-toc-popover-trigger],
+    [data-toc-popover-content] {
+      @apply px-4;
+    }
+
+    [data-toc-popover] {
+      top: calc(var(--fd-docs-row-2) + 2.5 * var(--spacing));
+      @apply mx-4 mt-2.5;
+
+      header {
+        transform-origin: top center;
+        @apply border rounded-xl shadow-lg transition-[margin] has-data-[active=true]:-mx-2 has-data-[active=true]:bg-fd-popover/80;
+      }
+    }
+  }
+}
+
+#nd-sidebar[data-collapsed='false'] {
+  border: none;
+  @apply bg-fd-background;
+}