feat: notion color 지정

Author: 01-binary

packages/notion-to-jsx/src/components/Renderer/components/RichText/RichTexts.tsx

@@ -1,6 +1,28 @@
 import React from 'react';
 import { richText, link } from './styles.css';
 
+// 지원하는 Notion 색상 타입 정의
+type NotionColor =
+  | 'default'
+  | 'gray'
+  | 'brown'
+  | 'orange'
+  | 'yellow'
+  | 'green'
+  | 'blue'
+  | 'purple'
+  | 'pink'
+  | 'red'
+  | 'gray_background'
+  | 'brown_background'
+  | 'orange_background'
+  | 'yellow_background'
+  | 'green_background'
+  | 'blue_background'
+  | 'purple_background'
+  | 'pink_background'
+  | 'red_background';
+
 export interface RichTextItem {
   type: 'text' | 'mention' | string;
   annotations: {
@@ -43,7 +65,7 @@ const RichTexts: React.FC<RichTextProps> = ({ richTexts }) => {
   return (
     <>
       {richTexts.map((text, index) => {
-        const { bold, italic, strikethrough, underline, code } =
+        const { bold, italic, strikethrough, underline, code, color } =
           text.annotations;
 
         // 컨텐츠 렌더링 로직
@@ -75,13 +97,33 @@ const RichTexts: React.FC<RichTextProps> = ({ richTexts }) => {
           }
         }
 
-        // TODO: NOTION COLOR 적용
-        // const colorValue =
-        //   color === 'default'
-        //     ? 'inherit'
-        //     : color?.includes('_background')
-        //       ? `var(--notion-${color})`
-        //       : `var(--notion-${color})`;
+        // NOTION COLOR 적용
+        // color 값이 지원하는 색상이 아닌 경우 undefined로 처리하여 타입 에러 방지
+        const notionColors: NotionColor[] = [
+          'default',
+          'gray',
+          'brown',
+          'orange',
+          'yellow',
+          'green',
+          'blue',
+          'purple',
+          'pink',
+          'red',
+          'gray_background',
+          'brown_background',
+          'orange_background',
+          'yellow_background',
+          'green_background',
+          'blue_background',
+          'purple_background',
+          'pink_background',
+          'red_background',
+        ];
+
+        const safeColor = notionColors.includes(color as NotionColor)
+          ? (color as NotionColor)
+          : undefined;
 
         return (
           <span
@@ -92,6 +134,7 @@ const RichTexts: React.FC<RichTextProps> = ({ richTexts }) => {
               strikethrough,
               underline,
               code,
+              color: safeColor,
             })}
           >
             {content}

packages/notion-to-jsx/src/components/Renderer/components/RichText/styles.css.ts

@@ -41,6 +41,37 @@ export const richText = recipe({
         verticalAlign: 'middle',
       },
     },
+    color: {
+      default: {},
+      gray: { color: vars.colors.notion.gray },
+      brown: { color: vars.colors.notion.brown },
+      orange: { color: vars.colors.notion.orange },
+      yellow: { color: vars.colors.notion.yellow },
+      green: { color: vars.colors.notion.green },
+      blue: { color: vars.colors.notion.blue },
+      purple: { color: vars.colors.notion.purple },
+      pink: { color: vars.colors.notion.pink },
+      red: { color: vars.colors.notion.red },
+      gray_background: { backgroundColor: vars.colors.notion.gray_background },
+      brown_background: {
+        backgroundColor: vars.colors.notion.brown_background,
+      },
+      orange_background: {
+        backgroundColor: vars.colors.notion.orange_background,
+      },
+      yellow_background: {
+        backgroundColor: vars.colors.notion.yellow_background,
+      },
+      green_background: {
+        backgroundColor: vars.colors.notion.green_background,
+      },
+      blue_background: { backgroundColor: vars.colors.notion.blue_background },
+      purple_background: {
+        backgroundColor: vars.colors.notion.purple_background,
+      },
+      pink_background: { backgroundColor: vars.colors.notion.pink_background },
+      red_background: { backgroundColor: vars.colors.notion.red_background },
+    },
   },
 
   compoundVariants: [

packages/notion-to-jsx/src/styles/theme.css.ts

@@ -21,6 +21,27 @@ export const vars = createThemeContract({
       inline: null,
       inlineBackground: null,
     },
+    // Notion 색상 변수
+    notion: {
+      gray: null,
+      brown: null,
+      orange: null,
+      yellow: null,
+      green: null,
+      blue: null,
+      purple: null,
+      pink: null,
+      red: null,
+      gray_background: null,
+      brown_background: null,
+      orange_background: null,
+      yellow_background: null,
+      green_background: null,
+      blue_background: null,
+      purple_background: null,
+      pink_background: null,
+      red_background: null,
+    },
   },
   typography: {
     fontFamily: {
@@ -140,6 +161,27 @@ export const lightTheme = createTheme(vars, {
       inline: '#EB5757',
       inlineBackground: 'rgba(135,131,120,.15)',
     },
+    // Notion 색상 - 라이트 테마
+    notion: {
+      gray: '#787774',
+      brown: '#9F6B53',
+      orange: '#D9730D',
+      yellow: '#CB912F',
+      green: '#448361',
+      blue: '#337EA9',
+      purple: '#9065B0',
+      pink: '#C14C8A',
+      red: '#D44C47',
+      gray_background: '#EBECED',
+      brown_background: '#E9E5E3',
+      orange_background: '#FAEBDD',
+      yellow_background: '#FBF3DB',
+      green_background: '#EDF3EC',
+      blue_background: '#E1F0F5',
+      purple_background: '#F4EEFF',
+      pink_background: '#F9EEF3',
+      red_background: '#FDEBEC',
+    },
   },
   shadows: {
     sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
@@ -167,6 +209,27 @@ export const darkTheme = createTheme(vars, {
       inline: '#EB5757',
       inlineBackground: '#161b22',
     },
+    // Notion 색상 - 다크 테마
+    notion: {
+      gray: '#999999',
+      brown: '#BA9A88',
+      orange: '#E78A4E',
+      yellow: '#DBAB4C',
+      green: '#68A678',
+      blue: '#529CCA',
+      purple: '#B185DB',
+      pink: '#D668A4',
+      red: '#E66A65',
+      gray_background: '#3F3F3F',
+      brown_background: '#434040',
+      orange_background: '#443227',
+      yellow_background: '#434027',
+      green_background: '#293D34',
+      blue_background: '#25404E',
+      purple_background: '#362C48',
+      pink_background: '#40242E',
+      red_background: '#442C2B',
+    },
   },
   shadows: {
     sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',