fumadocs-ui 15.2.8 → 16.0.3

package/README.md

@@ -2,4 +2,4 @@
 
 The Next.js framework for building documentation website.
 
-[Read Documentation](https://fumadocs.vercel.app/docs/ui)
+[Read Documentation](https://fumadocs.dev/docs/ui)

package/css/black.css

@@ -1,3 +1,5 @@
+@import './default.css';
+
 @theme {
   --color-fd-background: hsl(0, 0%, 98%);
   --color-fd-foreground: hsl(0, 0%, 3.9%);
@@ -7,7 +9,7 @@
   --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: hsl(0, 0%, 89.8%);
+  --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%);
@@ -26,7 +28,7 @@
   --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%, 14%);
+  --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%);

package/css/catppuccin.css

@@ -1,3 +1,5 @@
+@import './default.css';
+
 @theme {
   --color-fd-popover: hsl(220, 22%, 92%);
   --color-fd-popover-foreground: hsl(234, 16%, 35%);

package/css/default.css

@@ -0,0 +1,33 @@
+/**
+The default theme of Fumadocs
+ */
+@theme {
+  --color-fd-background: transparent;
+  --color-fd-foreground: transparent;
+  --color-fd-muted: transparent;
+  --color-fd-muted-foreground: transparent;
+  --color-fd-popover: transparent;
+  --color-fd-popover-foreground: transparent;
+  --color-fd-card: transparent;
+  --color-fd-card-foreground: transparent;
+  --color-fd-border: transparent;
+  --color-fd-primary: transparent;
+  --color-fd-primary-foreground: transparent;
+  --color-fd-secondary: transparent;
+  --color-fd-secondary-foreground: transparent;
+  --color-fd-accent: transparent;
+  --color-fd-accent-foreground: transparent;
+  --color-fd-ring: transparent;
+  --color-fd-overlay: transparent;
+}
+
+@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-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/dusk.css

@@ -1,3 +1,5 @@
+@import './default.css';
+
 @theme {
   --color-fd-background: hsl(250, 20%, 92%);
   --color-fd-primary: hsl(340, 40%, 48%);

package/css/neutral.css

@@ -1,3 +1,5 @@
+@import './default.css';
+
 @theme {
   --color-fd-background: hsl(0, 0%, 96%);
   --color-fd-foreground: hsl(0, 0%, 3.9%);
@@ -7,12 +9,12 @@
   --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: hsl(0, 0%, 89.8%);
+  --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: hsl(0, 0%, 90.1%);
+  --color-fd-accent: hsla(0, 0%, 82%, 50%);
   --color-fd-accent-foreground: hsl(0, 0%, 9%);
   --color-fd-ring: hsl(0, 0%, 63.9%);
 }
@@ -21,19 +23,20 @@
   --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: hsl(0, 0%, 60.9%);
-  --color-fd-popover: hsl(0, 0%, 9.8%);
-  --color-fd-popover-foreground: hsl(0, 0%, 88%);
+  --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: hsl(0, 0%, 14%);
+  --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%, 98%);
-  --color-fd-accent: hsl(0, 0%, 16.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);
 }
 
 .dark #nd-sidebar {

package/css/ocean.css

@@ -1,3 +1,5 @@
+@import './default.css';
+
 @theme {
   --color-fd-background: hsl(0, 0%, 98%);
   --color-fd-foreground: hsl(0, 0%, 3.9%);
@@ -18,15 +20,15 @@
 }
 
 .dark {
-  --color-fd-background: hsl(220, 60%, 6%);
+  --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: hsl(220, 50%, 10%);
+  --color-fd-card: hsla(220, 56%, 15%, 0.4);
   --color-fd-card-foreground: hsl(220, 60%, 94.5%);
-  --color-fd-border: hsl(220, 50%, 20%);
+  --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%);

package/css/preset.css

@@ -1,22 +1,220 @@
 @import './shiki.css';
-@import './animations.css';
 
 @source '../dist/**/*.js';
 @plugin '../dist/theme/typography/index.js';
 
