Merge branch 'homepage-mobile' into downloads-mobile

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' },
@@ -27,6 +27,20 @@ export const Link = {
         color: 'brand.light.secondary',
         textDecorationColor: 'brand.light.secondary'
       }
+    },
+    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'
       }
+    },
   }
 };

src/theme/foundations/index.ts

@@ -1,3 +1,4 @@
 export * from './colors';
 export * from './shadows';
 export * from './sizes';
+export * from './textStyles';

src/theme/foundations/textStyles.ts

@@ -0,0 +1,73 @@
+export const textStyles = {
+  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'
+  },
+  'home-section-link-label': {
+    fontFamily: '"JetBrains Mono", monospace',
+    fontWeight: 700,
+    textTransform: 'uppercase',
+    textAlign: 'center',
+    p: 4
+  },
+  'quick-link-text': {
+    fontFamily: '"Inter", sans-serif',
+    lineHeight: '26px'
+  },
+  'quick-link-label': {
+    fontFamily: '"JetBrains Mono", monospace',
+    fontWeight: 700,
+    textTransform: 'uppercase',
+    textAlign: 'center',
+    color: 'brand.light.primary',
+    _groupHover: { color: 'yellow.50' },
+    _groupActive: { color: 'yellow.50' },
+    _groupFocus: { color: 'yellow.50' }
+  },
+  'hero-text-small': {
+    fontSize: '13px',
+    fontFamily: '"Inter", sans-serif'
+  },
+  'downloads-button-label': {
+    fontFamily:'"JetBrains Mono", monospace',
+    color:'yellow.50',
+    fontSize:'xs',
+    textTransform:'uppercase',
+  },
+  'download-tab-label': {
+    fontFamily: '"JetBrains Mono", monospace',
+    fontWeight: 700,
+    textTransform: 'uppercase',
+    textAlign: 'center',
+    fontSize: 'sm',
+  },
+  // TODO: refactor w/ semantic tokens for light/dark mode
+  'link-light': {},
+  // TODO: refactor w/ semantic tokens for light/dark mode
+  'text-light': {}
+};

src/theme/index.ts

@@ -1,6 +1,6 @@
 import { extendTheme } from '@chakra-ui/react';
 
-import { colors, shadows, sizes } from './foundations';
+import { colors, shadows, sizes, textStyles } from './foundations';
 import { Button, Link } from './components';
 
 const overrides = {
@@ -18,72 +18,7 @@ const overrides = {
       }
     })
   },
-  textStyles: {
-    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'
-    },
-    'quick-link-text': {
-      fontFamily: '"Inter", sans-serif',
-      lineHeight: '26px'
-    },
-    'quick-link-label': {
-      fontFamily: '"JetBrains Mono", monospace',
-      fontWeight: 700,
-      textTransform: 'uppercase',
-      textAlign: 'center',
-      color: 'brand.light.primary',
-      _groupHover: { color: 'yellow.50' },
-      _groupActive: { color: 'yellow.50' },
-      _groupFocus: { color: 'yellow.50' }
-    },
-    'hero-text-small': {
-      fontSize: '13px',
-      fontFamily: '"Inter", sans-serif'
-    },
-    'downloads-button-label': {
-      fontFamily:'"JetBrains Mono", monospace',
-      color:'yellow.50',
-      fontSize:'xs',
-      textTransform:'uppercase',
-    },
-    'download-tab-label': {
-      fontFamily: '"JetBrains Mono", monospace',
-      fontWeight: 700,
-      textTransform: 'uppercase',
-      textAlign: 'center',
-      fontSize: 'sm',
-    },
-    // TODO: refactor w/ semantic tokens for light/dark mode
-    'link-light': {},
-    // TODO: refactor w/ semantic tokens for light/dark mode
-    'text-light': {}
-  }
+  textStyles
 };
 
 export default extendTheme(overrides);