Skip to content

Commit 71688a8

Browse files
zenoachtigvalentin0h
zenoachtig
and
valentin0h
authored
Implement new themes (#2822)
Co-authored-by: Valentino Hudhra <v.hudhra@gmail.com>
1 parent 00c476e commit 71688a8

23 files changed

+313
-269
lines changed

‎.changeset/silly-planets-roll.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'gitbook': minor
3+
---
4+
5+
Introduction of new themes: Clean, Muted, Bold, and Gradient

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

Lines changed: 113 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import { argosScreenshot } from '@argos-ci/playwright';
22
import {
33
CustomizationBackground,
4+
CustomizationContentLink,
45
CustomizationCorners,
56
CustomizationFont,
7+
CustomizationHeaderItem,
68
CustomizationHeaderPreset,
79
CustomizationIconsStyle,
810
CustomizationLocale,
911
CustomizationSidebarBackgroundStyle,
1012
CustomizationSidebarListStyle,
13+
CustomizationTheme,
14+
CustomizationThemedColor,
1115
CustomizationThemeMode,
1216
SiteCustomizationSettings,
1317
} from '@gitbook/api';
@@ -81,7 +85,26 @@ const allThemeModes: CustomizationThemeMode[] = [
8185
CustomizationThemeMode.Dark,
8286
];
8387

84-
const allThemePresets: CustomizationHeaderPreset[] = [
88+
const allTintColors: Array<{
89+
label: string;
90+
value: CustomizationThemedColor | undefined;
91+
}> = [
92+
{
93+
label: 'Off',
94+
value: undefined,
95+
},
96+
{ label: 'Primary', value: { light: '#346DDB', dark: '#346DDB' } },
97+
{ label: 'Custom', value: { light: '#C62C68', dark: '#EF96B8' } },
98+
];
99+
100+
const allThemes: CustomizationTheme[] = [
101+
CustomizationTheme.Clean,
102+
CustomizationTheme.Muted,
103+
CustomizationTheme.Bold,
104+
CustomizationTheme.Gradient,
105+
];
106+
107+
const allDeprecatedThemePresets: CustomizationHeaderPreset[] = [
85108
CustomizationHeaderPreset.Default,
86109
CustomizationHeaderPreset.Bold,
87110
CustomizationHeaderPreset.Contrast,
@@ -93,6 +116,23 @@ const allSidebarBackgroundStyles: CustomizationSidebarBackgroundStyle[] = [
93116
CustomizationSidebarBackgroundStyle.Filled,
94117
];
95118

119+
// Common customization settings
120+
121+
const headerLinks: CustomizationHeaderItem[] = [
122+
{
123+
title: 'Secondary button',
124+
to: { kind: 'url', url: 'https://www.gitbook.com' },
125+
style: 'button-secondary',
126+
links: [],
127+
},
128+
{
129+
title: 'Primary button',
130+
to: { kind: 'url', url: 'https://www.gitbook.com' },
131+
style: 'button-primary',
132+
links: [],
133+
},
134+
];
135+
96136
async function waitForCookiesDialog(page: Page) {
97137
const dialog = page.getByRole('dialog', { name: 'Cookies' });
98138
const accept = dialog.getByRole('button', { name: 'Accept' });
@@ -561,90 +601,94 @@ const testCases: TestsCase[] = [
561601
{
562602
name: 'Customization',
563603
baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/',
564-
tests: allThemeModes.flatMap((theme) => [
604+
tests: allThemeModes.flatMap((themeMode) => [
565605
{
566-
name: `Without header - Theme ${theme}`,
606+
name: `Without header - Theme mode ${themeMode}`,
567607
url: getCustomizationURL({
568608
header: {
569609
preset: CustomizationHeaderPreset.None,
570610
links: [],
571611
},
572612
themes: {
573-
default: theme,
613+
default: themeMode,
574614
toggeable: false,
575615
},
576616
}),
577617
run: waitForCookiesDialog,
578618
},
579619
{
580-
name: `With duotone icons - Theme ${theme}`,
620+
name: `With duotone icons - Theme mode ${themeMode}`,
581621
url:
582622
'page-options/page-with-icon' +
583623
getCustomizationURL({
584624
styling: {
585625
icons: CustomizationIconsStyle.Duotone,
586626
},
587627
themes: {
588-
default: theme,
628+
default: themeMode,
589629
toggeable: false,
590630
},
591631
}),
592632
run: waitForCookiesDialog,
593633
},
594634
{
595-
name: `With header buttons - Theme ${theme}`,
635+
name: `With header buttons - Theme mode ${themeMode}`,
596636
url: getCustomizationURL({
597637
header: {
598638
preset: CustomizationHeaderPreset.Default,
599-
links: [
600-
{
601-
title: 'Secondary button',
602-
to: { kind: 'url', url: 'https://www.gitbook.com' },
603-
style: 'button-secondary',
604-
},
605-
{
606-
title: 'Primary button',
607-
to: { kind: 'url', url: 'https://www.gitbook.com' },
608-
style: 'button-primary',
609-
},
610-
],
639+
links: headerLinks,
611640
},
612641
themes: {
613-
default: theme,
642+
default: themeMode,
614643
toggeable: false,
615644
},
616645
}),
617646
run: waitForCookiesDialog,
618647
},
619648
{
620-
name: `Without tint - Default preset - Theme ${theme}`,
649+
name: `Without tint - Default preset - Theme mode ${themeMode}`,
621650
url: getCustomizationURL({
622651
header: {
623652
preset: CustomizationHeaderPreset.Default,
624-
links: [
625-
{
626-
title: 'Secondary button',
627-
to: { kind: 'url', url: 'https://www.gitbook.com' },
628-
style: 'button-secondary',
629-
},
630-
{
631-
title: 'Primary button',
632-
to: { kind: 'url', url: 'https://www.gitbook.com' },
633-
style: 'button-primary',
634-
},
635-
],
653+
links: headerLinks,
636654
},
637655
themes: {
638-
default: theme,
656+
default: themeMode,
639657
toggeable: false,
640658
},
641659
}),
642660
run: waitForCookiesDialog,
643661
},
644-
// Theme-specific tests
645-
...allThemePresets.flatMap((preset) => [
662+
// New site themes
663+
...allThemes.flatMap((theme) => [
664+
...allTintColors.flatMap((tint) => [
665+
...allSidebarBackgroundStyles.flatMap((sidebarStyle) => ({
666+
name: `Theme ${theme} - Tint ${tint.label} - Sidebar ${sidebarStyle} - Mode ${themeMode}`,
667+
url: getCustomizationURL({
668+
styling: {
669+
theme,
670+
...(tint.value ? { tint: { color: tint.value } } : {}),
671+
sidebar: {
672+
background: sidebarStyle,
673+
list: CustomizationSidebarListStyle.Default,
674+
},
675+
},
676+
header: {
677+
links: headerLinks,
678+
},
679+
themes: {
680+
default: themeMode,
681+
toggeable: false,
682+
},
683+
}),
684+
run: waitForCookiesDialog,
685+
})),
686+
]),
687+
]),
688+
// Deprecated header themes
689+
...allDeprecatedThemePresets.flatMap((preset) => [
646690
...allSidebarBackgroundStyles.flatMap((sidebarStyle) => ({
647-
name: `With tint - Preset ${preset} - Sidebar ${sidebarStyle} - Theme ${theme}`,
691+
name: `With tint - Legacy header preset ${preset} - Sidebar ${sidebarStyle} - Theme mode ${themeMode}`,
648692
url: getCustomizationURL({
649693
styling: {
650694
tint: { color: { light: '#346DDB', dark: '#346DDB' } },
@@ -661,50 +705,28 @@ const testCases: TestsCase[] = [
661705
linkColor: { light: '#4DDE98', dark: '#0C693D' },
662706
}
663707
: {}),
664-
links: [
665-
{
666-
title: 'Secondary button',
667-
to: { kind: 'url', url: 'https://www.gitbook.com' },
668-
style: 'button-secondary',
669-
},
670-
{
671-
title: 'Primary button',
672-
to: { kind: 'url', url: 'https://www.gitbook.com' },
673-
style: 'button-primary',
674-
},
675-
],
708+
links: headerLinks,
676709
},
677710
themes: {
678-
default: theme,
711+
default: themeMode,
679712
toggeable: false,
680713
},
681714
}),
682715
run: waitForCookiesDialog,
683716
})),
684717
]),
685718
{
686-
name: `With tint - Legacy background match - Theme ${theme}`,
719+
name: `With tint - Legacy background match - Theme mode ${themeMode}`,
687720
url: getCustomizationURL({
688721
styling: {
689722
background: CustomizationBackground.Match,
690723
},
691724
header: {
692725
preset: CustomizationHeaderPreset.Default,
693-
links: [
694-
{
695-
title: 'Secondary button',
696-
to: { kind: 'url', url: 'https://www.gitbook.com' },
697-
style: 'button-secondary',
698-
},
699-
{
700-
title: 'Primary button',
701-
to: { kind: 'url', url: 'https://www.gitbook.com' },
702-
style: 'button-primary',
703-
},
704-
],
726+
links: headerLinks,
705727
},
706728
themes: {
707-
default: theme,
729+
default: themeMode,
708730
toggeable: false,
709731
},
710732
}),
@@ -1488,13 +1510,40 @@ for (const testCase of testCases) {
14881510
* Create a URL with customization settings.
14891511
*/
14901512
function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettings>): string {
1513+
// We replicate the theme migration logic from the API to the tests, because the don't get these settings from the API.
1514+
// We can remove this once the migration to the new themes have been completed and the new theme styles are verified
1515+
// Map the theme preset (+ tint) to one of the new themes
1516+
const newTheme = (() => {
1517+
if (partial.styling?.theme) {
1518+
return partial.styling.theme;
1519+
}
1520+
1521+
switch (partial.header?.preset) {
1522+
case CustomizationHeaderPreset.Bold:
1523+
case CustomizationHeaderPreset.Contrast:
1524+
case CustomizationHeaderPreset.Custom:
1525+
return CustomizationTheme.Bold;
1526+
1527+
case CustomizationHeaderPreset.None:
1528+
case CustomizationHeaderPreset.Default:
1529+
if (partial.styling?.tint) {
1530+
return CustomizationTheme.Muted;
1531+
}
1532+
1533+
return CustomizationTheme.Clean;
1534+
default:
1535+
return CustomizationTheme.Clean;
1536+
}
1537+
})();
1538+
14911539
/**
14921540
* Default customization settings.
14931541
*
14941542
* The customization object passed to the URL should be a valid API settings object. Hence we extend the test with necessary defaults.
14951543
*/
14961544
const DEFAULT_CUSTOMIZATION: SiteCustomizationSettings = {
14971545
styling: {
1546+
theme: newTheme,
14981547
primaryColor: { light: '#346DDB', dark: '#346DDB' },
14991548
corners: CustomizationCorners.Rounded,
15001549
font: CustomizationFont.Inter,

‎packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const CodeBlockRenderer = forwardRef(function CodeBlockRenderer(
4545
/>
4646
<pre
4747
className={tcls(
48-
'[grid-area:2/1] relative overflow-auto bg-tint ring-tint-subtle hide-scroll',
48+
'[grid-area:2/1] relative overflow-auto bg-tint theme-gradient:bg-tint-12/1 ring-tint-subtle hide-scroll',
4949
'rounded-md straight-corners:rounded-sm',
5050
title && 'rounded-ss-none',
5151
)}

‎packages/gitbook/src/components/DocumentView/Hint.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@ const HINT_STYLES: {
6666
bodyColor: ['[&_a]:text-primary', '[&_a:hover]:text-primary-strong'],
6767
style: [
6868
'bg-tint',
69+
'print-mode:!bg-tint',
70+
'theme-muted:bg-tint-base',
71+
'theme-bold-tint:bg-tint-base',
72+
'theme-gradient:bg-tint-12/1',
6973
'border-tint',
7074
'[&_.can-override-bg]:bg-tint-active',
7175
'[&_.can-override-text]:text-tint-strong',

0 commit comments

Comments
 (0)