From 6703dae4ea73391f3e35ca52ea02f19a032ae4f7 Mon Sep 17 00:00:00 2001
From: Nicolas Dorseuil <nicolas@gitbook.io>
Date: Mon, 16 Jun 2025 20:58:57 +0200
Subject: [PATCH] initial replacement of tailwind class with css modules for
 client components

---
 .../src/components/PageBody/PageHeader.tsx    | 19 +++----------------
 .../components/PageBody/pageBody.module.css   |  3 +++
 .../src/components/RootLayout/globals.css     | 17 +++++++++++++++++
 .../src/components/primitives/StyledLink.tsx  |  2 +-
 4 files changed, 24 insertions(+), 17 deletions(-)
 create mode 100644 packages/gitbook/src/components/PageBody/pageBody.module.css

diff --git a/packages/gitbook/src/components/PageBody/PageHeader.tsx b/packages/gitbook/src/components/PageBody/PageHeader.tsx
index 7c1ad9cbf..780b4f2ae 100644
--- a/packages/gitbook/src/components/PageBody/PageHeader.tsx
+++ b/packages/gitbook/src/components/PageBody/PageHeader.tsx
@@ -9,6 +9,8 @@ import type { GitBookSiteContext } from '@v2/lib/context';
 import { PageIcon } from '../PageIcon';
 import { StyledLink } from '../primitives';
 
+import style from './pageBody.module.css';
+
 export async function PageHeader(props: {
     context: GitBookSiteContext;
     page: RevisionPageDocument;
@@ -40,22 +42,7 @@ export async function PageHeader(props: {
                             return (
                                 <Fragment key={breadcrumb.id}>
                                     <li key={breadcrumb.id}>
-                                        <StyledLink
-                                            href={href}
-                                            className={tcls(
-                                                'no-underline',
-                                                'hover:underline',
-                                                'text-xs',
-                                                'tracking-wide',
-                                                'font-semibold',
-                                                'uppercase',
-                                                'flex',
-                                                'items-center',
-                                                'gap-1.5',
-                                                'contrast-more:underline',
-                                                'contrast-more:decoration-current'
-                                            )}
-                                        >
+                                        <StyledLink href={href} className={style.headerLink}>
                                             <PageIcon
                                                 page={breadcrumb}
                                                 style="flex size-4 items-center justify-center text-base leading-none"
diff --git a/packages/gitbook/src/components/PageBody/pageBody.module.css b/packages/gitbook/src/components/PageBody/pageBody.module.css
new file mode 100644
index 000000000..0cc96d74e
--- /dev/null
+++ b/packages/gitbook/src/components/PageBody/pageBody.module.css
@@ -0,0 +1,3 @@
+.headerLink {
+    @apply no-underline hover:underline text-xs tracking-wide font-semibold uppercase flex items-center gap-1.5 contrast-more:underline contrast-more:decoration-current;
+}
diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
index a46758c0a..c40e625b5 100644
--- a/packages/gitbook/src/components/RootLayout/globals.css
+++ b/packages/gitbook/src/components/RootLayout/globals.css
@@ -151,6 +151,23 @@
             z-index: 20;
         }
     }
+
+    .styled-link {
+        @apply underline
+               decoration-[max(0.07em,1px)]
+               underline-offset-2
+               links-accent:underline-offset-4
+               links-default:decoration-primary/6
+               links-default:text-primary-subtle
+               links-default:hover:text-primary-strong
+               links-default:contrast-more:text-primary
+               links-default:contrast-more:hover:text-primary-strong
+               links-accent:decoration-primary-subtle
+               links-accent:hover:decoration-[3px]
+               links-accent:hover:[text-decoration-skip-ink:none]
+               transition-all
+               duration-100;
+    }
 }
 
 html {
diff --git a/packages/gitbook/src/components/primitives/StyledLink.tsx b/packages/gitbook/src/components/primitives/StyledLink.tsx
index 3fb346f5f..dd873f7b5 100644
--- a/packages/gitbook/src/components/primitives/StyledLink.tsx
+++ b/packages/gitbook/src/components/primitives/StyledLink.tsx
@@ -29,7 +29,7 @@ export function StyledLink(props: Omit<LinkProps, 'style'> & { className?: Class
     const { className, ...rest } = props;
 
     return (
-        <Link {...rest} className={tcls(linkStyles, className)}>
+        <Link {...rest} className={tcls('styled-link', className)}>
             {props.children}
         </Link>
     );