+[dir='rtl'] {
+  --fd-sidebar-mobile-offset: -100%;
+}
+
 @theme {
+  --fd-sidebar-mobile-offset: 100%;
   --spacing-fd-container: 1400px;
+  --fd-page-width: 1200px;
   --fd-sidebar-width: 0px;
   --fd-toc-width: 0px;
-  --fd-layout-width: 100vw;
+  --fd-layout-width: 1600px;
   --fd-banner-height: 0px;
   --fd-nav-height: 0px;
   --fd-tocnav-height: 0px;
+  --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-collapsible-down: fd-collapsible-down 150ms
+    cubic-bezier(0.45, 0, 0.55, 1);
+  --animate-fd-collapsible-up: fd-collapsible-up 150ms
+    cubic-bezier(0.45, 0, 0.55, 1);
+
+  --animate-fd-accordion-down: fd-accordion-down 200ms ease-out;
+  --animate-fd-accordion-up: fd-accordion-up 200ms ease-out;
+
+  --animate-fd-nav-menu-in: fd-nav-menu-in 200ms ease;
+  --animate-fd-nav-menu-out: fd-nav-menu-out 200ms 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-mobile-offset));
+    }
+  }
+
+  @keyframes fd-sidebar-out {
+    to {
+      transform: translateX(var(--fd-sidebar-mobile-offset));
+    }
+  }
+
+  @keyframes fd-collapsible-down {
+    from {
+      height: 0;
+      opacity: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes fd-collapsible-up {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+    to {
+      height: 0;
+      opacity: 0;
+    }
+  }
+
+  @keyframes fd-accordion-down {
+    from {
+      height: 0;
+      opacity: 0.5;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes fd-accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+      opacity: 0.5;
+    }
+  }
+
+  @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);
+    }
+  }
+
+  @keyframes fd-nav-menu-in {
+    from {
+      opacity: 0;
+      height: 0px;
+    }
+    to {
+      opacity: 1;
+      height: var(--radix-navigation-menu-viewport-height);
+    }
+  }
 
-  --fd-diff-remove-color: rgba(200, 10, 100, 0.12);
-  --fd-diff-remove-symbol-color: rgb(230, 10, 100);
-  --fd-diff-add-color: rgba(14, 180, 100, 0.12);
-  --fd-diff-add-symbol-color: rgb(10, 200, 100);
+  @keyframes fd-nav-menu-out {
+    from {
+      opacity: 1;
+      height: var(--radix-navigation-menu-viewport-height);
+    }
+    to {
+      opacity: 0;
+      height: 0px;
+    }
+  }
 }
 
 @layer base {
@@ -33,17 +231,36 @@
     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);
+  }
+}
+
+@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;
-  border-left-width: 1px;
-  margin-left: 1rem;
-  padding-left: 1.75rem;
   position: relative;
+  @apply pl-6 ml-2 border-l sm:ml-4 sm:pl-7;
 }
 
 @utility fd-step {
@@ -52,16 +269,13 @@
     color: var(--color-fd-secondary-foreground);
     content: counter(step);
     counter-increment: step;
-    border-radius: 9999px;
     justify-content: center;
     align-items: center;
-    width: 2rem;
-    height: 2rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
     display: flex;
     position: absolute;
-    left: -1rem;
+    @apply size-8 -start-4 rounded-full;
   }
 }
 
@@ -85,7 +299,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;
+  }
+}

package/css/purple.css

@@ -1,8 +1,10 @@
+@import './default.css';
+
 @theme {
   --color-fd-background: hsl(256, 100%, 96%);
   --color-fd-primary: hsl(270, 100%, 52%);
-  --color-fd-border: hsl(270, 40%, 80%);
-  --color-fd-accent: hsl(270, 60%, 86%);
+  --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%);
@@ -18,20 +20,20 @@
 }
 
 .dark {
-  --color-fd-background: hsl(256, 60%, 6%);
+  --color-fd-background: hsl(256, 20%, 6%);
   --color-fd-primary: hsl(270, 100%, 86%);
-  --color-fd-border: hsl(270, 100%, 20%);
-  --color-fd-accent: hsl(256, 60%, 26%);
-  --color-fd-accent-foreground: hsl(270, 100%, 86%);
-  --color-fd-muted: hsl(256, 60%, 10%);
+  --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, 100%, 20%);
+  --color-fd-secondary: hsl(270, 23%, 20%);
   --color-fd-secondary-foreground: hsl(256, 60%, 90%);
