From 0e601e277b7973f4094f2f5a4315ec0cf6fc81b2 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Tue, 14 Jan 2025 15:20:26 +0100 Subject: [PATCH] Header button styling (#2748) --- .changeset/tasty-cooks-kneel.md | 5 ++ .../src/components/Header/HeaderLink.tsx | 22 +++---- .../src/components/Header/HeaderLinks.tsx | 2 +- .../src/components/primitives/Button.tsx | 60 ++++++++++++++----- 4 files changed, 61 insertions(+), 28 deletions(-) create mode 100644 .changeset/tasty-cooks-kneel.md diff --git a/.changeset/tasty-cooks-kneel.md b/.changeset/tasty-cooks-kneel.md new file mode 100644 index 0000000000..58648c8736 --- /dev/null +++ b/.changeset/tasty-cooks-kneel.md @@ -0,0 +1,5 @@ +--- +'gitbook': patch +--- + +Improve styling of header buttons with shadows and high-contrast styles diff --git a/packages/gitbook/src/components/Header/HeaderLink.tsx b/packages/gitbook/src/components/Header/HeaderLink.tsx index b36ad675ee..f844c86ee2 100644 --- a/packages/gitbook/src/components/Header/HeaderLink.tsx +++ b/packages/gitbook/src/components/Header/HeaderLink.tsx @@ -130,18 +130,17 @@ function HeaderItemButton( className={tcls( { 'button-primary': - headerPreset === CustomizationHeaderPreset.Custom || - headerPreset === CustomizationHeaderPreset.Bold - ? tcls( - 'bg-header-link-500 hover:bg-text-header-link-300 text-header-button-text', - 'dark:bg-header-link-500 dark:hover:bg-text-header-link-300 dark:text-header-button-text', - ) - : null, + headerPreset != CustomizationHeaderPreset.Default && + `bg-header-link dark:bg-header-link hover:bg-header-link dark:hover:bg-header-link + text-header-background dark:text-header-background hover:text-header-background dark:hover:text-header-background + shadow-none hover:shadow-none`, 'button-secondary': tcls( - 'bg:transparent hover:bg-transparent', - 'dark:bg-transparent dark:hover:bg-transparent', - 'ring-header-link-500 hover:ring-header-link-300 text-header-link-500', - 'dark:ring-header-link-500 dark:hover:ring-header-link-300 dark:text-header-link-500', + headerPreset != CustomizationHeaderPreset.Default && + `bg-header-link/2 dark:bg-header-link/2 hover:bg-header-link/3 dark:hover:bg-header-link/3 + text-header-link dark:text-header-link hover:text-header-link dark:hover:text-header-link + ring-header-link/4 dark:ring-header-link/4 hover:ring-header-link/5 dark:hover:ring-header-link/5 + contrast-more:ring-header-link contrast-more:bg-header-background contrast-more:text-header-link contrast-more:hover:ring-header-link + shadow-none hover:shadow-none`, ), }[linkStyle], )} @@ -161,6 +160,7 @@ function getHeaderLinkClassName(props: { headerPreset: CustomizationHeaderPreset 'flex items-center shrink', 'hover:text-header-link-400 dark:hover:text-light', 'min-w-0', + 'contrast-more:underline', props.headerPreset === CustomizationHeaderPreset.Default ? ['text-dark/8', 'dark:text-light/8'] diff --git a/packages/gitbook/src/components/Header/HeaderLinks.tsx b/packages/gitbook/src/components/Header/HeaderLinks.tsx index 9fe5926baa..c794d15fe8 100644 --- a/packages/gitbook/src/components/Header/HeaderLinks.tsx +++ b/packages/gitbook/src/components/Header/HeaderLinks.tsx @@ -13,7 +13,7 @@ export async function HeaderLinks({ children }: HeaderLinksProps) {
{children} diff --git a/packages/gitbook/src/components/primitives/Button.tsx b/packages/gitbook/src/components/primitives/Button.tsx index d8e8a9b2ef..ee7b7ff4e1 100644 --- a/packages/gitbook/src/components/primitives/Button.tsx +++ b/packages/gitbook/src/components/primitives/Button.tsx @@ -27,27 +27,35 @@ export function Button({ variant === 'primary' ? //PRIMARY [ - 'bg-primary-600', - 'text-white', - 'ring-dark/2', - 'hover:bg-primary-500', - 'dark:ring-light/3', - 'dark:bg-primary-600', - 'dark:hover:bg-primary-700', + 'bg-primary', + 'text-light', // TODO: Move to 'text-contrast-primary' once contrast calculation works better + 'hover:text-light-1', + 'hover:bg-primary-600', + + 'dark:bg-primary', + 'dark:text-contrast-primary', + 'dark:hover:bg-primary', ] : // SECONDARY [ - 'bg-dark/2', - 'ring-dark/1', - 'hover:bg-dark/3', - 'dark:bg-light/2', - 'dark:ring-light/1', - 'dark:hover:bg-light/3', + 'bg-light-1', + 'text-dark/8', + 'hover:text-primary', + 'contrast-more:bg-light', + 'contrast-more:text-dark', + 'contrast-more:hover:ring-primary', + + 'dark:bg-light/1', + 'dark:text-light/8', + 'contrast-more:dark:bg-dark', + 'contrast-more:dark:text-light', + 'dark:hover:bg-light/2', + 'dark:hover:text-light', ]; const sizes = { default: ['text-base', 'px-4', 'py-2'], - medium: ['text-sm', 'px-3', 'py-1'], + medium: ['text-sm', 'px-3', 'py-1.5'], small: ['text-xs', 'px-3 py-2'], }; @@ -58,12 +66,32 @@ export function Button({ 'rounded-md', 'straight-corners:rounded-none', 'place-self-start', + 'ring-1', - 'ring-inset', + 'ring-dark/1', + 'hover:ring-dark/2', + 'dark:ring-light/2', + 'dark:hover:ring-light/4', + + 'shadow-sm', + 'shadow-dark/4', + 'dark:shadow-dark/8', + 'hover:shadow-md', + 'active:shadow-none', + + 'contrast-more:ring-dark', + 'contrast-more:hover:ring-2', + 'contrast-more:hover:ring-dark', + 'contrast-more:dark:ring-light', + 'contrast-more:dark:hover:ring-light', + + 'hover:scale-105', + 'active:scale-100', + 'transition-all', + 'grow-0', 'shrink-0', 'truncate', - 'transition-colors', variantClasses, sizeClasses, className,