From fb90eb0acc1fbd13357d1e18bfa2c3365f433f0d Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Tue, 1 Apr 2025 16:43:08 +0200 Subject: [PATCH] Limit tinted background on bold theme to sites with filled sidebar (#3072) --- .changeset/angry-seahorses-change.md | 5 +++++ .changeset/good-donkeys-sit.md | 5 +++++ packages/colors/src/transformations.ts | 2 +- packages/gitbook/src/components/DocumentView/Hint.tsx | 2 +- packages/gitbook/src/components/Header/Header.tsx | 2 +- packages/gitbook/src/components/PageAside/PageAside.tsx | 2 +- .../gitbook/src/components/PageAside/ScrollSectionsList.tsx | 2 +- .../src/components/RootLayout/CustomizationRootLayout.tsx | 2 +- .../gitbook/src/components/SiteSections/SiteSectionList.tsx | 2 +- .../gitbook/src/components/TableOfContents/PageGroupItem.tsx | 2 +- .../src/components/TableOfContents/TableOfContents.tsx | 2 +- .../gitbook/src/components/TableOfContents/Trademark.tsx | 2 +- .../gitbook/src/components/ThemeToggler/ThemeToggler.tsx | 2 +- 13 files changed, 21 insertions(+), 11 deletions(-) create mode 100644 .changeset/angry-seahorses-change.md create mode 100644 .changeset/good-donkeys-sit.md diff --git a/.changeset/angry-seahorses-change.md b/.changeset/angry-seahorses-change.md new file mode 100644 index 000000000..c7b2ca218 --- /dev/null +++ b/.changeset/angry-seahorses-change.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Limit tinted background on bold theme to sites with filled sidebar diff --git a/.changeset/good-donkeys-sit.md b/.changeset/good-donkeys-sit.md new file mode 100644 index 000000000..968a8e0df --- /dev/null +++ b/.changeset/good-donkeys-sit.md @@ -0,0 +1,5 @@ +--- +"@gitbook/colors": patch +--- + +Reduce chroma of first color scale step diff --git a/packages/colors/src/transformations.ts b/packages/colors/src/transformations.ts index 39c290c57..ab0e25c31 100644 --- a/packages/colors/src/transformations.ts +++ b/packages/colors/src/transformations.ts @@ -220,7 +220,7 @@ export function colorScale( continue; } - const chromaRatio = index < 8 ? (index + 1) * 0.05 : 1; + const chromaRatio = index < 8 ? index * 0.05 : 1; const shade = { L: targetL, // Blend lightness diff --git a/packages/gitbook/src/components/DocumentView/Hint.tsx b/packages/gitbook/src/components/DocumentView/Hint.tsx index da6be18ad..59ff1e0ed 100644 --- a/packages/gitbook/src/components/DocumentView/Hint.tsx +++ b/packages/gitbook/src/components/DocumentView/Hint.tsx @@ -104,7 +104,7 @@ const HINT_STYLES: { '[&_.can-override-text]:text-neutral-strong', ], container: - 'bg-info border-info theme-muted-tint:bg-info-solid/2 theme-bold-tint:bg-info-solid/2', + 'bg-info border-info theme-muted-tint:bg-info-solid/2 [html.sidebar-filled.theme-bold.tint_&]:bg-info-solid/2', containerWithHeader: 'border-info-solid bg-info-subtle', }, warning: { diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index 056318c69..7fa3f4888 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/packages/gitbook/src/components/Header/Header.tsx @@ -38,7 +38,7 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo 'bg-tint-base/9', 'theme-muted:bg-tint-subtle/9', - 'theme-bold-tint:bg-tint-subtle/9', + '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle/9', 'theme-gradient:bg-gradient-primary', 'theme-gradient-tint:bg-gradient-tint', 'contrast-more:bg-tint-base', diff --git a/packages/gitbook/src/components/PageAside/PageAside.tsx b/packages/gitbook/src/components/PageAside/PageAside.tsx index 8d47a0631..a51410cbc 100644 --- a/packages/gitbook/src/components/PageAside/PageAside.tsx +++ b/packages/gitbook/src/components/PageAside/PageAside.tsx @@ -228,7 +228,7 @@ export function PageAside(props: { ) : null}
diff --git a/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx b/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx index 3f91238b4..a2adf315e 100644 --- a/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx +++ b/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx @@ -111,7 +111,7 @@ export function ScrollSectionsList(props: { sections: DocumentSection[] }) { 'hover:bg-primary-hover', 'theme-muted:hover:bg-primary-active', - 'theme-bold-tint:hover:bg-primary-active', + '[html.sidebar-filled.theme-bold.tint_&]:hover:bg-primary-active', 'theme-gradient:hover:bg-primary-active', 'tint:font-semibold', diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx index afa8e9960..c7d2f35b6 100644 --- a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx +++ b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx @@ -153,9 +153,9 @@ export async function CustomizationRootLayout(props: { diff --git a/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx b/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx index deb18fce1..884f6eeda 100644 --- a/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx +++ b/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx @@ -40,7 +40,7 @@ export function PageGroupItem(props: { 'bg-tint-base', 'sidebar-filled:bg-tint-subtle', 'theme-muted:bg-tint-subtle', - 'theme-bold-tint:bg-tint-subtle', + '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle', '[html.sidebar-filled.theme-muted_&]:bg-tint-base', '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base', '[html.sidebar-default.theme-gradient_&]:bg-gradient-primary', diff --git a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx index 612c79819..9f9c0d85d 100644 --- a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx @@ -75,7 +75,7 @@ export function TableOfContents(props: { 'sidebar-filled:bg-tint-subtle', 'theme-muted:bg-tint-subtle', - 'theme-bold-tint:bg-tint-subtle', + '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle', '[html.sidebar-filled.theme-muted_&]:bg-tint-base', '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base', 'page-no-toc:!bg-transparent', diff --git a/packages/gitbook/src/components/TableOfContents/Trademark.tsx b/packages/gitbook/src/components/TableOfContents/Trademark.tsx index 3335e5f68..19f5aed66 100644 --- a/packages/gitbook/src/components/TableOfContents/Trademark.tsx +++ b/packages/gitbook/src/components/TableOfContents/Trademark.tsx @@ -52,7 +52,7 @@ export function Trademark(props: { 'before:to-tint-base', 'sidebar-filled:before:to-tint-subtle', 'theme-muted:before:to-tint-subtle', - 'theme-bold-tint:before:to-tint-subtle', + '[html.sidebar-filled.theme-bold.tint_&]:before:to-tint-subtle', '[html.sidebar-filled.theme-muted_&]:before:to-tint-base', '[html.sidebar-filled.theme-bold.tint_&]:before:to-tint-base', 'page-no-toc:before:!to-transparent' diff --git a/packages/gitbook/src/components/ThemeToggler/ThemeToggler.tsx b/packages/gitbook/src/components/ThemeToggler/ThemeToggler.tsx index 296a0fde6..af943dcbc 100644 --- a/packages/gitbook/src/components/ThemeToggler/ThemeToggler.tsx +++ b/packages/gitbook/src/components/ThemeToggler/ThemeToggler.tsx @@ -79,7 +79,7 @@ function ThemeButton(props: { active && [ 'bg-primary', 'theme-muted:bg-primary-hover', - 'theme-bold-tint:bg-primary-hover', + '[html.sidebar-filled.theme-bold.tint_&]:bg-primary-hover', 'hover:bg-primary', 'text-primary-strong', 'contrast-more:text-primary-strong',