interesting
/
go-ethereum
mirror of https://github.com/ethereum/go-ethereum.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor colors to use semantic tokens

This commit is contained in:
Paul Wackerow 2022-11-15 18:00:31 -08:00
parent d43682359f
commit c71e2e2e23
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
18 changed files with 139 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/MDXComponents.tsx
View File

@ -43,8 +43,7 @@ const MDXComponents = {
<NextLink href={href} passHref> <NextLink href={href} passHref>
<Link <Link
isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')} isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')}
// TODO: move color to theme color='primary'
color='#18bc9c'
> >
{children} {children}
</Link> </Link>
@ -97,7 +96,7 @@ const MDXComponents = {
// as={'span'} // as={'span'}
// padding='0.125em 0.25em' // padding='0.125em 0.25em'
// color='red.300' // color='red.300'
// background='#1c1e2d' // background='code-bg-contrast'
// borderRadius='0.25em' // borderRadius='0.25em'
// fontFamily='code' // fontFamily='code'
// fontSize='sm' // fontSize='sm'

8
src/components/UI/DataTable.tsx
View File

@ -12,11 +12,11 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
// Note: This wont work on firefox, we are ok with this. // Note: This wont work on firefox, we are ok with this.
css={{ css={{
'&::-webkit-scrollbar': { '&::-webkit-scrollbar': {
borderTop: '2px solid #11866f', borderTop: '2px solid var(--chakra-colors-primary)',
height: 18 height: 18
}, },
'&::-webkit-scrollbar-thumb': { '&::-webkit-scrollbar-thumb': {
background: '#11866f' background: 'var(--chakra-colors-primary)'
} }
}} }}
pt={4} pt={4}
@ -32,7 +32,7 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
fontFamily='"JetBrains Mono", monospace' fontFamily='"JetBrains Mono", monospace'
fontWeight={700} fontWeight={700}
fontSize='md' fontSize='md'
color='#868b87' color='#868b87' //? Use theme color? Or add to theme?
> >
{columnHeader} {columnHeader}
</Text> </Text>
@ -48,7 +48,7 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
key={idx} key={idx}
// TODO: Get new background color from nuno for hover // TODO: Get new background color from nuno for hover
transition={'all 0.5s'} transition={'all 0.5s'}
_hover={{ background: 'green.50', transition: 'all 0.5s' }} _hover={{ background: 'button-bg', transition: 'all 0.5s' }}
> >
{columnHeaders.map((columnHeader, idx) => { {columnHeaders.map((columnHeader, idx) => {
// TODO: Make the font size smaller (refer to design system) // TODO: Make the font size smaller (refer to design system)

32
src/components/UI/Header.tsx
View File

@ -10,14 +10,15 @@ export const Header: FC = () => {
<Flex <Flex
mb={4} mb={4}
border='2px solid' border='2px solid'
borderColor='brand.light.primary' borderColor='primary'
justifyContent='space-between' justifyContent='space-between'
> >
<Stack <Stack
p={4} p={4}
justifyContent='center' justifyContent='center'
alignItems='flex-start' alignItems='flex-start'
borderRight={{ base: 'none', sm: '2px solid #11866f'}} borderRight='2px'
borderColor='primary'
flexGrow={2} flexGrow={2}
> >
<NextLink href={'/'} passHref> <NextLink href={'/'} passHref>
@ -34,14 +35,14 @@ export const Header: FC = () => {
<Stack <Stack
p={4} p={4}
justifyContent='center' justifyContent='center'
borderRight='2px solid' borderRight='2px'
borderColor='brand.light.primary' borderColor='primary'
display={{ base: 'none', md: 'block' }} display={{ base: 'none', md: 'block' }}
color='brand.light.primary' color='primary'
_hover={{ _hover={{
textDecoration: 'none', textDecoration: 'none',
bg: 'brand.light.primary', bg: 'primary',
color: 'yellow.50 !important' color: 'bg !important'
}} }}
> >
<NextLink href={DOWNLOADS_PAGE} passHref> <NextLink href={DOWNLOADS_PAGE} passHref>
@ -57,13 +58,14 @@ export const Header: FC = () => {
<Stack <Stack
p={4} p={4}
justifyContent='center' justifyContent='center'
borderRight={{ base: 'none', md: '2px solid #11866f' }} borderRight='2px'
borderColor='primary'
display={{ base: 'none', md: 'block' }} display={{ base: 'none', md: 'block' }}
color='brand.light.primary' color='primary'
_hover={{ _hover={{
textDecoration: 'none', textDecoration: 'none',
bg: 'brand.light.primary', bg: 'primary',
color: 'yellow.50 !important' color: 'bg !important'
}} }}
> >
<NextLink href={DOCS_PAGE} passHref> <NextLink href={DOCS_PAGE} passHref>
@ -79,14 +81,15 @@ export const Header: FC = () => {
<Stack <Stack
p={4} p={4}
display={{ base: 'none', md: 'block' }} display={{ base: 'none', md: 'block' }}
borderRight={{ base: 'none', md: '2px solid #11866f' }} borderRight='2px'
borderColor='primary'
> >
<InputGroup> <InputGroup>
<Input <Input
variant='unstyled' variant='unstyled'
placeholder='search' placeholder='search'
size='md' size='md'
_placeholder={{ color: 'brand.light.primary', fontStyle: 'italic' }} _placeholder={{ color: 'primary', fontStyle: 'italic' }}
/> />
<Stack pl={4} justifyContent='center' alignItems='center'> <Stack pl={4} justifyContent='center' alignItems='center'>
@ -98,7 +101,8 @@ export const Header: FC = () => {
{/* DARK MODE SWITCH */} {/* DARK MODE SWITCH */}
<Box <Box
p={4} p={4}
borderRight={{ base: '2px solid #11866f', md: 'none' }} borderRight={{ base: '2px', md: 'none' }}
borderColor='primary'
> >
<MoonIcon color="primary" /> <MoonIcon color="primary" />
</Box> </Box>

2
src/components/UI/downloads/DownloadsHero.tsx
View File

@ -29,7 +29,7 @@ export const DownloadsHero: FC<DownloadsHero> = ({
DOWNLOAD_HEADER_BUTTONS.sourceCode.buildURL = sourceCodeURL; DOWNLOAD_HEADER_BUTTONS.sourceCode.buildURL = sourceCodeURL;
return ( return (
<Stack border='3px solid' borderColor='brand.light.primary' py={4} px={4}> <Stack border='3px solid' borderColor='primary' py={4} px={4}>
<Stack alignItems='center'> <Stack alignItems='center'>
<Image src='/images/pages/gopher-downloads-front-light.svg' alt='Gopher plugged in' /> <Image src='/images/pages/gopher-downloads-front-light.svg' alt='Gopher plugged in' />
</Stack> </Stack>

6
src/components/UI/downloads/DownloadsSection.tsx
View File

@ -11,9 +11,9 @@ interface Props {
export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sectionTitle, id }) => { export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sectionTitle, id }) => {
return ( return (
<Stack border='2px solid' borderColor='brand.light.primary' id={id}> <Stack border='2px solid' borderColor='primary' id={id}>
{!!imgSrc && ( {!!imgSrc && (
<Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='brand.light.primary'> <Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='primary'>
{/* TODO: use NextImage */} {/* TODO: use NextImage */}
<Image src={imgSrc} alt={imgAltText} /> <Image src={imgSrc} alt={imgAltText} />
</Stack> </Stack>
@ -22,7 +22,7 @@ export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sect
<Stack <Stack
p={4} p={4}
borderBottom='2px solid' borderBottom='2px solid'
borderColor='brand.light.primary' borderColor='primary'
sx={{ mt: '0 !important' }} sx={{ mt: '0 !important' }}
> >
<Box as='h2' textStyle='h2'> <Box as='h2' textStyle='h2'>

10
src/components/UI/downloads/DownloadsTable.tsx
View File

@ -11,9 +11,9 @@ interface Props {
export const DownloadsTable: FC<Props> = ({ data }) => { export const DownloadsTable: FC<Props> = ({ data }) => {
return ( return (
<Stack sx={{ mt: '0 !important' }} borderBottom='2px solid' borderColor='brand.light.primary'> <Stack sx={{ mt: '0 !important' }} borderBottom='2px solid' borderColor='primary'>
<Tabs variant='unstyled'> <Tabs variant='unstyled'>
<TabList color='brand.light.primary' bg='green.50'> <TabList color='primary' bg='button-bg'>
{DOWNLOAD_TABS.map((tab, idx) => { {DOWNLOAD_TABS.map((tab, idx) => {
return ( return (
<Tab <Tab
@ -21,12 +21,12 @@ export const DownloadsTable: FC<Props> = ({ data }) => {
w={'20%'} w={'20%'}
p={4} p={4}
_selected={{ _selected={{
bg: 'brand.light.primary', bg: 'primary',
color: 'yellow.50' color: 'bg'
}} }}
borderBottom='2px solid' borderBottom='2px solid'
borderRight={idx === DOWNLOAD_TABS.length - 1 ? 'none' : '2px solid'} borderRight={idx === DOWNLOAD_TABS.length - 1 ? 'none' : '2px solid'}
borderColor='brand.light.primary' borderColor='primary'
> >
<Text textStyle='download-tab-label'>{tab}</Text> <Text textStyle='download-tab-label'>{tab}</Text>
</Tab> </Tab>

2
src/components/UI/homepage/Gopher.tsx
View File

@ -8,7 +8,7 @@ export const Gopher: FC = () => {
alignItems='center' alignItems='center'
p={4} p={4}
border='2px solid' border='2px solid'
borderColor='brand.light.primary' borderColor='primary'
h='100%' h='100%'
> >
<Image src='/images/pages/gopher-home-side-mobile.svg' alt='Gopher greeting' /> <Image src='/images/pages/gopher-home-side-mobile.svg' alt='Gopher greeting' />

2
src/components/UI/homepage/HomeHero.tsx
View File

@ -8,7 +8,7 @@ export const HomeHero: FC = () => {
return ( return (
<Stack <Stack
border='2px solid' border='2px solid'
borderColor='brand.light.primary' borderColor='primary'
px={4} px={4}
py={{ base: 8, md: 24, lg: 48 }} py={{ base: 8, md: 24, lg: 48 }}
flexGrow={1} flexGrow={1}

8
src/components/UI/homepage/HomeSection.tsx
View File

@ -20,9 +20,9 @@ export const HomeSection: FC<Props> = ({
children children
}) => { }) => {
return ( return (
<Stack border='2px solid' borderColor='brand.light.primary' h='100%'> <Stack border='2px solid' borderColor='primary' h='100%'>
{!!imgSrc && ( {!!imgSrc && (
<Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='brand.light.primary'> <Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='primary'>
{/* TODO: use NextImage */} {/* TODO: use NextImage */}
<Image src={imgSrc} alt={imgAltText} /> <Image src={imgSrc} alt={imgAltText} />
</Stack> </Stack>
@ -31,7 +31,7 @@ export const HomeSection: FC<Props> = ({
<Stack <Stack
p={4} p={4}
borderBottom='2px solid' borderBottom='2px solid'
borderColor='brand.light.primary' borderColor='primary'
sx={{ mt: '0 !important' }} sx={{ mt: '0 !important' }}
> >
<Box as='h2' textStyle='h2'> <Box as='h2' textStyle='h2'>
@ -43,7 +43,7 @@ export const HomeSection: FC<Props> = ({
p={4} p={4}
spacing={4} spacing={4}
borderBottom='2px solid' borderBottom='2px solid'
borderColor='brand.light.primary' borderColor='primary'
sx={{ mt: '0 !important' }} sx={{ mt: '0 !important' }}
h='100%' h='100%'
> >

54
src/components/UI/homepage/QuickLinks.tsx
View File

@ -6,8 +6,8 @@ import { CONTRIBUTING_PAGE, DOCS_PAGE, FAQ_PAGE } from '../../../constants';
export const QuickLinks: FC = () => { export const QuickLinks: FC = () => {
return ( return (
<Stack border='2px solid' borderColor='brand.light.primary'> <Stack border='2px solid' borderColor='primary'>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'> <Stack p={4} borderBottom='2px solid' borderColor='primary'>
<Box as='h2' textStyle='h2'> <Box as='h2' textStyle='h2'>
Quick Links Quick Links
</Box> </Box>
@ -21,7 +21,7 @@ export const QuickLinks: FC = () => {
<GridItem <GridItem
borderRight='2px solid' borderRight='2px solid'
borderBottom='2px solid' borderBottom='2px solid'
borderColor='brand.light.primary' borderColor='primary'
> >
<Stack p={4} h='100%'> <Stack p={4} h='100%'>
<Text textStyle='quick-link-text' mb={-1}> <Text textStyle='quick-link-text' mb={-1}>
@ -31,23 +31,23 @@ export const QuickLinks: FC = () => {
<Text textStyle='quick-link-text'>We can help.</Text> <Text textStyle='quick-link-text'>We can help.</Text>
</Stack> </Stack>
</GridItem> </GridItem>
<GridItem borderBottom='2px solid' borderColor='brand.light.primary'> <GridItem borderBottom='2px solid' borderColor='primary'>
<NextLink href={`${DOCS_PAGE}/getting-started`} passHref> <NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
<Link _hover={{ textDecoration: 'none' }}> <Link _hover={{ textDecoration: 'none' }}>
<Stack <Stack
data-group data-group
bg='green.50' bg='button-bg'
_hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }} _hover={{ textDecoration: 'none', bg: 'primary', color: 'bg' }}
_focus={{ _focus={{
textDecoration: 'none', textDecoration: 'none',
bg: 'brand.light.primary', bg: 'primary',
color: 'yellow.50', color: 'bg',
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important' boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
}} }}
_active={{ _active={{
textDecoration: 'none', textDecoration: 'none',
bg: 'brand.light.secondary', bg: 'secondary',
color: 'yellow.50' color: 'bg'
}} }}
justifyContent='center' justifyContent='center'
h='100%' h='100%'
@ -63,7 +63,7 @@ export const QuickLinks: FC = () => {
<GridItem <GridItem
borderRight='2px solid' borderRight='2px solid'
borderBottom='2px solid' borderBottom='2px solid'
borderColor='brand.light.primary' borderColor='primary'
> >
<Stack p={4} h='100%'> <Stack p={4} h='100%'>
<Text textStyle='quick-link-text' mb={-1}> <Text textStyle='quick-link-text' mb={-1}>
@ -73,23 +73,23 @@ export const QuickLinks: FC = () => {
<Text textStyle='quick-link-text'>Check the FAQ section in the documentation.</Text> <Text textStyle='quick-link-text'>Check the FAQ section in the documentation.</Text>
</Stack> </Stack>
</GridItem> </GridItem>
<GridItem borderBottom='2px solid' borderColor='brand.light.primary'> <GridItem borderBottom='2px solid' borderColor='primary'>
<NextLink href={FAQ_PAGE} passHref> <NextLink href={FAQ_PAGE} passHref>
<Link _hover={{ textDecoration: 'none' }}> <Link _hover={{ textDecoration: 'none' }}>
<Stack <Stack
data-group data-group
bg='green.50' bg='button-bg'
_hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }} _hover={{ textDecoration: 'none', bg: 'primary', color: 'bg' }}
_focus={{ _focus={{
textDecoration: 'none', textDecoration: 'none',
bg: 'brand.light.primary', bg: 'primary',
color: 'yellow.50', color: 'bg',
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important' boxShadow: 'inset 0 0 0 3px var(--chakra-colors-bg) !important'
}} }}
_active={{ _active={{
textDecoration: 'none', textDecoration: 'none',
bg: 'brand.light.secondary', bg: 'secondary',
color: 'yellow.50' color: 'bg'
}} }}
justifyContent='center' justifyContent='center'
h='100%' h='100%'
@ -102,7 +102,7 @@ export const QuickLinks: FC = () => {
</GridItem> </GridItem>
{/* how to contribute */} {/* how to contribute */}
<GridItem borderRight='2px solid' borderColor='brand.light.primary'> <GridItem borderRight='2px solid' borderColor='primary'>
<Stack p={4} h='100%'> <Stack p={4} h='100%'>
<Text textStyle='quick-link-text' mb={-1}> <Text textStyle='quick-link-text' mb={-1}>
Want to know how to contribute? Want to know how to contribute?
@ -116,18 +116,18 @@ export const QuickLinks: FC = () => {
<Link _hover={{ textDecoration: 'none' }}> <Link _hover={{ textDecoration: 'none' }}>
<Stack <Stack
data-group data-group
bg='green.50' bg='button-bg'
_hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }} _hover={{ textDecoration: 'none', bg: 'primary', color: 'bg' }}
_focus={{ _focus={{
textDecoration: 'none', textDecoration: 'none',
bg: 'brand.light.primary', bg: 'primary',
color: 'yellow.50', color: 'bg',
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important' boxShadow: 'inset 0 0 0 3px var(--chakra-colors-bg) !important'
}} }}
_active={{ _active={{
textDecoration: 'none', textDecoration: 'none',
bg: 'brand.light.secondary', bg: 'secondary',
color: 'yellow.50' color: 'bg'
}} }}
justifyContent='center' justifyContent='center'
h='100%' h='100%'

23
src/components/UI/homepage/WhatIsEthereum.tsx
View File

@ -10,19 +10,21 @@ interface Props {
export const WhatIsEthereum: FC<Props> = ({ children }) => { export const WhatIsEthereum: FC<Props> = ({ children }) => {
return ( return (
<Stack border='2px solid' borderColor='brand.light.primary'> <Stack border='2px' borderColor='primary'>
<Grid <Grid
templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
borderBottom={{ base: 'none', md: '2px solid #11866f' }} borderBottom='2px'
borderColor='primary'
> >
<GridItem <GridItem
borderRight={{ base: 'none', md: '2px solid #11866f' }}
order={{ base: 2, md: 1 }} order={{ base: 2, md: 1 }}
borderRight={{ base: 'none', md: '2px' }}
borderColor='primary !important'
> >
<Stack <Stack
p={4} p={4}
borderBottom='2px solid' borderBottom='2px'
borderColor='brand.light.primary' borderColor='primary'
sx={{ mt: '0 !important' }} sx={{ mt: '0 !important' }}
> >
<Box as='h2' textStyle='h2'> <Box as='h2' textStyle='h2'>
@ -30,12 +32,7 @@ export const WhatIsEthereum: FC<Props> = ({ children }) => {
</Box> </Box>
</Stack> </Stack>
<Stack <Stack p={4} sx={{ mt: '0 !important' }}>
p={4}
borderBottom={{ base: '2px solid', md: 'none' }}
borderColor='brand.light.primary'
sx={{ mt: '0 !important' }}
>
{children} {children}
</Stack> </Stack>
</GridItem> </GridItem>
@ -45,8 +42,8 @@ export const WhatIsEthereum: FC<Props> = ({ children }) => {
justifyContent='center' justifyContent='center'
alignItems='center' alignItems='center'
p={4} p={4}
borderBottom={{ base: '2px solid', md: 'none' }} borderBottom={{ base: '2px', md: 'none' }}
borderColor='brand.light.primary' borderColor='primary'
h='100%' h='100%'
> >
{/* TODO: use NextImage */} {/* TODO: use NextImage */}

18
src/components/UI/homepage/WhyRunANode.tsx
View File

@ -10,16 +10,17 @@ interface Props {
export const WhyRunANode: FC<Props> = ({ children }) => { export const WhyRunANode: FC<Props> = ({ children }) => {
return ( return (
<Stack border='2px solid' borderColor='brand.light.primary'> <Stack border='2px solid' borderColor='primary'>
<Grid <Grid
templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
borderBottom={{ base: 'none', md: '2px solid #11866f' }} borderBottom={{ base: 'none', md: '2px' }}
borderColor='primary !important'
> >
<GridItem order={{ base: 1, md: 2 }}> <GridItem order={{ base: 1, md: 2 }}>
<Stack <Stack
p={4} p={4}
borderBottom='2px solid' borderBottom='2px'
borderColor='brand.light.primary' borderColor='primary'
sx={{ mt: '0 !important' }} sx={{ mt: '0 !important' }}
> >
<Box as='h2' textStyle='h2'> <Box as='h2' textStyle='h2'>
@ -29,8 +30,8 @@ export const WhyRunANode: FC<Props> = ({ children }) => {
<Stack <Stack
p={4} p={4}
borderBottom={{ base: '2px solid', md: 'none' }} borderBottom={{ base: '2px', md: 'none' }}
borderColor='brand.light.primary' borderColor='primary'
sx={{ mt: '0 !important' }} sx={{ mt: '0 !important' }}
> >
{children} {children}
@ -42,8 +43,9 @@ export const WhyRunANode: FC<Props> = ({ children }) => {
justifyContent='center' justifyContent='center'
alignItems='center' alignItems='center'
p={4} p={4}
borderBottom={{ base: '2px solid #11866f', md: 'none' }} borderBottom={{ base: '2px', md: 'none' }}
borderRight={{ base: 'none', md: '2px solid #11866f' }} borderRight={{ base: 'none', md: '2px' }}
borderColor='primary !important'
h='100%' h='100%'
> >
{/* TODO: use NextImage */} {/* TODO: use NextImage */}

32
src/components/layouts/Footer.tsx
View File

@ -26,7 +26,7 @@ export const Footer: FC = () => {
direction={{ base: 'column', md: 'row'}} direction={{ base: 'column', md: 'row'}}
justifyContent={{md: 'space-between'}} justifyContent={{md: 'space-between'}}
border='2px solid' border='2px solid'
borderColor='brand.light.primary' borderColor='primary'
> >
<Flex <Flex
sx={{ mt: '-2px !important' }} sx={{ mt: '-2px !important' }}
@ -34,19 +34,19 @@ export const Footer: FC = () => {
base: '2px solid', base: '2px solid',
md: 'none' md: 'none'
}} }}
borderColor='brand.light.primary' borderColor='primary'
> >
<Stack <Stack
flex={1} flex={1}
color='brand.light.primary' color='primary'
_hover={{ _hover={{
textDecoration: 'none', textDecoration: 'none',
bg: 'brand.light.primary', bg: 'primary',
color: 'yellow.50 !important' color: 'bg !important'
}} }}
justifyContent='center' justifyContent='center'
borderRight='2px solid' borderRight='2px solid'
borderColor='brand.light.primary' borderColor='primary'
> >
<NextLink href={DOWNLOADS_PAGE} passHref> <NextLink href={DOWNLOADS_PAGE} passHref>
<Link _hover={{ textDecoration: 'none' }}> <Link _hover={{ textDecoration: 'none' }}>
@ -57,17 +57,17 @@ export const Footer: FC = () => {
<Stack <Stack
flex={1} flex={1}
color='brand.light.primary' color='primary'
_hover={{ _hover={{
textDecoration: 'none', textDecoration: 'none',
bg: 'brand.light.primary', bg: 'primary',
color: 'yellow.50 !important' color: 'bg !important'
}} }}
borderRight={{ borderRight={{
base: 'none', base: 'none',
md: '2px solid' md: '2px solid'
}} }}
borderColor='brand.light.primary' borderColor='primary'
justifyContent='center' justifyContent='center'
> >
<NextLink href={DOCS_PAGE} passHref> <NextLink href={DOCS_PAGE} passHref>
@ -87,9 +87,9 @@ export const Footer: FC = () => {
md: '2px solid', md: '2px solid',
lg: 'none' lg: 'none'
}} }}
borderColor='brand.light.primary !important' borderColor='primary !important'
_hover={{ _hover={{
bg: 'brand.light.primary', bg: 'primary',
}} }}
alignItems='center' alignItems='center'
p={4} p={4}
@ -110,12 +110,12 @@ export const Footer: FC = () => {
data-group data-group
flex={1} flex={1}
_hover={{ _hover={{
bg: 'brand.light.primary', bg: 'primary',
}} }}
alignItems='center' alignItems='center'
borderWidth='2px' borderWidth='2px'
borderStyle='none solid' borderStyle='none solid'
borderColor='brand.light.primary' borderColor='primary'
p={4} p={4}
> >
<NextLink href={GETH_DISCORD_URL} passHref> <NextLink href={GETH_DISCORD_URL} passHref>
@ -134,7 +134,7 @@ export const Footer: FC = () => {
data-group data-group
flex={1} flex={1}
_hover={{ _hover={{
bg: 'brand.light.primary', bg: 'primary',
}} }}
alignItems='center' alignItems='center'
p={4} p={4}
@ -162,7 +162,7 @@ export const Footer: FC = () => {
base: 'none solid solid solid', base: 'none solid solid solid',
lg: 'solid solid solid none' lg: 'solid solid solid none'
}} }}
borderColor='brand.light.primary' borderColor='primary'
flex={1} flex={1}
> >
<Text textStyle='footer-text'>{`© 2013–${new Date().getFullYear()}. The go-ethereum Authors.`}</Text> <Text textStyle='footer-text'>{`© 2013–${new Date().getFullYear()}. The go-ethereum Authors.`}</Text>

12
src/pages/downloads.tsx
View File

@ -95,7 +95,7 @@ const DownloadsPage: NextPage = () => {
</DownloadsSection> </DownloadsSection>
<DownloadsSection sectionTitle='Stable releases' id='stablereleases'> <DownloadsSection sectionTitle='Stable releases' id='stablereleases'>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'> <Stack p={4} borderBottom='2px solid' borderColor='primary'>
<Text textStyle='quick-link-text'> <Text textStyle='quick-link-text'>
These are the current and previous stable releases of go-ethereum, updated These are the current and previous stable releases of go-ethereum, updated
automatically when a new version is tagged in our{' '} automatically when a new version is tagged in our{' '}
@ -124,7 +124,7 @@ const DownloadsPage: NextPage = () => {
</DownloadsSection> </DownloadsSection>
<DownloadsSection sectionTitle='Develop builds' id='developbuilds'> <DownloadsSection sectionTitle='Develop builds' id='developbuilds'>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'> <Stack p={4} borderBottom='2px solid' borderColor='primary'>
<Text textStyle='quick-link-text'> <Text textStyle='quick-link-text'>
These are the develop snapshots of go-ethereum, updated automatically when a new These are the develop snapshots of go-ethereum, updated automatically when a new
commit is pushed into our{' '} commit is pushed into our{' '}
@ -153,14 +153,14 @@ const DownloadsPage: NextPage = () => {
</DownloadsSection> </DownloadsSection>
<DownloadsSection sectionTitle='OpenPGP Signatures' id='pgpsignatures'> <DownloadsSection sectionTitle='OpenPGP Signatures' id='pgpsignatures'>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'> <Stack p={4} borderBottom='2px solid' borderColor='primary'>
<Text textStyle='quick-link-text'> <Text textStyle='quick-link-text'>
All the binaries available from this page are signed via our build server PGP keys: All the binaries available from this page are signed via our build server PGP keys:
</Text> </Text>
</Stack> </Stack>
{/* TODO: swap for real data */} {/* TODO: swap for real data */}
<Stack borderBottom='2px solid' borderColor='brand.light.primary'> <Stack borderBottom='2px solid' borderColor='primary'>
<DataTable columnHeaders={DOWNLOAD_OPENPGP_BUILD_HEADERS} data={pgpBuildTestData} /> <DataTable columnHeaders={DOWNLOAD_OPENPGP_BUILD_HEADERS} data={pgpBuildTestData} />
</Stack> </Stack>
@ -174,7 +174,7 @@ const DownloadsPage: NextPage = () => {
</DownloadsSection> </DownloadsSection>
<DownloadsSection sectionTitle='Importing keys and verifying builds' id='importingkeys'> <DownloadsSection sectionTitle='Importing keys and verifying builds' id='importingkeys'>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'> <Stack p={4} borderBottom='2px solid' borderColor='primary'>
<Text textStyle='quick-link-text'> <Text textStyle='quick-link-text'>
You can import the build server public keys by grabbing the individual keys directly You can import the build server public keys by grabbing the individual keys directly
from the keyserver network: from the keyserver network:
@ -184,7 +184,7 @@ const DownloadsPage: NextPage = () => {
<Code p={4}>gpg --recv-keys F9585DE6 C2FF8BBF 9BA28146 7B9E2481 D2A67EAC</Code> <Code p={4}>gpg --recv-keys F9585DE6 C2FF8BBF 9BA28146 7B9E2481 D2A67EAC</Code>
</Stack> </Stack>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'> <Stack p={4} borderBottom='2px solid' borderColor='primary'>
<Text textStyle='quick-link-text'> <Text textStyle='quick-link-text'>
Similarly you can import all the developer public keys by grabbing them directly Similarly you can import all the developer public keys by grabbing them directly
from the keyserver network: from the keyserver network:

15
src/theme/components/Button.ts
View File

@ -5,13 +5,18 @@ export const Button = {
px: '32px', px: '32px',
borderRadius: 0, borderRadius: 0,
width: { base: '188px', md: 'auto' }, width: { base: '188px', md: 'auto' },
bg: 'brand.light.primary', bg: 'primary',
_hover: { bg: 'brand.light.secondary' }, _hover: { bg: 'secondary' },
_focus: { _focus: {
bg: 'brand.light.primary', bg: 'secondary',
boxShadow: 'inset 0 0 0 2px #06fece !important' boxShadow: 'inset 0 0 0 2px var(--chakra-colors-primary) !important'
}, },
_active: { borderTop: '4px solid', borderColor: 'green.200', pt: '4px' } _active: {
bg: 'secondary',
borderTop: '4px',
borderColor: 'primary',
pt: '4px'
}
} }
} }
}; };

26
src/theme/components/Link.ts
View File

@ -1,29 +1,29 @@
export const Link = { export const Link = {
variants: { variants: {
'button-link-secondary': { 'button-link-secondary': {
color: 'brand.light.primary', color: 'primary',
bg: 'green.50', bg: 'button-bg !important',
_hover: { textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }, _hover: { textDecoration: 'none', bg: 'primary', color: 'bg' },
_focus: { _focus: {
textDecoration: 'none', textDecoration: 'none',
bg: 'brand.light.primary', bg: 'primary',
color: 'yellow.50', color: 'bg',
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important' boxShadow: 'inset 0 0 0 3px var(--chakra-colors-bg) !important'
}, },
_active: { textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' } _active: { textDecoration: 'none', bg: 'secondary', color: 'bg' }
}, },
light: { light: {
textDecoration: 'underline', textDecoration: 'underline',
color: 'brand.light.primary', color: 'primary',
_hover: { color: 'brand.light.body', textDecorationColor: 'brand.light.body' }, _hover: { color: 'body', textDecorationColor: 'body' },
_focus: { _focus: {
color: 'brand.light.primary', color: 'primary',
boxShadow: '0 0 0 1px #11866f !important', boxShadow: '0 0 0 1px var(--chakra-colors-primary) !important',
textDecoration: 'none' textDecoration: 'none'
}, },
_pressed: { _pressed: {
color: 'brand.light.secondary', color: 'secondary',
textDecorationColor: 'brand.light.secondary' textDecorationColor: 'secondary'
} }
} }
} }

7
src/theme/foundations/colors.ts
View File

@ -1,11 +1,4 @@
export const colors = { export const colors = {
brand: {
light: {
primary: '#11866f',
secondary: '#25453f',
body: '#1d242c'
}
},
green: { green: {
50: '#d7f5ef', 50: '#d7f5ef',
100: '#98FFEB', 100: '#98FFEB',

16
src/theme/foundations/textStyles.ts
View File

@ -5,7 +5,7 @@ export const textStyles = {
fontSize: '2.75rem', fontSize: '2.75rem',
lineHeight: '3.375rem', lineHeight: '3.375rem',
letterSpacing: '5%', letterSpacing: '5%',
color: 'brand.light.body' color: 'body'
}, },
h2: { h2: {
fontFamily: '"JetBrains Mono", monospace', fontFamily: '"JetBrains Mono", monospace',
@ -13,7 +13,7 @@ export const textStyles = {
fontSize: '1.5rem', fontSize: '1.5rem',
lineHeight: 'auto', lineHeight: 'auto',
letterSpacing: '4%', letterSpacing: '4%',
color: 'brand.light.body' color: 'body'
}, },
'header-font': { 'header-font': {
fontFamily: '"JetBrains Mono", monospace', fontFamily: '"JetBrains Mono", monospace',
@ -29,7 +29,7 @@ export const textStyles = {
}, },
'homepage-primary-label': { 'homepage-primary-label': {
fontFamily: '"JetBrains Mono", monospace', fontFamily: '"JetBrains Mono", monospace',
color: 'yellow.50', color: 'bg',
fontWeight: 700, fontWeight: 700,
textTransform: 'uppercase' textTransform: 'uppercase'
}, },
@ -49,10 +49,10 @@ export const textStyles = {
fontWeight: 700, fontWeight: 700,
textTransform: 'uppercase', textTransform: 'uppercase',
textAlign: 'center', textAlign: 'center',
color: 'brand.light.primary', color: 'primary',
_groupHover: { color: 'yellow.50' }, _groupHover: { color: 'bg' },
_groupActive: { color: 'yellow.50' }, _groupActive: { color: 'bg' },
_groupFocus: { color: 'yellow.50' } _groupFocus: { color: 'bg' }
}, },
'hero-text-small': { 'hero-text-small': {
fontSize: '13px', fontSize: '13px',
@ -66,7 +66,7 @@ export const textStyles = {
}, },
'downloads-button-label': { 'downloads-button-label': {
fontFamily: '"JetBrains Mono", monospace', fontFamily: '"JetBrains Mono", monospace',
color: 'yellow.50', color: 'bg',
fontSize: 'xs', fontSize: 'xs',
textTransform: 'uppercase' textTransform: 'uppercase'
}, },