fumadocs-ui 14.7.7 → 15.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/css/animations.css +199 -0
  2. package/css/black.css +37 -0
  3. package/css/catppuccin.css +47 -0
  4. package/css/dusk.css +45 -0
  5. package/css/neutral.css +43 -0
  6. package/css/ocean.css +46 -0
  7. package/css/preset.css +37 -0
  8. package/css/purple.css +37 -0
  9. package/css/shiki.css +65 -0
  10. package/css/style.css +13 -0
  11. package/css/vitepress.css +78 -0
  12. package/dist/components/dialog/search.d.ts +1 -0
  13. package/dist/components/dialog/search.d.ts.map +1 -1
  14. package/dist/components/dialog/search.js +9 -6
  15. package/dist/components/layout/toc.js +1 -1
  16. package/dist/components/ui/button.d.ts +1 -1
  17. package/dist/components/ui/button.d.ts.map +1 -1
  18. package/dist/components/ui/button.js +1 -0
  19. package/dist/components/ui/popover.js +1 -1
  20. package/dist/layouts/docs/sidebar.d.ts.map +1 -1
  21. package/dist/layouts/docs/sidebar.js +44 -17
  22. package/dist/layouts/docs.js +1 -1
  23. package/dist/page.client.js +1 -1
  24. package/dist/style.css +2734 -2482
  25. package/dist/theme/docs-ui.d.ts +23 -0
  26. package/dist/theme/docs-ui.d.ts.map +1 -0
  27. package/dist/theme/docs-ui.js +58 -0
  28. package/dist/theme/typography/index.d.ts +2 -7
  29. package/dist/theme/typography/index.d.ts.map +1 -1
  30. package/dist/theme/typography/index.js +6 -10
  31. package/dist/theme/typography/styles.d.ts +12 -6
  32. package/dist/theme/typography/styles.d.ts.map +1 -1
  33. package/dist/theme/typography/styles.js +31 -25
  34. package/package.json +20 -21
  35. package/dist/tailwind-plugin.d.ts +0 -58
  36. package/dist/tailwind-plugin.d.ts.map +0 -1
  37. package/dist/tailwind-plugin.js +0 -199
  38. package/dist/theme/animations.d.ts +0 -170
  39. package/dist/theme/animations.d.ts.map +0 -1
  40. package/dist/theme/animations.js +0 -95
  41. package/dist/theme/colors.d.ts +0 -12
  42. package/dist/theme/colors.d.ts.map +0 -1
  43. package/dist/theme/colors.js +0 -323
