feat: delete margin, spacing base add

Author: 01-binary

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

@@ -6,7 +6,6 @@ export const link = style({
 });
 
 export const card = style({
-  margin: `${vars.spacing.md} 0`,
   border: `1px solid ${vars.colors.border}`,
   borderRadius: vars.borderRadius.md,
   overflow: 'hidden',
@@ -17,7 +16,7 @@ export const card = style({
 });
 
 export const content = style({
-  padding: vars.spacing.md,
+  padding: vars.spacing.base,
 });
 
 export const previewImage = style({
@@ -28,13 +27,13 @@ export const previewImage = style({
 });
 
 export const title = style({
-  margin: `0 0 ${vars.spacing.xs}`,
+  padding: `0 0 ${vars.spacing.xs}`,
   fontSize: vars.typography.fontSize.base,
   color: vars.colors.text,
 });
 
 export const description = style({
-  margin: 0,
+  padding: 0,
   fontSize: vars.typography.fontSize.small,
   color: vars.colors.secondary,
   display: '-webkit-box',
@@ -44,15 +43,7 @@ export const description = style({
 });
 
 export const siteName = style({
-  marginTop: vars.spacing.sm,
-  fontSize: vars.typography.fontSize.small,
-  color: vars.colors.primary,
-});
-
-export const caption = style({
-  marginTop: vars.spacing.sm,
   paddingTop: vars.spacing.sm,
-  borderTop: `1px solid ${vars.colors.border}`,
   fontSize: vars.typography.fontSize.small,
-  color: vars.colors.secondary,
+  color: vars.colors.primary,
 });

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,
-  margin: `${vars.spacing.lg} 0 ${vars.spacing.md}`,
+  padding: `${vars.spacing.lg} 0 ${vars.spacing.md}`,
 });
 
 export const heading2 = style({
   ...baseTypography,
   fontSize: vars.typography.fontSize.h2,
   fontWeight: vars.typography.fontWeight.bold,
-  margin: `${vars.spacing.md} 0 ${vars.spacing.sm}`,
+  padding: `${vars.spacing.md} 0 ${vars.spacing.sm}`,
 });
 
 export const heading3 = style({
   ...baseTypography,
   fontSize: vars.typography.fontSize.h3,
   fontWeight: vars.typography.fontWeight.bold,
-  margin: `${vars.spacing.sm} 0 ${vars.spacing.xs}`,
+  padding: `${vars.spacing.sm} 0 ${vars.spacing.xs}`,
 });

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

@@ -42,6 +42,7 @@ export const vars = createThemeContract({
     xxs: null,
     xs: null,
     sm: null,
+    base: null,
     md: null,
     lg: null,
     xl: null,
@@ -100,6 +101,7 @@ export const lightTheme = createTheme(vars, {
     xxs: '0.125rem',
     xs: '0.25rem',
     sm: '0.5rem',
+    base: '0.75rem',
     md: '1rem',
     lg: '1.5rem',
     xl: '2rem',
@@ -158,6 +160,7 @@ export const darkTheme = createTheme(vars, {
     xxs: '0.125rem',
     xs: '0.25rem',
     sm: '0.5rem',
+    base: '0.75rem',
     md: '1rem',
     lg: '1.5rem',
     xl: '2rem',
@@ -169,7 +172,7 @@ export const darkTheme = createTheme(vars, {
   },
   shadows: {
     sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+    md: '0 3px 4px 0 rgba(0, 0, 0, 0.1)',
     lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
   },
 });