From c67cd730580cbbe18fb037d855e8e1a85e42226f Mon Sep 17 00:00:00 2001
From: Valentino Hudhra <2587839+valentin0h@users.noreply.github.com>
Date: Mon, 9 Dec 2024 12:29:03 +0100
Subject: [PATCH] Add visual tests for tint (#2601)

---
 packages/gitbook/e2e/pages.spec.ts | 123 +++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)

diff --git a/packages/gitbook/e2e/pages.spec.ts b/packages/gitbook/e2e/pages.spec.ts
index c20edb7e7..8476da0de 100644
--- a/packages/gitbook/e2e/pages.spec.ts
+++ b/packages/gitbook/e2e/pages.spec.ts
@@ -1,5 +1,6 @@
 import { argosScreenshot } from '@argos-ci/playwright';
 import {
+    CustomizationBackground,
     CustomizationHeaderPreset,
     CustomizationIconsStyle,
     CustomizationLocale,
@@ -478,6 +479,128 @@ 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',
+                            },
+                        ],
+                    },
+                }),
+                run: waitForCookiesDialog,
+            },
+            {
+                name: 'With tint - Default preset',
+                url: getCustomizationURL({
+                    styling: {
+                        tint: { color: { light: '#346DDB', dark: '#346DDB' } },
+                    },
+                    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',
+                            },
+                        ],
+                    },
+                }),
+                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',
+                            },
+                        ],
+                    },
+                }),
+                run: waitForCookiesDialog,
+            },
+            {
+                name: 'With tint - Contrast',
+                url: getCustomizationURL({
+                    styling: {
+                        tint: { color: { light: '#346DDB', dark: '#346DDB' } },
+                    },
+                    header: {
+                        preset: CustomizationHeaderPreset.Contrast,
+                        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',
+                            },
+                        ],
+                    },
+                }),
+                run: waitForCookiesDialog,
+            },
+            {
+                name: 'With tint - Custom preset',
+                url: getCustomizationURL({
+                    styling: {
+                        tint: { color: { light: '#346DDB', dark: '#346DDB' } },
+                    },
+                    header: {
+                        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',
+                            },
+                        ],
+                    },
+                }),
+                run: waitForCookiesDialog,
+            },
         ],
     },
     {