feat: RichText, Typography style 변경

Author: 01-binary

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

@@ -50,13 +50,14 @@ const RichTexts: React.FC<RichTextProps> = ({ richTexts }) => {
         ) : (
           text.text.content
         );
-
-        const colorValue =
-          color === 'default'
-            ? 'inherit'
-            : color?.includes('_background')
-              ? `var(--notion-${color})`
-              : `var(--notion-${color})`;
+        
+        // TODO: NOTION COLOR 적용
+        // const colorValue =
+        //   color === 'default'
+        //     ? 'inherit'
+        //     : color?.includes('_background')
+        //       ? `var(--notion-${color})`
+        //       : `var(--notion-${color})`;
 
         return (
           <span
@@ -68,7 +69,7 @@ const RichTexts: React.FC<RichTextProps> = ({ richTexts }) => {
               underline,
               code,
             })}
-            style={{ color: colorValue }}
+            // style={{ color: colorValue }}
           >
             {content}
           </span>

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

@@ -33,8 +33,10 @@ export const richText = recipe({
         background: vars.colors.code.background,
         padding: '0.2em 0.4em',
         borderRadius: vars.borderRadius.sm,
+        fontWeight: vars.typography.fontWeight.medium,
         fontFamily: vars.typography.fontFamily.code,
         fontSize: '0.85em',
+        color: vars.colors.code.inline,
       },
     },
   },

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

@@ -6,10 +6,6 @@ const baseTypography = {
   color: vars.colors.text,
   fontFamily: vars.typography.fontFamily.base,
   lineHeight: vars.typography.lineHeight.base,
-  ':hover': {
-    backgroundColor: vars.colors.background,
-    opacity: 0.8,
-  },
   selectors: {
     '&:focus-visible': {
       outline: `2px solid ${vars.colors.primary}`,
@@ -21,27 +17,29 @@ const baseTypography = {
 
 export const paragraph = style({
   ...baseTypography,
-  margin: `${vars.spacing.sm} 0`,
+  padding: `${vars.spacing.xs} ${vars.spacing.xxs}`,
   fontSize: vars.typography.fontSize.base,
+  fontWeight: vars.typography.fontWeight.medium,
+  whiteSpace: 'pre-wrap', // 줄바꿈
 });
 
 export const heading1 = style({
   ...baseTypography,
   fontSize: vars.typography.fontSize.h1,
-  // fontWeight: vars.typography.fontWeight.bold,
+  fontWeight: vars.typography.fontWeight.bold,
   margin: `${vars.spacing.lg} 0 ${vars.spacing.md}`,
 });
 
 export const heading2 = style({
   ...baseTypography,
   fontSize: vars.typography.fontSize.h2,
-  // fontWeight: vars.typography.fontWeight.semibold,
+  fontWeight: vars.typography.fontWeight.bold,
   margin: `${vars.spacing.md} 0 ${vars.spacing.sm}`,
 });
 
 export const heading3 = style({
   ...baseTypography,
   fontSize: vars.typography.fontSize.h3,
-  // fontWeight: vars.typography.fontWeight.medium,
+  fontWeight: vars.typography.fontWeight.bold,
   margin: `${vars.spacing.sm} 0 ${vars.spacing.xs}`,
 });

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

@@ -10,6 +10,7 @@ export const vars = createThemeContract({
     code: {
       background: null,
       text: null,
+      inline: null,
     },
   },
   typography: {
@@ -25,13 +26,20 @@ export const vars = createThemeContract({
       h2: null,
       h3: null,
     },
+    fontWeight: {
+      normal: null,
+      medium: null,
+      semibold: null,
+      bold: null,
+    },
     lineHeight: {
       tight: null,
       base: null,
       relaxed: null,
     },
   },
   spacing: {
+    xxs: null,
     xs: null,
     sm: null,
     md: null,
@@ -53,18 +61,19 @@ export const vars = createThemeContract({
 export const lightTheme = createTheme(vars, {
   colors: {
     background: '#ffffff',
-    text: '#24292e',
+    text: '#37352f',
     primary: '#0366d6',
     secondary: '#586069',
     border: '#e1e4e8',
     code: {
-      background: '#f6f8fa',
+      background: 'rgba(135,131,120,.1)',
       text: '#24292e',
+      inline: '#EB5757',
     },
   },
   typography: {
     fontFamily: {
-      base: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
+      base: 'ui-sans-serif -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
       code: 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace',
     },
     fontSize: {
@@ -75,13 +84,20 @@ export const lightTheme = createTheme(vars, {
       h2: '1.5rem',
       h3: '1.25rem',
     },
+    fontWeight: {
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+    },
     lineHeight: {
       tight: '1.25',
       base: '1.5',
       relaxed: '1.75',
     },
   },
   spacing: {
+    xxs: '0.125rem',
     xs: '0.25rem',
     sm: '0.5rem',
     md: '1rem',
@@ -110,11 +126,12 @@ export const darkTheme = createTheme(vars, {
     code: {
       background: '#161b22',
       text: '#c9d1d9',
+      inline: '#EB5757',
     },
   },
   typography: {
     fontFamily: {
-      base: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
+      base: 'ui-sans-serif -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
       code: 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace',
     },
     fontSize: {
@@ -125,13 +142,20 @@ export const darkTheme = createTheme(vars, {
       h2: '1.5rem',
       h3: '1.25rem',
     },
+    fontWeight: {
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+    },
     lineHeight: {
       tight: '1.25',
       base: '1.5',
       relaxed: '1.75',
     },
   },
   spacing: {
+    xxs: '0.125rem',
     xs: '0.25rem',
     sm: '0.5rem',
     md: '1rem',