Skip to content

Commit 664debc

Browse files
zenoachtigvalentin0h
zenoachtig
and
valentin0h
authored
Add tint color (#2605)
Co-authored-by: Valentino Hudhra <[email protected]> Co-authored-by: Valentino Hudhra <[email protected]>
1 parent 56c31c7 commit 664debc

File tree

9 files changed

+242
-189
lines changed

9 files changed

+242
-189
lines changed

‎.changeset/curvy-carrots-melt.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'gitbook': patch
3+
---
4+
5+
Add support for tint color

‎bun.lockb

352 Bytes
Binary file not shown.

‎packages/gitbook/e2e/pages.spec.ts

Lines changed: 113 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
import { argosScreenshot } from '@argos-ci/playwright';
22
import {
33
CustomizationBackground,
4+
CustomizationCorners,
5+
CustomizationFont,
46
CustomizationHeaderPreset,
57
CustomizationIconsStyle,
68
CustomizationLocale,
9+
CustomizationThemeMode,
710
SiteCustomizationSettings,
811
} from '@gitbook/api';
912
import { test, expect, Page } from '@playwright/test';
1013
import jwt from 'jsonwebtoken';
1114
import rison from 'rison';
1215
import { DeepPartial } from 'ts-essentials';
16+
import deepMerge from 'deepmerge';
1317

1418
import { getContentTestURL } from '../tests/utils';
1519

@@ -35,6 +39,18 @@ const allLocales: CustomizationLocale[] = [
3539
CustomizationLocale.Zh,
3640
];
3741

42+
const allThemeModes: CustomizationThemeMode[] = [
43+
CustomizationThemeMode.Light,
44+
CustomizationThemeMode.Dark,
45+
];
46+
47+
const allThemePresets: CustomizationHeaderPreset[] = [
48+
CustomizationHeaderPreset.Default,
49+
CustomizationHeaderPreset.Bold,
50+
CustomizationHeaderPreset.Contrast,
51+
CustomizationHeaderPreset.Custom,
52+
];
53+
3854
async function waitForCookiesDialog(page: Page) {
3955
const dialog = page.getByRole('dialog', { name: 'Cookies' });
4056
const accept = dialog.getByRole('button', { name: 'Accept' });
@@ -436,30 +452,38 @@ const testCases: TestsCase[] = [
436452
{
437453
name: 'Customization',
438454
baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/',
439-
tests: [
455+
tests: allThemeModes.flatMap((theme) => [
440456
{
441-
name: 'Without header',
457+
name: `Without header - Theme ${theme}`,
442458
url: getCustomizationURL({
443459
header: {
444460
preset: CustomizationHeaderPreset.None,
445461
links: [],
446462
},
463+
themes: {
464+
default: theme,
465+
toggeable: false,
466+
},
447467
}),
448468
run: waitForCookiesDialog,
449469
},
450470
{
451-
name: 'With duotone icons',
471+
name: `With duotone icons - Theme ${theme}`,
452472
url:
453473
'page-options/page-with-icon' +
454474
getCustomizationURL({
455475
styling: {
456476
icons: CustomizationIconsStyle.Duotone,
457477
},
478+
themes: {
479+
default: theme,
480+
toggeable: false,
481+
},
458482
}),
459483
run: waitForCookiesDialog,
460484
},
461485
{
462-
name: 'With header buttons',
486+
name: `With header buttons - Theme ${theme}`,
463487
url: getCustomizationURL({
464488
header: {
465489
preset: CustomizationHeaderPreset.Default,
@@ -476,39 +500,16 @@ const testCases: TestsCase[] = [
476500
},
477501
],
478502
},
479-
}),
480-
run: waitForCookiesDialog,
481-
},
482-
{
483-
name: 'With tint - Legacy background match',
484-
url: getCustomizationURL({
485-
styling: {
486-
background: CustomizationBackground.Match,
487-
},
488-
header: {
489-
preset: CustomizationHeaderPreset.Default,
490-
links: [
491-
{
492-
title: 'Secondary button',
493-
to: { kind: 'url', url: 'https://www.gitbook.com' },
494-
style: 'button-secondary',
495-
},
496-
{
497-
title: 'Primary button',
498-
to: { kind: 'url', url: 'https://www.gitbook.com' },
499-
style: 'button-primary',
500-
},
501-
],
503+
themes: {
504+
default: theme,
505+
toggeable: false,
502506
},
503507
}),
504508
run: waitForCookiesDialog,
505509
},
506510
{
507-
name: 'With tint - Default preset',
511+
name: `Without tint - Default preset - Theme ${theme}`,
508512
url: getCustomizationURL({
509-
styling: {
510-
tint: { color: { light: '#346DDB', dark: '#346DDB' } },
511-
},
512513
header: {
513514
preset: CustomizationHeaderPreset.Default,
514515
links: [
@@ -524,41 +525,27 @@ const testCases: TestsCase[] = [
524525
},
525526
],
526527
},
527-
}),
528-
run: waitForCookiesDialog,
529-
},
530-
{
531-
name: 'With tint - Bold preset',
532-
url: getCustomizationURL({
533-
styling: {
534-
tint: { color: { light: '#346DDB', dark: '#346DDB' } },
535-
},
536-
header: {
537-
preset: CustomizationHeaderPreset.Bold,
538-
links: [
539-
{
540-
title: 'Secondary button',
541-
to: { kind: 'url', url: 'https://www.gitbook.com' },
542-
style: 'button-secondary',
543-
},
544-
{
545-
title: 'Primary button',
546-
to: { kind: 'url', url: 'https://www.gitbook.com' },
547-
style: 'button-primary',
548-
},
549-
],
528+
themes: {
529+
default: theme,
530+
toggeable: false,
550531
},
551532
}),
552533
run: waitForCookiesDialog,
553534
},
554-
{
555-
name: 'With tint - Contrast',
535+
...allThemePresets.flatMap((preset) => ({
536+
name: `With tint - Preset ${preset} - Theme ${theme}`,
556537
url: getCustomizationURL({
557538
styling: {
558539
tint: { color: { light: '#346DDB', dark: '#346DDB' } },
559540
},
560541
header: {
561-
preset: CustomizationHeaderPreset.Contrast,
542+
preset,
543+
...(preset === CustomizationHeaderPreset.Custom
544+
? {
545+
backgroundColor: { light: '#C62C68', dark: '#EF96B8' },
546+
linkColor: { light: '#4DDE98', dark: '#0C693D' },
547+
}
548+
: {}),
562549
links: [
563550
{
564551
title: 'Secondary button',
@@ -572,19 +559,21 @@ const testCases: TestsCase[] = [
572559
},
573560
],
574561
},
562+
themes: {
563+
default: theme,
564+
toggeable: false,
565+
},
575566
}),
576567
run: waitForCookiesDialog,
577-
},
568+
})),
578569
{
579-
name: 'With tint - Custom preset',
570+
name: `With tint - Legacy background match - Theme ${theme}`,
580571
url: getCustomizationURL({
581572
styling: {
582-
tint: { color: { light: '#346DDB', dark: '#346DDB' } },
573+
background: CustomizationBackground.Match,
583574
},
584575
header: {
585-
preset: CustomizationHeaderPreset.Custom,
586-
backgroundColor: { light: '#C62C68', dark: '#EF96B8' },
587-
linkColor: { light: '#4DDE98', dark: '#0C693D' },
576+
preset: CustomizationHeaderPreset.Default,
588577
links: [
589578
{
590579
title: 'Secondary button',
@@ -598,10 +587,14 @@ const testCases: TestsCase[] = [
598587
},
599588
],
600589
},
590+
themes: {
591+
default: theme,
592+
toggeable: false,
593+
},
601594
}),
602595
run: waitForCookiesDialog,
603596
},
604-
],
597+
]),
605598
},
606599
{
607600
name: 'Ads',
@@ -971,7 +964,62 @@ for (const testCase of testCases) {
971964
* Create a URL with customization settings.
972965
*/
973966
function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettings>): string {
974-
const encoded = rison.encode_object(partial);
967+
/**
968+
* Default customization settings.
969+
*
970+
* The customization object passed to the URL should be a valid API settings object. Hence we extend the test with necessary defaults.
971+
*/
972+
const DEFAULT_CUSTOMIZATION: SiteCustomizationSettings = {
973+
styling: {
974+
primaryColor: { light: '#346DDB', dark: '#346DDB' },
975+
corners: CustomizationCorners.Rounded,
976+
font: CustomizationFont.Inter,
977+
background: CustomizationBackground.Plain,
978+
icons: CustomizationIconsStyle.Regular,
979+
},
980+
internationalization: {
981+
locale: CustomizationLocale.En,
982+
},
983+
favicon: {},
984+
header: {
985+
preset: CustomizationHeaderPreset.Default,
986+
links: [],
987+
},
988+
footer: {
989+
groups: [],
990+
},
991+
themes: {
992+
default: CustomizationThemeMode.Light,
993+
toggeable: true,
994+
},
995+
pdf: {
996+
enabled: true,
997+
},
998+
feedback: {
999+
enabled: false,
1000+
},
1001+
aiSearch: {
1002+
enabled: true,
1003+
},
1004+
advancedCustomization: {
1005+
enabled: true,
1006+
},
1007+
git: {
1008+
showEditLink: false,
1009+
},
1010+
pagination: {
1011+
enabled: true,
1012+
},
1013+
trademark: {
1014+
enabled: true,
1015+
},
1016+
privacyPolicy: {
1017+
url: 'https://www.gitbook.com/privacy',
1018+
},
1019+
socialPreview: {},
1020+
};
1021+
1022+
const encoded = rison.encode_object(deepMerge(DEFAULT_CUSTOMIZATION, partial));
9751023

9761024
const searchParams = new URLSearchParams();
9771025
searchParams.set('customization', encoded);

‎packages/gitbook/package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@
6868
},
6969
"devDependencies": {
7070
"@argos-ci/playwright": "^2.0.0",
71-
"@playwright/test": "^1.42.1",
7271
"@cloudflare/next-on-pages": "^1.13.5",
7372
"@cloudflare/workers-types": "^4.20240725.0",
73+
"@playwright/test": "^1.42.1",
7474
"@types/js-cookie": "^3.0.6",
7575
"@types/jsontoxml": "^1.0.5",
7676
"@types/jsonwebtoken": "^9.0.6",
@@ -82,15 +82,16 @@
8282
"@types/react-dom": "18.3.1",
8383
"@types/rison": "^0.0.9",
8484
"autoprefixer": "^10",
85+
"deepmerge": "^4.3.1",
86+
"env-cmd": "^10.1.0",
8587
"eslint": "^8",
8688
"eslint-config-next": "^14.2.5",
8789
"eslint-plugin-import": "^2.29.1",
8890
"jsonwebtoken": "^9.0.2",
8991
"postcss": "^8",
9092
"psi": "^4.1.0",
9193
"tailwindcss": "^3.4.0",
92-
"typescript": "^5.5.3",
93-
"env-cmd": "^10.1.0",
94-
"ts-essentials": "^10.0.1"
94+
"ts-essentials": "^10.0.1",
95+
"typescript": "^5.5.3"
9596
}
9697
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
.light .scalar {
66
--scalar-color-1: color-mix(
77
in srgb,
8-
rgb(var(--primary-base-300, 180 180 180)),
8+
rgb(var(--tint-color-300, 180 180 180)),
99
rgb(var(--dark-base, 23 23 23)) 96%
1010
);
1111
--scalar-color-2: color-mix(
@@ -23,12 +23,12 @@
2323
--scalar-background-1: rgb(var(--light-base, 255 255 255));
2424
--scalar-background-2: color-mix(
2525
in srgb,
26-
rgb(var(--primary-base-800, 30 30 30)),
26+
rgb(var(--tint-color-800, 30 30 30)),
2727
var(--scalar-background-1) 96%
2828
);
2929
--scalar-background-3: color-mix(
3030
in srgb,
31-
rgb(var(--primary-base-800, 30 30 30)),
31+
rgb(var(--tint-color-800, 30 30 30)),
3232
var(--scalar-background-1) 90%
3333
);
3434
--scalar-background-accent: #007d9c1f;
@@ -66,7 +66,7 @@
6666
.dark .scalar {
6767
--scalar-color-1: color-mix(
6868
in srgb,
69-
rgb(var(--primary-base-700, 70 70 70)),
69+
rgb(var(--tint-color-700, 70 70 70)),
7070
rgb(var(--light-base, 255 255 255)) 100%
7171
);
7272
--scalar-color-2: color-mix(
@@ -84,12 +84,12 @@
8484
--scalar-background-1: rgb(var(--dark-base, 22 22 22));
8585
--scalar-background-2: color-mix(
8686
in srgb,
87-
rgb(var(--primary-base-200, 200 200 200)),
87+
rgb(var(--tint-color-200, 200 200 200)),
8888
var(--scalar-background-1) 92%
8989
);
9090
--scalar-background-3: color-mix(
9191
in srgb,
92-
rgb(var(--primary-base-200, 200 200 200)),
92+
rgb(var(--tint-color-200, 200 200 200)),
9393
var(--scalar-background-1) 88%
9494
);
9595
--scalar-background-accent: #8ab4f81f;

0 commit comments

Comments
 (0)