gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-23 19:06:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix sidebar on bold themes (#3993)

Browse Source
This commit is contained in:
Zeno Kapitein
2026-02-12 11:48:43 +01:00
committed by GitHub
parent 64de8d2cf6
commit 426aabe39a
4 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/major-buses-fall.md
+5
View File
@@ -0,0 +1,5 @@
---
"gitbook": patch
---
Fix TOC header logo on bold themes
packages/gitbook/src/components/Header/Header.tsx
+6 -6
View File
@@ -63,9 +63,9 @@ export function Header(props: {
>
<div
className={tcls(
'theme-bold:bg-header-background',
'theme-bold:shadow-[0px_1px_0px]',
'theme-bold:shadow-tint-12/2'
'site-header:theme-bold:bg-header-background',
'site-header:theme-bold:shadow-[0px_1px_0px]',
'site-header:theme-bold:shadow-tint-12/2'
)}
>
<div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
@@ -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}
</HeaderLinks>
packages/gitbook/src/components/Search/SearchInput.tsx
+5 -4
View File
@@ -58,14 +58,14 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
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={
<Icon
icon="search"
className="size-text-lg shrink-0 text-tint theme-bold:text-header-link/8"
className="size-text-lg shrink-0 site-header:theme-bold:text-header-link/8 text-tint"
/>
}
onValueChange={onChange}
@@ -76,11 +76,12 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
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}
packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
+5 -1
View File
@@ -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]'
)}
>
<HeaderLogo context={context} />