@@ -0,0 +1,23 @@
1
+ export interface DocsUIOptions {
2
+ /**
3
+ * Prefix to the variable name of colors
4
+ *
5
+ * @defaultValue 'fd'
6
+ */
7
+ cssPrefix?: string;
8
+ /**
9
+ * Add Fumadocs UI `fd-*` colors to global colors
10
+ *
11
+ * @defaultValue false
12
+ */
13
+ addGlobalColors?: boolean;
14
+ /**
15
+ * Max width of docs layout
16
+ *
17
+ * @defaultValue '100vw'
18
+ */
19
+ layoutWidth?: string;
20
+ }
21
+ export declare const docsUi: unknown;
22
+ export default docsUi;
23
+ //# sourceMappingURL=docs-ui.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,58 @@
1
+ import plugin from 'tailwindcss/plugin';
2
+ function createTailwindUtilities(prefix) {
3
+ const append = prefix.length > 0 ? prefix + '-' : prefix;
4
+ return {
5
+ [`.${append}steps`]: {
6
+ 'counter-reset': 'step',
7
+ 'border-left-width': '1px',
8
+ 'margin-left': '1rem',
9
+ 'padding-left': '1.75rem',
10
+ position: 'relative',
11
+ },
12
+ [`.${append}step:before`]: {
13
+ 'background-color': 'var(--color-fd-secondary)',
14
+ color: 'var(--color-fd-secondary-foreground)',
15
+ content: 'counter(step)',
16
+ 'counter-increment': 'step',
17
+ 'border-radius': `theme('borderRadius.full')`,
18
+ 'justify-content': 'center',
19
+ 'align-items': 'center',
20
+ width: '2rem',
21
+ height: '2rem',
22
+ 'font-size': '.875rem',
23
+ 'line-height': '1.25rem',
24
+ display: 'flex',
25
+ position: 'absolute',
26
+ left: '-1rem',
27
+ },
28
+ '.prose-no-margin': {
29
+ '& > :first-child': {
30
+ marginTop: '0',
31
+ },
32
+ '& > :last-child': {
33
+ marginBottom: '0',
34
+ },
35
+ },
36
+ };
37
+ }
38
+ export const docsUi = plugin.withOptions(({ layoutWidth = '100vw' } = {}) => {
39
+ return ({ addBase, addUtilities }) => {
40
+ addBase({
41
+ ':root': {
42
+ '--fd-sidebar-width': '0px',
43
+ '--fd-toc-width': '0px',
44
+ '--fd-layout-width': layoutWidth,
45
+ '--fd-banner-height': '0px',
46
+ '--fd-nav-height': '0px',
47
+ '--fd-tocnav-height': '0px',
48
+ '--fd-diff-remove-color': 'rgba(200,10,100,0.12)',
49
+ '--fd-diff-remove-symbol-color': 'rgb(230,10,100)',
50
+ '--fd-diff-add-color': 'rgba(14,180,100,0.12)',
51
+ '--fd-diff-add-symbol-color': 'rgb(10,200,100)',
52
+ },
53
+ });
54
+ // @ts-expect-error -- buggy Tailwind CSS types
55
+ addUtilities(createTailwindUtilities('fd'));
56
+ };
57
+ });
58
+ export default docsUi;
@@ -5,11 +5,6 @@ export interface Options {
5
5
  */
6
6
  disableRoundedTable?: boolean;
7
7
  }
8
- export declare const typography: {
9
- (options: Options): {
10
- handler: import("tailwindcss/types/config").PluginCreator;
11
- config?: Partial<import("tailwindcss/types/config").Config>;
12
- };
13
- __isOptionsFunction: true;
14
- };
8
+ export declare const typography: unknown;
9
+ export default typography;
15
10
  //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
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,EAAE,OAsCxB,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -107,9 +107,8 @@ const SELECTORS = [
107
107
  ['lead', '[class~="lead"]'],
108
108
  ];
