fix: dark mode body colors (#61)

* chore: update textStyles

* markdown text color styles

Co-authored-by: Corwin Smith <cssmittys@gmail.com>

src/components/UI/downloads/DownloadsHero.tsx

@@ -54,11 +54,12 @@ export const DownloadsHero: FC<DownloadsHero> = ({
               fontFamily='"JetBrains Mono", monospace'
               lineHeight='21px'
               mb={{ base: '4 !important', md: '8 !important' }}
+              color='body'
             >
               {currentBuild}
             </Text>
 
-            <Text mb={4}>
+            <Text mb={4} color='body'>
               You can download the latest 64-bit stable release of Geth for our primary platforms
               below. Packages for all supported platforms, as well as develop builds, can be found
               further down the page. If you&apos;re looking to install Geth and/or associated tools

src/components/UI/homepage/HomeHero.tsx

@@ -54,7 +54,7 @@ export const HomeHero: FC = () => {
             </Button>
           </NextLink>
 
-          <Text mt={1} fontSize='13px' fontFamily='"Inter", sans-serif' alignSelf='center'>
+          <Text mt={1} textStyle='hero-text-small'>
             Read our documentation
           </Text>
         </Flex>

src/pages/index.tsx

@@ -26,10 +26,7 @@ import {
 const HomePage: NextPage = ({}) => {
   return (
     <>
-      <PageMetadata
-        title={METADATA.HOME_TITLE}
-        description={METADATA.HOME_DESCRIPTION}
-      />
+      <PageMetadata title={METADATA.HOME_TITLE} description={METADATA.HOME_DESCRIPTION} />
 
       <main>
         <Stack spacing={4}>
@@ -45,7 +42,7 @@ const HomePage: NextPage = ({}) => {
                 Svg={GopherHomeFront}
                 ariaLabel='Gopher greeting'
               >
-                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                <Text textStyle='quick-link-text'>
                   Geth (go-ethereum) is a{' '}
                   <Link href={GO_URL} isExternal variant='light'>
                     Go
@@ -57,13 +54,13 @@ const HomePage: NextPage = ({}) => {
                   - a gateway into the decentralized web.
                 </Text>
 
-                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                <Text textStyle='quick-link-text'>
                   Geth has been a core part of Etheruem since the very beginning. Geth was one of
                   the original Ethereum implementations making it the most battle-hardened and
                   tested client.
                 </Text>
 
-                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                <Text textStyle='quick-link-text'>
                   Geth is an Ethereum{' '}
                   <Text as='span' fontStyle='italic'>
                     execution client
@@ -76,7 +73,7 @@ const HomePage: NextPage = ({}) => {
                   .
                 </Text>
 
-                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                <Text textStyle='quick-link-text'>
                   Running Geth alongside a consensus client turns a computer into an Ethereum node.
                 </Text>
               </HomeSection>
@@ -85,7 +82,7 @@ const HomePage: NextPage = ({}) => {
             <GridItem>
               {/* SECTION: What is Ethereum (has different styles than the other sections so it uses a different component) */}
               <WhatIsEthereum>
-                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                <Text textStyle='quick-link-text'>
                   Ethereum is a technology for building apps and organizations, holding assets,
                   transacting and communicating without being controlled by a central authority. It
                   is the base of a new, decentralized internet.
@@ -96,13 +93,13 @@ const HomePage: NextPage = ({}) => {
             <GridItem>
               {/* SECTION: Why run a node (has different styles than the other sections so it uses a different component) */}
               <WhyRunANode>
-                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                <Text textStyle='quick-link-text'>
                   Running your own node enables you to use Ethereum in a truly private,
                   self-sufficient and trustless manner. You don&apos;t need to trust information you
                   receive because you can verify the data yourself using your Geth instance.
                 </Text>
 
-                <Text fontFamily='"Inter", sans-serif' lineHeight='26px' fontWeight={700}>
+                <Text textStyle='quick-link-text' fontWeight={700}>
                   &ldquo;Don&apos;t trust, verify&rdquo;
                 </Text>
               </WhyRunANode>
@@ -117,7 +114,7 @@ const HomePage: NextPage = ({}) => {
                 linkLabel='Read our contribution guidelines'
                 buttonHref={CONTRIBUTING_PAGE}
               >
-                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                <Text textStyle='quick-link-text'>
                   We welcome contributions from anyone on the internet, and are grateful for even
                   the smallest of fixes! If you&apos;d like to contribute to the Geth source code,
                   please fork the{' '}
@@ -137,7 +134,7 @@ const HomePage: NextPage = ({}) => {
                 linkLabel='Read more about the Ethereum Foundation'
                 buttonHref={ETHEREUM_FOUNDATION_URL}
               >
-                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                <Text textStyle='quick-link-text'>
                   The Geth team comprises 10 developers distributed across the world. The Geth team
                   is funded exclusively by The Ethereum Foundation.
                 </Text>

src/theme/foundations/textStyles.ts

@@ -20,49 +20,57 @@ export const textStyles = {
     fontWeight: 700,
     fontSize: { base: '1.875rem', md: '2.125rem' },
     letterSpacing: '0.04em',
-    lineHeight: 'normal'
+    lineHeight: 'normal',
+    color: 'body'
   },
   header2: {
     fontFamily: 'heading',
     fontSize: { base: '1.5rem', md: '1.75rem' },
     letterSpacing: '0.04em',
-    lineHeight: 'normal'
+    lineHeight: 'normal',
+    color: 'body'
   },
   header3: {
     fontFamily: 'heading',
     fontSize: { base: '1.25rem', md: '1.375rem' },
     letterSpacing: '0.04em',
-    lineHeight: 'normal'
+    lineHeight: 'normal',
+    color: 'body'
   },
   header4: {
     fontFamily: 'heading',
     fontSize: '1.125rem',
     letterSpacing: '0.04em',
-    lineHeight: 'normal'
+    lineHeight: 'normal',
+    color: 'body'
   },
   header5: {
     fontFamily: 'heading',
     fontSize: '1rem',
     letterSpacing: '0.02em',
-    lineHeight: 'normal'
+    lineHeight: 'normal',
+    color: 'body'
   },
   header6: {
     fontFamily: 'heading',
     fontSize: '0.875rem',
     letterSpacing: '0.02em',
-    lineHeight: 'normal'
+    lineHeight: 'normal',
+    color: 'body'
   },
   'header-font': {
     fontFamily: 'heading',
     fontWeight: 700,
-    fontSize: { base: '0.86rem', sm: '1rem' }
+    fontSize: { base: '0.86rem', sm: '1rem' },
+    color: 'body'
   },
   'homepage-description': {
     fontFamily: 'heading',
     fontWeight: 700,
     lineHeight: '21px',
     letterSpacing: '0.05em',
-    textAlign: { base: 'center', md: 'left' }
+    textAlign: { base: 'center', md: 'left' },
+    color: 'body'
   },
   'homepage-primary-label': {
     fontFamily: 'heading',
@@ -79,7 +87,8 @@ export const textStyles = {
   },
   'quick-link-text': {
     fontFamily: 'body',
-    lineHeight: '26px'
+    lineHeight: '26px',
+    color: 'body'
   },
   'quick-link-label': {
     fontFamily: 'heading',
@@ -93,7 +102,8 @@ export const textStyles = {
   },
   'hero-text-small': {
     fontSize: '13px',
-    fontFamily: 'body'
+    fontFamily: 'body',
+    color: 'body'
   },
   'footer-link-label': {
     fontFamily: '"JetBrains Mono", monospace',
@@ -106,7 +116,8 @@ export const textStyles = {
     fontFamily: 'body',
     lineHeight: '22px',
     fontWeight: 400,
-    fontSize: '12px'
+    fontSize: '12px',
+    color: 'body'
   },
   'downloads-button-label': {
     fontFamily: 'heading',