diff --git a/bun.lock b/bun.lock index b7d5adcd99..fdd3386a05 100644 --- a/bun.lock +++ b/bun.lock @@ -135,7 +135,6 @@ "@radix-ui/react-tooltip": "^1.1.8", "@sindresorhus/fnv1a": "^3.1.0", "@tailwindcss/container-queries": "^0.1.1", - "@tailwindcss/typography": "^0.5.16", "@tusbar/cache-control": "^1.0.2", "ai": "^4.2.2", "assert-never": "catalog:", @@ -1479,8 +1478,6 @@ "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.11", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.11", "@tailwindcss/oxide": "4.1.11", "postcss": "^8.4.41", "tailwindcss": "4.1.11" } }, "sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA=="], - "@tailwindcss/typography": ["@tailwindcss/typography@0.5.16", "", { "dependencies": { "lodash.castarray": "^4.4.0", "lodash.isplainobject": "^4.0.6", "lodash.merge": "^4.6.2", "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA=="], - "@tanstack/virtual-core": ["@tanstack/virtual-core@3.10.8", "", {}, "sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA=="], "@tanstack/vue-virtual": ["@tanstack/vue-virtual@3.10.8", "", { "dependencies": { "@tanstack/virtual-core": "3.10.8" }, "peerDependencies": { "vue": "^2.7.0 || ^3.0.0" } }, "sha512-DB5QA8c/LfqOqIUCpSs3RdOTVroRRdqeHMqBkYrcashSZtOzIv8xbiqHgg7RYxDfkH5F3Y+e0MkuuyGNDVB0BQ=="], @@ -2323,8 +2320,6 @@ "locate-path": ["locate-path@5.0.0", "", { "dependencies": { "p-locate": "^4.1.0" } }, "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g=="], - "lodash.castarray": ["lodash.castarray@4.4.0", "", {}, "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="], - "lodash.clonedeep": ["lodash.clonedeep@4.5.0", "", {}, "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="], "lodash.debounce": ["lodash.debounce@4.0.8", "", {}, "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="], @@ -2341,8 +2336,6 @@ "lodash.isstring": ["lodash.isstring@4.0.1", "", {}, "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="], - "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="], - "lodash.once": ["lodash.once@4.1.1", "", {}, "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="], "lodash.startcase": ["lodash.startcase@4.4.0", "", {}, "sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg=="], @@ -4021,8 +4014,6 @@ "@tailwindcss/postcss/postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="], - "@tailwindcss/typography/postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="], - "@ts-morph/common/fast-glob": ["fast-glob@3.3.2", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.4" } }, "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow=="], "@ts-morph/common/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="], diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json index fc921c04c1..65b75ea3c8 100644 --- a/packages/gitbook/package.json +++ b/packages/gitbook/package.json @@ -28,7 +28,6 @@ "@radix-ui/react-tooltip": "^1.1.8", "@sindresorhus/fnv1a": "^3.1.0", "@tailwindcss/container-queries": "^0.1.1", - "@tailwindcss/typography": "^0.5.16", "@tusbar/cache-control": "^1.0.2", "ai": "^4.2.2", "assert-never": "catalog:", diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIOperation.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIOperation.tsx index 539bbba2cf..939046f9ce 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIOperation.tsx +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIOperation.tsx @@ -5,8 +5,7 @@ import { tcls } from '@/lib/tailwind'; import type { BlockProps } from '../Block'; -import './scalar.css'; -import './style.css'; +import OpenAPIStyles from '@/components/DocumentView/OpenAPI/OpenAPIStyles'; import type { AnyOpenAPIOperationsBlock } from '@/lib/openapi/types'; import { getOpenAPIContext } from './context'; @@ -47,10 +46,13 @@ async function OpenAPIOperationBody(props: BlockProps } return ( - + <> + + + ); } diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPISchemas.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPISchemas.tsx index 06023a89ce..d356ca3837 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPISchemas.tsx +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPISchemas.tsx @@ -4,8 +4,7 @@ import { OpenAPISchemas as BaseOpenAPISchemas } from '@gitbook/react-openapi'; import type { BlockProps } from '../Block'; -import './scalar.css'; -import './style.css'; +import OpenAPIStyles from '@/components/DocumentView/OpenAPI/OpenAPIStyles'; import type { OpenAPISchemasBlock } from '@/lib/openapi/types'; import { getOpenAPIContext } from './context'; @@ -48,11 +47,14 @@ async function OpenAPISchemasBody(props: BlockProps) { } return ( - + <> + + + ); } diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIStyles.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIStyles.tsx new file mode 100644 index 0000000000..f2449c0ed7 --- /dev/null +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIStyles.tsx @@ -0,0 +1,27 @@ +'use client'; + +/** + * Dummy component to lazy load the OpenAPI CSS. + */ +export default function OpenAPIStyles() { + // Load the CSS as soon as possible (this is why we don't use an effect hook here) + // We lazy load the CSS to avoidNext bundling it in the main bundle + loadCSS(); + + return null; +} + +let loaded = false; + +function loadCSS() { + if (loaded || typeof window === 'undefined') { + return; + } + + loaded = true; + + // @ts-ignore + import('./style.css').then(() => { + document.body.classList.add('openapi-styles-loaded'); + }); +} diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIWebhook.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIWebhook.tsx index 3453cf8d77..259315f2d1 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIWebhook.tsx +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIWebhook.tsx @@ -5,8 +5,7 @@ import { tcls } from '@/lib/tailwind'; import type { BlockProps } from '../Block'; -import './scalar.css'; -import './style.css'; +import OpenAPIStyles from '@/components/DocumentView/OpenAPI/OpenAPIStyles'; import type { OpenAPIWebhookBlock } from '@/lib/openapi/types'; import { getOpenAPIContext } from './context'; @@ -49,10 +48,13 @@ async function OpenAPIWebhookBody(props: BlockProps) { } return ( - + <> + + + ); } diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx index e1b6b9a63f..c07c27dfa3 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx @@ -9,8 +9,6 @@ import { PlainCodeBlock } from '../CodeBlock'; import { DocumentView } from '../DocumentView'; import { Heading } from '../Heading'; -import './scalar.css'; -import './style.css'; import { DEFAULT_LOCALE, getSpaceLocale } from '@/intl/server'; import type { GitBookAnyContext } from '@/lib/context'; import type { diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css index ca2eb3e9d6..8d056b7a83 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css @@ -1,4 +1,5 @@ @reference "../../RootLayout/globals.css"; +@import './scalar.css'; /* Layout Components */ .openapi-operation, @@ -53,11 +54,6 @@ @apply font-semibold font-mono truncate; } -.openapi-description.openapi-markdown, -.openapi-description.openapi-markdown code { - @apply prose-sm; -} - /* Markdown Elements */ .openapi-markdown blockquote { @apply !ps-3; @@ -81,7 +77,7 @@ /* Markdown Base */ .openapi-markdown { - @apply prose text-tint-strong prose-p:my-2! dark:prose-invert max-w-none whitespace-normal; + @apply prose prose-sm text-tint-strong dark:prose-invert max-w-none whitespace-normal; } .openapi-markdown > *:first-child { @@ -160,7 +156,7 @@ } .openapi-schema-root-description.openapi-markdown { - @apply prose-sm text-balance mt-1.5 text-[0.813rem]! text-tint overflow-hidden font-normal! select-text prose-strong:font-semibold prose-strong:text-inherit; + @apply text-balance mt-1.5 text-[0.813rem]! text-tint overflow-hidden font-normal! select-text; } .openapi-section-schemas > .openapi-section-body > .openapi-schema-root-description { @@ -279,7 +275,7 @@ /* Schema Description */ .openapi-schema-description.openapi-markdown { - @apply prose-sm text-tint overflow-hidden text-pretty font-normal! select-text prose-strong:font-semibold prose-strong:text-inherit; + @apply text-tint overflow-hidden text-pretty font-normal! select-text; } .openapi-schema-description.openapi-markdown pre:has(code) { @@ -301,7 +297,7 @@ .openapi-schema-example, .openapi-schema-pattern, .openapi-schema-default { - @apply prose-sm text-tint; + @apply text-sm text-tint; } .openapi-schema-example code, @@ -322,7 +318,7 @@ .openapi-securities-oauth-content, .openapi-securities-scopes { - @apply prose *:!prose-sm *:text-tint; + @apply prose prose-sm text-sm *:text-tint; } .openapi-securities-oauth-content { @@ -346,7 +342,7 @@ } .openapi-securities-description.openapi-markdown { - @apply prose-sm text-tint font-normal! select-text text-pretty prose-strong:font-semibold prose-strong:text-inherit; + @apply text-tint font-normal! select-text text-pretty; } .openapi-securities-label { @@ -377,7 +373,7 @@ } .openapi-requestbody-description.openapi-markdown { - @apply prose-sm text-tint font-normal! text-pretty select-text prose-strong:font-semibold prose-strong:text-inherit; + @apply text-tint font-normal! text-pretty select-text; } /* Responses */ @@ -395,7 +391,7 @@ } .openapi-response-description.openapi-markdown { - @apply text-left prose-sm text-sm leading-tight text-tint select-text prose-strong:font-semibold prose-strong:text-inherit; + @apply text-left leading-tight text-tint select-text; } .openapi-disclosure-group-trigger[aria-expanded="false"] .openapi-response-description.openapi-markdown { diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css index 42bc3868e1..53905e89f8 100644 --- a/packages/gitbook/src/components/RootLayout/globals.css +++ b/packages/gitbook/src/components/RootLayout/globals.css @@ -2,6 +2,13 @@ @config '../../../tailwind.config.ts'; +@import './prose.css'; + +/* Prevent flash of unstyled OpenAPI blocks while the OpenAPI styles are lazy-loaded. */ +body:not(.openapi-styles-loaded) .openapi-block { + display: none; +} + /* The default border color has changed to `currentcolor` in Tailwind CSS v4, so we've added these compatibility styles to make sure everything still diff --git a/packages/gitbook/src/components/RootLayout/prose.css b/packages/gitbook/src/components/RootLayout/prose.css new file mode 100644 index 0000000000..14723859f0 --- /dev/null +++ b/packages/gitbook/src/components/RootLayout/prose.css @@ -0,0 +1,849 @@ +/* =================================================================== + TW-PROSE - CSS-only Typography for Tailwind CSS v4 + Compatible with @utility directives and Tailwind v4 variables + =================================================================== */ + + + /* Base */ + @utility prose { + color: var(--tw-prose-body); + max-width: 65ch; + font-size: var(--text-base); + line-height: calc(var(--leading-normal) + 0.25); + + --tw-prose-body: oklch(37.3% .034 259.733); + --tw-prose-headings: oklch(21% .034 264.665); + --tw-prose-lead: oklch(44.6% .03 256.802); + --tw-prose-links: oklch(21% .034 264.665); + --tw-prose-bold: oklch(21% .034 264.665); + --tw-prose-counters: oklch(55.1% .027 264.364); + --tw-prose-bullets: oklch(87.2% .01 258.338); + --tw-prose-hr: oklch(92.8% .006 264.531); + --tw-prose-quotes: oklch(21% .034 264.665); + --tw-prose-quote-borders: oklch(92.8% .006 264.531); + --tw-prose-captions: oklch(55.1% .027 264.364); + --tw-prose-kbd: oklch(21% .034 264.665); + --tw-prose-kbd-shadows: NaN NaN NaN; + --tw-prose-code: oklch(21% .034 264.665); + --tw-prose-pre-code: oklch(92.8% .006 264.531); + --tw-prose-pre-bg: oklch(27.8% .033 256.848); + --tw-prose-th-borders: oklch(87.2% .01 258.338); + --tw-prose-td-borders: oklch(92.8% .006 264.531); + --tw-prose-invert-body: oklch(87.2% .01 258.338); + --tw-prose-invert-headings: #fff; + --tw-prose-invert-lead: oklch(70.7% .022 261.325); + --tw-prose-invert-links: #fff; + --tw-prose-invert-bold: #fff; + --tw-prose-invert-counters: oklch(70.7% .022 261.325); + --tw-prose-invert-bullets: oklch(44.6% .03 256.802); + --tw-prose-invert-hr: oklch(37.3% .034 259.733); + --tw-prose-invert-quotes: oklch(96.7% .003 264.542); + --tw-prose-invert-quote-borders: oklch(37.3% .034 259.733); + --tw-prose-invert-captions: oklch(70.7% .022 261.325); + --tw-prose-invert-kbd: #fff; + --tw-prose-invert-kbd-shadows: 255 255 255; + --tw-prose-invert-code: #fff; + --tw-prose-invert-pre-code: oklch(87.2% .01 258.338); + --tw-prose-invert-pre-bg: #00000080; + --tw-prose-invert-th-borders: oklch(44.6% .03 256.802); + --tw-prose-invert-td-borders: oklch(37.3% .034 259.733); + + & p { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + & [class~='lead'] { + color: var(--tw-prose-lead); + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + & a { + color: var(--tw-prose-links); + text-decoration: underline; + font-weight: var(--font-weight-medium); + } + + & strong { + color: 'inherit'; + font-weight: var(--font-weight-semibold); + } + + & a strong { + color: inherit; + } + + & blockquote strong { + color: inherit; + } + + & thead th strong { + color: inherit; + } + + & ol { + list-style-type: decimal; + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-inline-start: 1.625em; + } + + & ol[type='A'] { + list-style-type: upper-alpha; + } + + & ol[type='a'] { + list-style-type: lower-alpha; + } + + & ol[type='A' s] { + list-style-type: upper-alpha; + } + + & ol[type='a' s] { + list-style-type: lower-alpha; + } + + & ol[type='I'] { + list-style-type: upper-roman; + } + + & ol[type='i'] { + list-style-type: lower-roman; + } + + & ol[type='I' s] { + list-style-type: upper-roman; + } + + & ol[type='i' s] { + list-style-type: lower-roman; + } + + & ol[type='1'] { + list-style-type: decimal; + } + + & ul { + list-style-type: disc; + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-inline-start: 1.625em; + } + + & ol > li::marker { + font-weight: var(--font-weight-normal); + color: var(--tw-prose-counters); + } + + & ul > li::marker { + color: var(--tw-prose-bullets); + } + + & dt { + color: var(--tw-prose-headings); + font-weight: var(--font-weight-semibold); + margin-top: 1.25em; + } + + & hr { + border-color: var(--tw-prose-hr); + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; + } + + & blockquote { + font-weight: var(--font-weight-medium); + font-style: italic; + color: var(--tw-prose-quotes); + border-inline-start-width: 0.25rem; + border-inline-start-color: var(--tw-prose-quote-borders); + quotes: '\201C' '\201D' '\2018' '\2019'; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-inline-start: 1em; + } + + & blockquote p:first-of-type::before { + content: open-quote; + } + + & blockquote p:last-of-type::after { + content: close-quote; + } + + & h1 { + color: var(--tw-prose-headings); + font-weight: var(--font-weight-extrabold); + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + & h1 strong { + font-weight: var(--font-weight-black); + color: inherit; + } + + & h2 { + color: var(--tw-prose-headings); + font-weight: var(--font-weight-bold); + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + + & h2 strong { + font-weight: var(--font-weight-extrabold); + color: inherit; + } + + & h3 { + color: var(--tw-prose-headings); + font-weight: var(--font-weight-semibold); + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + & h3 strong { + font-weight: var(--font-weight-bold); + color: inherit; + } + + & h4 { + color: var(--tw-prose-headings); + font-weight: var(--font-weight-semibold); + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: var(--leading-normal); + } + + & h4 strong { + font-weight: var(--font-weight-bold); + color: inherit; + } + + & img { + margin-top: 2em; + margin-bottom: 2em; + } + + & picture { + display: block; + margin-top: 2em; + margin-bottom: 2em; + } + + & video { + margin-top: 2em; + margin-bottom: 2em; + } + + & kbd { + font-weight: var(--font-weight-medium); + font-family: inherit; + color: var(--tw-prose-kbd); + box-shadow: + 0 0 0 1px oklch(from var(--tw-prose-kbd-shadows) l c h / 10%), + 0 3px 0 oklch(from var(--tw-prose-kbd-shadows) l c h / 10%); + font-size: 0.875em; + border-radius: 0.3125rem; + padding-top: 0.1875em; + padding-inline-end: 0.375em; + padding-bottom: 0.1875em; + padding-inline-start: 0.375em; + } + + & code { + color: var(--tw-prose-code); + font-weight: var(--font-weight-normal); + font-size: 0.875em; + } + + & code::before { + content: '`'; + } + + & code::after { + content: '`'; + } + + & a code { + color: inherit; + } + + & h1 code { + color: inherit; + } + + & h2 code { + color: inherit; + font-size: 0.875em; + } + + & h3 code { + color: inherit; + font-size: 0.9em; + } + + & h4 code { + color: inherit; + } + + & blockquote code { + color: inherit; + } + + & thead th code { + color: inherit; + } + + & pre { + color: var(--tw-prose-pre-code); + background-color: var(--tw-prose-pre-bg); + overflow-x: auto; + font-weight: var(--font-weight-normal); + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: var(--radius-md); + padding-top: 0.8571429em; + padding-inline-end: 1.1428571em; + padding-bottom: 0.8571429em; + padding-inline-start: 1.1428571em; + } + + & pre:has(code){ + color: var(--tw-prose-pre-code); + background-color: var(--tw-prose-pre-bg); + } + + & pre code { + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: inherit; + color: inherit; + font-size: inherit; + font-family: inherit; + line-height: inherit; + } + + & pre code::before { + content: none; + } + + & pre code::after { + content: none; + } + + & table { + width: 100%; + table-layout: auto; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; + } + + & thead { + border-bottom-width: 1px; + border-bottom-color: var(--tw-prose-th-borders); + } + + & thead th { + color: var(--tw-prose-headings); + font-weight: var(--font-weight-semibold); + vertical-align: bottom; + padding-inline-end: 0.5714286em; + padding-bottom: 0.5714286em; + padding-inline-start: 0.5714286em; + } + + & tbody tr { + border-bottom-width: 1px; + border-bottom-color: var(--tw-prose-td-borders); + } + + & tbody tr:last-child { + border-bottom-width: 0; + } + + & tbody td { + vertical-align: baseline; + } + + & tfoot { + border-top-width: 1px; + border-top-color: var(--tw-prose-th-borders); + } + + & tfoot td { + vertical-align: top; + } + + & th, & td { + text-align: start; + } + + & figure > * { + margin-top: 0; + margin-bottom: 0; + } + + & figcaption { + color: var(--tw-prose-captions); + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + + & picture > img { + margin-top: 0; + margin-bottom: 0; + } + + & li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + & ol > li { + padding-inline-start: 0.375em; + } + + & ul > li { + padding-inline-start: 0.375em; + } + + & > ul > li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + & > ul > li > p:first-child { + margin-top: 1.25em; + } + + & > ul > li > p:last-child { + margin-bottom: 1.25em; + } + + & > ol > li > p:first-child { + margin-top: 1.25em; + } + + & > ol > li > p:last-child { + margin-bottom: 1.25em; + } + + & ul ul, & ul ol, & ol ul, & ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + & dl { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + & dd { + margin-top: 0.5em; + padding-inline-start: 1.625em; + } + + & hr + * { + margin-top: 0; + } + + & h2 + * { + margin-top: 0; + } + + & h3 + * { + margin-top: 0; + } + + & h4 + * { + margin-top: 0; + } + + & thead th:first-child { + padding-inline-start: 0; + } + + & thead th:last-child { + padding-inline-end: 0; + } + + & tbody td, & tfoot td { + padding-top: 0.5714286em; + padding-inline-end: 0.5714286em; + padding-bottom: 0.5714286em; + padding-inline-start: 0.5714286em; + } + + & tbody td:first-child, & tfoot td:first-child { + padding-inline-start: 0; + } + + & tbody td:last-child, & tfoot td:last-child { + padding-inline-end: 0; + } + + & figure { + margin-top: 2em; + margin-bottom: 2em; + } + + & > :first-child { + margin-top: 0; + } + + & > :last-child { + margin-bottom: 0; + } + } + + @utility prose-sm { + font-size: var(--text-sm); + line-height: 1.71429; + + &.prose { + font-size: var(--text-sm); + line-height: 1.71429; + } + + & p, + &.prose p { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + & [class~='lead'], + &.prose [class~='lead'] { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + & blockquote, + &.prose blockquote { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-inline-start: 1.1111111em; + } + + & h1, + &.prose h1 { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; + } + + & h2, + &.prose h2 { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; + } + + & h3, + &.prose h3 { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + & h4, + &.prose h4 { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; + } + + & img, + &.prose img { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + & picture, + &.prose picture { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + & picture > img, + &.prose picture > img { + margin-top: 0; + margin-bottom: 0; + } + + & video, + &.prose video { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + & kbd, + &.prose kbd { + font-size: 0.8571429em; + border-radius: 0.3125rem; + padding-top: 0.1428571em; + padding-inline-end: 0.3571429em; + padding-bottom: 0.1428571em; + padding-inline-start: 0.3571429em; + } + + & code, + &.prose code { + font-size: 0.8571429em; + } + + & h2 code, + &.prose h2 code { + font-size: 0.9em; + } + + & h3 code, + &.prose h3 code { + font-size: 0.8888889em; + } + + & pre, + &.prose pre { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: var(--radius-sm); + padding-top: 0.6666667em; + padding-inline-end: 1em; + padding-bottom: 0.6666667em; + padding-inline-start: 1em; + } + + & ol, + &.prose ol { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + padding-inline-start: 1.5714286em; + } + + & ul, + &.prose ul { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + padding-inline-start: 1.5714286em; + } + + & li, + &.prose li { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; + } + + & ol > li, + &.prose ol > li { + padding-inline-start: 0.4285714em; + } + + & ul > li, + &.prose ul > li { + padding-inline-start: 0.4285714em; + } + + & > ul > li p, + &.prose > ul > li p { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + & > ul > li > p:first-child, + &.prose > ul > li > p:first-child { + margin-top: 1.1428571em; + } + + & > ul > li > p:last-child, + &.prose > ul > li > p:last-child { + margin-bottom: 1.1428571em; + } + + & > ol > li > p:first-child, + &.prose > ol > li > p:first-child { + margin-top: 1.1428571em; + } + + & > ol > li > p:last-child, + &.prose > ol > li > p:last-child { + margin-bottom: 1.1428571em; + } + + & ul ul, + & ul ol, + & ol ul, + & ol ol, + &.prose ul ul, + &.prose ul ol, + &.prose ol ul, + &.prose ol ol { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + & dl, + &.prose dl { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + & dt, + &.prose dt { + margin-top: 1.1428571em; + } + + & dd, + &.prose dd { + margin-top: 0.2857143em; + padding-inline-start: 1.5714286em; + } + + & hr, + &.prose hr { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; + } + + & hr + *, + &.prose hr + * { + margin-top: 0; + } + + & h2 + *, + &.prose h2 + * { + margin-top: 0; + } + + & h3 + *, + &.prose h3 + * { + margin-top: 0; + } + + & h4 + *, + &.prose h4 + * { + margin-top: 0; + } + + & table, + &.prose table { + font-size: 0.8571429em; + line-height: var(--leading-normal); + } + + & thead th, + &.prose thead th { + padding-inline-end: 1em; + padding-bottom: 0.6666667em; + padding-inline-start: 1em; + } + + & thead th:first-child, + &.prose thead th:first-child { + padding-inline-start: 0; + } + + & thead th:last-child, + &.prose thead th:last-child { + padding-inline-end: 0; + } + + & tbody td, + & tfoot td, + &.prose tbody td, + &.prose tfoot td { + padding-top: 0.6666667em; + padding-inline-end: 1em; + padding-bottom: 0.6666667em; + padding-inline-start: 1em; + } + + & tbody td:first-child, + & tfoot td:first-child, + &.prose tbody td:first-child, + &.prose tfoot td:first-child { + padding-inline-start: 0; + } + + & tbody td:last-child, + & tfoot td:last-child, + &.prose tbody td:last-child, + &.prose tfoot td:last-child { + padding-inline-end: 0; + } + + & figure, + &.prose figure { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + & figure > *, + &.prose figure > * { + margin-top: 0; + margin-bottom: 0; + } + + & figcaption, + &.prose figcaption { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; + } + + & > :first-child, + &.prose > :first-child { + margin-top: 0; + } + + & > :last-child, + &.prose > :last-child { + margin-bottom: 0; + } + } + + + /* Invert (for dark mode) */ + @utility prose-invert { + --tw-prose-body: var(--tw-prose-invert-body); + --tw-prose-headings: var(--tw-prose-invert-headings); + --tw-prose-lead: var(--tw-prose-invert-lead); + --tw-prose-links: var(--tw-prose-invert-links); + --tw-prose-bold: var(--tw-prose-invert-bold); + --tw-prose-counters: var(--tw-prose-invert-counters); + --tw-prose-bullets: var(--tw-prose-invert-bullets); + --tw-prose-hr: var(--tw-prose-invert-hr); + --tw-prose-quotes: var(--tw-prose-invert-quotes); + --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders); + --tw-prose-captions: var(--tw-prose-invert-captions); + --tw-prose-kbd: var(--tw-prose-invert-kbd); + --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows); + --tw-prose-code: var(--tw-prose-invert-code); + --tw-prose-pre-code: var(--tw-prose-invert-pre-code); + --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg); + --tw-prose-th-borders: var(--tw-prose-invert-th-borders); + --tw-prose-td-borders: var(--tw-prose-invert-td-borders); + } \ No newline at end of file diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts index 8d3ab5b85c..02abce445e 100644 --- a/packages/gitbook/tailwind.config.ts +++ b/packages/gitbook/tailwind.config.ts @@ -1,5 +1,4 @@ import containerQueries from '@tailwindcss/container-queries'; -import typography from '@tailwindcss/typography'; import type { Config } from 'tailwindcss'; import plugin from 'tailwindcss/plugin'; @@ -671,7 +670,6 @@ const config: Config = { }); }), containerQueries, - typography, ], }; export default config;