fumadocs-ui 14.7.7 → 15.0.1

package/dist/theme/docs-ui.d.ts

@@ -0,0 +1,23 @@
+export interface DocsUIOptions {
+    /**
+     * Prefix to the variable name of colors
+     *
+     * @defaultValue 'fd'
+     */
+    cssPrefix?: string;
+    /**
+     * Add Fumadocs UI `fd-*` colors to global colors
+     *
+     * @defaultValue false
+     */
+    addGlobalColors?: boolean;
+    /**
+     * Max width of docs layout
+     *
+     * @defaultValue '100vw'
+     */
+    layoutWidth?: string;
+}
+export declare const docsUi: unknown;
+export default docsUi;
+//# sourceMappingURL=docs-ui.d.ts.map

package/dist/theme/docs-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"docs-ui.d.ts","sourceRoot":"","sources":["../../src/theme/docs-ui.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA4CD,eAAO,MAAM,MAAM,EAAE,OAuBpB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/theme/docs-ui.js

@@ -0,0 +1,58 @@
+import plugin from 'tailwindcss/plugin';
+function createTailwindUtilities(prefix) {
+    const append = prefix.length > 0 ? prefix + '-' : prefix;
+    return {
+        [`.${append}steps`]: {
+            'counter-reset': 'step',
+            'border-left-width': '1px',
+            'margin-left': '1rem',
+            'padding-left': '1.75rem',
+            position: 'relative',
+        },
+        [`.${append}step:before`]: {
+            'background-color': 'var(--color-fd-secondary)',
+            color: 'var(--color-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',
+            },
+        },
+    };
+}
+export const docsUi = plugin.withOptions(({ layoutWidth = '100vw' } = {}) => {
+    return ({ addBase, addUtilities }) => {
+        addBase({
+            ':root': {
+                '--fd-sidebar-width': '0px',
+                '--fd-toc-width': '0px',
+                '--fd-layout-width': layoutWidth,
+                '--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)',
+            },
+        });
+        // @ts-expect-error -- buggy Tailwind CSS types
+        addUtilities(createTailwindUtilities('fd'));
+    };
+});
+export default docsUi;

package/dist/theme/typography/index.d.ts

@@ -5,11 +5,6 @@ export interface Options {
      */
     disableRoundedTable?: boolean;
 }
-export declare const typography: {
-    (options: Options): {
-        handler: import("tailwindcss/types/config").PluginCreator;
-        config?: Partial<import("tailwindcss/types/config").Config>;
-    };
-    __isOptionsFunction: true;
-};
+export declare const typography: unknown;
+export default typography;
 //# sourceMappingURL=index.d.ts.map

package/dist/theme/typography/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/typography/index.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,OAAO;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAmJD,eAAO,MAAM,UAAU;;;cA1JH,CAAC;;;CAsMpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/typography/index.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,OAAO;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAmJD,eAAO,MAAM,UAAU,EAAE,OAsCxB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/theme/typography/index.js

