Replace highlight colors (#2781)

.changeset/poor-mugs-glow.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+New highlight colors

packages/gitbook/src/components/DocumentView/Text.tsx

@@ -130,10 +130,10 @@ const textColorToStyle: { [color in DocumentMarkColor['data']['text']]: ClassVal
 
 const backgroundColorToStyle: { [color in DocumentMarkColor['data']['background']]: ClassValue } = {
     default: [],
-    blue: ['bg-blue-200', 'dark:bg-blue-900'],
-    red: ['bg-red-200', 'dark:bg-red-900'],
-    green: ['bg-green-200', 'dark:bg-green-900'],
-    yellow: ['bg-yellow-100', 'dark:bg-yellow-900'],
-    purple: ['bg-purple-200', 'dark:bg-purple-900'],
-    orange: ['bg-orange-200', 'dark:bg-orange-900'],
+    blue: ['bg-mark-blue'],
+    red: ['bg-mark-red'],
+    green: ['bg-mark-green'],
+    yellow: ['bg-mark-yellow'],
+    purple: ['bg-mark-purple'],
+    orange: ['bg-mark-orange'],
 };

packages/gitbook/tailwind.config.ts

@@ -104,6 +104,14 @@ const config: Config = {
                 pomegranate: generateShades('#f25b3a'),
                 periwinkle: generateShades('#acc6ee'),
             },
+            backgroundColor: {
+                'mark-blue': '#89C6DA4D',
+                'mark-purple': '#DAD4FF4D',
+                'mark-orange': '#FFDCBC4D',
+                'mark-red': '#FFCCCB4D',
+                'mark-yellow': '#FFF0854D',
+                'mark-green': '#91EABF4D',
+            },
             animation: {
                 present: 'present .5s ease-out both',
             },