fumadocs-ui 14.2.0 → 14.3.0

package/dist/tailwind-plugin.js

@@ -1,710 +1,202 @@
-import "./chunk-MLKGABMK.js";
-
-// src/tailwind-plugin.ts
-import typography2 from "@tailwindcss/typography";
-import plugin from "tailwindcss/plugin";
-
-// src/theme/colors.ts
-var defaultPreset = {
-  light: {
-    background: "0 0% 98%",
-    foreground: "0 0% 3.9%",
-    muted: "0 0% 96.1%",
-    "muted-foreground": "0 0% 45.1%",
-    popover: "0 0% 100%",
-    "popover-foreground": "0 0% 15.1%",
-    card: "0 0% 99.7%",
-    "card-foreground": "0 0% 3.9%",
-    border: "0 0% 89.8%",
-    primary: "0 0% 9%",
-    "primary-foreground": "0 0% 98%",
-    secondary: "0 0% 96.1%",
-    "secondary-foreground": "0 0% 9%",
-    accent: "0 0% 94.1%",
-    "accent-foreground": "0 0% 9%",
-    ring: "0 0% 63.9%"
-  },
-  dark: {
-    background: "0 0% 3.9%",
-    foreground: "0 0% 94%",
-    muted: "0 0% 12.9%",
-    "muted-foreground": "0 0% 60.9%",
-    popover: "0 0% 7%",
-    "popover-foreground": "0 0% 88%",
-    card: "0 0% 6.0%",
-    "card-foreground": "0 0% 98%",
-    border: "0 0% 15%",
-    primary: "0 0% 98%",
-    "primary-foreground": "0 0% 9%",
-    secondary: "0 0% 12.9%",
-    "secondary-foreground": "0 0% 98%",
-    accent: "0 0% 12.9%",
-    "accent-foreground": "0 0% 98%",
-    ring: "0 0% 14.9%"
-  }
-};
-var oceanPreset = {
-  light: {
-    background: "0 0% 98%",
-    foreground: "0 0% 3.9%",
-    muted: "220 90% 96.1%",
-    "muted-foreground": "0 0% 45.1%",
-    popover: "0 0% 98%",
-    "popover-foreground": "0 0% 15.1%",
-    card: "220 50% 98%",
-    "card-foreground": "0 0% 3.9%",
-    border: "220 50% 89.8%",
-    primary: "210 80% 20.2%",
-    "primary-foreground": "0 0% 98%",
-    secondary: "220 90% 96.1%",
-    "secondary-foreground": "0 0% 9%",
-    accent: "220 50% 94.1%",
-    "accent-foreground": "0 0% 9%",
-    ring: "220 100% 63.9%"
-  },
-  dark: {
-    "card-foreground": "220 60% 94.5%",
-    "primary-foreground": "0 0% 9%",
-    "secondary-foreground": "220 80% 90%",
-    ring: "205 100% 85%",
-    card: "220 50% 10%",
-    muted: "220 50% 10%",
-    "muted-foreground": "220 30% 65%",
-    "accent-foreground": "220 80% 90%",
-    popover: "220 50% 10%",
-    "popover-foreground": "220 30% 65%",
-    accent: "220 40% 20%",
-    secondary: "220 50% 20%",
-    background: "220 60% 6%",
-    foreground: "220 60% 94.5%",
-    primary: "205 100% 85%",
-    border: "220 50% 20%"
-  },
-  css: {
-    ".dark body": {
-      "background-image": "linear-gradient(rgba(5, 105, 255, 0.15), transparent 20rem, transparent)",
-      "background-repeat": "no-repeat"
-    }
-  }
-};
-var neutral = {
-  light: {
-    background: "0 0% 96%",
-    foreground: "0 0% 3.9%",
-    muted: "0 0% 96.1%",
-    "muted-foreground": "0 0% 45.1%",
-    popover: "0 0% 100%",
-    "popover-foreground": "0 0% 15.1%",
-    card: "0 0% 94.7%",
-    "card-foreground": "0 0% 3.9%",
-    border: "0 0% 89.8%",
-    primary: "0 0% 9%",
-    "primary-foreground": "0 0% 98%",
-    secondary: "0 0% 93.1%",
-    "secondary-foreground": "0 0% 9%",
-    accent: "0 0% 90.1%",
-    "accent-foreground": "0 0% 9%",
-    ring: "0 0% 63.9%"
-  },
-  dark: {
-    background: "0 0% 8.9%",
-    foreground: "0 0% 92%",
-    muted: "0 0% 12.9%",
-    "muted-foreground": "0 0% 60.9%",
-    popover: "0 0% 9.8%",
-    "popover-foreground": "0 0% 88%",
-    card: "0 0% 10%",
-    "card-foreground": "0 0% 98%",
-    border: "0 0% 18%",
-    primary: "0 0% 98%",
-    "primary-foreground": "0 0% 9%",
-    secondary: "0 0% 12.9%",
-    "secondary-foreground": "0 0% 98%",
-    accent: "0 0% 16.9%",
-    "accent-foreground": "0 0% 90%",
-    ring: "0 0% 14.9%"
-  },
-  css: {
-    "#nd-sidebar": {
-      "--muted": "0deg 0% 89%",
-      "--secondary": "0deg 0% 99%",
-      "--muted-foreground": "0 0% 30%"
-    },
-    ".dark #nd-sidebar": {
-      "--muted": "0deg 0% 16%",
-      "--secondary": "0deg 0% 18%",
-      "--muted-foreground": "0 0% 72%"
-    }
-  }
-};
-var catppuccin = {
-  light: {
-    popover: "220deg 22% 92%",
-    "popover-foreground": "234deg 16% 35%",
-    "secondary-foreground": "234deg 16% 35%",
-    border: "223deg 16% 83%",
-    primary: "266deg 85% 58%",
-    "primary-foreground": "234deg 16% 35%",
-    muted: "220deg 22% 92%",
-    card: "220deg 22% 92%",
-    accent: "223deg 16% 83%",
-    "accent-foreground": "234deg 16% 35%",
-    "card-foreground": "234deg 16% 35%",
-    "muted-foreground": "233deg 10% 47%",
-    foreground: "234deg 16% 35%",
-    secondary: "220deg 22% 92%",
-    background: "220deg 23% 95%",
-    ring: "267deg 84% 81%"
-  },
-  dark: {
-    ring: "267deg 84% 81%",
-    primary: "267deg 84% 81%",
-    background: "240deg 21% 15%",
-    foreground: "226deg 64% 88%",
-    popover: "240deg 23% 9%",
-    card: "240deg 21% 12%",
-    muted: "240deg 21% 12%",
-    border: "237deg 16% 23%",
-    accent: "237deg 16% 23%",
-    secondary: "240deg 21% 12%",
-    "primary-foreground": "240deg 23% 9%",
-    "card-foreground": "226deg 64% 88%",
-    "secondary-foreground": "226deg 64% 88%",
-    "popover-foreground": "226deg 64% 88%",
-    "accent-foreground": "226deg 64% 88%",
-    "muted-foreground": "228deg 24% 72%"
-  },
-  css: {
-    "#nd-sidebar": {
-      "--secondary": "223deg 16% 83%",
-      "--muted": "223deg 16% 83%"
-    },
-    ".dark #nd-sidebar": {
-      "--secondary": "237deg 16% 23%",
-      "--muted": "237deg 16% 23%"
-    }
-  }
-};
-var purple = {
-  light: {
-    background: "256 100% 96%",
-    primary: "270 100% 52%",
-    border: "270 40% 80%",
-    accent: "270 60% 86%",
-    "accent-foreground": "270 100% 20%",
-    muted: "256 60% 94%",
-    "muted-foreground": "256 50% 50%",
-    foreground: "256 60% 26%",
-    secondary: "270 60% 90%",
-    "secondary-foreground": "256 60% 10%",
-    card: "256 60% 92%",
-    "card-foreground": "256 100% 20%",
-    "popover-foreground": "256 100% 20%",
-    popover: "256 60% 96%",
-    "primary-foreground": "270 100% 20%",
-    ring: "270 100% 52%"
-  },
-  dark: {
-    background: "256 60% 6%",
-    primary: "270 100% 86%",
-    border: "270 100% 20%",
-    accent: "256 60% 26%",
-    "accent-foreground": "270 100% 86%",
-    muted: "256 60% 10%",
-    foreground: "256 60% 90%",
-    "muted-foreground": "256 50% 75%",
-    secondary: "270 100% 20%",
-    "secondary-foreground": "256 60% 90%",
-    card: "256 60% 10%",
-    "card-foreground": "256 60% 90%",
-    "popover-foreground": "256 60% 90%",
-    popover: "256 60% 6%",
-    "primary-foreground": "256 60% 6%",
-    ring: "270 100% 86%"
-  }
-};
-var dusk = {
-  light: {
-    background: "250 20% 92%",
-    primary: "340 40% 48%",
-    border: "240 40% 90%",
-    accent: "250 30% 90%",
-    "accent-foreground": "250 20% 20%",
-    muted: "240 30% 94%",
-    "muted-foreground": "240 10% 50%",
-    foreground: "220 20% 30%",
-    secondary: "250 40% 94%",
-    "secondary-foreground": "240 40% 10%",
-    card: "250 20% 92%",
-    "card-foreground": "250 20% 20%",
-    "popover-foreground": "250 40% 20%",
-    popover: "250 40% 96%",
-    "primary-foreground": "240 80% 20%",
-    ring: "340 40% 48%"
-  },
-  dark: {
-    ring: "340 100% 90%",
-    "primary-foreground": "240 40% 4%",
-    popover: "240 20% 5%",
-    "popover-foreground": "250 20% 90%",
-    primary: "340 100% 90%",
-    border: "220 15% 15%",
-    background: "220 15% 6%",
-    foreground: "220 15% 87%",
-    muted: "220 20% 15%",
-    "muted-foreground": "220 15% 60%",
-    accent: "250 20% 15%",
-    secondary: "240 20% 15%",
-    "card-foreground": "240 15% 87%",
-    card: "240 20% 5%",
-    "secondary-foreground": "250 20% 90%",
-    "accent-foreground": "340 5% 90%"
-  },
-  css: {
-    "#nd-sidebar": {
-      backgroundColor: "hsl(250 20% 90%)"
-    },
-    ".dark #nd-sidebar": {
-      backgroundColor: "hsl(240 20% 5%)"
-    }
-  }
-};
-var vitepress = {
-  light: {
-    ...defaultPreset.light,
-    background: "0 0% 100%",
-    card: "0 0% 100%",
-    foreground: "240 6% 25%",
-    "muted-foreground": "240 6% 50%",
-    secondary: "240 6% 97%",
-    "accent-foreground": "240 6% 25%",
-    primary: "226 55% 45%"
-  },
-  dark: {
-    ring: "234 100% 83%",
-    primary: "234 100% 83%",
-    "secondary-foreground": "60 100% 98%",
-    "card-foreground": "60 100% 98%",
-    background: "240 7% 11%",
-    foreground: "60 100% 98%",
-    popover: "240 7% 11%",
-    "popover-foreground": "60 100% 98%",
-    "primary-foreground": "240 7% 11%",
-    card: "240 7% 11%",
-    muted: "0 0% 13%",
-    border: "240 4% 19%",
-    accent: "0 0% 15%",
-    secondary: "240 4% 9%",
-    "accent-foreground": "0 0% 100%",
-    "muted-foreground": "240 4% 65%"
-  },
-  css: {
-    ".prose": {
-      "--tw-prose-body": "theme(colors.fd-foreground / 85%)",
-      "--tw-prose-headings": "theme(colors.fd-foreground / 85%)",
-      "--tw-prose-links": "theme(colors.fd-primary.DEFAULT)",
-      "--tw-prose-code": "theme(colors.fd-primary.DEFAULT)"
-    },
-    '.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))': {
-      border: "none",
-      backgroundColor: "theme(colors.fd-primary.DEFAULT / 10%)"
-    },
-    "#nd-sidebar": {
-      backgroundColor: "hsl(240 6% 97%)"
-    },
-    ".dark #nd-sidebar": {
-      backgroundColor: "hsl(240 4% 9%)"
-    },
-    "#nd-sidebar > div": {
-      borderColor: "transparent"
-    },
-    "button[data-search-full]": {
-      backgroundColor: "theme(colors.fd-background)"
-    }
-  }
-};
-var presets = {
-  vitepress,
-  purple,
-  default: defaultPreset,
-  ocean: oceanPreset,
-  catppuccin,
-  neutral,
-  dusk
-};
-
-// src/theme/animations.ts
-var animations = {
-  keyframes: {
-    "fd-collapsible-down": {
-      from: { height: "0", opacity: "0" },
-      to: {
-        height: "var(--radix-collapsible-content-height)"
-      }
-    },
-    "fd-collapsible-up": {
-      from: {
-        height: "var(--radix-collapsible-content-height)"
-      },
-      to: { height: "0", opacity: "0" }
-    },
-    "fd-accordion-down": {
-      from: { height: "0", opacity: "0.5" },
-      to: { height: "var(--radix-accordion-content-height)" }
-    },
-    "fd-accordion-up": {
-      from: { height: "var(--radix-accordion-content-height)" },
-      to: { height: "0", opacity: "0.5" }
-    },
-    "fd-dialog-in": {
-      from: { transform: "scale(0.95) translate(-50%, 0)", opacity: "0" },
-      to: { transform: "scale(1) translate(-50%, 0)" }
-    },
-    "fd-dialog-out": {
-      from: { transform: "scale(1) translate(-50%, 0)" },
-      to: { transform: "scale(0.95) translateY(-50%, 0)", opacity: "0" }
-    },
-    "fd-popover-in": {
-      from: { opacity: "0", transform: "scale(0.95) translateY(-10px)" },
-      to: { opacity: "1", transform: "scale(1) translateY(0)" }
-    },
-    "fd-popover-out": {
-      from: { opacity: "1", transform: "scale(1) translateY(0)" },
-      to: { opacity: "0", transform: "scale(0.95) translateY(-10px)" }
-    },
-    "fd-fade-in": {
-      from: { opacity: "0" },
-      to: { opacity: "1" }
-    },
-    "fd-fade-out": {
-      to: { opacity: "0" }
-    },
-    "fd-enterFromRight": {
-      from: { opacity: "0", transform: "translateX(200px)" },
-      to: { opacity: "1", transform: "translateX(0)" }
-    },
-    "fd-enterFromLeft": {
-      from: { opacity: "0", transform: "translateX(-200px)" },
-      to: { opacity: "1", transform: "translateX(0)" }
-    },
-    "fd-exitToRight": {
-      from: { opacity: "1", transform: "translateX(0)" },
-      to: { opacity: "0", transform: "translateX(200px)" }
-    },
-    "fd-exitToLeft": {
-      from: { opacity: "1", transform: "translateX(0)" },
-      to: { opacity: "0", transform: "translateX(-200px)" }
-    },
-    "fd-nav-menu-in": {
-      from: { opacity: "0", height: "0px" },
-      to: {
-        opacity: "1",
-        height: "var(--radix-navigation-menu-viewport-height)"
-      }
-    },
-    "fd-nav-menu-out": {
-      from: {
-        opacity: "1",
-        height: "var(--radix-navigation-menu-viewport-height)"
-      },
-      to: { opacity: "0", height: "0px" }
-    }
-  },
-  animation: {
-    "fd-fade-in": "fd-fade-in 300ms ease",
-    "fd-fade-out": "fd-fade-out 300ms ease",
-    "fd-dialog-in": "fd-dialog-in 200ms cubic-bezier(0.32, 0.72, 0, 1)",
-    "fd-dialog-out": "fd-dialog-out 300ms cubic-bezier(0.32, 0.72, 0, 1)",
-    "fd-popover-in": "fd-popover-in 150ms ease",
-    "fd-popover-out": "fd-popover-out 150ms ease",
-    "fd-collapsible-down": "fd-collapsible-down 150ms ease-out",
-    "fd-collapsible-up": "fd-collapsible-up 150ms ease-out",
-    "fd-accordion-down": "fd-accordion-down 200ms ease-out",
-    "fd-accordion-up": "fd-accordion-up 200ms ease-out",
-    "fd-nav-menu-in": "fd-nav-menu-in 200ms ease",
-    "fd-nav-menu-out": "fd-nav-menu-out 200ms ease",
-    "fd-enterFromLeft": "fd-enterFromLeft 250ms ease",
-    "fd-enterFromRight": "fd-enterFromRight 250ms ease",
-    "fd-exitToLeft": "fd-exitToLeft 250ms ease",
-    "fd-exitToRight": "fd-exitToRight 250ms ease"
-  }
-};
-
-// src/theme/typography.ts
-var typography = {
-  css: {
-    "--tw-prose-body": `theme('colors.fd-foreground / 90%')`,
-    "--tw-prose-headings": `theme('colors.fd-foreground')`,
-    "--tw-prose-lead": `theme('colors.fd-foreground')`,
-    "--tw-prose-links": `theme('colors.fd-foreground')`,
-    "--tw-prose-bold": `theme('colors.fd-foreground')`,
-    "--tw-prose-counters": `theme('colors.fd-muted.foreground')`,
-    "--tw-prose-bullets": `theme('colors.fd-muted.foreground')`,
-    "--tw-prose-hr": `theme('colors.fd-border')`,
-    "--tw-prose-quotes": `theme('colors.fd-foreground')`,
-    "--tw-prose-quote-borders": `theme('colors.fd-border')`,
-    "--tw-prose-captions": `theme('colors.fd-foreground')`,
-    "--tw-prose-code": `theme('colors.fd-foreground')`,
-    "--tw-prose-th-borders": `theme('colors.fd-border')`,
-    "--tw-prose-td-borders": `theme('colors.fd-border')`,
-    "--tw-prose-kbd": `theme('colors.fd-foreground')`,
-    "--tw-prose-kbd-shadows": `theme('colors.fd-primary.DEFAULT / 50%')`,
-    // not used
-    "--tw-prose-pre-bg": false,
-    "--tw-prose-pre-code": false,
-    fontSize: "16px",
-    maxWidth: "none",
-    a: false,
-    "a:hover": false,
-    "a:not([data-card])": {
-      color: "var(--tw-prose-links)",
-      transition: "opacity 0.3s",
-      fontWeight: "400",
-      textDecoration: "underline",
-      textUnderlineOffset: "2px",
-      textDecorationColor: `theme('colors.fd-primary.DEFAULT')`
-    },
-    "a:not([data-card]):hover": {
-      opacity: "80%"
-    },
-    table: {
-      fontSize: "14px"
-    },
-    "thead th": {
-      textAlign: "start"
-    },
-    h2: {
-      fontWeight: "600"
-    },
-    code: {
-      padding: "3px",
-      border: "solid 1px",
-      fontSize: "13px",
-      borderColor: `theme('colors.fd-border')`,
-      borderRadius: "5px",
-      fontWeight: "400",
-      background: `theme('colors.fd-muted.DEFAULT')`
-    },
-    kbd: {
-      boxShadow: "0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows)"
-    },
-    ul: {
-      paddingInlineStart: "1rem"
-    },
-    "ul > li": {
-      paddingInlineStart: "0"
-    },
-    // Disabled styles, handled by Fumadocs UI
-    "pre code": false,
-    "pre code::after": false,
-    "pre code::before": false,
-    "code::after": false,
-    "code::before": false
-  }
-};
-
-// src/tailwind-plugin.ts
+import typography from '@tailwindcss/typography';
+import plugin from 'tailwindcss/plugin';
+import { presets } from './theme/colors';
+import { animations } from './theme/animations';
+import { typography as typographyConfig } from './theme/typography';
 function getThemeStyles(prefix, theme) {
-  return Object.fromEntries(
-    Object.entries(theme).map(([k, v]) => [variableName(prefix, k), v])
-  );
+    return Object.fromEntries(Object.entries(theme).map(([k, v]) => [variableName(prefix, k), v]));
 }
 function variableName(prefix, name) {
-  return `--${[prefix, name].filter(Boolean).join("-")}`;
+    return `--${[prefix, name].filter(Boolean).join('-')}`;
 }
 function createTailwindColors(prefix, cloneToGlobal) {
-  function colorToCSS(name) {
-    return `hsl(var(${variableName(prefix, name)}) / <alpha-value>)`;
-  }
-  const v = /* @__PURE__ */ new Map();
-  for (const key of ["background", "foreground", "ring", "border"]) {
-    const value = colorToCSS(key);
-    v.set(`fd-${key}`, value);
-    if (cloneToGlobal) v.set(key, value);
-  }
-  for (const key of [
-    "popover",
-    "primary",
-    "secondary",
-    "accent",
-    "muted",
-    "card"
-  ]) {
-    const value = {
-      DEFAULT: colorToCSS(key),
-      foreground: colorToCSS(`${key}-foreground`)
-    };
-    v.set(`fd-${key}`, value);
-    if (cloneToGlobal) v.set(key, value);
-  }
-  return Object.fromEntries(v.entries());
+    function colorToCSS(name) {
+        return `hsl(var(${variableName(prefix, name)}) / <alpha-value>)`;
+    }
+    const v = new Map();
+    for (const key of ['background', 'foreground', 'ring', 'border']) {
+        const value = colorToCSS(key);
+        v.set(`fd-${key}`, value);
+        if (cloneToGlobal)
+            v.set(key, value);
+    }
+    for (const key of [
+        'popover',
+        'primary',
+        'secondary',
+        'accent',
+        'muted',
+        'card',
+    ]) {
+        const value = {
+            DEFAULT: colorToCSS(key),
+            foreground: colorToCSS(`${key}-foreground`),
+        };
+        v.set(`fd-${key}`, value);
+        if (cloneToGlobal)
+            v.set(key, value);
+    }
+    return Object.fromEntries(v.entries());
 }
