fumadocs-ui 15.0.6 → 15.0.8

package/dist/style.css

@@ -12,6 +12,7 @@
     --color-black: #000;
     --spacing: 0.25rem;
     --breakpoint-sm: 40rem;
+    --container-sm: 24rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -24,7 +25,6 @@
     --text-3xl--line-height: calc(2.25 / 1.875);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
-    --font-weight-bold: 700;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
@@ -80,6 +80,16 @@
     --animate-fd-exitToLeft: fd-exitToLeft 250ms ease;
     --animate-fd-exitToRight: fd-exitToRight 250ms ease;
     --spacing-fd-container: 1400px;
+    --fd-sidebar-width: 0px;
+    --fd-toc-width: 0px;
+    --fd-layout-width: 100vw;
+    --fd-banner-height: 0px;
+    --fd-nav-height: 0px;
+    --fd-tocnav-height: 0px;
+    --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);
   }
 }
 @layer base {
@@ -227,31 +237,6 @@
   .collapse {
     visibility: collapse;
   }
-  .fd-step {
-    &:before {
-      background-color: var(--color-fd-secondary);
-      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: .875rem;
-      line-height: 1.25rem;
-      display: flex;
-      position: absolute;
-      left: -1rem;
-    }
-  }
-  .fd-steps {
-    counter-reset: step;
-    border-left-width: 1px;
-    margin-left: 1rem;
-    padding-left: 1.75rem;
-    position: relative;
-  }
   .absolute {
     position: absolute;
   }
@@ -291,6 +276,9 @@
   .-top-1\.5 {
     top: calc(var(--spacing) * -1.5);
   }
+  .top-\(--fd-banner-height\) {
+    top: var(--fd-banner-height);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -309,18 +297,12 @@
   .top-\[calc\(var\(--fd-banner-height\)\+var\(--fd-nav-height\)\)\] {
     top: calc(var(--fd-banner-height) + var(--fd-nav-height));
   }
-  .top-\[var\(--fd-banner-height\)\] {
-    top: var(--fd-banner-height);
-  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
   .bottom-1\.5 {
     bottom: calc(var(--spacing) * 1.5);
   }
-  .bottom-3 {
-    bottom: calc(var(--spacing) * 3);
-  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -370,14 +352,11 @@
       max-width: 1400px;
     }
   }
-  .-mx-1\.5 {
-    margin-inline: calc(var(--spacing) * -1.5);
-  }
   .-mx-2 {
     margin-inline: calc(var(--spacing) * -2);
   }
-  .mx-auto {
-    margin-inline: auto;
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
   }
   .my-0 {
     margin-block: calc(var(--spacing) * 0);
@@ -388,8 +367,8 @@
   .my-6 {
     margin-block: calc(var(--spacing) * 6);
   }
-  .-ms-0\.5 {
-    margin-inline-start: calc(var(--spacing) * -0.5);
+  .my-auto {
+    margin-block: auto;
   }
   .-ms-1 {
     margin-inline-start: calc(var(--spacing) * -1);
@@ -397,9 +376,6 @@
   .-ms-1\.5 {
     margin-inline-start: calc(var(--spacing) * -1.5);
   }
-  .-ms-3 {
-    margin-inline-start: calc(var(--spacing) * -3);
-  }
   .ms-1 {
     margin-inline-start: calc(var(--spacing) * 1);
   }
@@ -424,6 +400,9 @@
   .me-2 {
     margin-inline-end: calc(var(--spacing) * 2);
   }
+  .me-auto {
+    margin-inline-end: auto;
+  }
   .prose {
     color: var(--tw-prose-body);
     max-width: none;
@@ -720,14 +699,15 @@
     }
     :where(a:not([data-card])):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       color: var(--tw-prose-links);
-      transition: text-decoration-color .2s;
+      transition: text-decoration .2s;
       font-weight: 500;
       text-decoration: underline;
       text-underline-offset: 3.5px;
-      text-decoration-color: color-mix(in oklab, var(--tw-prose-links) 50%, transparent);
+      text-decoration-color: var(--color-fd-primary);
+      text-decoration-thickness: 1.5px;
     }
     :where(a:not([data-card]):hover):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      text-decoration-color: var(--color-fd-primary);
+      text-decoration-thickness: 3px;
     }
     --tw-prose-body: color-mix(in oklab, var(--color-fd-foreground) 90%, transparent);
     --tw-prose-headings: var(--color-fd-foreground);
@@ -780,32 +760,24 @@
       border-bottom-color: var(--tw-prose-th-borders);
     }
   }
-  .prose-no-margin {
-    & > :first-child {
-      margin-top: 0;
-    }
-    & > :last-child {
-      margin-bottom: 0;
-    }
-  }
-  .mt-8 {
-    margin-top: calc(var(--spacing) * 8);
-  }
-  .mt-\[var\(--fd-nav-height\)\] {
+  .mt-\(--fd-nav-height\) {
     margin-top: var(--fd-nav-height);
   }
-  .mt-\[var\(--fd-top\)\] {
+  .mt-\(--fd-top\) {
     margin-top: var(--fd-top);
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
   .mt-auto {
     margin-top: auto;
   }
   .-mb-1 {
     margin-bottom: calc(var(--spacing) * -1);
   }
-  .-mb-3 {
-    margin-bottom: calc(var(--spacing) * -3);
-  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -854,36 +826,46 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
   .size-5 {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
-  .size-7 {
-    width: calc(var(--spacing) * 7);
-    height: calc(var(--spacing) * 7);
+  .size-6\.5 {
+    width: calc(var(--spacing) * 6.5);
+    height: calc(var(--spacing) * 6.5);
   }
   .size-full {
     width: 100%;
     height: 100%;
   }
-  .h-1\.5 {
-    height: calc(var(--spacing) * 1.5);
-  }
-  .h-14 {
-    height: calc(var(--spacing) * 14);
-  }
-  .h-\[var\(--fd-height\)\] {
+  .h-\(--fd-height\) {
     height: var(--fd-height);
   }
-  .h-\[var\(--fd-toc-height\)\] {
+  .h-\(--fd-toc-height\) {
     height: var(--fd-toc-height);
   }
-  .h-\[var\(--radix-navigation-menu-viewport-height\)\] {
+  .h-\(--radix-navigation-menu-viewport-height\) {
     height: var(--radix-navigation-menu-viewport-height);
   }
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
   .h-full {
     height: 100%;
   }
+  .max-h-\[50vh\] {
+    max-height: 50vh;
+  }
   .max-h-\[400px\] {
     max-height: 400px;
   }
@@ -893,15 +875,18 @@
   .max-h-\[600px\] {
     max-height: 600px;
   }
-  .max-h-\[var\(--radix-popover-content-available-height\)\] {
-    max-height: var(--radix-popover-content-available-height);
-  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
   .min-h-10 {
     min-height: calc(var(--spacing) * 10);
   }
+  .w-\(--fd-toc-width\) {
+    width: var(--fd-toc-width);
+  }
+  .w-\(--radix-popover-trigger-width\) {
+    width: var(--radix-popover-trigger-width);
+  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
@@ -920,15 +905,6 @@
   .w-\[98vw\] {
     width: 98vw;
   }
-  .w-\[260px\] {
-    width: 260px;
-  }
-  .w-\[var\(--fd-toc-width\)\] {
-    width: var(--fd-toc-width);
-  }
-  .w-\[var\(--radix-popover-trigger-width\)\] {
-    width: var(--radix-popover-trigger-width);
-  }
   .w-fit {
     width: fit-content;
   }
@@ -962,6 +938,9 @@
   .max-w-screen-sm {
     max-width: var(--breakpoint-sm);
   }
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -997,6 +976,9 @@
   .-rotate-90 {
     rotate: calc(90deg * -1);
   }
+  .rotate-90 {
+    rotate: 90deg;
+  }
   .transform {
     transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
   }
@@ -1094,6 +1076,9 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-visible {
+    overflow: visible;
+  }
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -1115,6 +1100,10 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-s-none {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1123,6 +1112,14 @@
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 1px;
   }
+  .border-s-0 {
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 0px;
+  }
+  .border-s-2 {
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 2px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1131,6 +1128,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -1138,10 +1139,22 @@
   .border-fd-foreground\/10 {
     border-color: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
   }
+  .border-fd-primary {
+    border-color: var(--color-fd-primary);
+  }
   .border-transparent {
     border-color: transparent;
   }
-  .bg-\[var\(--shiki-light-bg\)\] {
+  .border-s-blue-500\/50 {
+    border-inline-start-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
+  }
+  .border-s-orange-500\/50 {
+    border-inline-start-color: color-mix(in oklab, var(--color-orange-500) 50%, transparent);
+  }
+  .border-s-red-500\/50 {
+    border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  }
+  .bg-\(--shiki-light-bg\) {
     background-color: var(--shiki-light-bg);
   }
   .bg-black\/30 {
@@ -1219,9 +1232,6 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-  .p-\[3px\] {
-    padding: 3px;
-  }
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -1261,11 +1271,8 @@
   .ps-2 {
     padding-inline-start: calc(var(--spacing) * 2);
   }
-  .ps-3\.5 {
-    padding-inline-start: calc(var(--spacing) * 3.5);
-  }
-  .ps-4 {
-    padding-inline-start: calc(var(--spacing) * 4);
+  .ps-3 {
+    padding-inline-start: calc(var(--spacing) * 3);
   }
   .ps-6 {
     padding-inline-start: calc(var(--spacing) * 6);
@@ -1273,14 +1280,17 @@
   .ps-8 {
     padding-inline-start: calc(var(--spacing) * 8);
   }
-  .pe-3 {
-    padding-inline-end: calc(var(--spacing) * 3);
+  .ps-px {
+    padding-inline-start: 1px;
+  }
+  .pe-\(--fd-layout-offset\) {
+    padding-inline-end: var(--fd-layout-offset);
   }
   .pe-4 {
     padding-inline-end: calc(var(--spacing) * 4);
   }
-  .pe-\[var\(--fd-layout-offset\)\] {
-    padding-inline-end: var(--fd-layout-offset);
+  .pe-6 {
+    padding-inline-end: calc(var(--spacing) * 6);
   }
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
@@ -1338,9 +1348,8 @@
   .text-\[13px\] {
     font-size: 13px;
   }
-  .font-bold {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
+  .text-\[15px\] {
+    font-size: 15px;
   }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
@@ -1371,6 +1380,9 @@
   .text-fd-foreground {
     color: var(--color-fd-foreground);
   }
+  .text-fd-foreground\/30 {
+    color: color-mix(in oklab, var(--color-fd-foreground) 30%, transparent);
+  }
   .text-fd-muted-foreground {
     color: var(--color-fd-muted-foreground);
   }
@@ -1471,8 +1483,8 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
-  .\[--fd-nav-height\:3\.5rem\] {
-    --fd-nav-height: 3.5rem;
+  .\[--fd-nav-height\:calc\(var\(--spacing\)\*14\)\] {
+    --fd-nav-height: calc(var(--spacing) * 14);
   }
   .\[--fd-tocnav-height\:36px\] {
     --fd-tocnav-height: 36px;
@@ -1484,6 +1496,11 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\*\:\!pt-0 {
+    :is(& > *) {
+      padding-top: calc(var(--spacing) * 0) !important;
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1491,11 +1508,6 @@
       }
     }
   }
-  .group-data-\[state\=closed\]\:-rotate-90 {
-    &:is(:where(.group)[data-state="closed"] *) {
-      rotate: calc(90deg * -1);
-    }
-  }
   .group-data-\[state\=open\]\:rotate-180 {
     &:is(:where(.group)[data-state="open"] *) {
       rotate: 180deg;
@@ -1582,6 +1594,13 @@
       }
     }
   }
+  .hover\:opacity-80 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 80%;
+      }
+    }
+  }
   .hover\:transition-none {
     &:hover {
       @media (hover: hover) {
@@ -1821,9 +1840,9 @@
       position: sticky;
     }
   }
-  .md\:order-first {
+  .md\:mx-6 {
     @media (width >= 48rem) {
-      order: -9999;
+      margin-inline: calc(var(--spacing) * 6);
     }
   }
   .md\:ms-auto {
@@ -1831,7 +1850,7 @@
       margin-inline-start: auto;
     }
   }
-  .md\:-me-\[var\(--fd-sidebar-width\)\] {
+  .md\:-me-\(--fd-sidebar-width\) {
     @media (width >= 48rem) {
       margin-inline-end: calc(var(--fd-sidebar-width) * -1);
     }
@@ -1841,12 +1860,12 @@
       display: none;
     }
   }
-  .md\:h-\[var\(--fd-sidebar-height\)\] {
+  .md\:h-\(--fd-sidebar-height\) {
     @media (width >= 48rem) {
       height: var(--fd-sidebar-height);
     }
   }
-  .md\:w-\[var\(--fd-sidebar-width\)\] {
+  .md\:w-\(--fd-sidebar-width\) {
     @media (width >= 48rem) {
       width: var(--fd-sidebar-width);
     }
@@ -1868,20 +1887,15 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
-  .md\:gap-1\.5 {
-    @media (width >= 48rem) {
-      gap: calc(var(--spacing) * 1.5);
-    }
-  }
   .md\:border-e {
     @media (width >= 48rem) {
       border-inline-end-style: var(--tw-border-style);
       border-inline-end-width: 1px;
     }
   }
-  .md\:px-2 {
+  .md\:px-6 {
     @media (width >= 48rem) {
-      padding-inline: calc(var(--spacing) * 2);
+      padding-inline: calc(var(--spacing) * 6);
     }
   }
   .md\:py-1\.5 {
@@ -1889,11 +1903,21 @@
       padding-block: calc(var(--spacing) * 1.5);
     }
   }
-  .md\:ps-\[var\(--fd-layout-offset\)\] {
+  .md\:py-3 {
+    @media (width >= 48rem) {
+      padding-block: calc(var(--spacing) * 3);
+    }
+  }
+  .md\:ps-\(--fd-layout-offset\) {
     @media (width >= 48rem) {
       padding-inline-start: var(--fd-layout-offset);
     }
   }
+  .md\:ps-5 {
+    @media (width >= 48rem) {
+      padding-inline-start: calc(var(--spacing) * 5);
+    }
+  }
   .md\:pt-4 {
     @media (width >= 48rem) {
       padding-top: calc(var(--spacing) * 4);
@@ -1926,6 +1950,11 @@
       --fd-sidebar-width: 268px;
     }
   }
+  .md\:\[--fd-sidebar-width\:286px\] {
+    @media (width >= 48rem) {
+      --fd-sidebar-width: 286px;
+    }
+  }
   .lg\:mt-2 {
     @media (width >= 64rem) {
       margin-top: calc(var(--spacing) * 2);
@@ -1941,6 +1970,11 @@
       height: calc(var(--spacing) * 12);
     }
   }
+  .lg\:h-26 {
+    @media (width >= 64rem) {
+      height: calc(var(--spacing) * 26);
+    }
+  }
   .lg\:w-\[calc\(100\%-1rem\)\] {
     @media (width >= 64rem) {
       width: calc(100% - 1rem);
@@ -1962,9 +1996,14 @@
       border-width: 1px;
     }
   }
-  .lg\:px-8 {
+  .lg\:\[--fd-nav-height\:calc\(var\(--spacing\)\*26\)\] {
+    @media (width >= 64rem) {
+      --fd-nav-height: calc(var(--spacing) * 26);
+    }
+  }
+  .lg\:\[--fd-sidebar-width\:286px\] {
     @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 8);
+      --fd-sidebar-width: 286px;
     }
   }
   .xl\:mx-auto {
@@ -1977,9 +2016,9 @@
       display: none;
     }
   }
-  .xl\:\[--fd-toc-width\:268px\] {
+  .xl\:px-12 {
     @media (width >= 80rem) {
-      --fd-toc-width: 268px;
+      padding-inline: calc(var(--spacing) * 12);
     }
   }
   .xl\:\[--fd-toc-width\:286px\] {
@@ -1992,13 +2031,6 @@
       --fd-tocnav-height: 0px;
     }
   }
-  .xl\:md\:\[--fd-sidebar-width\:286px\] {
-    @media (width >= 80rem) {
-      @media (width >= 48rem) {
-        --fd-sidebar-width: 286px;
-      }
-    }
-  }
   .rtl\:-scale-x-100 {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       --tw-scale-x: calc(100% * -1);
@@ -2010,7 +2042,7 @@
       rotate: 180deg;
     }
   }
-  .rtl\:md\:translate-x-\[var\(--fd-sidebar-offset\)\] {
+  .rtl\:md\:translate-x-\(--fd-sidebar-offset\) {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       @media (width >= 48rem) {
         --tw-translate-x: var(--fd-sidebar-offset);
@@ -2018,11 +2050,17 @@
       }
     }
   }
-  .dark\:bg-\[var\(--shiki-dark-bg\)\] {
+  .dark\:bg-\(--shiki-dark-bg\) {
     &:where(.dark, .dark *) {
       background-color: var(--shiki-dark-bg);
     }
   }
+  .\[\&_svg\]\:\!size-4\.5 {
+    & svg {
+      width: calc(var(--spacing) * 4.5) !important;
+      height: calc(var(--spacing) * 4.5) !important;
+    }
+  }
   .\[\&_svg\]\:size-3\.5 {
     & svg {
       width: calc(var(--spacing) * 3.5);
@@ -2035,6 +2073,12 @@
       height: calc(var(--spacing) * 4);
     }
   }
+  .\[\&_svg\]\:size-4\.5 {
+    & svg {
+      width: calc(var(--spacing) * 4.5);
+      height: calc(var(--spacing) * 4.5);
+    }
+  }
   .\[\&_svg\]\:size-5 {
     & svg {
       width: calc(var(--spacing) * 5);
@@ -2046,6 +2090,14 @@
       flex-shrink: 0;
     }
   }
+  .md\:\[\&_svg\]\:size-4\.5 {
+    @media (width >= 48rem) {
+      & svg {
+        width: calc(var(--spacing) * 4.5);
+        height: calc(var(--spacing) * 4.5);
+      }
+    }
+  }
   .\[\&\>figure\:only-child\]\:-m-4 {
     &>figure:only-child {
       margin: calc(var(--spacing) * -4);
@@ -2149,6 +2201,37 @@
     background-color: var(--color-fd-background);
   }
 }
+@layer utilities {
+  .fd-steps {
+    counter-reset: step;
+    border-left-width: 1px;
+    margin-left: 1rem;
+    padding-left: 1.75rem;
+    position: relative;
+  }
+  .fd-step:before {
+    background-color: var(--color-fd-secondary);
+    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;
+  }
+  .prose-no-margin > :first-child {
+    margin-top: 0;
+  }
+  .prose-no-margin > :last-child {
+    margin-bottom: 0;
+  }
+}
 @layer base {
   body {
     display: flex;
@@ -2159,20 +2242,6 @@
     cursor: pointer;
   }
 }
-@layer base {
-  :root {
-    --fd-sidebar-width: 0px;
-    --fd-toc-width: 0px;
-    --fd-layout-width: 100vw;
-    --fd-banner-height: 0px;
-    --fd-nav-height: 0px;
-    --fd-tocnav-height: 0px;
-    --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 spin {
   to {
     transform: rotate(360deg);