Skip to content

Commit

Permalink
Make tint color subtler when equal to primary color (#2808)
Browse files Browse the repository at this point in the history 
Co-authored-by: Valentino Hudhra <2587839+valentin0h@users.noreply.github.com>
  • Loading branch information
@zenoachtig @valentin0h
zenoachtig and valentin0h authored Feb 5, 2025
1 parent 21cbd9e commit 18953b2
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 83 deletions.
5 changes: 5 additions & 0 deletions .changeset/six-hotels-pay.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'gitbook': patch
---

Subtler tint color when based on the primary color, by mixing in some gray
91 changes: 64 additions & 27 deletions packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,36 @@ import {
CustomizationCorners,
CustomizationHeaderPreset,
CustomizationIconsStyle,
CustomizationSettings,
type CustomizationSettings,
CustomizationSidebarBackgroundStyle,
CustomizationSidebarListStyle,
CustomizationTint,
SiteCustomizationSettings,
type CustomizationThemedColor,
type CustomizationTint,
type SiteCustomizationSettings,
} from '@gitbook/api';
import { IconsProvider, IconStyle } from '@gitbook/icons';
import assertNever from 'assert-never';
import colors from 'tailwindcss/colors';

import { fontNotoColorEmoji, fonts, ibmPlexMono } from '@/fonts';
import { getSpaceLanguage } from '@/intl/server';
import { getStaticFileURL } from '@/lib/assets';
import { colorContrast, colorScale, hexToRgb, shadesOfColor } from '@/lib/colors';
import {
colorContrast,
colorScale,
type ColorScaleOptions,
DARK_BASE,
DEFAULT_TINT_COLOR,
hexToRgb,
LIGHT_BASE,
shadesOfColor,
} from '@/lib/colors';
import { tcls } from '@/lib/tailwind';

import { ClientContexts } from './ClientContexts';

import '@gitbook/icons/style.css';
import './globals.css';

const DEFAULT_TINT_COLOR = '#787878';

/**
* Layout shared between the content and the PDF renderer.
* It takes care of setting the theme and the language.
Expand All @@ -38,6 +45,7 @@ export async function CustomizationRootLayout(props: {
const headerTheme = generateHeaderTheme(customization);
const language = getSpaceLanguage(customization);
const tintColor = getTintColor(customization);
const mixColor = getTintMixColor(customization.styling.primaryColor, tintColor);
const sidebarStyles = getSidebarStyles(customization);

return (
Expand All @@ -52,8 +60,8 @@ export async function CustomizationRootLayout(props: {
? ' straight-corners'
: '',
tintColor ? ' tint' : 'no-tint',
sidebarStyles.background && ' sidebar-' + sidebarStyles.background,
sidebarStyles.list && ' sidebar-list-' + sidebarStyles.list,
sidebarStyles.background && ` sidebar-${sidebarStyles.background}`,
sidebarStyles.list && ` sidebar-list-${sidebarStyles.list}`,
)}
>
<head>
Expand All @@ -68,7 +76,7 @@ export async function CustomizationRootLayout(props: {
>{`
:root {
${generateColorVariable('primary', customization.styling.primaryColor.light)}
${generateColorVariable('tint', tintColor ? (tintColor?.light ?? customization.styling.primaryColor.light ?? DEFAULT_TINT_COLOR) : DEFAULT_TINT_COLOR, { mix: !tintColor ? customization.styling.primaryColor.light : undefined })}
${generateColorVariable('tint', tintColor ? tintColor.light : DEFAULT_TINT_COLOR, { mix: mixColor && { color: mixColor.color.light, ratio: mixColor.ratio.light } })}
${generateColorVariable('neutral', DEFAULT_TINT_COLOR)}
--header-background: ${hexToRgb(headerTheme.backgroundColor.light)};
Expand All @@ -77,7 +85,7 @@ export async function CustomizationRootLayout(props: {
.dark {
${generateColorVariable('primary', customization.styling.primaryColor.dark, { darkMode: true })}
${generateColorVariable('tint', tintColor ? (tintColor?.dark ?? customization.styling.primaryColor.dark ?? DEFAULT_TINT_COLOR) : DEFAULT_TINT_COLOR, { darkMode: true, mix: !tintColor ? customization.styling.primaryColor.dark : undefined })}
${generateColorVariable('tint', tintColor ? tintColor.dark : DEFAULT_TINT_COLOR, { darkMode: true, mix: mixColor && { color: mixColor?.color.dark, ratio: mixColor.ratio.dark } })}
${generateColorVariable('neutral', DEFAULT_TINT_COLOR, { darkMode: true })}
--header-background: ${hexToRgb(headerTheme.backgroundColor.dark)};
Expand Down Expand Up @@ -130,6 +138,38 @@ function getTintColor(
}
}

function getTintMixColor(
primaryColor: CustomizationThemedColor,
tintColor: CustomizationTint['color'] | undefined,
): {
color: CustomizationThemedColor;
ratio: { light: number; dark: number };
} {
if (!tintColor) {
// Mix in a bit of the primary colour into neutral, to match with primary nicely.
return {
color: primaryColor,
ratio: {
light: 0.2,
dark: 0.1,
},
};
}

// Mix in neutral into the tint colour to offset it from the primary, and to make the effect less intense.
// If the tint colour differs from the primary colour, we use the tint colour fully without mixing.
return {
color: {
light: DEFAULT_TINT_COLOR,
dark: DEFAULT_TINT_COLOR,
},
ratio: {
light: tintColor.light.toUpperCase() === primaryColor.light.toUpperCase() ? 0.4 : 0,
dark: tintColor.dark.toUpperCase() === primaryColor.dark.toUpperCase() ? 0.4 : 0,
},
};
}

/**
* Get the sidebar styles from the customization settings.
* If it is a space customization, it will return the default styles.
Expand Down Expand Up @@ -157,9 +197,8 @@ function generateColorVariable(
{
withContrast = true,
...options // Pass any options along to the colorScale() function
}: {
}: ColorScaleOptions & {
withContrast?: boolean;
[key: string]: any;
} = {},
) {
const shades: Record<string, string> =
Expand Down Expand Up @@ -191,8 +230,8 @@ function generateHeaderTheme(customization: CustomizationSettings | SiteCustomiz
case CustomizationHeaderPreset.Default: {
return {
backgroundColor: {
light: colors.white,
dark: colors.black,
light: LIGHT_BASE,
dark: DARK_BASE,
},
linkColor: {
light: customization.styling.primaryColor.light,
Expand All @@ -209,24 +248,24 @@ function generateHeaderTheme(customization: CustomizationSettings | SiteCustomiz
linkColor: {
light: colorContrast(
tintColor?.light ?? customization.styling.primaryColor.light,
[colors.white, colors.black],
[LIGHT_BASE, DARK_BASE],
),
dark: colorContrast(
tintColor?.dark ?? customization.styling.primaryColor.dark,
[colors.white, colors.black],
[LIGHT_BASE, DARK_BASE],
),
},
};
}
case CustomizationHeaderPreset.Contrast: {
return {
backgroundColor: {
light: colors.black,
dark: colors.white,
light: DARK_BASE,
dark: LIGHT_BASE,
},
linkColor: {
light: colors.white,
dark: colors.black,
light: LIGHT_BASE,
dark: DARK_BASE,
},
};
}
Expand All @@ -236,22 +275,20 @@ function generateHeaderTheme(customization: CustomizationSettings | SiteCustomiz
light:
customization.header.backgroundColor?.light ??
tintColor?.light ??
colors.white,
LIGHT_BASE,
dark:
customization.header.backgroundColor?.dark ??
tintColor?.dark ??
colors.black,
customization.header.backgroundColor?.dark ?? tintColor?.dark ?? DARK_BASE,
},
linkColor: {
light:
customization.header.linkColor?.light ??
(tintColor?.light &&
colorContrast(tintColor.light, [colors.white, colors.black])) ??
colorContrast(tintColor.light, [LIGHT_BASE, DARK_BASE])) ??
customization.styling.primaryColor.light,
dark:
customization.header.linkColor?.dark ??
(tintColor?.dark &&
colorContrast(tintColor.dark, [colors.white, colors.black])) ??
colorContrast(tintColor.dark, [LIGHT_BASE, DARK_BASE])) ??
customization.styling.primaryColor.dark,
},
};
Expand Down
Loading

0 comments on commit 18953b2

Please sign in to comment.