Add sidebar new background styles (#2645)

Co-authored-by: Zeno Kapitein <[email protected]>

Author: valentin0h

.changeset/dull-parents-breathe.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Add support for sidebar background styles

packages/gitbook/e2e/pages.spec.ts

@@ -60,6 +60,11 @@ const allThemePresets: CustomizationHeaderPreset[] = [
     CustomizationHeaderPreset.Custom,
 ];
 
+const allSidebarBackgroundStyles: CustomizationSidebarBackgroundStyle[] = [
+    CustomizationSidebarBackgroundStyle.Default,
+    CustomizationSidebarBackgroundStyle.Filled,
+];
+
 async function waitForCookiesDialog(page: Page) {
     const dialog = page.getByRole('dialog', { name: 'Cookies' });
     const accept = dialog.getByRole('button', { name: 'Accept' });
@@ -545,40 +550,47 @@ const testCases: TestsCase[] = [
                 }),
                 run: waitForCookiesDialog,
             },
-            ...allThemePresets.flatMap((preset) => ({
-                name: `With tint - Preset ${preset} - Theme ${theme}`,
-                url: getCustomizationURL({
-                    styling: {
-                        tint: { color: { light: '#346DDB', dark: '#346DDB' } },
-                    },
-                    header: {
-                        preset,
-                        ...(preset === CustomizationHeaderPreset.Custom
-                            ? {
-                                  backgroundColor: { light: '#C62C68', dark: '#EF96B8' },
-                                  linkColor: { light: '#4DDE98', dark: '#0C693D' },
-                              }
-                            : {}),
-                        links: [
-                            {
-                                title: 'Secondary button',
-                                to: { kind: 'url', url: 'https://www.gitbook.com' },
-                                style: 'button-secondary',
-                            },
-                            {
-                                title: 'Primary button',
-                                to: { kind: 'url', url: 'https://www.gitbook.com' },
-                                style: 'button-primary',
+            // Theme-specific tests
+            ...allThemePresets.flatMap((preset) => [
+                ...allSidebarBackgroundStyles.flatMap((sidebarStyle) => ({
+                    name: `With tint - Preset ${preset} - Sidebar ${sidebarStyle} - Theme ${theme}`,
+                    url: getCustomizationURL({
+                        styling: {
+                            tint: { color: { light: '#346DDB', dark: '#346DDB' } },
+                            sidebar: {
+                                background: sidebarStyle,
+                                list: CustomizationSidebarListStyle.Default,
                             },
-                        ],
-                    },
-                    themes: {
-                        default: theme,
-                        toggeable: false,
-                    },
-                }),
-                run: waitForCookiesDialog,
-            })),
+                        },
+                        header: {
+                            preset,
+                            ...(preset === CustomizationHeaderPreset.Custom
+                                ? {
+                                      backgroundColor: { light: '#C62C68', dark: '#EF96B8' },
+                                      linkColor: { light: '#4DDE98', dark: '#0C693D' },
+                                  }
+                                : {}),
+                            links: [
+                                {
+                                    title: 'Secondary button',
+                                    to: { kind: 'url', url: 'https://www.gitbook.com' },
+                                    style: 'button-secondary',
+                                },
+                                {
+                                    title: 'Primary button',
+                                    to: { kind: 'url', url: 'https://www.gitbook.com' },
+                                    style: 'button-primary',
+                                },
+                            ],
+                        },
+                        themes: {
+                            default: theme,
+                            toggeable: false,
+                        },
+                    }),
+                    run: waitForCookiesDialog,
+                })),
+            ]),
             {
                 name: `With tint - Legacy background match - Theme ${theme}`,
                 url: getCustomizationURL({

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

@@ -1,2 +1,2 @@
 export * from './Header';
-export * from './CompactHeader';
+export * from './HeaderLogo';

packages/gitbook/src/components/Header/index.ts

@@ -26,8 +26,8 @@ function getTopOffset(props: { sectionsHeader: boolean; topHeader: boolean }) {
     if (props.sectionsHeader && props.topHeader) {
         return 'lg:max-h-[calc(100vh_-_8rem)] top-32 page-api-block:xl:max-2xl:top-32';
     }
-    if (props.sectionsHeader || props.topHeader) {
-        return 'lg:max-h-[calc(100vh_-_4rem)] top-16 page-api-block:xl:max-2xl:top-16';
+    if (props.topHeader) {
+        return 'lg:max-h-[calc(100vh_-_6rem)] top-24 page-api-block:xl:max-2xl:top-24';
     }
     return 'lg:max-h-screen top-0 page-api-block:xl:max-2xl:top-0';
 }
@@ -76,7 +76,7 @@ export async function PageAside(props: {
                 'grow-0',
                 'shrink-0',
                 'sticky',
-                'py-8',
+                withHeaderOffset.topHeader ? 'py-4' : 'py-8',
                 'break-anywhere', // To prevent long words in headings from breaking the layout
                 'lg:h-full',
                 'h-[100vh]',
@@ -117,7 +117,7 @@ export async function PageAside(props: {
                     'flex-1',
                     'flex',
                     'flex-col',
-                    'gap-4',
+                    'gap-6',
                     '[&::-webkit-scrollbar]:bg-transparent',
                     '[&::-webkit-scrollbar-thumb]:bg-transparent',
 

packages/gitbook/src/components/PageAside/PageAside.tsx

@@ -3,6 +3,8 @@ import {
     CustomizationHeaderPreset,
     CustomizationIconsStyle,
     CustomizationSettings,
+    CustomizationSidebarBackgroundStyle,
+    CustomizationSidebarListStyle,
     CustomizationTint,
     SiteCustomizationSettings,
 } from '@gitbook/api';
@@ -36,8 +38,8 @@ export async function CustomizationRootLayout(props: {
 
     const headerTheme = generateHeaderTheme(customization);
     const language = getSpaceLanguage(customization);
-
     const tintColor = getTintColor(customization);
+    const sidebarStyles = getSidebarStyles(customization);
 
     return (
         <html
@@ -51,6 +53,8 @@ export async function CustomizationRootLayout(props: {
                     ? ' straight-corners'
                     : '',
                 tintColor ? ' tint' : 'no-tint',
+                sidebarStyles.background && ' sidebar-' + sidebarStyles.background,
+                sidebarStyles.list && ' sidebar-list-' + sidebarStyles.list,
             )}
         >
             <head>
@@ -185,7 +189,7 @@ export async function CustomizationRootLayout(props: {
  * Get the tint color from the customization settings.
  * If the tint color is not set or it is a space customization, it will return the default color.
  */
-export function getTintColor(
+function getTintColor(
     customization: CustomizationSettings | SiteCustomizationSettings,
 ): CustomizationTint['color'] | undefined {
     if ('tint' in customization.styling && customization.styling.tint) {
@@ -196,6 +200,26 @@ export function getTintColor(
     }
 }
 
+/**
+ * Get the sidebar styles from the customization settings.
+ * If it is a space customization, it will return the default styles.
+ */
+function getSidebarStyles(
+    customization: CustomizationSettings | SiteCustomizationSettings,
+): SiteCustomizationSettings['styling']['sidebar'] {
+    if ('sidebar' in customization.styling) {
+        return {
+            background: customization.styling.sidebar.background,
+            list: customization.styling.sidebar.list,
+        };
+    }
+
+    return {
+        background: CustomizationSidebarBackgroundStyle.Default,
+        list: CustomizationSidebarListStyle.Default,
+    };
+}
+
 type ColorInput = string | Record<string, string>;
 function generateColorVariable(name: string, color: ColorInput) {
     const shades: Record<string, string> = typeof color === 'string' ? shadesOfColor(color) : color;

packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

@@ -47,8 +47,8 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
                 'py-2',
                 'gap-2',
 
-                'bg-light',
-                'dark:bg-dark',
+                'bg-light-1',
+                'dark:bg-dark-1',
 
                 'ring-1',
                 'ring-dark/1',

packages/gitbook/src/components/Search/SearchButton.tsx

@@ -62,7 +62,7 @@ export function SiteSectionTabs(props: {
         <nav
             aria-label="Sections"
             ref={navRef}
-            className="flex flex-nowrap items-center mb-px max-w-screen-2xl mx-auto page-full-width:max-w-full"
+            className="flex flex-nowrap items-center max-w-screen-2xl mx-auto page-full-width:max-w-full"
             style={
                 {
                     '--tab-opacity': `${opacity}`,
@@ -121,6 +121,7 @@ export function SiteSectionTabs(props: {
                         'after:translate-x-[var(--tab-start)]',
                         'after:will-change-transform',
                         'after:h-0.5',
+                        'after:mb-px',
                         'after:w-[100px]',
                         'after:bg-primary',
                         'dark:after:bg-primary-400',