From b1102fcebe81f3bbe2612f920d50ea61cac64c62 Mon Sep 17 00:00:00 2001
From: Brett Jephson <brett@gitbook.io>
Date: Mon, 5 Oct 2026 17:55:22 +0100
Subject: [PATCH] Prepare DocumentMarkColor to work with optional properties
 (#4659)

---
 .changeset/fluffy-houses-pay.md                       | 5 +++++
 packages/gitbook/src/components/DocumentView/Text.tsx | 4 ++--
 packages/gitbook/src/lib/colors.ts                    | 4 +---
 3 files changed, 8 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/fluffy-houses-pay.md

diff --git a/.changeset/fluffy-houses-pay.md b/.changeset/fluffy-houses-pay.md
new file mode 100644
index 000000000..50817d6a2
--- /dev/null
+++ b/.changeset/fluffy-houses-pay.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Use the DocumentTextColor type defined in API schema.
diff --git a/packages/gitbook/src/components/DocumentView/Text.tsx b/packages/gitbook/src/components/DocumentView/Text.tsx
index c5142993a..f70a69782 100644
--- a/packages/gitbook/src/components/DocumentView/Text.tsx
+++ b/packages/gitbook/src/components/DocumentView/Text.tsx
@@ -117,8 +117,8 @@ function Color(props: MarkedLeafProps<DocumentMarkColor>) {
     return (
         <span
             className={tcls([
-                textColorToStyle[mark.data.text],
-                backgroundColorToStyle[mark.data.background],
+                textColorToStyle[mark.data.text ?? 'default'],
+                backgroundColorToStyle[mark.data.background ?? 'default'],
             ])}
         >
             {children}
diff --git a/packages/gitbook/src/lib/colors.ts b/packages/gitbook/src/lib/colors.ts
index 0e6c7b422..9347ff040 100644
--- a/packages/gitbook/src/lib/colors.ts
+++ b/packages/gitbook/src/lib/colors.ts
@@ -1,9 +1,7 @@
-import type { DocumentMarkColor } from '@gitbook/api';
+import type { DocumentTextColor } from '@gitbook/api';
 
 import type { ClassValue } from '@/lib/tailwind';
 
-type DocumentTextColor = DocumentMarkColor['data']['text'] | 'pink' | 'violet' | 'cyan' | '$tint';
-
 export const textColorToStyle = {
     default: [],
     blue: ['text-[#0067d1] dark:text-[#7dbcff]'],