Support inline icon colors (#3717)

Author: gregberge

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

@@ -1,10 +1,23 @@
-import type { DocumentInlineIcon } from '@gitbook/api';
+import type { DocumentInlineIcon, DocumentMarkColor } from '@gitbook/api';
 
+import { tcls } from '@/lib/tailwind';
 import { Icon, type IconName } from '@gitbook/icons';
 import type { InlineProps } from './Inline';
+import { textColorToStyle } from './utils/colors';
 
 export async function InlineIcon(props: InlineProps<DocumentInlineIcon>) {
     const { inline } = props;
+    const icon = inline.data.icon as IconName;
+    // @ts-expect-error remove this comment once API is updated
+    const color = inline.data.color
+        ? // @ts-expect-error remove "as DocumentMarkColor['data']['text']" once API is updated
+          (inline.data.color as DocumentMarkColor['data']['text'])
+        : undefined;
 
-    return <Icon icon={inline.data.icon as IconName} className="inline size-[1em]" />;
+    return (
+        <Icon
+            icon={icon}
+            className={tcls('inline size-[1em]', color ? textColorToStyle[color] : null)}
+        />
+    );
 }

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

@@ -12,7 +12,8 @@ import type {
 } from '@gitbook/api';
 import React from 'react';
 
-import { type ClassValue, tcls } from '@/lib/tailwind';
+import { tcls } from '@/lib/tailwind';
+import { backgroundColorToStyle, textColorToStyle } from './utils/colors';
 
 export function Text(props: { text: DocumentText }) {
     const { text } = props;
@@ -121,51 +122,3 @@ function Color(props: MarkedLeafProps<DocumentMarkColor>) {
         </span>
     );
 }
-
-/**
- * @TODO replace by DocumentMarkColor['data']['text'] and DocumentMarkColor['data']['background']
- * once the API is updated.
- */
-type DocumentMarkColorValue =
-    | 'default'
-    | 'green'
-    | 'blue'
-    | 'red'
-    | 'orange'
-    | 'yellow'
-    | 'purple'
-    | '$primary'
-    | '$info'
-    | '$success'
-    | '$warning'
-    | '$danger';
-
-const textColorToStyle: { [color in DocumentMarkColorValue]: 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'],
-};
-
-const backgroundColorToStyle: { [color in DocumentMarkColorValue]: ClassValue } = {
-    default: [],
-    blue: ['bg-mark-blue'],
-    red: ['bg-mark-red'],
-    green: ['bg-mark-green'],
-    yellow: ['bg-mark-yellow'],
-    purple: ['bg-mark-purple'],
-    orange: ['bg-mark-orange'],
-    $primary: ['bg-primary'],
-    $info: ['bg-info'],
-    $success: ['bg-success'],
-    $warning: ['bg-warning'],
-    $danger: ['bg-danger'],
-};

packages/gitbook/src/components/DocumentView/utils/colors.ts

@@ -0,0 +1,34 @@
+import type { ClassValue } from '@/lib/tailwind';
+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'],
+};
+
+export const backgroundColorToStyle: {
+    [color in DocumentMarkColor['data']['background']]: ClassValue;
+} = {
+    default: [],
+    blue: ['bg-mark-blue'],
+    red: ['bg-mark-red'],
+    green: ['bg-mark-green'],
+    yellow: ['bg-mark-yellow'],
+    purple: ['bg-mark-purple'],
+    orange: ['bg-mark-orange'],
+    $primary: ['bg-primary'],
+    $info: ['bg-info'],
+    $success: ['bg-success'],
+    $warning: ['bg-warning'],
+    $danger: ['bg-danger'],
+};