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

Add automatic color contrast in site header, restyle search button (#2512)

Browse Source
This commit is contained in:
Zeno Kapitein
2024-10-15 11:05:25 +02:00
committed by GitHub
parent 1ca6208057
commit c754fc9ff4
4 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/bright-cars-explain.md
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Add automatic color contrast in site header, restyle search button
packages/gitbook/src/components/Header/Header.tsx
+13 -8
View File
@@ -109,16 +109,21 @@ export function Header(props: {
style={
!isCustomizationDefault && withTopHeader
? [
'bg-header-background-400/8',
'bg-header-link/3',
'shadow-sm',
'text-header-link/8',
'ring-header-background-200/5',
'[&>span]:text-header-link/7',
'ring-header-link/3',
'[&>span]:!text-header-link/7',
'[&_svg]:text-header-link',
'dark:bg-header-link-600/3',
'dark:ring-header-link-600/2',
'dark:text-header-link/7',
'dark:[&_svg]:text-header-link/7',
'contrast-more:bg-transparent',
'contrast-more:ring-header-link',
'contrast-more:[&>span]:!text-header-link',
'dark:bg-header-link/3',
'dark:ring-header-link/3',
'[&>span]:!text-header-link/7',
'dark:[&_svg]:text-header-link',
'dark:contrast-more:bg-transparent',
'dark:contrast-more:ring-header-link',
'dark:contrast-more:[&>span]:!text-header-link',
]
: null
}
packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
+10 -3
View File
@@ -198,9 +198,16 @@ function generateHeaderTheme(customization: CustomizationSettings | SiteCustomiz
dark: customization.styling.primaryColor.dark,
},
linkColor: {
// TODO: should depend on the color of the background
light: colors.white,
dark: colors.black,
light: colorContrast(
customization.styling.primaryColor.light,
[colors.white, colors.black],
'aaa',
),
dark: colorContrast(
customization.styling.primaryColor.dark,
[colors.white, colors.black],
'aaa',
),
},
};
}
packages/gitbook/src/components/Search/SearchButton.tsx
+9 -1
View File
@@ -50,9 +50,15 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
'ring-1',
'ring-inset',
'ring-dark/1',
'contrast-more:ring-dark',
'contrast-more:bg-light',
'contrast-more:text-dark',
'dark:bg-light/1',
'dark:ring-light/1',
'dark:text-light/7',
'contrast-more:dark:ring-light',
'contrast-more:dark:bg-dark',
'contrast-more:dark:text-light',
'[&>p]:hidden',
'[&>span]:hidden',
'md:justify-start',
@@ -97,11 +103,13 @@ const Shortcut = () => {
'justify-end',
'text-xs',
'text-dark/5',
'contrast-more:text-dark',
'dark:text-light/5',
'contrast-more:dark:text-light',
`[font-feature-settings:"calt",_"case"]`,
)}
>
{operatingSystem === 'mac' ? '⌘' : 'Ctrl'} + K
{operatingSystem === 'mac' ? '⌘' : 'Ctrl +'} K
</span>
);
};