Skip to content

Commit 027a859

Browse files
zenoachtigzenoachtig
authored
Add link styles (#2861)
1 parent 59f50ea commit 027a859

File tree

11 files changed

+62
-30
lines changed

11 files changed

+62
-30
lines changed

‎.changeset/short-pears-guess.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'gitbook': patch
3+
---
4+
5+
Add support for links style customization option

‎packages/gitbook/e2e/util.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,11 +231,11 @@ export function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettin
231231
font: CustomizationFont.Inter,
232232
background: CustomizationBackground.Plain,
233233
icons: CustomizationIconsStyle.Regular,
234+
links: CustomizationLinksStyle.Default,
234235
sidebar: {
235236
background: CustomizationSidebarBackgroundStyle.Default,
236237
list: CustomizationSidebarListStyle.Default,
237238
},
238-
links: CustomizationLinksStyle.Default,
239239
},
240240
internationalization: {
241241
locale: CustomizationLocale.En,

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

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { Icon } from '@gitbook/icons';
44
import * as React from 'react';
55

6-
import { Button } from '@/components/primitives';
6+
import { Button, StyledLink } from '@/components/primitives';
77
import { useLanguage } from '@/intl/client';
88
import { t, tString } from '@/intl/translate';
99
import { tcls } from '@/lib/tailwind';
@@ -64,18 +64,9 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
6464
{t(
6565
language,
6666
'cookies_prompt',
67-
<a
68-
href={privacyPolicy}
69-
className={tcls(
70-
'text-primary-subtle',
71-
'hover:text-primary',
72-
'contrast-more:text-primary',
73-
'contrast-more:hover:text-primary-strong',
74-
'underline',
75-
)}
76-
>
67+
<StyledLink href={privacyPolicy}>
7768
{t(language, 'cookies_prompt_privacy')}
78-
</a>,
69+
</StyledLink>,
7970
)}
8071
</p>
8172
<button

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { resolveContentRef } from '@/lib/references';
44

55
import { InlineProps } from './Inline';
66
import { Inlines } from './Inlines';
7-
import { Link } from '../primitives';
7+
import { Link, StyledLink } from '../primitives';
88

99
export async function InlineLink(props: InlineProps<DocumentInlineLink>) {
1010
const { inline, document, context, ancestorInlines } = props;
@@ -27,9 +27,8 @@ export async function InlineLink(props: InlineProps<DocumentInlineLink>) {
2727
}
2828

2929
return (
30-
<Link
30+
<StyledLink
3131
href={resolved.href}
32-
className="underline underline-offset-2 text-primary-subtle hover:text-primary contrast-more:text-primary contrast-more:hover:text-primary-strong transition-colors"
3332
insights={{
3433
type: 'link_click',
3534
link: {
@@ -44,6 +43,6 @@ export async function InlineLink(props: InlineProps<DocumentInlineLink>) {
4443
nodes={inline.nodes}
4544
ancestorInlines={[...ancestorInlines, inline]}
4645
/>
47-
</Link>
46+
</StyledLink>
4847
);
4948
}

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,17 @@ async function FooterLink(props: { link: CustomizationContentLink; context: GitB
4646
className={tcls(
4747
'font-normal',
4848
'text-tint',
49-
'hover:text-primary',
50-
'tint:hover:text-tint-strong',
49+
'links-default:hover:text-primary',
50+
'links-default:tint:hover:text-tint-strong',
51+
5152
'contrast-more:underline',
5253
'contrast-more:text-tint-strong',
5354
'underline-offset-2',
55+
56+
'links-accent:hover:underline',
57+
'links-accent:underline-offset-4',
58+
'links-accent:decoration-primary-subtle',
59+
'links-accent:decoration-[3px]',
5460
)}
5561
insights={{
5662
type: 'link_click',

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -160,10 +160,18 @@ function getHeaderLinkClassName(props: { headerPreset: CustomizationHeaderPreset
160160
'flex items-center shrink',
161161
'min-w-0',
162162
'contrast-more:underline',
163+
'truncate',
163164

164165
'text-tint',
165-
'hover:text-primary',
166-
'tint:hover:text-tint-strong',
166+
'links-default:hover:text-primary',
167+
'links-default:tint:hover:text-tint-strong',
168+
169+
'underline-offset-2',
170+
'links-accent:hover:underline',
171+
'links-accent:underline-offset-4',
172+
'links-accent:decoration-primary-subtle',
173+
'links-accent:decoration-[3px]',
174+
'links-accent:py-0.5', // Prevent underline from being cut off at the bottom
167175

168176
'theme-bold:text-header-link',
169177
'theme-bold:hover:text-header-link',
@@ -185,7 +193,7 @@ function HeaderItemLink(props: Omit<HeaderLinkNavItemProps, 'linkStyle'>) {
185193
}}
186194
{...rest}
187195
>
188-
<span className="truncate min-w-0">{title}</span>
196+
{title}
189197
{isDropdown ? <DropdownChevron /> : null}
190198
</Link>
191199
);

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,10 @@ export async function PageAside(props: {
176176
'items-center',
177177
'text-sm',
178178
'hover:text-tint-strong',
179+
'links-accent:hover:underline',
180+
'links-accent:hover:underline-offset-4',
181+
'links-accent:hover:decoration-[3px]',
182+
'links-accent:hover:decoration-primary-subtle',
179183
'py-2',
180184
)}
181185
>
@@ -201,6 +205,10 @@ export async function PageAside(props: {
201205
'items-center',
202206
'text-sm',
203207
'hover:text-tint-strong',
208+
'links-accent:hover:underline',
209+
'links-accent:hover:underline-offset-4',
210+
'links-accent:hover:decoration-[3px]',
211+
'links-accent:hover:decoration-primary-subtle',
204212
'py-2',
205213
)}
206214
>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,9 @@ export async function CustomizationRootLayout(props: {
6161
: '',
6262
'theme' in customization.styling && `theme-${customization.styling.theme}`,
6363
tintColor ? ' tint' : 'no-tint',
64-
sidebarStyles.background && ` sidebar-${sidebarStyles.background}`,
65-
sidebarStyles.list && ` sidebar-list-${sidebarStyles.list}`,
64+
sidebarStyles.background && `sidebar-${sidebarStyles.background}`,
65+
sidebarStyles.list && `sidebar-list-${sidebarStyles.list}`,
66+
'links' in customization.styling && `links-${customization.styling.links}`,
6667
)}
6768
>
6869
<head>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,8 @@ function AnswerSources(props: {
233233
'items-center',
234234
'text-tint',
235235
'hover:underline',
236+
'links-accent:decoration-[3px]',
237+
'links-accent:underline-offset-4',
236238
'focus-within:text-primary',
237239
)}
238240
href={source.href}

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

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,22 @@ export function StyledLink(props: Omit<LinkProps, 'style'> & { style?: ClassValu
1313
{...rest}
1414
className={tcls(
1515
'underline',
16+
'decoration-from-font',
1617
'underline-offset-2',
17-
'decoration-primary/6',
18-
'text-primary-subtle',
19-
'hover:text-primary',
20-
'contrast-more:text-primary',
21-
'contrast-more:hover:text-primary-strong',
22-
'transition-colors',
18+
'links-accent:underline-offset-4',
19+
20+
'links-default:decoration-primary/6',
21+
'links-default:text-primary-subtle',
22+
'links-default:hover:text-primary',
23+
'links-default:contrast-more:text-primary',
24+
'links-default:contrast-more:hover:text-primary-strong',
25+
26+
'links-accent:decoration-primary-subtle',
27+
'links-accent:hover:decoration-[3px]',
28+
'links-accent:hover:[text-decoration-skip-ink:none]',
29+
30+
'transition-all',
31+
'duration-100',
2332
style,
2433
)}
2534
>

0 commit comments

Comments
 (0)