chore: add textStyles to theme

This commit is contained in:
Nicolás Quiroz 2022-10-07 20:42:06 -05:00
parent 0d0c486240
commit d1ee8d02ff
5 changed files with 43 additions and 63 deletions

View File

@ -1,4 +1,4 @@
import { Box, Button, Flex, Heading, Stack, Text } from '@chakra-ui/react';
import { Box, Button, Flex, Stack, Text } from '@chakra-ui/react';
import { FC } from 'react';
import NextLink from 'next/link';
@ -8,28 +8,16 @@ export const HomeHero: FC = () => {
return (
<Stack border='2px solid' borderColor='brand.light.primary' px={4} py={{ base: 8, md: 5 }}>
<Box mb={4}>
<Heading
as='h1' // TODO: move text style to theme
fontFamily='"JetBrains Mono", monospace'
fontWeight={700}
fontSize='2.75rem'
lineHeight='3.375rem'
letterSpacing='5%'
color='brand.light.body'
<Box
as='h1'
textStyle='h1'
mb={{ base: 2, md: 4 }}
textAlign={{ base: 'center', md: 'left' }}
>
go-ethereum
</Heading>
</Box>
<Text
// TODO: move text style to theme
fontFamily='"JetBrains Mono", monospace'
fontWeight={700}
lineHeight='21px'
letterSpacing='0.05em'
textAlign={{ base: 'center', md: 'left' }}
>
<Text textStyle='homepage-description'>
Official Go implementation of the Ethereum protocol
</Text>
</Box>
@ -41,15 +29,7 @@ export const HomeHero: FC = () => {
<Flex direction='column' alignItems='center' mr={{ md: 6 }}>
<NextLink href={DOWNLOADS_PAGE} passHref>
<Button variant='primary' as='a' mb={1}>
<Text
// TODO: move to textstyles
fontFamily='"JetBrains Mono", monospace'
color='yellow.50'
fontWeight={700}
textTransform='uppercase'
>
Download
</Text>
<Text textStyle='homepage-primary-label'>Download</Text>
</Button>
</NextLink>
@ -61,15 +41,7 @@ export const HomeHero: FC = () => {
<Flex direction='column' alignItems='center'>
<NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
<Button variant='primary' as='a' mb={1}>
<Text
// TODO: move to textstyles
fontFamily='"JetBrains Mono", monospace'
color='yellow.50'
fontWeight={700}
textTransform='uppercase'
>
Documentation
</Text>
<Text textStyle='homepage-primary-label'>Documentation</Text>
</Button>
</NextLink>

View File

@ -1,4 +1,4 @@
import { Heading, Image, Link, Stack, Text } from '@chakra-ui/react';
import { Box, Image, Link, Stack, Text } from '@chakra-ui/react';
import { FC } from 'react';
import NextLink from 'next/link';
@ -34,18 +34,9 @@ export const HomeSection: FC<Props> = ({
borderColor='brand.light.primary'
sx={{ mt: '0 !important' }}
>
<Heading
// TODO: move text style to theme
as='h2'
fontFamily='"JetBrains Mono", monospace'
fontWeight={400}
fontSize='1.5rem'
lineHeight='auto'
letterSpacing='4%'
color='brand.light.body'
>
<Box as='h2' textStyle='h2'>
{sectionTitle}
</Heading>
</Box>
</Stack>
<Stack

View File

@ -1,4 +1,4 @@
import { Grid, GridItem, Heading, Link, Stack, Text } from '@chakra-ui/react';
import { Box, Grid, GridItem, Link, Stack, Text } from '@chakra-ui/react';
import { FC } from 'react';
import NextLink from 'next/link';
@ -8,18 +8,9 @@ export const QuickLinks: FC = () => {
return (
<Stack border='2px solid' borderColor='brand.light.primary'>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
<Heading
// TODO: move text style to theme
as='h2'
fontFamily='"JetBrains Mono", monospace'
fontWeight={400}
fontSize='1.5rem'
lineHeight='auto'
letterSpacing='4%'
color='brand.light.body'
>
<Box as='h2' textStyle='h2'>
Quick Links
</Heading>
</Box>
</Stack>
<Grid templateColumns='repeat(2, 1fr)' sx={{ mt: '0 !important' }}>

View File

@ -5,7 +5,6 @@ export const Button = {
px: '32px',
borderRadius: 0,
width: { base: '188px', md: 'auto' },
// TODO: move to theme colors
bg: 'brand.light.primary',
_hover: { bg: 'brand.light.secondary' },
_focus: {

View File

@ -18,8 +18,35 @@ const overrides = {
},
// TODO: fix textStyles
textStyles: {
h1: {},
h2: {},
h1: {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 700,
fontSize: '2.75rem',
lineHeight: '3.375rem',
letterSpacing: '5%',
color: 'brand.light.body'
},
h2: {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 400,
fontSize: '1.5rem',
lineHeight: 'auto',
letterSpacing: '4%',
color: 'brand.light.body'
},
'homepage-description': {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 700,
lineHeight: '21px',
letterSpacing: '0.05em',
textAlign: { base: 'center', md: 'left' }
},
'homepage-primary-label': {
fontFamily: '"JetBrains Mono", monospace',
color: 'yellow.50',
fontWeight: 700,
textTransform: 'uppercase'
},
'hero-text-small': {
fontSize: '13px',
fontFamily: '"Inter", sans-serif'