mirror of
https://github.com/GitbookIO/gitbook.git
synced 2026-09-21 01:53:26 +00:00
Change link color to primary subtle (#2809)
This commit is contained in:
Zeno Kapitein
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'gitbook': patch
|
||||
---
|
||||
|
||||
Change link color to primary-subtle
|
||||
@@ -66,7 +66,13 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
|
||||
'cookies_prompt',
|
||||
<a
|
||||
href={privacyPolicy}
|
||||
className={tcls('text-primary', 'hover:text-primary-strong', 'underline')}
|
||||
className={tcls(
|
||||
'text-primary-subtle',
|
||||
'hover:text-primary',
|
||||
'contrast-more:text-primary',
|
||||
'contrast-more:hover:text-primary-strong',
|
||||
'underline',
|
||||
)}
|
||||
>
|
||||
{t(language, 'cookies_prompt_privacy')}
|
||||
</a>,
|
||||
|
||||
@@ -25,7 +25,7 @@ export async function InlineLink(props: InlineProps<DocumentInlineLink>) {
|
||||
return (
|
||||
<Link
|
||||
href={resolved.href}
|
||||
className="underline underline-offset-2 text-primary hover:text-primary-strong transition-colors"
|
||||
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: {
|
||||
|
||||
@@ -105,14 +105,16 @@ export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
|
||||
],
|
||||
|
||||
activeId === section.id && [
|
||||
'text-primary',
|
||||
'hover:text-primary-strong',
|
||||
'text-primary-subtle',
|
||||
'hover:text-primary',
|
||||
'contrast-more:text-primary',
|
||||
'contrast-more:hover:text-primary-strong',
|
||||
'hover:bg-primary-hover',
|
||||
'tint:font-semibold',
|
||||
'contrast-more:font-semibold',
|
||||
|
||||
'sidebar-list-default:border-tint',
|
||||
'sidebar-list-pill:hover:bg-transparent',
|
||||
'sidebar-list-pill:hover:bg-primary-hover',
|
||||
],
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -91,7 +91,7 @@ export function SearchAskAnswer(props: { pointer: SiteContentPointer; query: str
|
||||
|
||||
const loading = (
|
||||
<div className={tcls('w-full', 'flex', 'items-center', 'justify-center')}>
|
||||
<Loading className={tcls('w-6', 'py-8', 'text-primary')} />
|
||||
<Loading className={tcls('w-6', 'py-8', 'text-primary-subtle')} />
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@@ -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,
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -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',
|
||||
)}
|
||||
>
|
||||
<span className="flex gap-2 items-center w-full truncate">
|
||||
@@ -197,7 +201,9 @@ const SectionGroupTab = React.forwardRef(function SectionGroupTab(
|
||||
* Horizontal line indicating the active tab
|
||||
*/
|
||||
function ActiveTabIndicator() {
|
||||
return <span className="inset-x-3 -bottom-2 h-0.5 absolute bg-primary-11" />;
|
||||
return (
|
||||
<span className="inset-x-3 -bottom-2 h-0.5 absolute bg-primary-9 contrast-more:bg-primary-11" />
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -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',
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -15,8 +15,10 @@ export function StyledLink(props: Omit<LinkProps, 'style'> & { 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,
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user