From 4c463a93282f12d7901c3953030efc388acd5165 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Wed, 3 Dec 2025 10:25:05 +0100 Subject: [PATCH] Make semantic text colors more vibrant The semantic text colors are more dull than the normal ones, which hampers their use somewhat. Let's make them more vibrant and add a contrast-check so we can fallback to readable text if the browser requests it. --- .../components/DocumentView/utils/colors.ts | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/utils/colors.ts b/packages/gitbook/src/components/DocumentView/utils/colors.ts index 1b922ed46c..15d90d1581 100644 --- a/packages/gitbook/src/components/DocumentView/utils/colors.ts +++ b/packages/gitbook/src/components/DocumentView/utils/colors.ts @@ -3,17 +3,17 @@ import type { DocumentMarkColor } from '@gitbook/api'; export const textColorToStyle: { [color in DocumentMarkColor['data']['text']]: ClassValue } = { default: [], - blue: ['text-blue-500'], - red: ['text-red-500'], - green: ['text-green-500'], - yellow: ['text-yellow-600'], - purple: ['text-purple-500'], - orange: ['text-orange-500'], - $primary: ['text-primary'], - $info: ['text-info'], - $success: ['text-success'], - $warning: ['text-warning'], - $danger: ['text-danger'], + blue: ['text-blue-500 contrast-more:text-blue-800'], + red: ['text-red-500 contrast-more:text-red-800'], + green: ['text-green-500 contrast-more:text-green-800'], + yellow: ['text-yellow-600 contrast-more:text-yellow-800'], + purple: ['text-purple-500 contrast-more:text-purple-800'], + orange: ['text-orange-500 contrast-more:text-orange-800'], + $primary: ['text-primary-subtle contrast-more:text-primary'], + $info: ['text-info-subtle contrast-more:text-info'], + $success: ['text-success-subtle contrast-more:text-success'], + $warning: ['text-warning-subtle contrast-more:text-warning'], + $danger: ['text-danger-subtle contrast-more:text-danger'], }; export const backgroundColorToStyle: {