UI: Override default typography styles

fuma-nama · Oct 16, 2023 · 82c4fc6 · 82c4fc6
1 parent 2a7dc44
commit 82c4fc6
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/.changeset/curvy-apples-fold.md b/.changeset/curvy-apples-fold.md
@@ -0,0 +1,5 @@
+---
+'next-docs-ui': minor
+---
+
+Override default typography styles
diff --git a/packages/next-docs-ui/src/mdx.tsx b/packages/next-docs-ui/src/mdx.tsx
@@ -19,11 +19,7 @@ const Table = (props: ComponentPropsWithoutRef<'table'>) => (
 )
 
 function MDXContent({ children }: { children: ReactNode }) {
-  return (
-    <div className="nd-prose nd-prose-text prose-table:nd-whitespace-nowrap nd-max-w-none">
-      {children}
-    </div>
-  )
+  return <div className="nd-prose">{children}</div>
 }
 
 const defaultMdxComponents = {

diff --git a/packages/next-docs-ui/tailwind.config.js b/packages/next-docs-ui/tailwind.config.js
@@ -109,8 +109,8 @@ module.exports = {
         'accordion-down': 'accordion-down 200ms ease-out',
         'accordion-up': 'accordion-up 200ms ease-out'
       },
-      typography: () => ({
-        text: {
+      typography: {
+        DEFAULT: {
           css: {
             '--tw-prose-body': 'hsl(var(--foreground)/0.9)',
             '--tw-prose-headings': 'hsl(var(--foreground))',
@@ -126,37 +126,53 @@ module.exports = {
             '--tw-prose-code': 'hsl(var(--foreground))',
             '--tw-prose-th-borders': 'hsl(var(--border))',
             '--tw-prose-td-borders': 'hsl(var(--border))',
+            '--tw-prose-pre-bg': 'hsl(var(--secondary))',
+            '--tw-prose-kbd': 'hsl(var(--foreground))',
+            '--tw-prose-kbd-shadows': 'hsl(var(--primary)/0.5)',
+            // not used
+            '--tw-prose-pre-code': false,
+            maxWidth: 'none',
             a: {
               transition: 'opacity 0.3s',
-              'font-weight': '400',
-              'text-decoration': 'underline',
-              'text-underline-offset': '2px',
-              'text-decoration-color': 'hsl(var(--primary))',
-              '&:hover': {
-                opacity: '80%'
-              }
+              fontWeight: '400',
+              textDecoration: 'underline',
+              textUnderlineOffset: '2px',
+              textDecorationColor: 'hsl(var(--primary))'
+            },
+            'a:hover': {
+              opacity: '80%'
             },
             h2: {
-              'font-weight': '600'
+              fontWeight: '600'
+            },
+            table: {
+              whiteSpace: 'nowrap'
             },
             code: {
               padding: '4px',
-              'border-radius': '5px',
-              'font-weight': '400',
-              background: 'hsl(var(--muted))',
-              '&::before, &::after': {
-                content: 'none'
-              }
+              borderRadius: '5px',
+              fontWeight: '400',
+              background: 'hsl(var(--muted))'
+            },
+            kbd: {
+              boxShadow:
+                '0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows)'
             },
             ul: {
-              'padding-left': '1rem'
+              paddingLeft: '1rem'
             },
-            'ul>li': {
-              'font-size': '0.9rem'
-            }
+            'ul > li': {
+              fontSize: '0.9rem'
+            },
+            // Disabled styles, handled by Next Docs
+            'pre code': false,
+            'pre code::after': false,
+            'pre code::before': false,
+            'code::after': false,
+            'code::before': false
           }
         }
-      })
+      }
     }
   },
   plugins: [