chore: add Link variants

This commit is contained in:
Nicolás Quiroz 2022-10-08 08:18:56 -05:00
parent 80afacda50
commit d2c4ffa523
3 changed files with 19 additions and 50 deletions

@ -51,7 +51,7 @@ export const HomeSection: FC<Props> = ({
<Stack sx={{ mt: '0 !important' }}>
<NextLink href={buttonHref} passHref>
<Link variant='secondary' isExternal={buttonHref.startsWith('http')}>
<Link variant='button-link-secondary' isExternal={buttonHref.startsWith('http')}>
<Text textStyle='home-section-link-label'>{linkLabel}</Text>
</Link>
</NextLink>

@ -31,41 +31,11 @@ const HomePage: NextPage = ({}) => {
>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
Geth (go-ethereum) is a{' '}
<Link
href='https://go.dev/'
isExternal
textDecoration='underline'
color='brand.light.primary'
_hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
_focus={{
color: 'brand.light.primary',
boxShadow: '0 0 0 1px #11866f !important',
textDecoration: 'none'
}}
_pressed={{
color: 'brand.light.secondary',
textDecorationColor: 'brand.light.secondary'
}}
>
<Link href='https://go.dev/' isExternal variant='light'>
Go
</Link>{' '}
implementation of{' '}
<Link
href={ETHEREUM_ORG_URL}
isExternal
textDecoration='underline'
color='brand.light.primary'
_hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
_focus={{
color: 'brand.light.primary',
boxShadow: '0 0 0 1px #11866f !important',
textDecoration: 'none'
}}
_pressed={{
color: 'brand.light.secondary',
textDecorationColor: 'brand.light.secondary'
}}
>
<Link href={ETHEREUM_ORG_URL} isExternal variant='light'>
Ethereum
</Link>{' '}
- a gateway into the decentralized web.
@ -139,22 +109,7 @@ const HomePage: NextPage = ({}) => {
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{' '}
<Link
href={GETH_REPO_URL}
isExternal
textDecoration='underline'
color='brand.light.primary'
_hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
_focus={{
color: 'brand.light.primary',
boxShadow: '0 0 0 1px #11866f !important',
textDecoration: 'none'
}}
_pressed={{
color: 'brand.light.secondary',
textDecorationColor: 'brand.light.secondary'
}}
>
<Link href={GETH_REPO_URL} isExternal variant='light'>
Github repository
</Link>
, fix, commit and send a pull request for the maintainers to review and merge into the

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