Header button styling (#2748)

Author: zenoachtig

.changeset/tasty-cooks-kneel.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Improve styling of header buttons with shadows and high-contrast styles

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']

packages/gitbook/src/components/Header/HeaderLinks.tsx

@@ -13,7 +13,7 @@ export async function HeaderLinks({ children }: HeaderLinksProps) {
         <div
             className={tcls(
                 styles.containerHeaderlinks,
-                'grow shrink flex justify-end items-center gap-x-6 lg:gap-x-8 min-w-9 z-20',
+                'grow shrink flex justify-end items-center gap-x-4 lg:gap-x-6 min-w-9 z-20',
             )}
         >
             {children}

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,