update fontSize for h1

src/components/UI/docs/MDComponents.tsx

@@ -15,7 +15,7 @@ import { Code, Note } from '.';
 import { textStyles } from '../../../theme/foundations';
 import { parseHeadingId } from '../../../utils/parseHeadingId';
 
-const { header1, header2, header3, header4 } = textStyles;
+const { h1, header2, header3, header4 } = textStyles;
 
 const MDComponents = {
   // paragraphs
@@ -45,7 +45,7 @@ const MDComponents = {
     const { children: parsedChildren, headingId } = parseHeadingId(children);
 
     return (
-      <Heading as='h1' textAlign='start' mb='5 !important' {...header1} id={headingId}>
+      <Heading as='h1' textAlign='start' mb='5 !important' {...h1} id={headingId}>
         {parsedChildren}
       </Heading>
     );

src/pages/[...slug].tsx

@@ -107,7 +107,7 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
           <Stack pb={4} width='100%'>
             <Stack mb={16}>
               <Breadcrumbs />
-              <Heading as='h1' mt='4 !important' mb={0} {...textStyles.header1}>
+              <Heading as='h1' mt='4 !important' mb={0} {...textStyles.h1}>
                 {frontmatter.title}
               </Heading>
               <Text as='span' mt='0 !important'>

src/theme/foundations/textStyles.ts

@@ -2,7 +2,7 @@ export const textStyles = {
   h1: {
     fontFamily: 'heading',
     fontWeight: 700,
-    fontSize: '2.75rem',
+    fontSize: { base: '2.175rem', md: '2.875rem' },
     lineHeight: '3.375rem',
     letterSpacing: { base: '0.03rem', md: '0.04rem' },
     color: 'body'
@@ -15,14 +15,7 @@ export const textStyles = {
     letterSpacing: { base: '0.03rem', md: '0.04rem' },
     color: 'body'
   },
-  header1: {
+
-    fontFamily: 'heading',
-    fontWeight: 700,
-    fontSize: { base: '1.875rem', md: '2.125rem' },
-    letterSpacing: { base: '0.03rem', md: '0.04rem' },
-    lineHeight: 'normal',
-    color: 'body'
-  },
   header2: {
     fontFamily: 'heading',
     fontSize: { base: '1.5rem', md: '1.75rem' },