chore: add Link variants

src/components/UI/homepage/HomeSection.tsx

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

src/pages/index.tsx

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

src/theme/components/Link.ts

@@ -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'
+      }
     }
   }
 };