initial replacement of tailwind class with css modules for client components

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"

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;
+}

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 {

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>
     );