fix: Quote using vars

Author: 01-binary

packages/notion-to-jsx/src/components/Renderer/components/Quote/Quote.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
 import { MemoizedRichText } from '../MemoizedComponents';
 import { container } from './styles.css';
+import { RichTextItem } from '../RichText/RichTexts';
+import { richText } from '../RichText/styles.css';
 
 export interface QuoteProps {
-  richText: any[];
+  richTexts: RichTextItem[];
   tabIndex?: number;
 }
 
-const Quote: React.FC<QuoteProps> = ({ richText, tabIndex }) => {
+const Quote: React.FC<QuoteProps> = ({ richTexts, tabIndex }) => {
   return (
     <blockquote className={container} tabIndex={tabIndex}>
-      <MemoizedRichText richTexts={richText} />
+      <MemoizedRichText richTexts={richTexts} />
     </blockquote>
   );
 };

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

@@ -1,12 +1,13 @@
 import { style } from '@vanilla-extract/css';
+import { vars } from '../../../../styles/theme.css';
 
 export const container = style({
   position: 'relative',
-  margin: '0.5rem 0',
-  padding: '0.25rem 0 0.25rem 1rem',
+  margin: `${vars.spacing.xs} 0`,
+  padding: `${vars.spacing.xs} 0 ${vars.spacing.xs} 1rem`,
   borderLeft: '3px solid #e1e1e1',
   color: '#37352f',
-  fontSize: '1rem',
-  lineHeight: '1.5',
+  fontSize: vars.typography.fontSize.base,
+  lineHeight: vars.typography.lineHeight.base,
   fontStyle: 'italic',
 });