Add link styles (#2861)

Author: zenoachtig

.changeset/short-pears-guess.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Add support for links style customization option

packages/gitbook/e2e/util.ts

@@ -231,11 +231,11 @@ export function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettin
  font: CustomizationFont.Inter,
  background: CustomizationBackground.Plain,
  icons: CustomizationIconsStyle.Regular,
+ links: CustomizationLinksStyle.Default,
  sidebar: {
  background: CustomizationSidebarBackgroundStyle.Default,
  list: CustomizationSidebarListStyle.Default,
  },
- links: CustomizationLinksStyle.Default,
  },
  internationalization: {
  locale: CustomizationLocale.En,

packages/gitbook/src/components/Cookies/CookiesToast.tsx

@@ -3,7 +3,7 @@
 import { Icon } from '@gitbook/icons';
 import * as React from 'react';
 
-import { Button } from '@/components/primitives';
+import { Button, StyledLink } from '@/components/primitives';
 import { useLanguage } from '@/intl/client';
 import { t, tString } from '@/intl/translate';
 import { tcls } from '@/lib/tailwind';
@@ -64,18 +64,9 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
  {t(
  language,
  'cookies_prompt',
- <a
- href={privacyPolicy}
- className={tcls(
- 'text-primary-subtle',
- 'hover:text-primary',
- 'contrast-more:text-primary',
- 'contrast-more:hover:text-primary-strong',
- 'underline',
- )}
- >
+ <StyledLink href={privacyPolicy}>
  {t(language, 'cookies_prompt_privacy')}
- </a>,
+ </StyledLink>,
  )}
  </p>
  <button

packages/gitbook/src/components/DocumentView/InlineLink.tsx

@@ -4,7 +4,7 @@ import { resolveContentRef } from '@/lib/references';
 
 import { InlineProps } from './Inline';
 import { Inlines } from './Inlines';
-import { Link } from '../primitives';
+import { Link, StyledLink } from '../primitives';
 
 export async function InlineLink(props: InlineProps<DocumentInlineLink>) {
  const { inline, document, context, ancestorInlines } = props;
@@ -27,9 +27,8 @@ export async function InlineLink(props: InlineProps<DocumentInlineLink>) {
  }
 
  return (
- <Link
+ <StyledLink
  href={resolved.href}
- className="underline underline-offset-2 text-primary-subtle hover:text-primary contrast-more:text-primary contrast-more:hover:text-primary-strong transition-colors"
  insights={{
  type: 'link_click',
  link: {
@@ -44,6 +43,6 @@ export async function InlineLink(props: InlineProps<DocumentInlineLink>) {
  nodes={inline.nodes}
  ancestorInlines={[...ancestorInlines, inline]}
  />
- </Link>
+ </StyledLink>
  );
 }

packages/gitbook/src/components/Footer/FooterLinksGroup.tsx

@@ -46,11 +46,17 @@ async function FooterLink(props: { link: CustomizationContentLink; context: GitB
  className={tcls(
  'font-normal',
  'text-tint',
- 'hover:text-primary',
- 'tint:hover:text-tint-strong',
+ 'links-default:hover:text-primary',
+ 'links-default:tint:hover:text-tint-strong',
+
  'contrast-more:underline',
  'contrast-more:text-tint-strong',
  'underline-offset-2',
+
+ 'links-accent:hover:underline',
+ 'links-accent:underline-offset-4',
+ 'links-accent:decoration-primary-subtle',
+ 'links-accent:decoration-[3px]',
  )}
  insights={{
  type: 'link_click',

packages/gitbook/src/components/Header/HeaderLink.tsx

@@ -160,10 +160,18 @@ function getHeaderLinkClassName(props: { headerPreset: CustomizationHeaderPreset
  'flex items-center shrink',
  'min-w-0',
  'contrast-more:underline',
+ 'truncate',
 
  'text-tint',
- 'hover:text-primary',
- 'tint:hover:text-tint-strong',
+ 'links-default:hover:text-primary',
+ 'links-default:tint:hover:text-tint-strong',
+
+ 'underline-offset-2',
+ 'links-accent:hover:underline',
+ 'links-accent:underline-offset-4',
+ 'links-accent:decoration-primary-subtle',
+ 'links-accent:decoration-[3px]',
+ 'links-accent:py-0.5', // Prevent underline from being cut off at the bottom
 
  'theme-bold:text-header-link',
  'theme-bold:hover:text-header-link',
@@ -185,7 +193,7 @@ function HeaderItemLink(props: Omit<HeaderLinkNavItemProps, 'linkStyle'>) {
  }}
  {...rest}
  >
- <span className="truncate min-w-0">{title}</span>
+ {title}
  {isDropdown ? <DropdownChevron /> : null}
  </Link>
  );

packages/gitbook/src/components/PageAside/PageAside.tsx

@@ -176,6 +176,10 @@ export async function PageAside(props: {
  'items-center',
  'text-sm',
  'hover:text-tint-strong',
+ 'links-accent:hover:underline',
+ 'links-accent:hover:underline-offset-4',
+ 'links-accent:hover:decoration-[3px]',
+ 'links-accent:hover:decoration-primary-subtle',
  'py-2',
  )}
  >
@@ -201,6 +205,10 @@ export async function PageAside(props: {
  'items-center',
  'text-sm',
  'hover:text-tint-strong',
+ 'links-accent:hover:underline',
+ 'links-accent:hover:underline-offset-4',
+ 'links-accent:hover:decoration-[3px]',
+ 'links-accent:hover:decoration-primary-subtle',
  'py-2',
  )}
  >

packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

@@ -61,8 +61,9 @@ export async function CustomizationRootLayout(props: {
  : '',
  'theme' in customization.styling && `theme-${customization.styling.theme}`,
  tintColor ? ' tint' : 'no-tint',
- sidebarStyles.background && ` sidebar-${sidebarStyles.background}`,
- sidebarStyles.list && ` sidebar-list-${sidebarStyles.list}`,
+ sidebarStyles.background && `sidebar-${sidebarStyles.background}`,
+ sidebarStyles.list && `sidebar-list-${sidebarStyles.list}`,
+ 'links' in customization.styling && `links-${customization.styling.links}`,
  )}
  >
  <head>

packages/gitbook/src/components/Search/SearchAskAnswer.tsx

@@ -233,6 +233,8 @@ function AnswerSources(props: {
  'items-center',
  'text-tint',
  'hover:underline',
+ 'links-accent:decoration-[3px]',
+ 'links-accent:underline-offset-4',
  'focus-within:text-primary',
  )}
  href={source.href}

packages/gitbook/src/components/primitives/StyledLink.tsx

@@ -13,13 +13,22 @@ export function StyledLink(props: Omit<LinkProps, 'style'> & { style?: ClassValu
  {...rest}
  className={tcls(
  'underline',
+ 'decoration-from-font',
  'underline-offset-2',
- 'decoration-primary/6',
- 'text-primary-subtle',
- 'hover:text-primary',
- 'contrast-more:text-primary',
- 'contrast-more:hover:text-primary-strong',
- 'transition-colors',
+ 'links-accent:underline-offset-4',
+
+ 'links-default:decoration-primary/6',
+ 'links-default:text-primary-subtle',
+ 'links-default:hover:text-primary',
+ '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',
  style,
  )}
  >