fix: dark mode body colors (#61)

* chore: update textStyles

* markdown text color styles

Co-authored-by: Corwin Smith <cssmittys@gmail.com>
This commit is contained in:
Nicolás Quiroz 2022-11-29 09:44:53 -03:00 committed by GitHub
parent 42c0b33f1d
commit d504f047ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 26 deletions

View File

@ -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

View File

@ -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>

View File

@ -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>

View File

@ -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',