From 17dd382dc386523c3ad8ab232f273798c6303793 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Tue, 2 Sep 2025 16:08:21 +0200 Subject: [PATCH] Add "original" color step and apply to `bg-primary-solid` elements (#3618) --- .changeset/sour-rules-explain.md | 6 ++++++ packages/colors/src/transformations.ts | 4 +++- .../src/components/DocumentView/Integration/contentkit.css | 2 +- .../gitbook/src/components/DocumentView/OpenAPI/scalar.css | 5 ++--- .../gitbook/src/components/DocumentView/StepperStep.tsx | 4 ++-- .../gitbook/src/components/SiteSections/SiteSectionList.tsx | 2 +- packages/gitbook/src/components/primitives/Button.tsx | 6 ++++-- packages/gitbook/src/components/primitives/Checkbox.tsx | 4 ++-- 8 files changed, 21 insertions(+), 12 deletions(-) create mode 100644 .changeset/sour-rules-explain.md diff --git a/.changeset/sour-rules-explain.md b/.changeset/sour-rules-explain.md new file mode 100644 index 000000000..680768253 --- /dev/null +++ b/.changeset/sour-rules-explain.md @@ -0,0 +1,6 @@ +--- +"@gitbook/colors": minor +"gitbook": patch +--- + +Add `original` background color step diff --git a/packages/colors/src/transformations.ts b/packages/colors/src/transformations.ts index e6773039c..d7950792c 100644 --- a/packages/colors/src/transformations.ts +++ b/packages/colors/src/transformations.ts @@ -19,7 +19,7 @@ export enum ColorCategory { } type ColorSubScale = { - [key: string]: number; + [key: string]: number | string; }; /** @@ -56,6 +56,8 @@ export const scale: Record = { solid: 9, /** Hovered solid backgrounds */ 'solid-hover': 10, + /** Original color */ + original: 'original', }, [ColorCategory.text]: { /** Very low-contrast text diff --git a/packages/gitbook/src/components/DocumentView/Integration/contentkit.css b/packages/gitbook/src/components/DocumentView/Integration/contentkit.css index 8ae537422..9002303ea 100644 --- a/packages/gitbook/src/components/DocumentView/Integration/contentkit.css +++ b/packages/gitbook/src/components/DocumentView/Integration/contentkit.css @@ -99,7 +99,7 @@ } .contentkit-button-style-primary { - @apply bg-primary-solid text-contrast-primary-solid hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover ring-0 contrast-more:ring-1; + @apply bg-primary-original text-contrast-primary-original hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover ring-0 contrast-more:ring-1; } .contentkit-button-style-secondary { diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css b/packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css index 3dae626aa..a335e97f6 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css @@ -272,9 +272,8 @@ body { } .scalar-activate-button { @apply flex gap-2 items-center; - @apply bg-primary-solid text-contrast-primary-solid hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover contrast-more:ring-1 rounded-md straight-corners:rounded-none circular-corners:rounded-full circular-corners:px-3 place-self-start; - @apply ring-1 ring-tint hover:ring-tint-hover; - @apply shadow-sm shadow-tint dark:shadow-tint-1 hover:shadow-md active:shadow-none; + @apply bg-primary-original text-contrast-primary-original hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover contrast-more:ring-1 rounded-md straight-corners:rounded-none circular-corners:rounded-full circular-corners:px-3 place-self-start; + @apply shadow-sm shadow-primary dark:shadow-primary-1 hover:shadow-md active:shadow-none; @apply contrast-more:ring-tint-12 contrast-more:hover:ring-2 contrast-more:hover:ring-tint-12; @apply hover:scale-105 active:scale-100 transition-all; @apply grow-0 shrink-0 truncate; diff --git a/packages/gitbook/src/components/DocumentView/StepperStep.tsx b/packages/gitbook/src/components/DocumentView/StepperStep.tsx index 452e863b1..2c16ab923 100644 --- a/packages/gitbook/src/components/DocumentView/StepperStep.tsx +++ b/packages/gitbook/src/components/DocumentView/StepperStep.tsx @@ -36,8 +36,8 @@ export function StepperStep(props: BlockProps) {
{index + 1} diff --git a/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx b/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx index 7feb98795..4a0931713 100644 --- a/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx +++ b/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx @@ -110,7 +110,7 @@ export function SiteSectionListItem(props: { className={tcls( 'flex size-8 shrink-0 items-center justify-center rounded-md straight-corners:rounded-none bg-tint-subtle text-lg text-tint leading-none shadow-tint shadow-xs ring-1 ring-tint-subtle transition-transform group-hover/section-link:scale-110 group-hover/section-link:ring-tint-hover group-active/section-link:scale-90 group-active/section-link:shadow-none contrast-more:text-tint-strong dark:shadow-none', isActive - ? 'bg-primary tint:bg-primary-solid text-primary-subtle tint:text-contrast-primary-solid shadow-md shadow-primary ring-primary group-hover/section-link:ring-primary-hover, contrast-more:text-primary contrast-more:ring-2 contrast-more:ring-primary' + ? 'bg-primary tint:bg-primary-original text-primary-subtle tint:text-contrast-primary-original shadow-md shadow-primary ring-primary group-hover/section-link:ring-primary-hover, contrast-more:text-primary contrast-more:ring-2 contrast-more:ring-primary' : null )} > diff --git a/packages/gitbook/src/components/primitives/Button.tsx b/packages/gitbook/src/components/primitives/Button.tsx index ff0294040..b568b8de3 100644 --- a/packages/gitbook/src/components/primitives/Button.tsx +++ b/packages/gitbook/src/components/primitives/Button.tsx @@ -25,11 +25,13 @@ type ButtonProps = { export const variantClasses = { primary: [ - 'bg-primary-solid', - 'text-contrast-primary-solid', + 'bg-primary-original', + 'text-contrast-primary-original', 'hover:bg-primary-solid-hover', 'hover:text-contrast-primary-solid-hover', 'border-0', + 'contrast-more:bg-primary-solid', + 'contrast-more:text-contrast-primary-solid', 'contrast-more:border', 'disabled:bg-primary-subtle', 'disabled:text-primary/8', diff --git a/packages/gitbook/src/components/primitives/Checkbox.tsx b/packages/gitbook/src/components/primitives/Checkbox.tsx index 3dd4d4a1e..8079f3dda 100644 --- a/packages/gitbook/src/components/primitives/Checkbox.tsx +++ b/packages/gitbook/src/components/primitives/Checkbox.tsx @@ -31,8 +31,8 @@ export const Checkbox = React.forwardRef< 'flex', 'items-center', 'justify-center', - 'data-[state=checked]:bg-primary-solid', - 'data-[state=checked]:text-contrast-primary-solid', + 'data-[state=checked]:bg-primary-original', + 'data-[state=checked]:text-contrast-primary-original', 'contrast-more:ring-tint-12', { small: 'size-4', medium: 'size-5' }[size], className