kint5-document Heading 컴포넌트 스타일 수정

titicacadev · Nov 7, 2023 · e62e980 · e62e980
1 parent 69925c9
commit e62e980
Showing 1 changed file with 22 additions and 4 deletions.
diff --git a/packages/kint5-document/src/elements/text/headings.tsx b/packages/kint5-document/src/elements/text/headings.tsx
@@ -1,5 +1,5 @@
 import { ComponentType } from 'react'
-import { H1, H2, H3, H4 } from '@titicaca/core-elements'
+import { H1, H2, H3, H4 } from '@titicaca/kint5-core-elements'
 
 interface HeadingProps {
   href?: string
@@ -11,10 +11,16 @@ interface HeadingProps {
 export const MH1 = tripleDocumentHeading(
   ({ children, ...props }: HeadingProps) => (
     <H1
-      {...props}
+      headlineCss={{
+        fontSize: 14,
+        color: 'var(--color-kint5-poi-tour)',
+        marginBottom: 4,
+      }}
+      textCss={{ fontSize: 18 }}
       css={{
         margin: '25px 30px 20px',
       }}
+      {...props}
     >
       {children}
     </H1>
@@ -23,7 +29,11 @@ export const MH1 = tripleDocumentHeading(
 
 export const MH2 = tripleDocumentHeading(
   ({ children, ...props }: HeadingProps) => (
-    <H2 margin={{ top: 20, bottom: 20, left: 30, right: 30 }} {...props}>
+    <H2
+      margin={{ top: 20, bottom: 20, left: 30, right: 30 }}
+      css={{ fontSize: 20, fontWeight: 700 }}
+      {...props}
+    >
       {children}
     </H2>
   ),
@@ -33,6 +43,7 @@ export const MH3 = tripleDocumentHeading(
   ({ compact, children, ...props }: HeadingProps & { compact: boolean }) => (
     <H3
       margin={compact ? { top: 13 } : { top: 20, left: 30, right: 30 }}
+      css={{ fontSize: 18 }}
       {...props}
     >
       {children}
@@ -42,7 +53,14 @@ export const MH3 = tripleDocumentHeading(
 
 export const MH4 = tripleDocumentHeading(
   ({ children, ...props }: HeadingProps) => (
-    <H4 margin={{ top: 20, left: 30, right: 30 }} {...props}>
+    <H4
+      margin={{ top: 20, left: 30, right: 30 }}
+      css={{
+        fontSize: 18,
+        color: 'var(--color-kint5-poi-tour)',
+      }}
+      {...props}
+    >
       {children}
     </H4>
   ),