diff --git a/.changeset/cuddly-singers-like.md b/.changeset/cuddly-singers-like.md new file mode 100644 index 0000000000..656291f19b --- /dev/null +++ b/.changeset/cuddly-singers-like.md @@ -0,0 +1,5 @@ +--- +"nextjs-website": patch +--- + +Fix headers style for RapiDoc, remove blue separator lines diff --git a/apps/nextjs-website/src/components/atoms/ApiViewer/ApiViewer.tsx b/apps/nextjs-website/src/components/atoms/ApiViewer/ApiViewer.tsx index 583a1e7ed6..df6cb4f2f4 100644 --- a/apps/nextjs-website/src/components/atoms/ApiViewer/ApiViewer.tsx +++ b/apps/nextjs-website/src/components/atoms/ApiViewer/ApiViewer.tsx @@ -64,6 +64,14 @@ const ApiViewer: FC = ({ specURL }) => { #api-info { margin-left: 0 !important; } + h1, h2, h3, h4, h5, #api-title, .title.tag { + margin: 0 !important; + color: ${palette.text.primary} !important; + padding-top: 24px !important; + } + .section-gap--read-mode { + border-top: 0 !important; + } .nav-method { border-radius: 4px !important; min-width: 48px !important; @@ -77,6 +85,41 @@ const ApiViewer: FC = ({ specURL }) => { background-color: ${palette.info[100]} !important; margin-right: 8px !important; } + + h1, #api-title { + font-size: 2.375rem !important; + font-weight: 700 !important; + line-height: 2.625rem !important; + padding-bottom: 24px !important; + } + + h2, .title.tag { + font-size: 1.875rem !important; + font-weight: 600 !important; + line-height: 2.625rem !important; + padding-bottom: 8px !important; + } + + h3 { + font-size: 1.5rem !important; + font-weight: 600 !important; + line-height: 1.5rem !important; + padding-bottom: 8px !important; + } + + h4 { + font-size: 1.25rem !important; + font-weight: 600 !important; + line-height: 1.5rem !important; + padding-bottom: 8px !important; + } + + h5 { + font-size: 1rem !important; + font-weight: 600 !important; + line-height: 1.5rem !important; + padding-bottom: 8px !important; + } `; rapidocEl.shadowRoot.appendChild(style); } @@ -93,7 +136,7 @@ const ApiViewer: FC = ({ specURL }) => { return () => { rapidocEl.removeEventListener('spec-loaded', injectStyles); }; - }, [palette.info]); + }, [palette.info, palette.text.primary]); // Cast strict TS error for custom element const RapiDoc = 'rapi-doc' as unknown as ElementType;