feat: typography, List css 수정

Author: 01-binary

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

@@ -6,6 +6,7 @@ import { vars } from '../../../../styles/theme.css';
 export const imageContainer = style({
   position: 'relative',
   width: '100%',
+  padding: `${vars.spacing.sm} 0`,
   borderRadius: vars.borderRadius.md,
   overflow: 'hidden',
   margin: '0 auto',

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

@@ -4,6 +4,7 @@ import { vars } from '../../../../styles/theme.css';
 
 export const list = recipe({
   base: {
+    padding: `${vars.spacing.xs} ${vars.spacing.xxs}`,
     paddingLeft: vars.spacing.lg,
   },
   variants: {
@@ -18,4 +19,6 @@ export const list = recipe({
   },
 });
 
-export const listItem = style({});
+export const listItem = style({
+  padding: `${vars.spacing.xxs} 0`,
+});

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

@@ -50,7 +50,7 @@ const RichTexts: React.FC<RichTextProps> = ({ richTexts }) => {
         ) : (
           text.text.content
         );
-        
+
         // TODO: NOTION COLOR 적용
         // const colorValue =
         //   color === 'default'
@@ -69,7 +69,6 @@ const RichTexts: React.FC<RichTextProps> = ({ richTexts }) => {
               underline,
               code,
             })}
-            // style={{ color: colorValue }}
           >
             {content}
           </span>

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

@@ -30,13 +30,15 @@ export const richText = recipe({
     },
     code: {
       true: {
-        background: vars.colors.code.background,
-        padding: '0.2em 0.4em',
+        background: vars.colors.code.inlineBackground,
+        padding: '0.1em 0.35em',
         borderRadius: vars.borderRadius.sm,
         fontWeight: vars.typography.fontWeight.medium,
         fontFamily: vars.typography.fontFamily.code,
         fontSize: '0.85em',
         color: vars.colors.code.inline,
+        display: 'inline-block',
+        verticalAlign: 'middle',
       },
     },
   },

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

@@ -27,19 +27,19 @@ export const heading1 = style({
   ...baseTypography,
   fontSize: vars.typography.fontSize.h1,
   fontWeight: vars.typography.fontWeight.bold,
-  padding: `${vars.spacing.lg} 0 ${vars.spacing.md}`,
+  padding: `${vars.spacing.xl} 0 ${vars.spacing.md}`,
 });
 
 export const heading2 = style({
   ...baseTypography,
   fontSize: vars.typography.fontSize.h2,
   fontWeight: vars.typography.fontWeight.bold,
-  padding: `${vars.spacing.md} 0 ${vars.spacing.sm}`,
+  padding: `${vars.spacing.lg} 0 ${vars.spacing.sm}`,
 });
 
 export const heading3 = style({
   ...baseTypography,
   fontSize: vars.typography.fontSize.h3,
   fontWeight: vars.typography.fontWeight.bold,
-  padding: `${vars.spacing.sm} 0 ${vars.spacing.xs}`,
+  padding: `${vars.spacing.base} 0 ${vars.spacing.xs}`,
 });

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

@@ -19,6 +19,7 @@ export const vars = createThemeContract({
       background: null,
       text: null,
       inline: null,
+      inlineBackground: null,
     },
   },
   typography: {
@@ -133,6 +134,7 @@ export const lightTheme = createTheme(vars, {
       background: 'rgba(135,131,120,.1)',
       text: '#24292e',
       inline: '#EB5757',
+      inlineBackground: 'rgba(135,131,120,.15)',
     },
   },
   shadows: {
@@ -159,6 +161,7 @@ export const darkTheme = createTheme(vars, {
       background: '#161b22',
       text: '#c9d1d9',
       inline: '#EB5757',
+      inlineBackground: '#161b22',
     },
   },
   shadows: {