-  --color-fd-card: hsl(256, 60%, 10%);
+  --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, 60%, 6%);
+  --color-fd-popover: hsl(256, 23%, 6%);
   --color-fd-primary-foreground: hsl(256, 60%, 6%);
   --color-fd-ring: hsl(270, 100%, 86%);
 }

package/css/shadcn.css

@@ -0,0 +1,31 @@
+@import './default.css';
+
+@theme {
+  --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);
+}

package/css/shiki.css

@@ -1,65 +1,92 @@
-.shiki code span {
-  color: var(--shiki-light);
+:root {
+  --padding-left: calc(var(--spacing) * 4);
+  --padding-right: calc(var(--spacing) * 4);
 }
 
-.dark .shiki code span {
-  color: var(--shiki-dark);
+.shiki:not(.not-fumadocs-codeblock *) {
+  code span {
+    color: var(--shiki-light);
+  }
 }
 
-.fd-codeblock pre > * {
-  display: grid;
-  font-size: 13px;
+.dark .shiki:not(.not-fumadocs-codeblock *) {
+  code span {
+    color: var(--shiki-dark);
+  }
 }
 
-.shiki code .diff.remove {
-  background-color: var(--fd-diff-remove-color);
-  opacity: 0.7;
-}
+:is(pre *):is(.shiki *):not(.not-fumadocs-codeblock *) {
+  .line& {
+    position: relative;
+    min-height: 1lh;
+    padding-left: var(--padding-left);
+    padding-right: var(--padding-right);
+  }
 
-.shiki code .diff::before {
-  position: absolute;
-  left: 6px;
-}
+  .has-focused .line&:not(.focused) {
+    filter: blur(2px);
+    transition: filter 200ms;
+  }
 
-.shiki code .diff.remove::before {
-  content: '-';
-  color: var(--fd-diff-remove-symbol-color);
-}
+  .has-focused:hover .line&:not(.focused) {
+    filter: blur(0);
+  }
 
-.shiki code .diff.add {
-  background-color: var(--fd-diff-add-color);
-}
+  [data-line-numbers] .twoslash-meta-line& {
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
 
-.shiki code .diff.add::before {
-  content: '+';
-  color: var(--fd-diff-add-symbol-color);
-}
+  [data-line-numbers] .line& {
+    counter-increment: line;
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
 
-.shiki code .diff {
-  margin: 0 -16px;
-  padding: 0 16px;
-  position: relative;
-}
+  [data-line-numbers] .line&::after {
+    position: absolute;
+    content: counter(line);
+    color: color-mix(
+      in oklab,
+      var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%,
+      transparent
+    );
+    @apply top-0 left-4;
+  }
 
-.shiki .highlighted {
-  margin: 0 -16px;
-  padding: 0 16px;
-  background-color: color-mix(
-    in oklab,
-    var(--color-fd-primary) 10%,
-    transparent
-  );
-}
+  .diff&::before {
+    position: absolute;
+    left: calc(var(--spacing) * 1.5);
+  }
+
+  .diff.remove& {
+    opacity: 0.7;
+    --fd-counter-color: var(--color-fd-diff-remove-symbol);
+    @apply bg-fd-diff-remove;
+  }
+
+  .diff.remove&::before {
+    content: '-';
+    @apply text-fd-diff-remove-symbol;
+  }
+
+  .diff.add& {
+    --fd-counter-color: var(--color-fd-diff-add-symbol);
+    @apply bg-fd-diff-add;
+  }
+
+  .diff.add&::before {
+    content: '+';
+    @apply text-fd-diff-add-symbol;
+  }
+
+  .highlighted& {
+    --fd-counter-color: var(--color-fd-primary);
+    padding-left: calc(var(--padding-left) - 2px);
+
+    @apply border-l-2 border-fd-primary/50 bg-fd-primary/10;
+  }
 
-.shiki .highlighted-word {
-  padding: 1px 2px;
-  margin: -1px -3px;
-  border: 1px solid
-    color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
-  background-color: color-mix(
-    in oklab,
-    var(--color-fd-primary) 10%,
-    transparent
-  );
-  border-radius: 2px;
+  .highlighted-word& {
+    padding: 1px;
+    @apply border -my-px border-fd-primary/30 bg-fd-primary/10 rounded-md font-medium;
+  }
 }