@@ -107,9 +107,8 @@ const SELECTORS = [
     ['lead', '[class~="lead"]'],
 ];
 export const typography = plugin.withOptions(({ className = 'prose', ...styleOptions } = {}) => {
-    return ({ addVariant, addComponents, theme, ...rest }) => {
+    return ({ addVariant, addComponents, ...rest }) => {
         const prefix = rest.prefix;
-        const modifiers = theme('typography');
         for (const [name, ...values] of SELECTORS) {
             const selectors = values.length === 0 ? [name] : values;
             const selector = selectors.join(', ');
@@ -120,12 +119,12 @@ export const typography = plugin.withOptions(({ className = 'prose', ...styleOpt
         }
         addComponents({
             [`.${className}`]: configToCss({
-                ...modifiers.DEFAULT,
+                ...styles.DEFAULT,
                 css: [
-                    ...(modifiers.DEFAULT.css ?? []),
+                    ...(styles.DEFAULT.css ?? []),
                     styleOptions.disableRoundedTable
-                        ? modifiers.normalTable
-                        : modifiers.roundedTable,
+                        ? styles.normalTable
+                        : styles.roundedTable,
                 ],
             }, {
                 className,
@@ -134,8 +133,5 @@ export const typography = plugin.withOptions(({ className = 'prose', ...styleOpt
             }),
         });
     };
-}, () => {
-    return {
-        theme: { typography: styles },
-    };
 });
+export default typography;

package/dist/theme/typography/styles.d.ts

@@ -2,24 +2,30 @@ export declare const roundedTable: {
     table: {
         borderCollapse: string;
         borderSpacing: string;
-        '@apply bg-fd-card rounded-lg border overflow-hidden': string;
+        background: string;
+        borderRadius: string;
+        border: string;
+        overflow: string;
     };
     th: {
         textAlign: string;
-        '@apply p-2.5 border-s bg-fd-muted': string;
+        padding: string;
+        'border-inline-start': string;
+        background: string;
     };
     'th:first-child': {
-        '@apply border-s-0': string;
+        'border-inline-start': string;
     };
     'th:not(tr:last-child *), td:not(tr:last-child *)': {
-        '@apply border-b': string;
+        'border-bottom': string;
     };
     td: {
         textAlign: string;
-        '@apply border-s p-2.5': string;
+        'border-inline-start': string;
+        padding: string;
     };
     'td:first-child': {
-        '@apply border-s-0': string;
+        'border-inline-start': string;
     };
     'tfoot th, tfoot td': {
         borderTopWidth: string;

package/dist/theme/typography/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/theme/typography/styles.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BxB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDvB,CAAC;AAEF,MAAM,WAAW,MAAM;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC;CACzD;AAED,eAAO,MAAM,OAAO,EAAE,MA6TrB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/theme/typography/styles.ts"],"names":[],"mappings":"AAmCA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCxB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDvB,CAAC;AAEF,MAAM,WAAW,MAAM;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC;CACzD;AAED,eAAO,MAAM,OAAO,EAAE,MA6TrB,CAAC"}

package/dist/theme/typography/styles.js

@@ -11,45 +11,51 @@ function em(px, base) {
     return `${round(px / base)}em`;
 }
 const colors = {
-    '--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%')`,
+    '--tw-prose-body': 'color-mix(in oklab, var(--color-fd-foreground) 90%, transparent)',
+    '--tw-prose-headings': 'var(--color-fd-foreground)',
+    '--tw-prose-lead': `var(--color-fd-foreground)`,
+    '--tw-prose-links': `var(--color-fd-foreground)`,
+    '--tw-prose-bold': `var(--color-fd-foreground)`,
+    '--tw-prose-counters': `var(--color-fd-muted-foreground)`,
+    '--tw-prose-bullets': `var(--color-fd-muted-foreground)`,
+    '--tw-prose-hr': `var(--color-fd-border)`,
+    '--tw-prose-quotes': `var(--color-fd-foreground)`,
+    '--tw-prose-quote-borders': `var(--color-fd-border)`,
+    '--tw-prose-captions': `var(--color-fd-foreground)`,
+    '--tw-prose-code': `var(--color-fd-foreground)`,
+    '--tw-prose-th-borders': `var(--color-fd-border)`,
+    '--tw-prose-td-borders': `var(--color-fd-border)`,
+    '--tw-prose-kbd': `var(--color-fd-foreground)`,
+    '--tw-prose-kbd-shadows': `color-mix(in oklab, var(--color-fd-primary) 50%, transparent)`,
 };
 export const roundedTable = {
     table: {
         borderCollapse: 'separate',
         borderSpacing: '0',
-        '@apply bg-fd-card rounded-lg border overflow-hidden': '',
+        background: 'var(--color-fd-card)',
+        borderRadius: 'var(--radius-lg)',
+        border: '1px solid var(--color-fd-border)',
+        overflow: 'hidden',
     },
     th: {
         textAlign: 'start',
-        '@apply p-2.5 border-s bg-fd-muted': '',
+        padding: 'calc(var(--spacing) * 2.5)',
+        'border-inline-start': '1px solid var(--color-fd-border)',
+        background: 'var(--color-fd-muted)',
     },
     'th:first-child': {
-        '@apply border-s-0': '',
+        'border-inline-start': 'none',
     },
     'th:not(tr:last-child *), td:not(tr:last-child *)': {
-        '@apply border-b': '',
+        'border-bottom': '1px solid var(--color-fd-border)',
     },
     td: {
         textAlign: 'start',
-        '@apply border-s p-2.5': '',
+        'border-inline-start': '1px solid var(--color-fd-border)',
+        padding: 'calc(var(--spacing) * 2.5)',
     },
     'td:first-child': {
-        '@apply border-s-0': '',
+        'border-inline-start': 'none',
     },
     'tfoot th, tfoot td': {
         borderTopWidth: '1px',
@@ -345,10 +351,10 @@ export const DEFAULT = {
                 padding: '3px',
                 border: 'solid 1px',
                 fontSize: '13px',
-                borderColor: `theme('colors.fd-border')`,
+                borderColor: `var(--color-fd-border)`,
                 borderRadius: '5px',
                 fontWeight: '400',
-                background: `theme('colors.fd-muted.DEFAULT')`,
+                background: `var(--color-fd-muted)`,
                 color: 'var(--tw-prose-code)',
             },
             'a code': {
@@ -406,7 +412,7 @@ export const DEFAULT = {
                 fontWeight: '400',
                 textDecoration: 'underline',
                 textUnderlineOffset: '2px',
-                textDecorationColor: `theme('colors.fd-primary.DEFAULT')`,
+                textDecorationColor: 'var(--color-fd-primary)',
             },
             'a:not([data-card]):hover': {
                 opacity: '80%',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "14.7.7",
+  "version": "15.0.1",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -13,12 +13,8 @@
   "type": "module",
   "exports": {
     "./style.css": "./dist/style.css",
+    "./css/*": "./css/*",
     "./image-zoom.css": "./dist/image-zoom.css",
-    "./tailwind-plugin": {
-      "import": "./dist/tailwind-plugin.js",
-      "types": "./dist/tailwind-plugin.d.ts",
-      "default": "./dist/tailwind-plugin.js"
-    },
     "./components/*": {
       "import": "./dist/components/*.js",
       "types": "./dist/components/*.d.ts"
@@ -46,51 +42,54 @@
     "./og": {
       "import": "./dist/og.js",
       "types": "./dist/og.d.ts"
+    },
+    "./theme/*": {
+      "import": "./dist/theme/*.js",
+      "types": "./dist/theme/*.d.ts"
     }
   },
   "files": [
-    "dist/*"
+    "dist/*",
+    "css/*"
   ],
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-collapsible": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.5",
     "@radix-ui/react-direction": "^1.1.0",
-    "@radix-ui/react-navigation-menu": "^1.2.3",
-    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.4",
+    "@radix-ui/react-popover": "^1.1.5",
     "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "lodash.merge": "^4.6.2",
-    "lucide-react": "^0.473.0",
+    "lucide-react": "^0.474.0",
     "next-themes": "^0.4.4",
     "postcss-selector-parser": "^7.0.0",
     "react-medium-image-zoom": "^5.2.13",
-    "tailwind-merge": "^2.6.0"
+    "tailwind-merge": "^3.0.1"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.1.5",
+    "@next/eslint-plugin-next": "^15.1.6",
+    "@tailwindcss/cli": "^4.0.2",
     "@types/lodash.merge": "^4.6.9",
-    "@types/react": "^19.0.7",
+    "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
-    "autoprefixer": "^10.4.20",
-    "next": "15.1.5",
-    "postcss": "^8.5.1",
-    "postcss-cli": "^11.0.0",
-    "tailwindcss": "^3.4.17",
+    "next": "15.1.6",
+    "tailwindcss": "^4.0.2",
     "tsc-alias": "^1.8.10",
     "@fumadocs/cli": "0.0.7",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "14.7.7",
+    "fumadocs-core": "15.0.1",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
     "next": "14.x.x || 15.x.x",
     "react": "18.x.x || 19.x.x",
     "react-dom": "18.x.x || 19.x.x",
-    "tailwindcss": "^3.4.14",
-    "fumadocs-core": "14.7.7"
+    "tailwindcss": "^3.4.14 || ^4.0.0",
+    "fumadocs-core": "15.0.1"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
@@ -103,10 +102,10 @@
   "scripts": {
     "build": "pnpm build:layout && pnpm build:tailwind",
     "build:layout": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "build:tailwind": "postcss css/*.css --dir dist && postcss src/components/*.css --dir dist/components",
+    "build:tailwind": "tailwindcss -i css/style.css -o ./dist/style.css && tailwindcss -i src/components/image-zoom.css -o dist/components/image-zoom.css",
     "clean": "rimraf dist",
     "dev": "concurrently \"tsc -w --project tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\" \"pnpm dev:tailwind\"",
-    "dev:tailwind": "postcss css/*.css --dir dist --watch",
+    "dev:tailwind": "tailwindcss -i css/style.css -o ./dist/style.css -w && tailwindcss -i src/components/image-zoom.css -o dist/components/image-zoom.css -w",
     "lint": "eslint .",
     "types:check": "tsc --noEmit"
   }

package/dist/tailwind-plugin.d.ts

@@ -1,58 +0,0 @@
-import type { CSSRuleObject, PresetsConfig } from 'tailwindcss/types/config';
-import { presets } from './theme/colors';
-import { type Options as TypographyOptions, typography } from './theme/typography';
-export interface DocsUIOptions extends Pick<TypographyOptions, 'disableRoundedTable'> {
-    /**
-     * Prefix to the variable name of colors
-     *
-     * @defaultValue 'fd'
-     */
-    cssPrefix?: string;
-    /**
-     * Add Fumadocs UI `fd-*` colors to global colors
-     *
-     * @defaultValue false
-     */
-    addGlobalColors?: boolean;
-    /**
-     * Change the default styles of `container`
-     *
-     * @defaultValue true
-     */
-    modifyContainer?: boolean;
-    /**
-     * Max width of docs layout
-     *
-     * @defaultValue '100vw'
-     */
-    layoutWidth?: string;
-    /**
-     * Color preset
-     */
-    preset?: keyof typeof presets | Preset;
-    typography?: TypographyOptions;
-    /**
-     * Add Fumadocs UI `fd-*` utilities
-     *
-     * @defaultValue true
-     */
-    addGlobalUtils?: boolean;
-}
-type Keys = 'background' | 'foreground' | 'muted' | 'muted-foreground' | 'popover' | 'popover-foreground' | 'card' | 'card-foreground' | 'border' | 'primary' | 'primary-foreground' | 'secondary' | 'secondary-foreground' | 'accent' | 'accent-foreground' | 'ring';
-type Theme = Record<Keys, string>;
-export interface Preset {
-    light: Theme;
-    dark: Theme;
-    css?: CSSRuleObject;
-}
-export declare const docsUi: {
-    (options: DocsUIOptions): {
-        handler: import("tailwindcss/types/config").PluginCreator;
-        config?: Partial<import("tailwindcss/types/config").Config>;
-    };
-    __isOptionsFunction: true;
-};
-export declare function createPreset(options?: DocsUIOptions): PresetsConfig;
-export { typography };
-export { presets } from './theme/colors';
-//# sourceMappingURL=tailwind-plugin.d.ts.map

package/dist/tailwind-plugin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tailwind-plugin.d.ts","sourceRoot":"","sources":["../src/tailwind-plugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EACL,KAAK,OAAO,IAAI,iBAAiB,EACjC,UAAU,EACX,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,qBAAqB,CAAC;IACtD;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,GAAG,MAAM,CAAC;IAEvC,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAG/B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,KAAK,IAAI,GACL,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,kBAAkB,GAClB,SAAS,GACT,oBAAoB,GACpB,MAAM,GACN,iBAAiB,GACjB,QAAQ,GACR,SAAS,GACT,oBAAoB,GACpB,WAAW,GACX,sBAAsB,GACtB,QAAQ,GACR,mBAAmB,GACnB,MAAM,CAAC;AAEX,KAAK,KAAK,GAAG,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAElC,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,KAAK,CAAC;IACZ,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB;AAwFD,eAAO,MAAM,MAAM;;;cAlKH,CAAC;;;CAoShB,CAAC;AAEF,wBAAgB,YAAY,CAAC,OAAO,GAAE,aAAkB,GAAG,aAAa,CAWvE;AAED,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/tailwind-plugin.js

@@ -1,199 +0,0 @@
-import plugin from 'tailwindcss/plugin';
-import { presets } from './theme/colors';
-import { animations } from './theme/animations';
-import { typography, } from './theme/typography';
-function getThemeStyles(prefix, theme) {
-    return Object.fromEntries(Object.entries(theme).map(([k, v]) => [variableName(prefix, k), v]));
-}
-function variableName(prefix, name) {
-    return `--${[prefix, name].filter(Boolean).join('-')}`;
-}
-function createTailwindColors(prefix, cloneToGlobal) {
-    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());
-}
-function createTailwindUtilities(prefix) {
-    const append = prefix.length > 0 ? prefix + '-' : prefix;
-    return {
-        [`.${append}steps`]: {
-            'counter-reset': 'step',
-            'border-left-width': '1px',
-            'margin-left': '1rem',
-            'padding-left': '1.75rem',
-            position: 'relative',
-        },
-        [`.${append}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',
-            },
-        },
-    };
-}
-export const docsUi = plugin.withOptions(({ cssPrefix = 'fd', preset = 'default', layoutWidth = '100vw', addGlobalUtils = true, } = {}) => {
-    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-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)',
-            },
-            '.dark': getThemeStyles(cssPrefix, dark),
-            '*': {
-                'border-color': `theme('colors.fd-border')`,
-            },
-            "[data-rmiz-modal-overlay='visible']": {
-                'background-color': `theme('colors.fd-background')`,
-            },
-            body: {
-                'background-color': `theme('colors.fd-background')`,
-                color: `theme('colors.fd-foreground')`,
-            },
-        });
-        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',
-            },
-        });
-        if (addGlobalUtils) {
-            addUtilities(createTailwindUtilities(''));
-        }
-        addUtilities(createTailwindUtilities('fd'));
-    };
-}, ({ cssPrefix = 'fd', 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',
-                    },
-                }
-                : 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({
-                disableRoundedTable: options.disableRoundedTable,
-                ...options.typography,
-            }),
-            docsUi(options),
-        ],
-    };
-}
-export { typography };
-export { presets } from './theme/colors';