mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-25 04:20:02 +00:00
UI: Replace official Tailwind CSS typography plugin
This commit is contained in:
Fuma Nama
@@ -0,0 +1,7 @@
|
||||
---
|
||||
'fumadocs-ui': minor
|
||||
---
|
||||
|
||||
**Replace official Tailwind CSS typography plugin**
|
||||
|
||||
- Other variants like `prose-sm` and `prose-gray` are removed, as it's supposed to only provide support for Fumadocs UI typography styles.
|
||||
@@ -140,7 +140,7 @@ export default function Layout({ children }: { children: ReactNode }) {
|
||||
buttonVariants({
|
||||
variant: 'secondary',
|
||||
}),
|
||||
'fixed bottom-4 right-4 gap-2 rounded-xl bg-secondary/50 text-fd-secondary-foreground/80 shadow-lg backdrop-blur-lg md:bottom-8 md:right-8',
|
||||
'fixed bottom-4 right-4 z-10 gap-2 rounded-xl bg-secondary/50 text-fd-secondary-foreground/80 shadow-lg backdrop-blur-lg md:bottom-8 md:right-8',
|
||||
)}
|
||||
>
|
||||
<MessageCircle className="size-4" />
|
||||
|
||||
@@ -449,13 +449,11 @@ export function Trigger(props: ButtonHTMLAttributes<HTMLButtonElement>) {
|
||||
<DialogClose
|
||||
aria-label="Close Dialog"
|
||||
tabIndex={-1}
|
||||
className={cn(
|
||||
'absolute right-1 top-1 rounded-full bg-fd-muted p-1.5 text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground',
|
||||
)}
|
||||
className="absolute right-1 top-1 rounded-full p-1.5 text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground"
|
||||
>
|
||||
<X className="size-4" />
|
||||
</DialogClose>
|
||||
<div className="bg-fd-secondary px-2.5 py-2">
|
||||
<div className="bg-fd-muted px-2.5 py-2">
|
||||
<div className="flex flex-row items-center">
|
||||
<button
|
||||
className={cn(
|
||||
|
||||
@@ -24,3 +24,10 @@ Hello World dsasfdafsd
|
||||
### Heading
|
||||
|
||||
#### Heading
|
||||
|
||||
| Head | Description |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| `hello` | Hello World |
|
||||
| very **important** | Hey |
|
||||
| _Surprisingly_ | Fumadocs |
|
||||
| very long text that looks weird | hello world hello world hello world |
|
||||
|
||||
@@ -71,17 +71,19 @@
|
||||
"@radix-ui/react-scroll-area": "^1.2.1",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@radix-ui/react-tabs": "^1.1.1",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"fumadocs-core": "workspace:*",
|
||||
"lodash.merge": "^4.6.2",
|
||||
"lucide-react": "^0.460.0",
|
||||
"next-themes": "^0.4.3",
|
||||
"postcss-selector-parser": "^7.0.0",
|
||||
"react-medium-image-zoom": "^5.2.11",
|
||||
"tailwind-merge": "^2.5.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"fumadocs-core": "workspace:*",
|
||||
"@fumadocs/cli": "workspace:*",
|
||||
"@next/eslint-plugin-next": "^15.0.3",
|
||||
"@types/lodash.merge": "^4.6.9",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
@@ -94,6 +96,7 @@
|
||||
"tsconfig": "workspace:*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"fumadocs-core": "workspace:*",
|
||||
"next": "14.x.x || 15.x.x",
|
||||
"react": ">= 18",
|
||||
"react-dom": ">= 18",
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
'postcss-lightningcss': {
|
||||
browsers: '>= .25%',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import typography from '@tailwindcss/typography';
|
||||
import plugin from 'tailwindcss/plugin';
|
||||
import type { CSSRuleObject, PresetsConfig } from 'tailwindcss/types/config';
|
||||
import { presets } from './theme/colors';
|
||||
import { animations } from './theme/animations';
|
||||
import { typography as typographyConfig } from './theme/typography';
|
||||
import {
|
||||
type Options as TypographyOptions,
|
||||
typography,
|
||||
} from './theme/typography';
|
||||
import { roundedTable } from '@/theme/typography/styles';
|
||||
|
||||
export interface DocsUIOptions {
|
||||
/**
|
||||
@@ -43,6 +46,8 @@ export interface DocsUIOptions {
|
||||
* Disable custom table styles
|
||||
*/
|
||||
disableRoundedTable?: boolean;
|
||||
|
||||
typography?: TypographyOptions;
|
||||
}
|
||||
|
||||
type Keys =
|
||||
@@ -272,15 +277,20 @@ export const docsUi = plugin.withOptions<DocsUIOptions>(
|
||||
export function createPreset(options: DocsUIOptions = {}): PresetsConfig {
|
||||
return {
|
||||
darkMode: 'class',
|
||||
plugins: [typography, docsUi(options)],
|
||||
plugins: [typography(options.typography ?? {}), docsUi(options)],
|
||||
theme: {
|
||||
extend: {
|
||||
typography: {
|
||||
DEFAULT: typographyConfig(options),
|
||||
DEFAULT: {
|
||||
css: {
|
||||
...(!options.disableRoundedTable ? roundedTable : undefined),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export { typography };
|
||||
export { presets } from './theme/colors';
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
import type { DocsUIOptions } from '@/tailwind-plugin';
|
||||
|
||||
const tableStyles = {
|
||||
table: {
|
||||
borderCollapse: 'separate',
|
||||
borderSpacing: '0',
|
||||
'@apply bg-fd-card rounded-lg border overflow-hidden': '',
|
||||
},
|
||||
thead: {
|
||||
border: '0',
|
||||
},
|
||||
th: {
|
||||
'@apply p-2.5 border-l bg-fd-muted': '',
|
||||
},
|
||||
'th:first-of-type': {
|
||||
'@apply border-l-0': '',
|
||||
},
|
||||
|
||||
'th, td:not(tr:last-of-type *)': {
|
||||
'@apply border-b': '',
|
||||
},
|
||||
|
||||
td: {
|
||||
'@apply border-l p-2.5': '',
|
||||
},
|
||||
'td:first-of-type': {
|
||||
'@apply border-l-0': '',
|
||||
},
|
||||
};
|
||||
|
||||
export const typography = ({ disableRoundedTable }: DocsUIOptions) => ({
|
||||
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,
|
||||
...(!disableRoundedTable ? tableStyles : undefined),
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) Tailwind Labs, Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -0,0 +1,188 @@
|
||||
import * as styles from './styles';
|
||||
import plugin from 'tailwindcss/plugin';
|
||||
import merge from 'lodash.merge';
|
||||
import parser, { type Pseudo } from 'postcss-selector-parser';
|
||||
|
||||
export interface Options {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface Context {
|
||||
prefix: (v: string) => string;
|
||||
modifier?: string;
|
||||
}
|
||||
|
||||
function inWhere(
|
||||
selector: string,
|
||||
{ className, prefix, modifier }: Options & Context,
|
||||
) {
|
||||
const prefixedNot = prefix(`.not-${className}`).slice(1);
|
||||
const selectorPrefix = selector.startsWith('>')
|
||||
? `${modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`} `
|
||||
: '';
|
||||
|
||||
// Parse the selector, if every component ends in the same pseudo element(s) then move it to the end
|
||||
const [trailingPseudo, rebuiltSelector] = commonTrailingPseudos(selector);
|
||||
|
||||
if (trailingPseudo) {
|
||||
return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))${trailingPseudo}`;
|
||||
}
|
||||
|
||||
return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))`;
|
||||
}
|
||||
|
||||
function configToCss(
|
||||
config: object = {},
|
||||
{ className, modifier, prefix }: Options & Context,
|
||||
) {
|
||||
function updateSelector(
|
||||
k: string,
|
||||
v: unknown,
|
||||
): [k: string, v: unknown, object?] {
|
||||
if (Array.isArray(v)) {
|
||||
return [k, v];
|
||||
}
|
||||
|
||||
if (typeof v === 'object' && v !== null) {
|
||||
const nested = Object.values(v).some((prop) => typeof prop === 'object');
|
||||
if (nested) {
|
||||
return [
|
||||
inWhere(k, { className, modifier, prefix }),
|
||||
v,
|
||||
Object.fromEntries(
|
||||
Object.entries(v).map(([k, v]) => updateSelector(k, v)),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
return [inWhere(k, { className, modifier, prefix }), v];
|
||||
}
|
||||
|
||||
return [k, v];
|
||||
}
|
||||
|
||||
const css = 'css' in config ? config.css : [];
|
||||
return Object.fromEntries(
|
||||
Object.entries(merge({}, ...(Array.isArray(css) ? css : [css]))).map(
|
||||
([k, v]) => updateSelector(k, v),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
const parseSelector = parser();
|
||||
|
||||
function commonTrailingPseudos(selector: string) {
|
||||
const ast = parseSelector.astSync(selector);
|
||||
const matrix: Pseudo[][] = [];
|
||||
|
||||
// Put the pseudo elements in reverse order in a sparse, column-major 2D array
|
||||
for (const [i, sel] of ast.nodes.entries()) {
|
||||
for (const [j, child] of [...sel.nodes].reverse().entries()) {
|
||||
// We only care about pseudo elements
|
||||
if (child.type !== 'pseudo' || !child.value.startsWith('::')) {
|
||||
break;
|
||||
}
|
||||
|
||||
matrix[j] = matrix[j] || [];
|
||||
matrix[j][i] = child;
|
||||
}
|
||||
}
|
||||
|
||||
const trailingPseudos = parser.selector({
|
||||
value: '',
|
||||
});
|
||||
|
||||
// At this point the pseudo elements are in a column-major 2D array
|
||||
// This means each row contains one "column" of pseudo elements from each selector
|
||||
// We can compare all the pseudo elements in a row to see if they are the same
|
||||
for (const pseudos of matrix) {
|
||||
// It's a sparse 2D array so there are going to be holes in the rows
|
||||
// We skip those
|
||||
if (!pseudos) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const values = new Set(pseudos.map((p) => p.value));
|
||||
|
||||
// The pseudo elements are not the same
|
||||
if (values.size > 1) {
|
||||
break;
|
||||
}
|
||||
|
||||
pseudos.forEach((pseudo) => pseudo.remove());
|
||||
trailingPseudos.prepend(pseudos[0]);
|
||||
}
|
||||
|
||||
if (trailingPseudos.nodes.length) {
|
||||
return [trailingPseudos.toString(), ast.toString()];
|
||||
}
|
||||
|
||||
return [null, selector];
|
||||
}
|
||||
|
||||
const SELECTORS = [
|
||||
['headings', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'th'],
|
||||
['h1'],
|
||||
['h2'],
|
||||
['h3'],
|
||||
['h4'],
|
||||
['h5'],
|
||||
['h6'],
|
||||
['p'],
|
||||
['a'],
|
||||
['blockquote'],
|
||||
['figure'],
|
||||
['figcaption'],
|
||||
['strong'],
|
||||
['em'],
|
||||
['kbd'],
|
||||
['code'],
|
||||
['pre'],
|
||||
['ol'],
|
||||
['ul'],
|
||||
['li'],
|
||||
['table'],
|
||||
['thead'],
|
||||
['tr'],
|
||||
['th'],
|
||||
['td'],
|
||||
['img'],
|
||||
['video'],
|
||||
['hr'],
|
||||
['lead', '[class~="lead"]'],
|
||||
];
|
||||
|
||||
export const typography = plugin.withOptions<Options>(
|
||||
({ className = 'prose' } = {}) => {
|
||||
return ({ addVariant, addComponents, theme, ...rest }) => {
|
||||
const prefix = (rest as unknown as { prefix: Context['prefix'] }).prefix;
|
||||
const modifiers = theme('typography') as Record<string, object>;
|
||||
|
||||
for (const [name, ...values] of SELECTORS) {
|
||||
const selectors = values.length === 0 ? [name] : values;
|
||||
const selector = selectors.join(', ');
|
||||
|
||||
addVariant(
|
||||
`${className}-${name}`,
|
||||
`& :is(${inWhere(selector, {
|
||||
prefix,
|
||||
className,
|
||||
})})`,
|
||||
);
|
||||
}
|
||||
|
||||
addComponents({
|
||||
[`.${className}`]: configToCss(modifiers.DEFAULT, {
|
||||
className,
|
||||
modifier: 'DEFAULT',
|
||||
prefix,
|
||||
}),
|
||||
});
|
||||
};
|
||||
},
|
||||
() => {
|
||||
return {
|
||||
theme: { typography: styles },
|
||||
};
|
||||
},
|
||||
);
|
||||
@@ -0,0 +1,426 @@
|
||||
function round(num: number) {
|
||||
return num
|
||||
.toFixed(7)
|
||||
.replace(/(\.[0-9]+?)0+$/, '$1')
|
||||
.replace(/\.0$/, '');
|
||||
}
|
||||
|
||||
function rem(px: number) {
|
||||
return `${round(px / 16)}rem`;
|
||||
}
|
||||
|
||||
function em(px: number, base: number) {
|
||||
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%')`,
|
||||
};
|
||||
|
||||
export const roundedTable = {
|
||||
table: {
|
||||
borderCollapse: 'separate',
|
||||
borderSpacing: '0',
|
||||
'@apply bg-fd-card rounded-lg border overflow-hidden': '',
|
||||
},
|
||||
thead: {
|
||||
border: '0',
|
||||
},
|
||||
th: {
|
||||
'@apply !p-2.5 border-s bg-fd-muted': '',
|
||||
},
|
||||
'th:first-of-type': {
|
||||
'@apply border-s-0': '',
|
||||
},
|
||||
|
||||
'th, td:not(tr:last-of-type *)': {
|
||||
'@apply border-b': '',
|
||||
},
|
||||
|
||||
td: {
|
||||
'@apply border-s !p-2.5': '',
|
||||
},
|
||||
'td:first-of-type': {
|
||||
'@apply border-s-0': '',
|
||||
},
|
||||
};
|
||||
|
||||
export const DEFAULT = {
|
||||
css: [
|
||||
{
|
||||
color: 'var(--tw-prose-body)',
|
||||
maxWidth: 'none',
|
||||
fontSize: rem(16),
|
||||
lineHeight: round(28 / 16),
|
||||
|
||||
'[class~="lead"]': {
|
||||
fontSize: em(20, 16),
|
||||
lineHeight: round(32 / 20),
|
||||
marginTop: em(24, 20),
|
||||
marginBottom: em(24, 20),
|
||||
color: 'var(--tw-prose-lead)',
|
||||
},
|
||||
ul: {
|
||||
paddingInlineStart: '1rem',
|
||||
listStyleType: 'disc',
|
||||
marginTop: em(20, 16),
|
||||
marginBottom: em(20, 16),
|
||||
},
|
||||
li: {
|
||||
marginTop: em(8, 16),
|
||||
marginBottom: em(8, 16),
|
||||
},
|
||||
'ol > li': {
|
||||
paddingInlineStart: em(6, 16),
|
||||
},
|
||||
'ul > li': {
|
||||
paddingInlineStart: '0',
|
||||
},
|
||||
'> ul > li p': {
|
||||
marginTop: em(12, 16),
|
||||
marginBottom: em(12, 16),
|
||||
},
|
||||
'> ul > li > p:first-child': {
|
||||
marginTop: em(20, 16),
|
||||
},
|
||||
'> ul > li > p:last-child': {
|
||||
marginBottom: em(20, 16),
|
||||
},
|
||||
'> ol > li > p:first-child': {
|
||||
marginTop: em(20, 16),
|
||||
},
|
||||
'> ol > li > p:last-child': {
|
||||
marginBottom: em(20, 16),
|
||||
},
|
||||
'ul ul, ul ol, ol ul, ol ol': {
|
||||
marginTop: em(12, 16),
|
||||
marginBottom: em(12, 16),
|
||||
},
|
||||
dl: {
|
||||
marginTop: em(20, 16),
|
||||
marginBottom: em(20, 16),
|
||||
},
|
||||
dt: {
|
||||
color: 'var(--tw-prose-headings)',
|
||||
fontWeight: '600',
|
||||
marginTop: em(20, 16),
|
||||
},
|
||||
dd: {
|
||||
marginTop: em(8, 16),
|
||||
paddingInlineStart: em(26, 16),
|
||||
},
|
||||
hr: {
|
||||
borderColor: 'var(--tw-prose-hr)',
|
||||
borderTopWidth: 1,
|
||||
marginTop: em(48, 16),
|
||||
marginBottom: em(48, 16),
|
||||
},
|
||||
p: {
|
||||
marginTop: em(20, 16),
|
||||
marginBottom: em(20, 16),
|
||||
},
|
||||
strong: {
|
||||
color: 'var(--tw-prose-bold)',
|
||||
fontWeight: '600',
|
||||
},
|
||||
'a strong': {
|
||||
color: 'inherit',
|
||||
},
|
||||
'blockquote strong': {
|
||||
color: 'inherit',
|
||||
},
|
||||
'thead th strong': {
|
||||
color: 'inherit',
|
||||
},
|
||||
ol: {
|
||||
listStyleType: 'decimal',
|
||||
marginTop: em(20, 16),
|
||||
marginBottom: em(20, 16),
|
||||
paddingInlineStart: em(26, 16),
|
||||
},
|
||||
'ol[type="A"]': {
|
||||
listStyleType: 'upper-alpha',
|
||||
},
|
||||
'ol[type="a"]': {
|
||||
listStyleType: 'lower-alpha',
|
||||
},
|
||||
'ol[type="A" s]': {
|
||||
listStyleType: 'upper-alpha',
|
||||
},
|
||||
'ol[type="a" s]': {
|
||||
listStyleType: 'lower-alpha',
|
||||
},
|
||||
'ol[type="I"]': {
|
||||
listStyleType: 'upper-roman',
|
||||
},
|
||||
'ol[type="i"]': {
|
||||
listStyleType: 'lower-roman',
|
||||
},
|
||||
'ol[type="I" s]': {
|
||||
listStyleType: 'upper-roman',
|
||||
},
|
||||
'ol[type="i" s]': {
|
||||
listStyleType: 'lower-roman',
|
||||
},
|
||||
'ol[type="1"]': {
|
||||
listStyleType: 'decimal',
|
||||
},
|
||||
'ol > li::marker': {
|
||||
fontWeight: '400',
|
||||
color: 'var(--tw-prose-counters)',
|
||||
},
|
||||
'ul > li::marker': {
|
||||
color: 'var(--tw-prose-bullets)',
|
||||
},
|
||||
blockquote: {
|
||||
marginTop: em(32, 20),
|
||||
marginBottom: em(32, 20),
|
||||
paddingInlineStart: em(20, 20),
|
||||
fontWeight: '500',
|
||||
fontStyle: 'italic',
|
||||
color: 'var(--tw-prose-quotes)',
|
||||
borderInlineStartWidth: '0.25rem',
|
||||
borderInlineStartColor: 'var(--tw-prose-quote-borders)',
|
||||
quotes: '"\\201C""\\201D""\\2018""\\2019"',
|
||||
},
|
||||
'blockquote p:first-of-type::before': {
|
||||
content: 'open-quote',
|
||||
},
|
||||
'blockquote p:last-of-type::after': {
|
||||
content: 'close-quote',
|
||||
},
|
||||
h1: {
|
||||
color: 'var(--tw-prose-headings)',
|
||||
fontWeight: '800',
|
||||
fontSize: em(36, 16),
|
||||
marginTop: '0',
|
||||
marginBottom: em(32, 36),
|
||||
lineHeight: round(40 / 36),
|
||||
},
|
||||
'h1 strong': {
|
||||
fontWeight: '900',
|
||||
color: 'inherit',
|
||||
},
|
||||
h2: {
|
||||
color: 'var(--tw-prose-headings)',
|
||||
fontSize: em(24, 16),
|
||||
marginTop: em(48, 24),
|
||||
marginBottom: em(24, 24),
|
||||
lineHeight: round(32 / 24),
|
||||
fontWeight: '600',
|
||||
},
|
||||
'h2 strong': {
|
||||
fontWeight: '800',
|
||||
color: 'inherit',
|
||||
},
|
||||
h3: {
|
||||
color: 'var(--tw-prose-headings)',
|
||||
fontWeight: '600',
|
||||
fontSize: em(20, 16),
|
||||
marginTop: em(32, 20),
|
||||
marginBottom: em(12, 20),
|
||||
lineHeight: round(32 / 20),
|
||||
},
|
||||
'h3 strong': {
|
||||
fontWeight: '700',
|
||||
color: 'inherit',
|
||||
},
|
||||
h4: {
|
||||
color: 'var(--tw-prose-headings)',
|
||||
fontWeight: '600',
|
||||
marginTop: em(24, 16),
|
||||
marginBottom: em(8, 16),
|
||||
lineHeight: round(24 / 16),
|
||||
},
|
||||
'h4 strong': {
|
||||
fontWeight: '700',
|
||||
color: 'inherit',
|
||||
},
|
||||
'hr + *': {
|
||||
marginTop: '0',
|
||||
},
|
||||
'h2 + *': {
|
||||
marginTop: '0',
|
||||
},
|
||||
'h3 + *': {
|
||||
marginTop: '0',
|
||||
},
|
||||
'h4 + *': {
|
||||
marginTop: '0',
|
||||
},
|
||||
img: {
|
||||
marginTop: em(32, 16),
|
||||
marginBottom: em(32, 16),
|
||||
},
|
||||
picture: {
|
||||
display: 'block',
|
||||
marginTop: em(32, 16),
|
||||
marginBottom: em(32, 16),
|
||||
},
|
||||
'picture > img': {
|
||||
marginTop: '0',
|
||||
marginBottom: '0',
|
||||
},
|
||||
video: {
|
||||
marginTop: em(32, 16),
|
||||
marginBottom: em(32, 16),
|
||||
},
|
||||
kbd: {
|
||||
fontSize: em(14, 16),
|
||||
borderRadius: rem(5),
|
||||
paddingTop: em(3, 16),
|
||||
paddingInlineEnd: em(6, 16),
|
||||
paddingBottom: em(3, 16),
|
||||
paddingInlineStart: em(6, 16),
|
||||
fontWeight: '500',
|
||||
fontFamily: 'inherit',
|
||||
color: 'var(--tw-prose-kbd)',
|
||||
boxShadow:
|
||||
'0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows)',
|
||||
},
|
||||
code: {
|
||||
padding: '3px',
|
||||
border: 'solid 1px',
|
||||
fontSize: '13px',
|
||||
borderColor: `theme('colors.fd-border')`,
|
||||
borderRadius: '5px',
|
||||
fontWeight: '400',
|
||||
background: `theme('colors.fd-muted.DEFAULT')`,
|
||||
color: 'var(--tw-prose-code)',
|
||||
},
|
||||
'a code': {
|
||||
color: 'inherit',
|
||||
},
|
||||
'h1 code': {
|
||||
color: 'inherit',
|
||||
},
|
||||
'h2 code': {
|
||||
color: 'inherit',
|
||||
fontSize: em(21, 24),
|
||||
},
|
||||
'h3 code': {
|
||||
color: 'inherit',
|
||||
fontSize: em(18, 20),
|
||||
},
|
||||
'h4 code': {
|
||||
color: 'inherit',
|
||||
},
|
||||
'blockquote code': {
|
||||
color: 'inherit',
|
||||
},
|
||||
'thead th code': {
|
||||
color: 'inherit',
|
||||
},
|
||||
|
||||
table: {
|
||||
fontSize: em(14, 16),
|
||||
lineHeight: round(24 / 14),
|
||||
width: '100%',
|
||||
tableLayout: 'auto',
|
||||
marginTop: em(32, 16),
|
||||
marginBottom: em(32, 16),
|
||||
},
|
||||
thead: {
|
||||
borderBottomWidth: '1px',
|
||||
borderBottomColor: 'var(--tw-prose-th-borders)',
|
||||
},
|
||||
'thead th': {
|
||||
color: 'var(--tw-prose-headings)',
|
||||
fontWeight: '600',
|
||||
verticalAlign: 'bottom',
|
||||
paddingInlineEnd: em(8, 14),
|
||||
paddingBottom: em(8, 14),
|
||||
paddingInlineStart: em(8, 14),
|
||||
},
|
||||
'thead th:first-child': {
|
||||
paddingInlineStart: '0',
|
||||
},
|
||||
'thead th:last-child': {
|
||||
paddingInlineEnd: '0',
|
||||
},
|
||||
'tbody td, tfoot td': {
|
||||
paddingTop: em(8, 14),
|
||||
paddingInlineEnd: em(8, 14),
|
||||
paddingBottom: em(8, 14),
|
||||
paddingInlineStart: em(8, 14),
|
||||
},
|
||||
'tbody td:first-child, tfoot td:first-child': {
|
||||
paddingInlineStart: '0',
|
||||
},
|
||||
'tbody td:last-child, tfoot td:last-child': {
|
||||
paddingInlineEnd: '0',
|
||||
},
|
||||
'tbody tr': {
|
||||
borderBottomWidth: '1px',
|
||||
borderBottomColor: 'var(--tw-prose-td-borders)',
|
||||
},
|
||||
'tbody tr:last-child': {
|
||||
borderBottomWidth: '0',
|
||||
},
|
||||
'tbody td': {
|
||||
verticalAlign: 'baseline',
|
||||
},
|
||||
tfoot: {
|
||||
borderTopWidth: '1px',
|
||||
borderTopColor: 'var(--tw-prose-th-borders)',
|
||||
},
|
||||
'tfoot td': {
|
||||
verticalAlign: 'top',
|
||||
},
|
||||
'th, td': {
|
||||
textAlign: 'start',
|
||||
},
|
||||
|
||||
figure: {
|
||||
marginTop: em(32, 16),
|
||||
marginBottom: em(32, 16),
|
||||
},
|
||||
'figure > *': {
|
||||
marginTop: '0',
|
||||
marginBottom: '0',
|
||||
},
|
||||
figcaption: {
|
||||
color: 'var(--tw-prose-captions)',
|
||||
fontSize: em(14, 16),
|
||||
lineHeight: round(20 / 14),
|
||||
marginTop: em(12, 14),
|
||||
},
|
||||
|
||||
'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%',
|
||||
},
|
||||
},
|
||||
colors,
|
||||
{
|
||||
'> :first-child': {
|
||||
marginTop: '0',
|
||||
},
|
||||
'> :last-child': {
|
||||
marginBottom: '0',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
Generated
+30
-35
@@ -1107,21 +1107,21 @@ importers:
|
||||
'@radix-ui/react-tabs':
|
||||
specifier: ^1.1.1
|
||||
version: 1.1.1(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
|
||||
'@tailwindcss/typography':
|
||||
specifier: ^0.5.15
|
||||
version: 0.5.15([email protected])
|
||||
class-variance-authority:
|
||||
specifier: ^0.7.0
|
||||
version: 0.7.0
|
||||
fumadocs-core:
|
||||
specifier: workspace:*
|
||||
version: link:../core
|
||||
lodash.merge:
|
||||
specifier: ^4.6.2
|
||||
version: 4.6.2
|
||||
lucide-react:
|
||||
specifier: ^0.460.0
|
||||
version: 0.460.0([email protected])
|
||||
next-themes:
|
||||
specifier: ^0.4.3
|
||||
version: 0.4.3([email protected]([email protected]))([email protected])
|
||||
postcss-selector-parser:
|
||||
specifier: ^7.0.0
|
||||
version: 7.0.0
|
||||
react:
|
||||
specifier: '>= 18'
|
||||
version: 18.3.1
|
||||
@@ -1141,6 +1141,9 @@ importers:
|
||||
'@next/eslint-plugin-next':
|
||||
specifier: ^15.0.3
|
||||
version: 15.0.3
|
||||
'@types/lodash.merge':
|
||||
specifier: ^4.6.9
|
||||
version: 4.6.9
|
||||
'@types/react':
|
||||
specifier: ^18.3.12
|
||||
version: 18.3.12
|
||||
@@ -1150,6 +1153,9 @@ importers:
|
||||
eslint-config-custom:
|
||||
specifier: workspace:*
|
||||
version: link:../eslint-config-custom
|
||||
fumadocs-core:
|
||||
specifier: workspace:*
|
||||
version: link:../core
|
||||
next:
|
||||
specifier: 15.0.3
|
||||
version: 15.0.3(@opentelemetry/[email protected])([email protected]([email protected]))([email protected])
|
||||
@@ -2834,11 +2840,6 @@ packages:
|
||||
'@swc/[email protected]':
|
||||
resolution: {integrity: sha512-JL7eeCk6zWCbiYQg2xQSdLXQJl8Qoc9rXmG2cEKvHe3CKwMHwHGpfOb8frzNLmbycOo6I51qxnLnn9ESf4I20Q==}
|
||||
|
||||
'@tailwindcss/[email protected]':
|
||||
resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==}
|
||||
peerDependencies:
|
||||
tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20'
|
||||
|
||||
'@ts-morph/[email protected]':
|
||||
resolution: {integrity: sha512-kMnZz+vGGHi4GoHnLmMhGNjm44kGtKUXGnOvrKmMwAuvNjM/PgKVGfUnL7IDvK7Jb2QQ82jq3Zmp04Gy+r3Dkg==}
|
||||
|
||||
@@ -2881,6 +2882,12 @@ packages:
|
||||
'@types/[email protected]':
|
||||
resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
|
||||
|
||||
'@types/[email protected]':
|
||||
resolution: {integrity: sha512-23sHDPmzd59kUgWyKGiOMO2Qb9YtqRO/x4IhkgNUiPQ1+5MUVqi6bCZeq9nBJ17msjIMbEIO5u+XW4Kz6aGUhQ==}
|
||||
|
||||
'@types/[email protected]':
|
||||
resolution: {integrity: sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==}
|
||||
|
||||
'@types/[email protected]':
|
||||
resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
|
||||
|
||||
@@ -4455,12 +4462,6 @@ packages:
|
||||
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
|
||||
engines: {node: '>=10'}
|
||||
|
||||
[email protected]:
|
||||
resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
|
||||
|
||||
[email protected]:
|
||||
resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
|
||||
|
||||
[email protected]:
|
||||
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
||||
|
||||
@@ -5106,14 +5107,14 @@ packages:
|
||||
peerDependencies:
|
||||
postcss: ^8.1.0
|
||||
|
||||
[email protected]:
|
||||
resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
|
||||
engines: {node: '>=4'}
|
||||
|
||||
[email protected]:
|
||||
resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
|
||||
engines: {node: '>=4'}
|
||||
|
||||
[email protected]:
|
||||
resolution: {integrity: sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==}
|
||||
engines: {node: '>=4'}
|
||||
|
||||
[email protected]:
|
||||
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
|
||||
|
||||
@@ -7697,14 +7698,6 @@ snapshots:
|
||||
dependencies:
|
||||
'@swc/counter': 0.1.3
|
||||
|
||||
'@tailwindcss/[email protected]([email protected])':
|
||||
dependencies:
|
||||
lodash.castarray: 4.4.0
|
||||
lodash.isplainobject: 4.0.6
|
||||
lodash.merge: 4.6.2
|
||||
postcss-selector-parser: 6.0.10
|
||||
tailwindcss: 3.4.15
|
||||
|
||||
'@ts-morph/[email protected]':
|
||||
dependencies:
|
||||
minimatch: 9.0.5
|
||||
@@ -7755,6 +7748,12 @@ snapshots:
|
||||
|
||||
'@types/[email protected]': {}
|
||||
|
||||
'@types/[email protected]':
|
||||
dependencies:
|
||||
'@types/lodash': 4.17.13
|
||||
|
||||
'@types/[email protected]': {}
|
||||
|
||||
'@types/[email protected]':
|
||||
dependencies:
|
||||
'@types/unist': 3.0.3
|
||||
@@ -9650,10 +9649,6 @@ snapshots:
|
||||
dependencies:
|
||||
p-locate: 5.0.0
|
||||
|
||||
[email protected]: {}
|
||||
|
||||
[email protected]: {}
|
||||
|
||||
[email protected]: {}
|
||||
|
||||
[email protected]: {}
|
||||
@@ -10564,12 +10559,12 @@ snapshots:
|
||||
postcss: 8.4.49
|
||||
thenby: 1.3.4
|
||||
|
||||
postcss-selector-parser@6.0.10:
|
||||
postcss-selector-parser@6.1.2:
|
||||
dependencies:
|
||||
cssesc: 3.0.0
|
||||
util-deprecate: 1.0.2
|
||||
|
||||
postcss-selector-parser@6.1.2:
|
||||
postcss-selector-parser@7.0.0:
|
||||
dependencies:
|
||||
cssesc: 3.0.0
|
||||
util-deprecate: 1.0.2
|
||||
|
||||
Reference in New Issue
Block a user