From 426aabe39ab9e218303b0438017a370cd0659c5f Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Thu, 12 Feb 2026 11:48:43 +0100 Subject: [PATCH] Fix sidebar on bold themes (#3993) --- .changeset/major-buses-fall.md | 5 +++++ packages/gitbook/src/components/Header/Header.tsx | 12 ++++++------ .../gitbook/src/components/Search/SearchInput.tsx | 9 +++++---- .../src/components/SpaceLayout/SpaceLayout.tsx | 6 +++++- 4 files changed, 21 insertions(+), 11 deletions(-) create mode 100644 .changeset/major-buses-fall.md diff --git a/.changeset/major-buses-fall.md b/.changeset/major-buses-fall.md new file mode 100644 index 000000000..ca440189d --- /dev/null +++ b/.changeset/major-buses-fall.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Fix TOC header logo on bold themes diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index 608568214..1b02317a6 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/packages/gitbook/src/components/Header/Header.tsx @@ -63,9 +63,9 @@ export function Header(props: { >
@@ -100,9 +100,9 @@ export function Header(props: { className={tcls( '-ml-2', 'text-tint-strong', - 'theme-bold:text-header-link', + 'site-header:theme-bold:text-header-link', 'hover:bg-tint-hover', - 'hover:theme-bold:bg-header-link/3', + 'hover:site-header:theme-bold:bg-header-link/3', variants.generic.length > 1 ? 'lg:hidden' : 'page-no-toc:hidden lg:hidden' @@ -191,7 +191,7 @@ export function Header(props: { ) ?? siteSpace } siteSpaces={variants.translations} - className="flex! theme-bold:text-header-link hover:theme-bold:bg-header-link/3" + className="flex! site-header:theme-bold:text-header-link hover:site-header:theme-bold:bg-header-link/3" /> ) : null} diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx index 655cffdea..e9d182fa8 100644 --- a/packages/gitbook/src/components/Search/SearchInput.tsx +++ b/packages/gitbook/src/components/Search/SearchInput.tsx @@ -58,14 +58,14 @@ export const SearchInput = React.forwardRef( containerRef={containerRef as React.RefObject} sizing="medium" label={tString(language, withAI ? 'search_or_ask' : 'search')} - className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-9.5 grow theme-bold:border-header-link/4 theme-bold:bg-header-link/1 @max-2xl:px-2.5 theme-bold:text-header-link theme-bold:shadow-none! theme-bold:backdrop-blur-xl @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] theme-bold:focus-within:border-header-link/6 theme-bold:focus-within:ring-header-link/5 theme-bold:hover:border-header-link/5 theme-bold:hover:not-focus-within:bg-header-link/2 @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 theme-bold:[&_input]:placeholder:text-header-link/8 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11" + className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-9.5 grow site-header:theme-bold:border-header-link/4 site-header:theme-bold:bg-header-link/1 @max-2xl:px-2.5 site-header:theme-bold:text-header-link site-header:theme-bold:shadow-none! site-header:theme-bold:backdrop-blur-xl @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] site-header:theme-bold:focus-within:border-header-link/6 site-header:theme-bold:focus-within:ring-header-link/5 site-header:theme-bold:hover:border-header-link/5 site-header:theme-bold:hover:not-focus-within:bg-header-link/2 @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 site-header:theme-bold:[&_input]:placeholder:text-header-link/8 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11" placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`} onFocus={onFocus} onKeyDown={onKeyDown} leading={ } onValueChange={onChange} @@ -76,11 +76,12 @@ export const SearchInput = React.forwardRef( aria-haspopup="listbox" aria-expanded={value && isOpen ? 'true' : 'false'} clearButton={{ - className: 'theme-bold:text-header-link theme-bold:hover:bg-header-link/3', + className: + 'site-header:theme-bold:text-header-link site-header:theme-bold:hover:bg-header-link/3', }} keyboardShortcut={{ className: - 'theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link', + 'site-header:theme-bold:border-header-link/4 site-header:theme-bold:bg-header-background site-header:theme-bold:text-header-link', keys: isOpen ? ['esc'] : ['mod', 'k'], }} {...rest} diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx index 19d8cd2c5..8ec08dfdc 100644 --- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx +++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx @@ -151,7 +151,11 @@ export function SpaceLayout(props: SpaceLayoutProps) { 'grow-0', 'dark:shadow-light/1', 'text-base/tight', - 'items-center' + 'items-center', + // On bold themes also color the TOC header so the logo looks correct. + 'site-header:theme-bold:bg-header-background', + 'site-header:theme-bold:m-[-1.5rem_-1px_-0.5rem_-2rem]', + 'site-header:theme-bold:p-[1rem_0_1rem_2rem]' )} >