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' fontFamily='"JetBrains Mono", monospace'
lineHeight='21px' lineHeight='21px'
mb={{ base: '4 !important', md: '8 !important' }} mb={{ base: '4 !important', md: '8 !important' }}
color='body'
> >
{currentBuild} {currentBuild}
</Text> </Text>
<Text mb={4}> <Text mb={4} color='body'>
You can download the latest 64-bit stable release of Geth for our primary platforms 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 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 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> </Button>
</NextLink> </NextLink>
<Text mt={1} fontSize='13px' fontFamily='"Inter", sans-serif' alignSelf='center'> <Text mt={1} textStyle='hero-text-small'>
Read our documentation Read our documentation
</Text> </Text>
</Flex> </Flex>

View File

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

View File

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