diff --git a/src/app/[spaceId]/globals.css b/src/app/[spaceId]/globals.css index 4f4d16696..9aa911bfd 100644 --- a/src/app/[spaceId]/globals.css +++ b/src/app/[spaceId]/globals.css @@ -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; } diff --git a/src/app/[spaceId]/layout.tsx b/src/app/[spaceId]/layout.tsx index b7f7cfa4c..88b296dcb 100644 --- a/src/app/[spaceId]/layout.tsx +++ b/src/app/[spaceId]/layout.tsx @@ -1,4 +1,5 @@ import { + CustomizationBackground, CustomizationCorners, CustomizationHeaderPreset, CustomizationSettings, @@ -38,14 +39,22 @@ export default async function SpaceRootLayout(props: { {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: { `} ) { return (
) { key={node.key} block={node} document={document} - style={[i > 0 && 'mt-4', style]} + style={[]} siblings={block.nodes.length} context={context} isOffscreen={isOffscreen} diff --git a/src/components/SpaceLayout/SpaceLayout.tsx b/src/components/SpaceLayout/SpaceLayout.tsx index e6ab6fdd2..9de0d0867 100644 --- a/src/components/SpaceLayout/SpaceLayout.tsx +++ b/src/components/SpaceLayout/SpaceLayout.tsx @@ -53,7 +53,7 @@ export function SpaceLayout(props: { return (
- {/* */} + {/* */}
))`, //1 99% - DEFAULT: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-700)), rgb(var(--light)) 96%), transparent calc(100% - 100% * ))`, //(default) 96% - 2: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-800)), rgb(var(--light)) 92%), transparent calc(100% - 100% * ))`, //2 92% - 3: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-800)), rgb(var(--light)) 88%), transparent calc(100% - 100% * ))`, //4 82% - 4: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-800)), rgb(var(--light)) 72%), transparent calc(100% - 100% * ))`, //5 64% + 1: `color-mix(in srgb, var(--light-1), transparent calc(100% - 100% * ))`, //1 99% + DEFAULT: `color-mix(in srgb, var(--light-DEFAULT), transparent calc(100% - 100% * ))`, //(default) 96% + 2: `color-mix(in srgb, var(--light-2), transparent calc(100% - 100% * ))`, //2 92% + 3: `color-mix(in srgb, var(--light-3), transparent calc(100% - 100% * ))`, //4 82% + 4: `color-mix(in srgb, var(--light-4), transparent calc(100% - 100% * ))`, //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% * ))`, //1 99% - DEFAULT: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-300)), rgb(var(--dark)) 96%), transparent calc(100% - 100% * ))`, //(default) 96% - 2: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-200)), rgb(var(--dark)) 92%), transparent calc(100% - 100% * ))`, //2 92% - 3: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-200)), rgb(var(--dark)) 88%), transparent calc(100% - 100% * ))`, //4 82% - 4: `color-mix(in srgb, color-mix(in srgb, rgb(var(--primary-color-200)), rgb(var(--dark)) 64%), transparent calc(100% - 100% * ))`, //5 64% + 1: `color-mix(in srgb, var(--dark-1), transparent calc(100% - 100% * ))`, //1 99% + DEFAULT: `color-mix(in srgb, var(--dark-DEFAULT), transparent calc(100% - 100% * ))`, //(default) 96% + 2: `color-mix(in srgb, var(--dark-2), transparent calc(100% - 100% * ))`, //2 92% + 3: `color-mix(in srgb, var(--dark-3), transparent calc(100% - 100% * ))`, //4 82% + 4: `color-mix(in srgb, var(--dark-4), transparent calc(100% - 100% * ))`, //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.