Add tint color

.changeset/curvy-carrots-melt.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Add support for tint color

packages/gitbook/e2e/pages.spec.ts

@@ -1,15 +1,19 @@
 import { argosScreenshot } from '@argos-ci/playwright';
 import {
     CustomizationBackground,
+    CustomizationCorners,
+    CustomizationFont,
     CustomizationHeaderPreset,
     CustomizationIconsStyle,
     CustomizationLocale,
+    CustomizationThemeMode,
     SiteCustomizationSettings,
 } from '@gitbook/api';
 import { test, expect, Page } from '@playwright/test';
 import jwt from 'jsonwebtoken';
 import rison from 'rison';
 import { DeepPartial } from 'ts-essentials';
+import deepMerge from 'deepmerge';
 
 import { getContentTestURL } from '../tests/utils';
 
@@ -35,6 +39,18 @@ const allLocales: CustomizationLocale[] = [
     CustomizationLocale.Zh,
 ];
 
+const allThemeModes: CustomizationThemeMode[] = [
+    CustomizationThemeMode.Light,
+    CustomizationThemeMode.Dark,
+];
+
+const allThemePresets: CustomizationHeaderPreset[] = [
+    CustomizationHeaderPreset.Default,
+    CustomizationHeaderPreset.Bold,
+    CustomizationHeaderPreset.Contrast,
+    CustomizationHeaderPreset.Custom,
+];
+
 async function waitForCookiesDialog(page: Page) {
     const dialog = page.getByRole('dialog', { name: 'Cookies' });
     const accept = dialog.getByRole('button', { name: 'Accept' });
@@ -436,30 +452,38 @@ const testCases: TestsCase[] = [
     {
         name: 'Customization',
         baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/',
-        tests: [
+        tests: allThemeModes.flatMap((theme) => [
             {
-                name: 'Without header',
+                name: `Without header - Theme ${theme}`,
                 url: getCustomizationURL({
                     header: {
                         preset: CustomizationHeaderPreset.None,
                         links: [],
                     },
+                    themes: {
+                        default: theme,
+                        toggeable: false,
+                    },
                 }),
                 run: waitForCookiesDialog,
             },
             {
-                name: 'With duotone icons',
+                name: `With duotone icons - Theme ${theme}`,
                 url:
                     'page-options/page-with-icon' +
                     getCustomizationURL({
                         styling: {
                             icons: CustomizationIconsStyle.Duotone,
                         },
+                        themes: {
+                            default: theme,
+                            toggeable: false,
+                        },
                     }),
                 run: waitForCookiesDialog,
             },
             {
-                name: 'With header buttons',
+                name: `With header buttons - Theme ${theme}`,
                 url: getCustomizationURL({
                     header: {
                         preset: CustomizationHeaderPreset.Default,
@@ -476,39 +500,16 @@ const testCases: TestsCase[] = [
                             },
                         ],
                     },
-                }),
-                run: waitForCookiesDialog,
-            },
-            {
-                name: 'With tint - Legacy background match',
-                url: getCustomizationURL({
-                    styling: {
-                        background: CustomizationBackground.Match,
-                    },
-                    header: {
-                        preset: CustomizationHeaderPreset.Default,
-                        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 - Default preset',
+                name: `Without tint - Default preset - Theme ${theme}`,
                 url: getCustomizationURL({
-                    styling: {
-                        tint: { color: { light: '#346DDB', dark: '#346DDB' } },
-                    },
                     header: {
                         preset: CustomizationHeaderPreset.Default,
                         links: [
@@ -524,41 +525,27 @@ const testCases: TestsCase[] = [
                             },
                         ],
                     },
-                }),
-                run: waitForCookiesDialog,
-            },
-            {
-                name: 'With tint - Bold preset',
-                url: getCustomizationURL({
-                    styling: {
-                        tint: { color: { light: '#346DDB', dark: '#346DDB' } },
-                    },
-                    header: {
-                        preset: CustomizationHeaderPreset.Bold,
-                        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 - Contrast',
+            ...allThemePresets.flatMap((preset) => ({
+                name: `With tint - Preset ${preset} - Theme ${theme}`,
                 url: getCustomizationURL({
                     styling: {
                         tint: { color: { light: '#346DDB', dark: '#346DDB' } },
                     },
                     header: {
-                        preset: CustomizationHeaderPreset.Contrast,
+                        preset,
+                        ...(preset === CustomizationHeaderPreset.Custom
+                            ? {
+                                  backgroundColor: { light: '#C62C68', dark: '#EF96B8' },
+                                  linkColor: { light: '#4DDE98', dark: '#0C693D' },
+                              }
+                            : {}),
                         links: [
                             {
                                 title: 'Secondary button',
@@ -572,19 +559,21 @@ const testCases: TestsCase[] = [
                             },
                         ],
                     },
+                    themes: {
+                        default: theme,
+                        toggeable: false,
+                    },
                 }),
                 run: waitForCookiesDialog,
-            },
+            })),
             {
-                name: 'With tint - Custom preset',
+                name: `With tint - Legacy background match - Theme ${theme}`,
                 url: getCustomizationURL({
                     styling: {
-                        tint: { color: { light: '#346DDB', dark: '#346DDB' } },
+                        background: CustomizationBackground.Match,
                     },
                     header: {
-                        preset: CustomizationHeaderPreset.Custom,
-                        backgroundColor: { light: '#C62C68', dark: '#EF96B8' },
-                        linkColor: { light: '#4DDE98', dark: '#0C693D' },
+                        preset: CustomizationHeaderPreset.Default,
                         links: [
                             {
                                 title: 'Secondary button',
@@ -598,10 +587,14 @@ const testCases: TestsCase[] = [
                             },
                         ],
                     },
+                    themes: {
+                        default: theme,
+                        toggeable: false,
+                    },
                 }),
                 run: waitForCookiesDialog,
             },
-        ],
+        ]),
     },
     {
         name: 'Ads',
@@ -971,7 +964,62 @@ for (const testCase of testCases) {
  * Create a URL with customization settings.
  */
 function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettings>): string {
-    const encoded = rison.encode_object(partial);
+    /**
+     * Default customization settings.
+     *
+     * The customization object passed to the URL should be a valid API settings object. Hence we extend the test with necessary defaults.
+     */
+    const DEFAULT_CUSTOMIZATION: SiteCustomizationSettings = {
+        styling: {
+            primaryColor: { light: '#346DDB', dark: '#346DDB' },
+            corners: CustomizationCorners.Rounded,
+            font: CustomizationFont.Inter,
+            background: CustomizationBackground.Plain,
+            icons: CustomizationIconsStyle.Regular,
+        },
+        internationalization: {
+            locale: CustomizationLocale.En,
+        },
+        favicon: {},
+        header: {
+            preset: CustomizationHeaderPreset.Default,
+            links: [],
+        },
+        footer: {
+            groups: [],
+        },
+        themes: {
+            default: CustomizationThemeMode.Light,
+            toggeable: true,
+        },
+        pdf: {
+            enabled: true,
+        },
+        feedback: {
+            enabled: false,
+        },
+        aiSearch: {
+            enabled: true,
+        },
+        advancedCustomization: {
+            enabled: true,
+        },
+        git: {
+            showEditLink: false,
+        },
+        pagination: {
+            enabled: true,
+        },
+        trademark: {
+            enabled: true,
+        },
+        privacyPolicy: {
+            url: 'https://www.gitbook.com/privacy',
+        },
+        socialPreview: {},
+    };
+
+    const encoded = rison.encode_object(deepMerge(DEFAULT_CUSTOMIZATION, partial));
 
     const searchParams = new URLSearchParams();
     searchParams.set('customization', encoded);

packages/gitbook/package.json

@@ -68,9 +68,9 @@
     },
     "devDependencies": {
         "@argos-ci/playwright": "^2.0.0",
-        "@playwright/test": "^1.42.1",
         "@cloudflare/next-on-pages": "^1.13.5",
         "@cloudflare/workers-types": "^4.20240725.0",
+        "@playwright/test": "^1.42.1",
         "@types/js-cookie": "^3.0.6",
         "@types/jsontoxml": "^1.0.5",
         "@types/jsonwebtoken": "^9.0.6",
@@ -82,15 +82,16 @@
         "@types/react-dom": "18.3.1",
         "@types/rison": "^0.0.9",
         "autoprefixer": "^10",
+        "deepmerge": "^4.3.1",
+        "env-cmd": "^10.1.0",
         "eslint": "^8",
         "eslint-config-next": "^14.2.5",
         "eslint-plugin-import": "^2.29.1",
         "jsonwebtoken": "^9.0.2",
         "postcss": "^8",
         "psi": "^4.1.0",
         "tailwindcss": "^3.4.0",
-        "typescript": "^5.5.3",
-        "env-cmd": "^10.1.0",
-        "ts-essentials": "^10.0.1"
+        "ts-essentials": "^10.0.1",
+        "typescript": "^5.5.3"
     }
 }

packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css

@@ -5,7 +5,7 @@
 .light .scalar {
     --scalar-color-1: color-mix(
         in srgb,
-        rgb(var(--primary-base-300, 180 180 180)),
+        rgb(var(--tint-color-300, 180 180 180)),
         rgb(var(--dark-base, 23 23 23)) 96%
     );
     --scalar-color-2: color-mix(
@@ -23,12 +23,12 @@
     --scalar-background-1: rgb(var(--light-base, 255 255 255));
     --scalar-background-2: color-mix(
         in srgb,
-        rgb(var(--primary-base-800, 30 30 30)),
+        rgb(var(--tint-color-800, 30 30 30)),
         var(--scalar-background-1) 96%
     );
     --scalar-background-3: color-mix(
         in srgb,
-        rgb(var(--primary-base-800, 30 30 30)),
+        rgb(var(--tint-color-800, 30 30 30)),
         var(--scalar-background-1) 90%
     );
     --scalar-background-accent: #007d9c1f;
@@ -66,7 +66,7 @@
 .dark .scalar {
     --scalar-color-1: color-mix(
         in srgb,
-        rgb(var(--primary-base-700, 70 70 70)),
+        rgb(var(--tint-color-700, 70 70 70)),
         rgb(var(--light-base, 255 255 255)) 100%
     );
     --scalar-color-2: color-mix(
@@ -84,12 +84,12 @@
     --scalar-background-1: rgb(var(--dark-base, 22 22 22));
     --scalar-background-2: color-mix(
         in srgb,
-        rgb(var(--primary-base-200, 200 200 200)),
+        rgb(var(--tint-color-200, 200 200 200)),
         var(--scalar-background-1) 92%
     );
     --scalar-background-3: color-mix(
         in srgb,
-        rgb(var(--primary-base-200, 200 200 200)),
+        rgb(var(--tint-color-200, 200 200 200)),
         var(--scalar-background-1) 88%
     );
     --scalar-background-accent: #8ab4f81f;