fix(ui): fix typography of anchor in heading

tszhong0411 · Feb 6, 2025 · 4c0a9c4 · 4c0a9c4
1 parent d000e75
commit 4c0a9c4
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/.changeset/flat-maps-lick.md b/.changeset/flat-maps-lick.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Fix typography of anchor in heading
diff --git a/apps/docs/src/components/mdx/heading.tsx b/apps/docs/src/components/mdx/heading.tsx
@@ -19,7 +19,7 @@ const Heading = <T extends Types = 'h1'>(props: HeadingProps<T>) => {
 
   return (
     <Component className={cn('scroll-m-32', className)} id={id} {...rest}>
-      <a href={`#${id}`} className='not-prose group'>
+      <a href={`#${id}`} className='group'>
         {children}
         <LinkIcon
           aria-label='Link to section'

diff --git a/apps/web/src/components/mdx/heading.tsx b/apps/web/src/components/mdx/heading.tsx
@@ -21,7 +21,7 @@ const Heading = <T extends Types = 'h1'>(props: HeadingProps<T>) => {
 
   return (
     <Component className={cn('scroll-m-32', className)} id={id} {...rest}>
-      <a href={`#${id}`} className='not-prose group'>
+      <a href={`#${id}`} className='group'>
         {children}
         <LinkIcon
           aria-label={t('mdx.link-to-section')}

diff --git a/packages/ui/styles/typography.css b/packages/ui/styles/typography.css
@@ -52,4 +52,18 @@
     margin-top: 16px;
     margin-bottom: 16px;
   }
+
+  :is(
+    :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-prose'], [class~='not-prose'] *))
+  ) {
+    & a {
+      text-decoration: none;
+      font-weight: inherit;
+      color: inherit;
+    }
+
+    & code {
+      font-size: inherit;
+    }
+  }
 }