UI: fix custom theme with Typography plugin

.changeset/late-emus-dress.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix custom `theme` with Typography plugin

packages/ui/src/tailwind-plugin.ts

@@ -6,10 +6,9 @@ import {
   type Options as TypographyOptions,
   typography,
 } from './theme/typography';
-import type { StyleOptions } from '@/theme/typography/styles';
 
 export interface DocsUIOptions
-  extends Pick<StyleOptions, 'disableRoundedTable'> {
+  extends Pick<TypographyOptions, 'disableRoundedTable'> {
   /**
    * Prefix to the variable name of colors
    *

packages/ui/src/theme/typography/index.ts

@@ -2,9 +2,15 @@ import * as styles from './styles';
 import plugin from 'tailwindcss/plugin';
 import merge from 'lodash.merge';
 import parser, { type Pseudo } from 'postcss-selector-parser';
+import type { Config } from './styles';
 
-export interface Options extends styles.StyleOptions {
+export interface Options {
   className?: string;
+
+  /**
+   * Disable custom table styles
+   */
+  disableRoundedTable?: boolean;
 }
 
 interface Context {
@@ -32,7 +38,7 @@ function inWhere(
 }
 
 function configToCss(
-  config: object = {},
+  config: Config = {},
   { className, modifier, prefix }: Options & Context,
 ) {
   function updateSelector(
@@ -61,7 +67,7 @@ function configToCss(
     return [k, v];
   }
 
-  const css = 'css' in config ? config.css : [];
+  const css = config.css ?? [];
   return Object.fromEntries(
     Object.entries(merge({}, ...(Array.isArray(css) ? css : [css]))).map(
       ([k, v]) => updateSelector(k, v),
@@ -172,11 +178,22 @@ export const typography = plugin.withOptions<Options>(
       }
 
       addComponents({
-        [`.${className}`]: configToCss(modifiers.DEFAULT(styleOptions), {
-          className,
-          modifier: 'DEFAULT',
-          prefix,
-        }),
+        [`.${className}`]: configToCss(
+          {
+            ...modifiers.DEFAULT,
+            css: [
+              ...(modifiers.DEFAULT.css ?? []),
+              styleOptions.disableRoundedTable
+                ? modifiers.normalTable
+                : modifiers.roundedTable,
+            ],
+          },
+          {
+            className,
+            modifier: 'DEFAULT',
+            prefix,
+          },
+        ),
       });
     };
   },

packages/ui/src/theme/typography/styles.ts

@@ -32,7 +32,7 @@ const colors = {
   '--tw-prose-kbd-shadows': `theme('colors.fd-primary.DEFAULT / 50%')`,
 };
 
-const roundedTable = {
+export const roundedTable = {
   table: {
     borderCollapse: 'separate',
     borderSpacing: '0',
@@ -65,7 +65,7 @@ const roundedTable = {
   },
 };
 
-const normalTable = {
+export const normalTable = {
   thead: {
     borderBottomWidth: '1px',
     borderBottomColor: 'var(--tw-prose-th-borders)',
@@ -116,14 +116,11 @@ const normalTable = {
   },
 };
 
-export interface StyleOptions {
-  /**
-   * Disable custom table styles
-   */
-  disableRoundedTable?: boolean;
+export interface Config {
+  css?: Record<string, string | Record<string, string>>[];
 }
 
-export const DEFAULT = ({ disableRoundedTable }: StyleOptions) => ({
+export const DEFAULT: Config = {
   css: [
     {
       color: 'var(--tw-prose-body)',
@@ -189,7 +186,7 @@ export const DEFAULT = ({ disableRoundedTable }: StyleOptions) => ({
       },
       hr: {
         borderColor: 'var(--tw-prose-hr)',
-        borderTopWidth: 1,
+        borderTopWidth: '1px',
         marginTop: em(48, 16),
         marginBottom: em(48, 16),
       },
@@ -439,6 +436,5 @@ export const DEFAULT = ({ disableRoundedTable }: StyleOptions) => ({
         marginBottom: '0',
       },
     },
-    disableRoundedTable ? normalTable : roundedTable,
   ],
-});
+};