From 21cbd9e3b023c598331ababfe75549d6b461ff3e Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Wed, 5 Feb 2025 09:02:53 +0100 Subject: [PATCH] Change link color to primary subtle (#2809) --- .changeset/three-goats-relate.md | 5 ++ .../src/components/Cookies/CookiesToast.tsx | 8 ++- .../components/DocumentView/InlineLink.tsx | 2 +- .../PageAside/ScrollSectionsList.tsx | 8 +-- .../src/components/Search/SearchAskAnswer.tsx | 2 +- .../SiteSections/SiteSectionList.tsx | 4 +- .../SiteSections/SiteSectionTabs.tsx | 12 +++-- .../TableOfContents/TOCPageIcon.tsx | 3 +- .../TableOfContents/ToggleableLinkItem.tsx | 51 +++++-------------- .../src/components/primitives/StyledLink.tsx | 6 ++- 10 files changed, 48 insertions(+), 53 deletions(-) create mode 100644 .changeset/three-goats-relate.md diff --git a/.changeset/three-goats-relate.md b/.changeset/three-goats-relate.md new file mode 100644 index 000000000..0f1d4c1c0 --- /dev/null +++ b/.changeset/three-goats-relate.md @@ -0,0 +1,5 @@ +--- +'gitbook': patch +--- + +Change link color to primary-subtle diff --git a/packages/gitbook/src/components/Cookies/CookiesToast.tsx b/packages/gitbook/src/components/Cookies/CookiesToast.tsx index 5e15bb2af..8405c8857 100644 --- a/packages/gitbook/src/components/Cookies/CookiesToast.tsx +++ b/packages/gitbook/src/components/Cookies/CookiesToast.tsx @@ -66,7 +66,13 @@ export function CookiesToast(props: { privacyPolicy?: string }) { 'cookies_prompt', {t(language, 'cookies_prompt_privacy')} , diff --git a/packages/gitbook/src/components/DocumentView/InlineLink.tsx b/packages/gitbook/src/components/DocumentView/InlineLink.tsx index c4a36377d..6c644a9ee 100644 --- a/packages/gitbook/src/components/DocumentView/InlineLink.tsx +++ b/packages/gitbook/src/components/DocumentView/InlineLink.tsx @@ -25,7 +25,7 @@ export async function InlineLink(props: InlineProps) { return ( diff --git a/packages/gitbook/src/components/Search/SearchAskAnswer.tsx b/packages/gitbook/src/components/Search/SearchAskAnswer.tsx index 3346082bd..968bff878 100644 --- a/packages/gitbook/src/components/Search/SearchAskAnswer.tsx +++ b/packages/gitbook/src/components/Search/SearchAskAnswer.tsx @@ -91,7 +91,7 @@ export function SearchAskAnswer(props: { pointer: SiteContentPointer; query: str const loading = (
- +
); diff --git a/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx b/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx index 22ceb85a9..df8767d6b 100644 --- a/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx +++ b/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx @@ -89,7 +89,7 @@ export function SiteSectionListItem(props: { hover:text-tint-strong rounded-md straight-corners:rounded-none transition-all group/section-link`, isActive - ? `text-primary hover:text-primary-strong contrast-more:text-primary-strong font-semibold + ? `text-primary-subtle hover:text-primary contrast-more:text-primary contrast-more:hover:text-primary-strong font-semibold hover:bg-primary-hover contrast-more:hover:ring-1 contrast-more:hover:ring-primary-hover` : null, className, @@ -109,7 +109,7 @@ export function SiteSectionListItem(props: { ? `bg-primary ring-primary group-hover/section-link:ring-primary-hover, shadow-md shadow-primary contrast-more:ring-2 contrast-more:ring-primary - text-primary contrast-more:text-primary-strong tint:bg-primary-solid tint:text-contrast-primary-solid` + text-primary-subtle contrast-more:text-primary tint:bg-primary-solid tint:text-contrast-primary-solid` : null, )} > diff --git a/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx index 66f50306f..c0170fd0c 100644 --- a/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx +++ b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx @@ -149,7 +149,9 @@ const SectionTab = React.forwardRef(function SectionTab( {...rest} className={tcls( 'relative group flex select-none items-center justify-between rounded straight-corners:rounded-none px-3 py-1 my-2', - isActive ? 'text-primary' : 'text-tint hover:bg-tint-hover hover:text-tint-strong', + isActive + ? 'text-primary-subtle' + : 'text-tint hover:bg-tint-hover hover:text-tint-strong', )} href={url} > @@ -176,7 +178,9 @@ const SectionGroupTab = React.forwardRef(function SectionGroupTab( {...rest} className={tcls( 'relative group flex select-none items-center justify-between rounded straight-corners:rounded-none transition-colors px-3 py-1 my-2', - isActive ? 'text-primary' : 'text-tint hover:bg-tint-hover hover:text-tint-strong', + isActive + ? 'text-primary-subtle' + : 'text-tint hover:bg-tint-hover hover:text-tint-strong', )} > @@ -197,7 +201,9 @@ const SectionGroupTab = React.forwardRef(function SectionGroupTab( * Horizontal line indicating the active tab */ function ActiveTabIndicator() { - return ; + return ( + + ); } /** diff --git a/packages/gitbook/src/components/TableOfContents/TOCPageIcon.tsx b/packages/gitbook/src/components/TableOfContents/TOCPageIcon.tsx index f70e9cf48..97c943159 100644 --- a/packages/gitbook/src/components/TableOfContents/TOCPageIcon.tsx +++ b/packages/gitbook/src/components/TableOfContents/TOCPageIcon.tsx @@ -14,7 +14,8 @@ export function TOCPageIcon({ page }: { page: RevisionPage }) { style={tcls( 'text-base', 'text-tint-strong/6', - 'group-aria-current-page/toclink:text-primary', + 'group-aria-current-page/toclink:text-primary-subtle', + 'contrast-more:group-aria-current-page/toclink:text-primary', 'shrink-0', )} /> diff --git a/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx b/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx index a50ffe491..48c8cd8e6 100644 --- a/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx +++ b/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx @@ -56,56 +56,29 @@ export function ToggleableLinkItem( insights={insights} {...(isActive ? { 'aria-current': 'page' } : {})} className={tcls( - 'group/toclink', - 'relative', - 'transition-colors', - - 'flex', - 'flex-row', - 'justify-between', - - 'p-1.5', - 'pl-3', - 'rounded-md', - 'straight-corners:rounded-none', - - 'text-sm', - 'font-normal', - 'text-balance', - 'text-tint-strong/7', - 'hover:text-tint-strong', - 'hover:bg-tint-hover', - 'contrast-more:text-tint-strong', - - 'hover:contrast-more:text-tint-strong', - 'hover:contrast-more:ring-1', - 'hover:contrast-more:ring-tint-12', - - 'before:contents[]', - 'before:absolute', - 'before:inset-y-0', - 'before:-left-px', - - '[&+div_a]:pl-5', - 'sidebar-list-line:before:w-px', - 'sidebar-list-default:[&+div_a]:before:w-px', - 'sidebar-list-default:[&+div_a]:rounded-l-none', - 'sidebar-list-line:rounded-l-none', + 'group/toclink relative transition-colors', + 'flex flex-row justify-between', + 'p-1.5 pl-3 rounded-md straight-corners:rounded-none', + 'text-sm font-normal text-balance text-tint-strong/7 hover:text-tint-strong hover:bg-tint-hover contrast-more:text-tint-strong', + 'hover:contrast-more:text-tint-strong hover:contrast-more:ring-1 hover:contrast-more:ring-tint-12', + 'before:contents[] before:absolute before:inset-y-0 before:-left-px', + '[&+div_a]:pl-5 sidebar-list-line:before:w-px sidebar-list-default:[&+div_a]:before:w-px sidebar-list-default:[&+div_a]:rounded-l-none sidebar-list-line:rounded-l-none', isActive && [ 'font-semibold', 'sidebar-list-line:before:w-0.5', 'before:bg-primary-solid', - 'text-primary', + 'text-primary-subtle', + 'contrast-more:text-primary', 'sidebar-list-pill:bg-primary', - 'sidebar-list-pill:text-primary', 'hover:bg-primary-hover', - 'hover:text-primary-strong', + 'hover:text-primary', 'hover:before:bg-primary-solid-hover', + 'sidebar-list-pill:hover:bg-primary-hover', - 'contrast-more:text-primary-strong', + 'contrast-more:text-primary', 'contrast-more:hover:text-primary-strong', 'contrast-more:bg-primary', 'contrast-more:ring-1', diff --git a/packages/gitbook/src/components/primitives/StyledLink.tsx b/packages/gitbook/src/components/primitives/StyledLink.tsx index 299b71fbb..4191ce88f 100644 --- a/packages/gitbook/src/components/primitives/StyledLink.tsx +++ b/packages/gitbook/src/components/primitives/StyledLink.tsx @@ -15,8 +15,10 @@ export function StyledLink(props: Omit & { style?: ClassValu 'underline', 'underline-offset-2', 'decoration-primary/6', - 'text-primary', - 'hover:text-primary-strong', + 'text-primary-subtle', + 'hover:text-primary', + 'contrast-more:text-primary', + 'contrast-more:hover:text-primary-strong', 'transition-colors', style, )}