mirror of
https://github.com/GitbookIO/gitbook.git
synced 2026-09-16 15:45:13 +00:00
Make match background a customization option (#134)
* Add classname * Start applying it * reset existing style changes in favor of global setup * setup v1 plain mode * fix name clash * move light/dark bases as vars * side image render fix * customize individual light tiers for light mode * Add comment about primary and base * remove style prop from image * w-unset not needed on image --------- Co-authored-by: sebastiangraz <graz@live.se>
This commit is contained in:
Samy Pessé
@@ -4,8 +4,20 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--dark: 23 23 23;
|
||||
--light: 250 251 251;
|
||||
--dark-base: 23 23 23;
|
||||
--light-base: 249 250 250;
|
||||
|
||||
--light-1: color-mix(in srgb, rgb(var(--primary-base-600)), rgb(var(--light-base)) 99%);
|
||||
--light-DEFAULT: color-mix(in srgb, rgb(var(--primary-base-700)), rgb(var(--light-base)) 96%);
|
||||
--light-2: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 92%);
|
||||
--light-3: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 88%);
|
||||
--light-4: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 72%);
|
||||
|
||||
--dark-1: color-mix(in srgb, rgb(var(--primary-base-100)), rgb(var(--dark-base)) 99%);
|
||||
--dark-DEFAULT: color-mix(in srgb, rgb(var(--primary-base-300)), rgb(var(--dark-base)) 96%);
|
||||
--dark-2: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(var(--dark-base)) 92%);
|
||||
--dark-3: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(var(--dark-base)) 88%);
|
||||
--dark-4: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(var(--dark-base)) 64%);
|
||||
@apply leading-relaxed;
|
||||
}
|
||||
body {
|
||||
@@ -14,6 +26,26 @@
|
||||
html {
|
||||
@apply gutter-stable;
|
||||
}
|
||||
html:is(.plain-background) {
|
||||
--dark-base: 22 22 22;
|
||||
--light-base: 255 255 255;
|
||||
/* reset primaries as greys */
|
||||
--primary-base-50: 239 239 239;
|
||||
--primary-base-100: 222 222 222;
|
||||
--primary-base-200: 200 200 200;
|
||||
--primary-base-300: 180 180 180;
|
||||
--primary-base-400: 150 150 150;
|
||||
--primary-base-500: 120 120 120;
|
||||
--primary-base-600: 90 90 90;
|
||||
--primary-base-700: 70 70 70;
|
||||
--primary-base-800: 30 30 30;
|
||||
--primary-base-900: 19 19 19;
|
||||
|
||||
--light-DEFAULT: color-mix(in srgb, rgb(var(--primary-base-700)), rgb(var(--light-base)) 100%);
|
||||
--light-2: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 96%);
|
||||
--light-3: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 90%);
|
||||
--light-4: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 76%);
|
||||
}
|
||||
h1 {
|
||||
@apply tracking-[-0.025em] text-dark dark:text-light text-balance;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import {
|
||||
CustomizationBackground,
|
||||
CustomizationCorners,
|
||||
CustomizationHeaderPreset,
|
||||
CustomizationSettings,
|
||||
@@ -38,14 +39,22 @@ export default async function SpaceRootLayout(props: {
|
||||
<html
|
||||
suppressHydrationWarning
|
||||
lang={customization.internationalization.locale}
|
||||
className={tcls(
|
||||
customization.header.preset === CustomizationHeaderPreset.None
|
||||
? null
|
||||
: [
|
||||
// Take the sticky header in consideration for the scrolling
|
||||
`scroll-pt-[76px]`,
|
||||
],
|
||||
)}
|
||||
className={
|
||||
tcls(
|
||||
customization.header.preset === CustomizationHeaderPreset.None
|
||||
? null
|
||||
: [
|
||||
// Take the sticky header in consideration for the scrolling
|
||||
`scroll-pt-[76px]`,
|
||||
],
|
||||
) +
|
||||
(customization.styling.corners === CustomizationCorners.Straight
|
||||
? ' straight-corners'
|
||||
: '') +
|
||||
(customization.styling.background === CustomizationBackground.Plain
|
||||
? ' plain-background'
|
||||
: '')
|
||||
}
|
||||
>
|
||||
<head>
|
||||
{customization.privacyPolicy.url ? (
|
||||
@@ -62,6 +71,10 @@ export default async function SpaceRootLayout(props: {
|
||||
'primary-color',
|
||||
customization.styling.primaryColor.light,
|
||||
)}
|
||||
${generateColorVariable(
|
||||
'primary-base',
|
||||
customization.styling.primaryColor.light,
|
||||
)}
|
||||
${generateColorVariable(
|
||||
'header-background',
|
||||
headerTheme.backgroundColor.light,
|
||||
@@ -76,6 +89,10 @@ export default async function SpaceRootLayout(props: {
|
||||
'primary-color',
|
||||
customization.styling.primaryColor.dark,
|
||||
)}
|
||||
${generateColorVariable(
|
||||
'primary-base',
|
||||
customization.styling.primaryColor.dark,
|
||||
)}
|
||||
${generateColorVariable(
|
||||
'header-background',
|
||||
headerTheme.backgroundColor.dark,
|
||||
@@ -85,17 +102,12 @@ export default async function SpaceRootLayout(props: {
|
||||
`}</style>
|
||||
</head>
|
||||
<body
|
||||
className={
|
||||
tcls(
|
||||
`${fonts[customization.styling.font].className}`,
|
||||
`${ibmPlexMono.variable}`,
|
||||
'bg-light',
|
||||
'dark:bg-dark',
|
||||
) +
|
||||
(customization.styling.corners === CustomizationCorners.Straight
|
||||
? ' straight-corners'
|
||||
: '')
|
||||
}
|
||||
className={tcls(
|
||||
`${fonts[customization.styling.font].className}`,
|
||||
`${ibmPlexMono.variable}`,
|
||||
'bg-light',
|
||||
'dark:bg-dark',
|
||||
)}
|
||||
>
|
||||
<ClientContexts
|
||||
nonce={nonce}
|
||||
|
||||
@@ -18,14 +18,13 @@ export function Images(props: BlockProps<DocumentBlockImages>) {
|
||||
return (
|
||||
<div
|
||||
className={tcls(
|
||||
'w-full',
|
||||
style,
|
||||
'flex',
|
||||
'flex-row',
|
||||
'gap-3',
|
||||
block.data.align === 'center' && 'justify-center',
|
||||
block.data.align === 'right' && 'justify-end',
|
||||
block.data.align === 'left' && 'justify-start',
|
||||
style,
|
||||
isMultipleImages && ['grid', 'grid-flow-col', 'max-w-none'],
|
||||
block.data.fullWidth ? 'max-w-screen-2xl' : null,
|
||||
'justify-center',
|
||||
@@ -36,7 +35,7 @@ export function Images(props: BlockProps<DocumentBlockImages>) {
|
||||
key={node.key}
|
||||
block={node}
|
||||
document={document}
|
||||
style={[i > 0 && 'mt-4', style]}
|
||||
style={[]}
|
||||
siblings={block.nodes.length}
|
||||
context={context}
|
||||
isOffscreen={isOffscreen}
|
||||
|
||||
@@ -53,7 +53,7 @@ export function SpaceLayout(props: {
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* <ColorDebugger /> */}
|
||||
{/* <ColorDebugger /> */}
|
||||
<Header
|
||||
withTopHeader={withTopHeader}
|
||||
space={space}
|
||||
|
||||
+22
-11
@@ -41,20 +41,26 @@ const config: Config = {
|
||||
},
|
||||
colors: {
|
||||
// Dynamic colors matching the customization settings
|
||||
|
||||
/** primary-color used to accent elements, these colors remain unchanged when toggling between the CustomizationBackground options**/
|
||||
primary: generateShades('primary-color'),
|
||||
|
||||
/** primary-base is an internal color that generates the same colors as primary-color. But it's shades will change into a grayscale if CustomizationBackground.Plain is selected. (globals.css) **/
|
||||
primarybase: generateShades('primary-base'),
|
||||
|
||||
light: {
|
||||
1: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-600)), rgb(var(--light)) 99%), transparent calc(100% - 100% * <alpha-value>))`, //1 99%
|
||||
DEFAULT: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-700)), rgb(var(--light)) 96%), transparent calc(100% - 100% * <alpha-value>))`, //(default) 96%
|
||||
2: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-800)), rgb(var(--light)) 92%), transparent calc(100% - 100% * <alpha-value>))`, //2 92%
|
||||
3: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-800)), rgb(var(--light)) 88%), transparent calc(100% - 100% * <alpha-value>))`, //4 82%
|
||||
4: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-800)), rgb(var(--light)) 72%), transparent calc(100% - 100% * <alpha-value>))`, //5 64%
|
||||
1: `color-mix(in srgb, var(--light-1), transparent calc(100% - 100% * <alpha-value>))`, //1 99%
|
||||
DEFAULT: `color-mix(in srgb, var(--light-DEFAULT), transparent calc(100% - 100% * <alpha-value>))`, //(default) 96%
|
||||
2: `color-mix(in srgb, var(--light-2), transparent calc(100% - 100% * <alpha-value>))`, //2 92%
|
||||
3: `color-mix(in srgb, var(--light-3), transparent calc(100% - 100% * <alpha-value>))`, //4 82%
|
||||
4: `color-mix(in srgb, var(--light-4), transparent calc(100% - 100% * <alpha-value>))`, //5 64%
|
||||
},
|
||||
dark: {
|
||||
1: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-100)), rgb(var(--dark)) 99%), transparent calc(100% - 100% * <alpha-value>))`, //1 99%
|
||||
DEFAULT: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-300)), rgb(var(--dark)) 96%), transparent calc(100% - 100% * <alpha-value>))`, //(default) 96%
|
||||
2: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-200)), rgb(var(--dark)) 92%), transparent calc(100% - 100% * <alpha-value>))`, //2 92%
|
||||
3: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-200)), rgb(var(--dark)) 88%), transparent calc(100% - 100% * <alpha-value>))`, //4 82%
|
||||
4: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-200)), rgb(var(--dark)) 64%), transparent calc(100% - 100% * <alpha-value>))`, //5 64%
|
||||
1: `color-mix(in srgb, var(--dark-1), transparent calc(100% - 100% * <alpha-value>))`, //1 99%
|
||||
DEFAULT: `color-mix(in srgb, var(--dark-DEFAULT), transparent calc(100% - 100% * <alpha-value>))`, //(default) 96%
|
||||
2: `color-mix(in srgb, var(--dark-2), transparent calc(100% - 100% * <alpha-value>))`, //2 92%
|
||||
3: `color-mix(in srgb, var(--dark-3), transparent calc(100% - 100% * <alpha-value>))`, //4 82%
|
||||
4: `color-mix(in srgb, var(--dark-4), transparent calc(100% - 100% * <alpha-value>))`, //5 64%
|
||||
},
|
||||
yellow: generateShades('yellow'),
|
||||
teal: generateShades('teal'),
|
||||
@@ -181,7 +187,12 @@ const config: Config = {
|
||||
/**
|
||||
* Variant when the space is configured with straight corners.
|
||||
*/
|
||||
addVariant('straight-corners', 'body.straight-corners &');
|
||||
addVariant('straight-corners', 'html.straight-corners &');
|
||||
|
||||
/**
|
||||
* Variant when the space is configured with a theme matching background.
|
||||
*/
|
||||
addVariant('plain-background', 'html.plain-background &');
|
||||
|
||||
/**
|
||||
* Variant when the page contains a block that will be rendered in full-width mode.
|
||||
|
||||
Reference in New Issue
Block a user