109
109
  export const typography = plugin.withOptions(({ className = 'prose', ...styleOptions } = {}) => {
110
- return ({ addVariant, addComponents, theme, ...rest }) => {
110
+ return ({ addVariant, addComponents, ...rest }) => {
111
111
  const prefix = rest.prefix;
112
- const modifiers = theme('typography');
113
112
  for (const [name, ...values] of SELECTORS) {
114
113
  const selectors = values.length === 0 ? [name] : values;
115
114
  const selector = selectors.join(', ');
@@ -120,12 +119,12 @@ export const typography = plugin.withOptions(({ className = 'prose', ...styleOpt
120
119
  }
121
120
  addComponents({
122
121
  [`.${className}`]: configToCss({
123
- ...modifiers.DEFAULT,
122
+ ...styles.DEFAULT,
124
123
  css: [
125
- ...(modifiers.DEFAULT.css ?? []),
124
+ ...(styles.DEFAULT.css ?? []),
126
125
  styleOptions.disableRoundedTable
127
- ? modifiers.normalTable
128
- : modifiers.roundedTable,
126
+ ? styles.normalTable
127
+ : styles.roundedTable,
129
128
  ],
130
129
  }, {
131
130
  className,
@@ -134,8 +133,5 @@ export const typography = plugin.withOptions(({ className = 'prose', ...styleOpt
134
133
  }),
135
134
  });
136
135
  };
137
- }, () => {
138
- return {
139
- theme: { typography: styles },
140
- };
141
136
  });
137
+ export default typography;
@@ -2,24 +2,30 @@ export declare const roundedTable: {
2
2
  table: {
3
3
  borderCollapse: string;
4
4
  borderSpacing: string;
5
- '@apply bg-fd-card rounded-lg border overflow-hidden': string;
5
+ background: string;
6
+ borderRadius: string;
7
+ border: string;
8
+ overflow: string;
6
9
  };
7
10
  th: {
8
11
  textAlign: string;
9
- '@apply p-2.5 border-s bg-fd-muted': string;
12
+ padding: string;
13
+ 'border-inline-start': string;
14
+ background: string;
10
15
  };
11
16
  'th:first-child': {
12
- '@apply border-s-0': string;
17
+ 'border-inline-start': string;
13
18
  };
14
19
  'th:not(tr:last-child *), td:not(tr:last-child *)': {
15
- '@apply border-b': string;
20
+ 'border-bottom': string;
16
21
  };
17
22
  td: {
18
23
  textAlign: string;
19
- '@apply border-s p-2.5': string;
24
+ 'border-inline-start': string;
25
+ padding: string;
20
26
  };
21
27
  'td:first-child': {
22
- '@apply border-s-0': string;
28
+ 'border-inline-start': string;
23
29
  };
24
30
  'tfoot th, tfoot td': {
25
31
  borderTopWidth: string;
@@ -1 +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"}
1
+ {"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"}
@@ -11,45 +11,51 @@ function em(px, base) {
11
11
  return `${round(px / base)}em`;
12
12
  }
13
13
  const colors = {
14
- '--tw-prose-body': `theme('colors.fd-foreground / 90%')`,
15
- '--tw-prose-headings': `theme('colors.fd-foreground')`,
16
- '--tw-prose-lead': `theme('colors.fd-foreground')`,
17
- '--tw-prose-links': `theme('colors.fd-foreground')`,
18
- '--tw-prose-bold': `theme('colors.fd-foreground')`,
19
- '--tw-prose-counters': `theme('colors.fd-muted.foreground')`,
20
- '--tw-prose-bullets': `theme('colors.fd-muted.foreground')`,
21
- '--tw-prose-hr': `theme('colors.fd-border')`,
22
- '--tw-prose-quotes': `theme('colors.fd-foreground')`,
23
- '--tw-prose-quote-borders': `theme('colors.fd-border')`,
24
- '--tw-prose-captions': `theme('colors.fd-foreground')`,
25
- '--tw-prose-code': `theme('colors.fd-foreground')`,
26
- '--tw-prose-th-borders': `theme('colors.fd-border')`,
27
- '--tw-prose-td-borders': `theme('colors.fd-border')`,
28
- '--tw-prose-kbd': `theme('colors.fd-foreground')`,
29
- '--tw-prose-kbd-shadows': `theme('colors.fd-primary.DEFAULT / 50%')`,
14
+ '--tw-prose-body': 'color-mix(in oklab, var(--color-fd-foreground) 90%, transparent)',
15
+ '--tw-prose-headings': 'var(--color-fd-foreground)',
16
+ '--tw-prose-lead': `var(--color-fd-foreground)`,
17
+ '--tw-prose-links': `var(--color-fd-foreground)`,
18
+ '--tw-prose-bold': `var(--color-fd-foreground)`,
19
+ '--tw-prose-counters': `var(--color-fd-muted-foreground)`,
20
+ '--tw-prose-bullets': `var(--color-fd-muted-foreground)`,
21
+ '--tw-prose-hr': `var(--color-fd-border)`,
22
+ '--tw-prose-quotes': `var(--color-fd-foreground)`,
23
+ '--tw-prose-quote-borders': `var(--color-fd-border)`,
24
+ '--tw-prose-captions': `var(--color-fd-foreground)`,
25
+ '--tw-prose-code': `var(--color-fd-foreground)`,
26
+ '--tw-prose-th-borders': `var(--color-fd-border)`,
27
+ '--tw-prose-td-borders': `var(--color-fd-border)`,
28
+ '--tw-prose-kbd': `var(--color-fd-foreground)`,
29
+ '--tw-prose-kbd-shadows': `color-mix(in oklab, var(--color-fd-primary) 50%, transparent)`,
30
30
  };
31
31
  export const roundedTable = {
32
32
  table: {
33
33
  borderCollapse: 'separate',
34
34
  borderSpacing: '0',
35
- '@apply bg-fd-card rounded-lg border overflow-hidden': '',
35
+ background: 'var(--color-fd-card)',
36
+ borderRadius: 'var(--radius-lg)',
37
+ border: '1p solid var(--color-fd-border)',
38
+ overflow: 'hidden',
36
39
  },
37
40
  th: {
38
41
  textAlign: 'start',
39
- '@apply p-2.5 border-s bg-fd-muted': '',
42
+ padding: 'calc(var(--spacing) * 2.5)',
43
+ 'border-inline-start': '1px solid var(--color-fd-border)',
44
+ background: 'var(--color-fd-muted)',
40
45
  },
41
46
  'th:first-child': {
42
- '@apply border-s-0': '',
47
+ 'border-inline-start': 'none',
43
48
  },
44
49
  'th:not(tr:last-child *), td:not(tr:last-child *)': {
45
- '@apply border-b': '',
50
+ 'border-bottom': '1px solid var(--color-fd-border)',
46
51
  },
47
52
  td: {
48
53
  textAlign: 'start',
49
- '@apply border-s p-2.5': '',
54
+ 'border-inline-start': '1px solid var(--color-fd-border)',
55
+ padding: 'calc(var(--spacing) * 2.5)',
50
56
  },
51
57
  'td:first-child': {
52
- '@apply border-s-0': '',
58
+ 'border-inline-start': 'none',
53
59
  },
54
60
  'tfoot th, tfoot td': {
55
61
  borderTopWidth: '1px',
@@ -345,10 +351,10 @@ export const DEFAULT = {
345
351
  padding: '3px',
346
352
  border: 'solid 1px',
347
353
  fontSize: '13px',
348
- borderColor: `theme('colors.fd-border')`,
354
+ borderColor: `var(--color-fd-border)`,
349
355
  borderRadius: '5px',
350
356
  fontWeight: '400',
351
- background: `theme('colors.fd-muted.DEFAULT')`,
357
+ background: `var(--color-fd-muted)`,
352
358
  color: 'var(--tw-prose-code)',
353
359
  },
354
360
  'a code': {
@@ -406,7 +412,7 @@ export const DEFAULT = {
406
412
  fontWeight: '400',
407
413
  textDecoration: 'underline',
408
414
  textUnderlineOffset: '2px',
409
- textDecorationColor: `theme('colors.fd-primary.DEFAULT')`,
415
+ textDecorationColor: 'var(--color-fd-primary)',
410
416
  },
411
417
  'a:not([data-card]):hover': {
412
418
  opacity: '80%',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fumadocs-ui",
3
- "version": "14.7.7",
3
+ "version": "15.0.0",
4
4
  "description": "The framework for building a documentation website in Next.js",
5
5
  "keywords": [
6
6
  "NextJs",
@@ -13,12 +13,8 @@
13
13
  "type": "module",
14
14
  "exports": {
15
15
  "./style.css": "./dist/style.css",
16
+ "./css/*": "./css/*",
16
17
  "./image-zoom.css": "./dist/image-zoom.css",
17
- "./tailwind-plugin": {
18
- "import": "./dist/tailwind-plugin.js",
19
- "types": "./dist/tailwind-plugin.d.ts",
20
- "default": "./dist/tailwind-plugin.js"
21
- },
22
18
  "./components/*": {
23
19
  "import": "./dist/components/*.js",
24
20
  "types": "./dist/components/*.d.ts"
@@ -46,18 +42,23 @@
46
42
  "./og": {
47
43
  "import": "./dist/og.js",
48
44
  "types": "./dist/og.d.ts"
45
+ },
46
+ "./theme/*": {
47
+ "import": "./dist/theme/*.js",
48
+ "types": "./dist/theme/*.d.ts"
49
49
  }
50
50
  },
51
51
  "files": [
52
- "dist/*"
52
+ "dist/*",
53
+ "css/*"
53
54
  ],
54
55
  "dependencies": {
55
56
  "@radix-ui/react-accordion": "^1.2.2",
56
57
  "@radix-ui/react-collapsible": "^1.1.2",
57
- "@radix-ui/react-dialog": "^1.1.4",
58
+ "@radix-ui/react-dialog": "^1.1.5",
58
59
  "@radix-ui/react-direction": "^1.1.0",
59
- "@radix-ui/react-navigation-menu": "^1.2.3",
60
- "@radix-ui/react-popover": "^1.1.4",
60
+ "@radix-ui/react-navigation-menu": "^1.2.4",
61
+ "@radix-ui/react-popover": "^1.1.5",
61
62
  "@radix-ui/react-scroll-area": "^1.2.2",
62
63
  "@radix-ui/react-slot": "^1.1.1",
63
64
  "@radix-ui/react-tabs": "^1.1.2",
@@ -70,27 +71,25 @@
70
71
  "tailwind-merge": "^2.6.0"
71
72
  },
72
73
  "devDependencies": {
73
- "@next/eslint-plugin-next": "^15.1.5",
74
+ "@next/eslint-plugin-next": "^15.1.6",
75
+ "@tailwindcss/cli": "^4.0.0",
74
76
  "@types/lodash.merge": "^4.6.9",
75
77
  "@types/react": "^19.0.7",
76
78
  "@types/react-dom": "^19.0.3",
77
- "autoprefixer": "^10.4.20",
78
- "next": "15.1.5",
79
- "postcss": "^8.5.1",
80
- "postcss-cli": "^11.0.0",
81
- "tailwindcss": "^3.4.17",
79
+ "next": "15.1.6",
80
+ "tailwindcss": "^4.0.0",
82
81
  "tsc-alias": "^1.8.10",
83
82
  "@fumadocs/cli": "0.0.7",
84
83
  "eslint-config-custom": "0.0.0",
85
- "fumadocs-core": "14.7.7",
84
+ "fumadocs-core": "15.0.0",
86
85
  "tsconfig": "0.0.0"
87
86
  },
88
87
  "peerDependencies": {
89
88
  "next": "14.x.x || 15.x.x",
90
89
  "react": "18.x.x || 19.x.x",
91
90
  "react-dom": "18.x.x || 19.x.x",
92
- "tailwindcss": "^3.4.14",
93
- "fumadocs-core": "14.7.7"
91
+ "tailwindcss": "^3.4.14 || ^4.0.0",
92
+ "fumadocs-core": "15.0.0"
94
93
  },
95
94
  "peerDependenciesMeta": {
96
95
  "tailwindcss": {
@@ -103,10 +102,10 @@
103
102
  "scripts": {
104
103
  "build": "pnpm build:layout && pnpm build:tailwind",
105
104
  "build:layout": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
106
- "build:tailwind": "postcss css/*.css --dir dist && postcss src/components/*.css --dir dist/components",
105
+ "build:tailwind": "tailwindcss -i css/style.css -o ./dist/style.css && tailwindcss -i src/components/image-zoom.css -o dist/components/image-zoom.css",
107
106
  "clean": "rimraf dist",
108
107
  "dev": "concurrently \"tsc -w --project tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\" \"pnpm dev:tailwind\"",
109
- "dev:tailwind": "postcss css/*.css --dir dist --watch",
108
+ "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",
110
109
  "lint": "eslint .",
111
110
  "types:check": "tsc --noEmit"
112
111
  }
@@ -1,58 +0,0 @@
1
- import type { CSSRuleObject, PresetsConfig } from 'tailwindcss/types/config';
2
- import { presets } from './theme/colors';
3
- import { type Options as TypographyOptions, typography } from './theme/typography';
4
- export interface DocsUIOptions extends Pick<TypographyOptions, 'disableRoundedTable'> {
5
- /**
6
- * Prefix to the variable name of colors
7
- *
8
- * @defaultValue 'fd'
9
- */
10
- cssPrefix?: string;
11
- /**
12
- * Add Fumadocs UI `fd-*` colors to global colors
13
- *
14
- * @defaultValue false
15
- */
16
- addGlobalColors?: boolean;
17
- /**
18
- * Change the default styles of `container`
19
- *
20
- * @defaultValue true
21
- */
22
- modifyContainer?: boolean;
23
- /**
24
- * Max width of docs layout
25
- *
26
- * @defaultValue '100vw'
27
- */
28
- layoutWidth?: string;
29
- /**
30
- * Color preset
31
- */
32
- preset?: keyof typeof presets | Preset;
33
- typography?: TypographyOptions;
34
- /**
35
- * Add Fumadocs UI `fd-*` utilities
36
- *
37
- * @defaultValue true
38
- */
39
- addGlobalUtils?: boolean;
40
- }
41
- type Keys = 'background' | 'foreground' | 'muted' | 'muted-foreground' | 'popover' | 'popover-foreground' | 'card' | 'card-foreground' | 'border' | 'primary' | 'primary-foreground' | 'secondary' | 'secondary-foreground' | 'accent' | 'accent-foreground' | 'ring';
42
- type Theme = Record<Keys, string>;
43
- export interface Preset {
44
- light: Theme;
45
- dark: Theme;
46
- css?: CSSRuleObject;
47
- }
48
- export declare const docsUi: {
49
- (options: DocsUIOptions): {
50
- handler: import("tailwindcss/types/config").PluginCreator;
51
- config?: Partial<import("tailwindcss/types/config").Config>;
52
- };
53
- __isOptionsFunction: true;
54
- };
55
- export declare function createPreset(options?: DocsUIOptions): PresetsConfig;
56
- export { typography };
57
- export { presets } from './theme/colors';
58
- //# sourceMappingURL=tailwind-plugin.d.ts.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,199 +0,0 @@
1
- import plugin from 'tailwindcss/plugin';
2
- import { presets } from './theme/colors';
3
- import { animations } from './theme/animations';
4
- import { typography, } from './theme/typography';
5
- function getThemeStyles(prefix, theme) {
6
- return Object.fromEntries(Object.entries(theme).map(([k, v]) => [variableName(prefix, k), v]));
7
- }
8
- function variableName(prefix, name) {
9
- return `--${[prefix, name].filter(Boolean).join('-')}`;
10
- }
11
- function createTailwindColors(prefix, cloneToGlobal) {
12
- function colorToCSS(name) {
13
- return `hsl(var(${variableName(prefix, name)}) / <alpha-value>)`;
14
- }
15
- const v = new Map();
16
- for (const key of ['background', 'foreground', 'ring', 'border']) {
17
- const value = colorToCSS(key);
18
- v.set(`fd-${key}`, value);
19
- if (cloneToGlobal)
20
- v.set(key, value);
21
- }
22
- for (const key of [
23
- 'popover',
24
- 'primary',
25
- 'secondary',
26
- 'accent',
27
- 'muted',
28
- 'card',
29
- ]) {
30
- const value = {
31
- DEFAULT: colorToCSS(key),
32
- foreground: colorToCSS(`${key}-foreground`),
33
- };
34
- v.set(`fd-${key}`, value);
35
- if (cloneToGlobal)
36
- v.set(key, value);
37
- }
38
- return Object.fromEntries(v.entries());
39
- }
40
- function createTailwindUtilities(prefix) {
41
- const append = prefix.length > 0 ? prefix + '-' : prefix;
42
- return {
43
- [`.${append}steps`]: {
44
- 'counter-reset': 'step',
45
- 'border-left-width': '1px',
46
- 'margin-left': '1rem',
47
- 'padding-left': '1.75rem',
48
- position: 'relative',
49
- },
50
- [`.${append}step:before`]: {
51
- 'background-color': `theme('colors.fd-secondary.DEFAULT')`,
52
- color: `theme('colors.fd-secondary.foreground')`,
53
- content: 'counter(step)',
54
- 'counter-increment': 'step',
55
- 'border-radius': `theme('borderRadius.full')`,
56
- 'justify-content': 'center',
57
- 'align-items': 'center',
58
- width: '2rem',
59
- height: '2rem',
60
- 'font-size': '.875rem',
61
- 'line-height': '1.25rem',
62
- display: 'flex',
63
- position: 'absolute',
64
- left: '-1rem',
65
- },
66
- '.prose-no-margin': {
67
- '& > :first-child': {
68
- marginTop: '0',
69
- },
70
- '& > :last-child': {
71
- marginBottom: '0',
72
- },
73
- },
74
- };
75
- }
76
- export const docsUi = plugin.withOptions(({ cssPrefix = 'fd', preset = 'default', layoutWidth = '100vw', addGlobalUtils = true, } = {}) => {
77
- return ({ addBase, addComponents, addUtilities }) => {
78
- const { light, dark, css } = typeof preset === 'string' ? presets[preset] : preset;
79
- addBase({
80
- ':root': {
81
- ...getThemeStyles(cssPrefix, light),
82
- '--fd-sidebar-width': '0px',
83
- '--fd-toc-width': '0px',
84
- '--fd-layout-width': layoutWidth,
85
- '--fd-banner-height': '0px',
86
- '--fd-nav-height': '0px',
87
- '--fd-tocnav-height': '0px',
88
- '--fd-diff-remove-color': 'rgba(200,10,100,0.12)',
89
- '--fd-diff-remove-symbol-color': 'rgb(230,10,100)',
90
- '--fd-diff-add-color': 'rgba(14,180,100,0.12)',
91
- '--fd-diff-add-symbol-color': 'rgb(10,200,100)',
92
- },
93
- '.dark': getThemeStyles(cssPrefix, dark),
94
- '*': {
95
- 'border-color': `theme('colors.fd-border')`,
96
- },
97
- "[data-rmiz-modal-overlay='visible']": {
98
- 'background-color': `theme('colors.fd-background')`,
99
- },
100
- body: {
101
- 'background-color': `theme('colors.fd-background')`,
102
- color: `theme('colors.fd-foreground')`,
103
- },
104
- });
105
- if (css)
106
- addComponents(css);
107
- // Shiki styles
108
- addBase({
109
- '.shiki code span': {
110
- color: 'var(--shiki-light)',
111
- },
112
- '.dark .shiki code span': {
113
- color: 'var(--shiki-dark)',
114
- },
115
- '.fd-codeblock code': {
116
- display: 'grid',
117
- 'font-size': '13px',
118
- },
119
- '.shiki code .diff.remove': {
120
- backgroundColor: 'var(--fd-diff-remove-color)',
121
- opacity: '0.7',
122
- },
123
- '.shiki code .diff::before': {
124
- position: 'absolute',
125
- left: '6px',
126
- },
127
- '.shiki code .diff.remove::before': {
128
- content: "'-'",
129
- color: 'var(--fd-diff-remove-symbol-color)',
130
- },
131
- '.shiki code .diff.add': {
132
- backgroundColor: 'var(--fd-diff-add-color)',
133
- },
134
- '.shiki code .diff.add::before': {
135
- content: "'+'",
136
- color: 'var(--fd-diff-add-symbol-color)',
137
- },
138
- '.shiki code .diff': {
139
- margin: '0 -16px',
140
- padding: '0 16px',
141
- position: 'relative',
142
- },
143
- '.shiki .highlighted': {
144
- margin: '0 -16px',
145
- padding: '0 16px',
146
- backgroundColor: `theme('colors.fd-primary.DEFAULT / 10%')`,
147
- },
148
- '.shiki .highlighted-word': {
149
- padding: '1px 2px',
150
- margin: '-1px -3px',
151
- border: '1px solid',
152
- borderColor: `theme('colors.fd-primary.DEFAULT / 50%')`,
153
- backgroundColor: `theme('colors.fd-primary.DEFAULT / 10%')`,
154
- borderRadius: '2px',
155
- },
156
- });
157
- if (addGlobalUtils) {
158
- addUtilities(createTailwindUtilities(''));
159
- }
160
- addUtilities(createTailwindUtilities('fd'));
161
- };
162
- }, ({ cssPrefix = 'fd', modifyContainer = true, addGlobalColors = false, } = {}) => ({
163
- theme: {
164
- extend: {
165
- // Allow devs to use `container` to match with home layout
166
- container: modifyContainer
167
- ? {
168
- center: true,
169
- padding: '1rem',
170
- screens: {
171
- '2xl': '1400px',
172
- },
173
- }
174
- : undefined,
175
- maxWidth: {
176
- 'fd-container': '1400px',
177
- },
178
- spacing: {
179
- 'fd-layout-top': 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
180
- },
181
- colors: createTailwindColors(cssPrefix, addGlobalColors),
182
- ...animations,
183
- },
184
- },
185
- }));
186
- export function createPreset(options = {}) {
187
- return {
188
- darkMode: 'class',
189
- plugins: [
190
- typography({
191
- disableRoundedTable: options.disableRoundedTable,
192
- ...options.typography,
193
- }),
194
- docsUi(options),
195
- ],
196
- };
197
- }
198
- export { typography };
199
- export { presets } from './theme/colors';