fix: add :hover color for hero buttons on dark mode

src/components/UI/downloads/DownloadsHero.tsx

@@ -80,12 +80,17 @@ export const DownloadsHero: FC<DownloadsHero> = ({
         <Grid templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} gap={4}>
           {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
             const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key];
+
             return (
               <NextLink key={key} href={buildURL} passHref>
-                <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16}>
+                <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16} data-group>
                   <HStack spacing={4}>
                     <Stack alignItems='center'>
-                      <Svg aria-label={ariaLabel} maxH='44px' />
+                      <Svg
+                        aria-label={ariaLabel}
+                        maxH='44px'
+                        _groupHover={{ color: 'yellow.50' }}
+                      />
                     </Stack>
                     <Box>
                       <Text textStyle='downloads-button-label'>For {name}</Text>

src/components/UI/homepage/HomeHero.tsx

@@ -37,7 +37,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}>
+            <Button variant='primary' as='a' mb={1} data-group>
               <Text textStyle='homepage-primary-label'>Download</Text>
             </Button>
           </NextLink>
@@ -49,7 +49,7 @@ export const HomeHero: FC = () => {
 
         <Flex direction='column' alignItems='center'>
           <NextLink href={DOCS_PAGE} passHref>
-            <Button variant='primary' as='a' mb={1}>
+            <Button variant='primary' as='a' mb={1} data-group>
               <Text textStyle='homepage-primary-label'>Documentation</Text>
             </Button>
           </NextLink>

src/theme/foundations/textStyles.ts

@@ -77,7 +77,8 @@ export const textStyles = {
     fontFamily: 'heading',
     color: 'bg',
     fontWeight: 700,
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    _groupHover: { color: 'yellow.50' }
   },
   'home-section-link-label': {
     fontFamily: 'heading',
@@ -124,13 +125,15 @@ export const textStyles = {
     fontFamily: 'heading',
     color: 'bg',
     fontSize: { base: 'md', lg: 'xl' },
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    _groupHover: { color: 'yellow.50' }
   },
   'downloads-button-sublabel': {
     fontFamily: 'heading',
     color: 'bg',
     fontSize: { base: 'xs', lg: 'sm' },
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    _groupHover: { color: 'yellow.50' }
   },
   'download-tab-label': {
     fontFamily: 'heading',
@@ -190,7 +193,7 @@ export const textStyles = {
     fontWeight: 400,
     fontSize: '13px',
     lineHeight: 5,
-    letterSpacing: '1%',
+    letterSpacing: '1%'
   },
   'note-text': {
     fontFamily: 'body',