-var docsUi = plugin.withOptions(
-  ({ cssPrefix = "", preset = "default", layoutWidth = "100vw" } = {}) => {
+export const docsUi = plugin.withOptions(({ cssPrefix = '', preset = 'default', layoutWidth = '100vw' } = {}) => {
     return ({ addBase, addComponents, addUtilities }) => {
-      const { light, dark, css } = typeof preset === "string" ? presets[preset] : preset;
-      addBase({
-        ":root": {
-          ...getThemeStyles(cssPrefix, light),
-          "--fd-sidebar-width": "0px",
-          "--fd-toc-width": "0px",
-          "--fd-layout-width": layoutWidth,
-          "--fd-banner-height": "0px",
-          "--fd-nav-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)"
-        },
-        ".dark": getThemeStyles(cssPrefix, dark),
-        "*": {
-          "border-color": `theme('colors.fd-border')`
-        },
-        body: {
-          "background-color": `theme('colors.fd-background')`,
-          color: `theme('colors.fd-foreground')`
-        },
-        "@screen md": {
-          ":root": {
-            "--fd-sidebar-width": "260px"
-          }
-        },
-        "@screen lg": {
-          ":root": {
-            "--fd-toc-width": "240px"
-          }
-        },
-        "@screen xl": {
-          ":root": { "--fd-toc-width": "260px" }
-        }
-      });
-      if (css) addComponents(css);
-      addBase({
-        ".shiki code span": {
-          color: "var(--shiki-light)"
-        },
-        ".dark .shiki code span": {
-          color: "var(--shiki-dark)"
-        },
-        ".fd-codeblock code": {
-          display: "grid",
-          "font-size": "13px"
-        },
-        ".shiki code .diff.remove": {
-          backgroundColor: "var(--fd-diff-remove-color)",
-          opacity: "0.7"
-        },
-        ".shiki code .diff::before": {
-          position: "absolute",
-          left: "6px"
-        },
-        ".shiki code .diff.remove::before": {
-          content: "'-'",
-          color: "var(--fd-diff-remove-symbol-color)"
-        },
-        ".shiki code .diff.add": {
-          backgroundColor: "var(--fd-diff-add-color)"
-        },
-        ".shiki code .diff.add::before": {
-          content: "'+'",
-          color: "var(--fd-diff-add-symbol-color)"
-        },
-        ".shiki code .diff": {
-          margin: "0 -16px",
-          padding: "0 16px",
-          position: "relative"
-        },
-        ".shiki .highlighted": {
-          margin: "0 -16px",
-          padding: "0 16px",
-          backgroundColor: `theme('colors.fd-primary.DEFAULT / 10%')`
-        },
-        ".shiki .highlighted-word": {
-          padding: "1px 2px",
-          margin: "-1px -3px",
-          border: "1px solid",
-          borderColor: `theme('colors.fd-primary.DEFAULT / 50%')`,
-          backgroundColor: `theme('colors.fd-primary.DEFAULT / 10%')`,
-          borderRadius: "2px"
-        }
-      });
-      addUtilities({
-        ".steps": {
-          "counter-reset": "step",
-          "border-left-width": "1px",
-          "margin-left": "1rem",
-          "padding-left": "1.75rem",
-          position: "relative"
-        },
-        ".step:before": {
-          "background-color": `theme('colors.fd-secondary.DEFAULT')`,
-          color: `theme('colors.fd-secondary.foreground')`,
-          content: "counter(step)",
-          "counter-increment": "step",
-          "border-radius": `theme('borderRadius.full')`,
-          "justify-content": "center",
-          "align-items": "center",
-          width: "2rem",
-          height: "2rem",
-          "font-size": ".875rem",
-          "line-height": "1.25rem",
-          display: "flex",
-          position: "absolute",
-          left: "-1rem"
-        },
-        ".prose-no-margin": {
-          "& > :first-child": {
-            marginTop: "0"
-          },
-          "& > :last-child": {
-            marginBottom: "0"
-          }
-        }
-      });
+        const { light, dark, css } = typeof preset === 'string' ? presets[preset] : preset;
+        addBase({
+            ':root': {
+                ...getThemeStyles(cssPrefix, light),
+                '--fd-sidebar-width': '0px',
+                '--fd-toc-width': '0px',
+                '--fd-layout-width': layoutWidth,
+                '--fd-banner-height': '0px',
+                '--fd-nav-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)',
+            },
+            '.dark': getThemeStyles(cssPrefix, dark),
+            '*': {
+                'border-color': `theme('colors.fd-border')`,
+            },
+            body: {
+                'background-color': `theme('colors.fd-background')`,
+                color: `theme('colors.fd-foreground')`,
+            },
+            '@screen md': {
+                ':root': {
+                    '--fd-sidebar-width': '260px',
+                },
+            },
+            '@screen lg': {
+                ':root': {
+                    '--fd-toc-width': '240px',
+                },
+            },
+            '@screen xl': {
+                ':root': { '--fd-toc-width': '260px' },
+            },
+        });
+        if (css)
+            addComponents(css);
+        // Shiki styles
+        addBase({
+            '.shiki code span': {
+                color: 'var(--shiki-light)',
+            },
+            '.dark .shiki code span': {
+                color: 'var(--shiki-dark)',
+            },
+            '.fd-codeblock code': {
+                display: 'grid',
+                'font-size': '13px',
+            },
+            '.shiki code .diff.remove': {
+                backgroundColor: 'var(--fd-diff-remove-color)',
+                opacity: '0.7',
+            },
+            '.shiki code .diff::before': {
+                position: 'absolute',
+                left: '6px',
+            },
+            '.shiki code .diff.remove::before': {
+                content: "'-'",
+                color: 'var(--fd-diff-remove-symbol-color)',
+            },
+            '.shiki code .diff.add': {
+                backgroundColor: 'var(--fd-diff-add-color)',
+            },
+            '.shiki code .diff.add::before': {
+                content: "'+'",
+                color: 'var(--fd-diff-add-symbol-color)',
+            },
+            '.shiki code .diff': {
+                margin: '0 -16px',
+                padding: '0 16px',
+                position: 'relative',
+            },
+            '.shiki .highlighted': {
+                margin: '0 -16px',
+                padding: '0 16px',
+                backgroundColor: `theme('colors.fd-primary.DEFAULT / 10%')`,
+            },
+            '.shiki .highlighted-word': {
+                padding: '1px 2px',
+                margin: '-1px -3px',
+                border: '1px solid',
+                borderColor: `theme('colors.fd-primary.DEFAULT / 50%')`,
+                backgroundColor: `theme('colors.fd-primary.DEFAULT / 10%')`,
+                borderRadius: '2px',
+            },
+        });
+        addUtilities({
+            '.steps': {
+                'counter-reset': 'step',
+                'border-left-width': '1px',
+                'margin-left': '1rem',
+                'padding-left': '1.75rem',
+                position: 'relative',
+            },
+            '.step:before': {
+                'background-color': `theme('colors.fd-secondary.DEFAULT')`,
+                color: `theme('colors.fd-secondary.foreground')`,
+                content: 'counter(step)',
+                'counter-increment': 'step',
+                'border-radius': `theme('borderRadius.full')`,
+                'justify-content': 'center',
+                'align-items': 'center',
+                width: '2rem',
+                height: '2rem',
+                'font-size': '.875rem',
+                'line-height': '1.25rem',
+                display: 'flex',
+                position: 'absolute',
+                left: '-1rem',
+            },
+            '.prose-no-margin': {
+                '& > :first-child': {
+                    marginTop: '0',
+                },
+                '& > :last-child': {
+                    marginBottom: '0',
+                },
+            },
+        });
     };
-  },
-  ({
-    cssPrefix = "",
-    modifyContainer = true,
-    addGlobalColors = false
-  } = {}) => ({
+}, ({ cssPrefix = '', modifyContainer = true, addGlobalColors = false, } = {}) => ({
     theme: {
-      extend: {
-        // Allow devs to use `container` to match with home layout
-        container: modifyContainer ? {
-          center: true,
-          padding: "1rem",
-          screens: {
-            "2xl": "1400px"
-          }
-        } : void 0,
-        maxWidth: {
-          "fd-container": "1400px"
-        },
-        spacing: {
-          "fd-layout-top": "calc(var(--fd-banner-height) + var(--fd-nav-height))"
+        extend: {
+            // Allow devs to use `container` to match with home layout
+            container: modifyContainer
+                ? {
+                    center: true,
+                    padding: '1rem',
+                    screens: {
+                        '2xl': '1400px',
+                    },
+                }
+                : undefined,
+            maxWidth: {
+                'fd-container': '1400px',
+            },
+            spacing: {
+                'fd-layout-top': 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
+            },
+            colors: createTailwindColors(cssPrefix, addGlobalColors),
+            ...animations,
+        },
+    },
+}));
+export function createPreset(options = {}) {
+    return {
+        darkMode: 'class',
+        plugins: [typography, docsUi(options)],
+        theme: {
+            extend: {
+                typography: {
+                    DEFAULT: typographyConfig,
+                },
+            },
         },
-        colors: createTailwindColors(cssPrefix, addGlobalColors),
-        ...animations
-      }
-    }
-  })
-);
-function createPreset(options = {}) {
-  return {
-    darkMode: "class",
-    plugins: [typography2, docsUi(options)],
-    theme: {
-      extend: {
-        typography: {
-          DEFAULT: typography
-        }
-      }
-    }
-  };
+    };
 }
-export {
-  createPreset,
-  docsUi,
-  presets
-};
+export { presets } from './theme/colors';