tornadocontrib/go-ethereum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor to use theme

Browse Source
This commit is contained in:
Corwin Smith 2022-10-08 09:53:09 -06:00
parent 09e1688ea9
commit 53420ede87
7 changed files with 103 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
src/components/UI/downloads/DownloadsHero.tsx
View File

@ -1,4 +1,4 @@
import { Box, Button, Heading, Image, Link, Stack, HStack, Text } from '@chakra-ui/react'; import { Box, Button, Image, Link, Stack, HStack, Text } from '@chakra-ui/react';
import { FC } from 'react'; import { FC } from 'react';
import NextLink from 'next/link'; import NextLink from 'next/link';
@ -28,17 +28,12 @@ export const DownloadsHero: FC<DownloadsHero> = ({
</Box> </Box>
<Box mb={4}> <Box mb={4}>
<Heading <Box
as='h1' // TODO: move text style to theme as='h1'
fontFamily='"JetBrains Mono", monospace' textStyle='h1'
fontWeight={700}
fontSize='2.75rem'
lineHeight='3.375rem'
letterSpacing='5%'
color='brand.light.body'
> >
Download go-ethereum Download go-ethereum
</Heading> </Box>
<Text <Text
// TODO: move text style to theme // TODO: move text style to theme
@ -49,26 +44,16 @@ export const DownloadsHero: FC<DownloadsHero> = ({
{currentBuildName} ({currentBuildVersion}) {currentBuildName} ({currentBuildVersion})
</Text> </Text>
<Text <Text mb={4}>
mb={4}
>
You can download the latest 64-bit stable release of Geth for our primary platforms below. Packages for all supported platforms, as well as develop builds, can be found further down the page. If you&apos;re looking to install Geth and/or associated tools via your favorite package manager, please check our installation guide. You can download the latest 64-bit stable release of Geth for our primary platforms below. Packages for all supported platforms, as well as develop builds, can be found further down the page. If you&apos;re looking to install Geth and/or associated tools via your favorite package manager, please check our installation guide.
</Text> </Text>
<NextLink href={linuxBuildURL} passHref> <NextLink href={linuxBuildURL} passHref>
<Button <Button
as='a' as='a'
p={8} variant='primary'
borderRadius={0}
width={{ base: '100%' }} width={{ base: '100%' }}
// TODO: move to theme colors p={8}
bg='brand.light.primary'
_hover={{ bg: 'brand.light.secondary' }}
_focus={{
bg: 'brand.light.primary',
boxShadow: 'inset 0 0 0 2px #06fece !important'
}}
_active={{ borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }}
mb={4} mb={4}
> >
<HStack spacing={4}> <HStack spacing={4}>
@ -76,22 +61,10 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<Image m={'auto'} src='/images/pages/linux-penguin.svg' alt='Gopher greeting' /> <Image m={'auto'} src='/images/pages/linux-penguin.svg' alt='Gopher greeting' />
</Box> </Box>
<Box> <Box>
<Text <Text textStyle='downloads-button-label'>
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontWeight={700}
textTransform='uppercase'
>
For linux For linux
</Text> </Text>
<Text <Text textStyle='downloads-button-label'>
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontSize='xs'
textTransform='uppercase'
>
geth {currentBuildName} geth {currentBuildName}
</Text> </Text>
</Box> </Box>
@ -102,17 +75,9 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<NextLink href={macOSBuildURL} passHref> <NextLink href={macOSBuildURL} passHref>
<Button <Button
as='a' as='a'
p={8} variant='primary'
borderRadius={0}
width={{ base: '100%' }} width={{ base: '100%' }}
// TODO: move to theme colors p={8}
bg='brand.light.primary'
_hover={{ bg: 'brand.light.secondary' }}
_focus={{
bg: 'brand.light.primary',
boxShadow: 'inset 0 0 0 2px #06fece !important'
}}
_active={{ borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }}
mb={4} mb={4}
> >
<HStack spacing={4}> <HStack spacing={4}>
@ -120,22 +85,10 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<Image m={'auto'} src='/images/pages/macos-logo.svg' alt='Gopher greeting' /> <Image m={'auto'} src='/images/pages/macos-logo.svg' alt='Gopher greeting' />
</Box> </Box>
<Box> <Box>
<Text <Text textStyle='downloads-button-label'>
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontWeight={700}
textTransform='uppercase'
>
For macos For macos
</Text> </Text>
<Text <Text textStyle='downloads-button-label'>
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontSize='xs'
textTransform='uppercase'
>
geth {currentBuildName} geth {currentBuildName}
</Text> </Text>
</Box> </Box>
@ -146,17 +99,9 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<NextLink href={windowsBuildURL} passHref> <NextLink href={windowsBuildURL} passHref>
<Button <Button
as='a' as='a'
p={8} variant='primary'
borderRadius={0}
width={{ base: '100%' }} width={{ base: '100%' }}
// TODO: move to theme colors p={8}
bg='brand.light.primary'
_hover={{ bg: 'brand.light.secondary' }}
_focus={{
bg: 'brand.light.primary',
boxShadow: 'inset 0 0 0 2px #06fece !important'
}}
_active={{ borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }}
mb={4} mb={4}
> >
<HStack spacing={4}> <HStack spacing={4}>
@ -164,22 +109,10 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<Image m={'auto'} src='/images/pages/windows-logo.svg' alt='Gopher greeting' /> <Image m={'auto'} src='/images/pages/windows-logo.svg' alt='Gopher greeting' />
</Box> </Box>
<Box> <Box>
<Text <Text textStyle='downloads-button-label'>
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontWeight={700}
textTransform='uppercase'
>
For windows For windows
</Text> </Text>
<Text <Text textStyle='downloads-button-label'>
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontSize='xs'
textTransform='uppercase'
>
geth {currentBuildName} geth {currentBuildName}
</Text> </Text>
</Box> </Box>
@ -190,17 +123,9 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<NextLink href={sourceCodeURL} passHref> <NextLink href={sourceCodeURL} passHref>
<Button <Button
as='a' as='a'
p={8} variant='primary'
borderRadius={0}
width={{ base: '100%' }} width={{ base: '100%' }}
// TODO: move to theme colors p={8}
bg='brand.light.primary'
_hover={{ bg: 'brand.light.secondary' }}
_focus={{
bg: 'brand.light.primary',
boxShadow: 'inset 0 0 0 2px #06fece !important'
}}
_active={{ borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }}
mb={4} mb={4}
> >
<HStack spacing={4}> <HStack spacing={4}>
@ -208,22 +133,10 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<Image m={'auto'} src='/images/pages/source-branch.svg' alt='Gopher greeting' /> <Image m={'auto'} src='/images/pages/source-branch.svg' alt='Gopher greeting' />
</Box> </Box>
<Box> <Box>
<Text <Text textStyle='downloads-button-label'>
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontWeight={700}
textTransform='uppercase'
>
Sources Sources
</Text> </Text>
<Text <Text textStyle='downloads-button-label'>
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontSize='xs'
textTransform='uppercase'
>
geth {currentBuildName} geth {currentBuildName}
</Text> </Text>
</Box> </Box>
@ -235,14 +148,14 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<Link <Link
href={releaseNotesURL} href={releaseNotesURL}
isExternal isExternal
color='#11866f' color='brand.light.primary'
_hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }} _hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
_focus={{ _focus={{
color: '#11866f', color: 'brand.light.primary',
boxShadow: '0 0 0 1px #11866f !important', boxShadow: 'linkBoxShadow',
textDecoration: 'none' textDecoration: 'none'
}} }}
_pressed={{ color: '#25453f', textDecorationColor: '#25453f' }} _pressed={{ color: 'brand.light.secondary', textDecorationColor: 'brand.light.secondary' }}
> >
Release notes for {currentBuildName} {currentBuildVersion} Release notes for {currentBuildName} {currentBuildVersion}
</Link> </Link>

25
src/components/UI/downloads/DownloadsSection.tsx
View File

@ -1,4 +1,4 @@
import { Heading, Image, Stack } from '@chakra-ui/react'; import { Box, Image, Stack } from '@chakra-ui/react';
import { FC } from 'react'; import { FC } from 'react';
interface Props { interface Props {
@ -15,28 +15,23 @@ export const DownloadsSection: FC<Props> = ({
sectionTitle, sectionTitle,
}) => { }) => {
return ( return (
<Stack border='2px solid #11866F'> <Stack border='2px solid' borderColor='brand.light.primary'>
{!!imgSrc && ( {!!imgSrc && (
<Stack alignItems='center' p={4} borderBottom='2px solid #11866f'> <Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
{/* TODO: use NextImage */} {/* TODO: use NextImage */}
<Image src={imgSrc} alt={imgAltText} /> <Image src={imgSrc} alt={imgAltText} />
</Stack> </Stack>
)} )}
<Stack p={4} borderBottom='2px solid #11866f' sx={{ mt: '0 !important' }}> <Stack
<Heading p={4}
// TODO: move text style to theme borderBottom='2px solid'
as='h2' borderColor='brand.light.primary'
fontFamily='"JetBrains Mono", monospace' sx={{ mt: '0 !important' }}
fontWeight={400}
fontSize='1.5rem'
lineHeight='auto'
letterSpacing='4%'
// TODO: move to theme colors
color='#1d242c'
> >
<Box as='h2' textStyle='h2'>
{sectionTitle} {sectionTitle}
</Heading> </Box>
</Stack> </Stack>
<Stack spacing={4}> <Stack spacing={4}>

88
src/components/UI/downloads/DownloadsTable.tsx
View File

@ -22,27 +22,21 @@ export const DownloadsTable: FC<Props> = ({
<Stack sx={{ mt: '0 !important' }} borderBottom='2px solid #11866f'> <Stack sx={{ mt: '0 !important' }} borderBottom='2px solid #11866f'>
<Tabs variant='unstyled'> <Tabs variant='unstyled'>
<TabList <TabList
color='#11866f' color='brand.light.primary'
bg='#d7f5ef' bg='green.50'
borderBottom='2px solid #11866f'
> >
<Tab <Tab
w={'20%'} w={'20%'}
p={4} p={4}
_selected={{ _selected={{
bg: '#11866f', bg: 'brand.light.primary',
color: '#f0f2e2', color: 'yellow.50',
}} }}
borderRight='2px solid #11866f' borderRight='2px solid'
> borderBottom='2px solid'
<Text borderColor='brand.light.primary'
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
fontWeight={700}
textTransform='uppercase'
textAlign='center'
fontSize='sm'
> >
<Text textStyle='download-tab-label'>
LINUX LINUX
</Text> </Text>
</Tab> </Tab>
@ -50,19 +44,14 @@ export const DownloadsTable: FC<Props> = ({
w={'20%'} w={'20%'}
p={4} p={4}
_selected={{ _selected={{
bg: '#11866f', bg: 'brand.light.primary',
color: '#f0f2e2', color: 'yellow.50',
}} }}
borderRight='2px solid #11866f' borderRight='2px solid'
> borderBottom='2px solid'
<Text borderColor='brand.light.primary'
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
fontWeight={700}
textTransform='uppercase'
textAlign='center'
fontSize='sm'
> >
<Text textStyle='download-tab-label'>
MACOS MACOS
</Text> </Text>
</Tab> </Tab>
@ -70,19 +59,14 @@ export const DownloadsTable: FC<Props> = ({
w={'20%'} w={'20%'}
p={4} p={4}
_selected={{ _selected={{
bg: '#11866f', bg: 'brand.light.primary',
color: '#f0f2e2', color: 'yellow.50',
}} }}
borderRight='2px solid #11866f' borderRight='2px solid'
> borderBottom='2px solid'
<Text borderColor='brand.light.primary'
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
fontWeight={700}
textTransform='uppercase'
textAlign='center'
fontSize='sm'
> >
<Text textStyle='download-tab-label'>
WINDOWS WINDOWS
</Text> </Text>
</Tab> </Tab>
@ -90,19 +74,14 @@ export const DownloadsTable: FC<Props> = ({
w={'20%'} w={'20%'}
p={4} p={4}
_selected={{ _selected={{
bg: '#11866f', bg: 'brand.light.primary',
color: '#f0f2e2', color: 'yellow.50',
}} }}
borderRight='2px solid #11866f' borderRight='2px solid'
> borderBottom='2px solid'
<Text borderColor='brand.light.primary'
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
fontWeight={700}
textTransform='uppercase'
textAlign='center'
fontSize='sm'
> >
<Text textStyle='download-tab-label'>
IOS IOS
</Text> </Text>
</Tab> </Tab>
@ -110,18 +89,13 @@ export const DownloadsTable: FC<Props> = ({
w={'20%'} w={'20%'}
p={4} p={4}
_selected={{ _selected={{
bg: '#11866f', bg: 'brand.light.primary',
color: '#f0f2e2', color: 'yellow.50',
}} }}
borderBottom='2px solid'
borderColor='brand.light.primary'
> >
<Text <Text textStyle='download-tab-label'>
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
fontWeight={700}
textTransform='uppercase'
textAlign='center'
fontSize='sm'
>
ANDROID ANDROID
</Text> </Text>
</Tab> </Tab>

54
src/pages/downloads.tsx
View File

@ -47,29 +47,29 @@ const DownloadsPage: NextPage = ({}) => {
sectionTitle='Specific Versions' sectionTitle='Specific Versions'
> >
<Stack p={4}> <Stack p={4}>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'> <Text textStyle='quick-link-text'>
If you&apos;re looking for a specific release, operating system or architecture, below you will find: If you&apos;re looking for a specific release, operating system or architecture, below you will find:
</Text> </Text>
<UnorderedList px={4}> <UnorderedList px={4}>
<ListItem> <ListItem>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'> <Text textStyle='quick-link-text'>
All stable and develop builds of Geth and tools All stable and develop builds of Geth and tools
</Text> </Text>
</ListItem> </ListItem>
<ListItem> <ListItem>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'> <Text textStyle='quick-link-text'>
Archives for non-primary processor architectures Archives for non-primary processor architectures
</Text> </Text>
</ListItem> </ListItem>
<ListItem> <ListItem>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'> <Text textStyle='quick-link-text'>
Android library archives and iOS XCode frameworks Android library archives and iOS XCode frameworks
</Text> </Text>
</ListItem> </ListItem>
</UnorderedList> </UnorderedList>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'> <Text textStyle='quick-link-text'>
Please select your desired platform from the lists below and download your bundle of choice. Please be aware that the MD5 checksums are provided by our binary hosting platform (Azure Blobstore) to help check for download errors. For security guarantees please verify any downloads via the attached PGP signature files (see{' '} Please select your desired platform from the lists below and download your bundle of choice. Please be aware that the MD5 checksums are provided by our binary hosting platform (Azure Blobstore) to help check for download errors. For security guarantees please verify any downloads via the attached PGP signature files (see{' '}
<Link <Link
href={''} href={''}
@ -92,7 +92,7 @@ const DownloadsPage: NextPage = ({}) => {
<DownloadsSection sectionTitle='Stable releases'> <DownloadsSection sectionTitle='Stable releases'>
<Stack p={4} borderBottom='2px solid #11866f'> <Stack p={4} borderBottom='2px solid #11866f'>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'> <Text textStyle='quick-link-text'>
These are the current and previous stable releases of go-ethereum, updated automatically when a new version is tagged in our{' '} These are the current and previous stable releases of go-ethereum, updated automatically when a new version is tagged in our{' '}
<Link <Link
href={GETH_REPO_URL} href={GETH_REPO_URL}
@ -115,19 +115,7 @@ const DownloadsPage: NextPage = ({}) => {
<DownloadsTable data={testDownloadData}/> <DownloadsTable data={testDownloadData}/>
<Stack sx={{ mt: '0 !important' }}> <Stack sx={{ mt: '0 !important' }}>
<Button <Link as='button' variant='secondary'>
color='#11866f'
bg='#d7f5ef'
_hover={{ textDecoration: 'none', bg: '#11866f', color: '#f0f2e2' }}
_focus={{
textDecoration: 'none',
bg: '#11866f',
color: '#f0f2e2',
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
}}
_active={{ textDecoration: 'none', bg: '#25453f', color: '#f0f2e2' }}
h={'100%'}
>
<Text <Text
fontFamily='"JetBrains Mono", monospace' fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors // TODO: move to theme colors
@ -138,13 +126,13 @@ const DownloadsPage: NextPage = ({}) => {
> >
SHOW OLDER RELEASES SHOW OLDER RELEASES
</Text> </Text>
</Button> </Link>
</Stack> </Stack>
</DownloadsSection> </DownloadsSection>
<DownloadsSection sectionTitle='Develop builds'> <DownloadsSection sectionTitle='Develop builds'>
<Stack p={4} borderBottom='2px solid #11866f'> <Stack p={4} borderBottom='2px solid #11866f'>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'> <Text textStyle='quick-link-text'>
These are the develop snapshots of go-ethereum, updated automatically when a new commit is pushed into our{' '} These are the develop snapshots of go-ethereum, updated automatically when a new commit is pushed into our{' '}
<Link <Link
href={GETH_REPO_URL} href={GETH_REPO_URL}
@ -167,19 +155,7 @@ const DownloadsPage: NextPage = ({}) => {
<DownloadsTable data={testDownloadData} /> <DownloadsTable data={testDownloadData} />
<Stack sx={{ mt: '0 !important' }}> <Stack sx={{ mt: '0 !important' }}>
<Button <Link as='button' variant='secondary'>
color='#11866f'
bg='#d7f5ef'
_hover={{ textDecoration: 'none', bg: '#11866f', color: '#f0f2e2' }}
_focus={{
textDecoration: 'none',
bg: '#11866f',
color: '#f0f2e2',
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
}}
_active={{ textDecoration: 'none', bg: '#25453f', color: '#f0f2e2' }}
h={'100%'}
>
<Text <Text
fontFamily='"JetBrains Mono", monospace' fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors // TODO: move to theme colors
@ -190,13 +166,13 @@ const DownloadsPage: NextPage = ({}) => {
> >
SHOW OLDER RELEASES SHOW OLDER RELEASES
</Text> </Text>
</Button> </Link>
</Stack> </Stack>
</DownloadsSection> </DownloadsSection>
<DownloadsSection sectionTitle='OpenPGP Signatures'> <DownloadsSection sectionTitle='OpenPGP Signatures'>
<Stack p={4} borderBottom='2px solid #11866f'> <Stack p={4} borderBottom='2px solid #11866f'>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'> <Text textStyle='quick-link-text'>
All the binaries available from this page are signed via our build server PGP keys: All the binaries available from this page are signed via our build server PGP keys:
</Text> </Text>
</Stack> </Stack>
@ -215,7 +191,7 @@ const DownloadsPage: NextPage = ({}) => {
<DownloadsSection sectionTitle='Importing keys and verifying builds'> <DownloadsSection sectionTitle='Importing keys and verifying builds'>
<Stack p={4} borderBottom='2px solid #11866f'> <Stack p={4} borderBottom='2px solid #11866f'>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'> <Text textStyle='quick-link-text'>
You can import the build server public keys by grabbing the individual keys directly from the keyserver network: You can import the build server public keys by grabbing the individual keys directly from the keyserver network:
</Text> </Text>
@ -226,7 +202,7 @@ const DownloadsPage: NextPage = ({}) => {
</Stack> </Stack>
<Stack p={4} borderBottom='2px solid #11866f'> <Stack p={4} borderBottom='2px solid #11866f'>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'> <Text textStyle='quick-link-text'>
Similarly you can import all the developer public keys by grabbing them directly from the keyserver network: Similarly you can import all the developer public keys by grabbing them directly from the keyserver network:
</Text> </Text>
@ -237,7 +213,7 @@ const DownloadsPage: NextPage = ({}) => {
</Stack> </Stack>
<Stack p={4}> <Stack p={4}>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'> <Text textStyle='quick-link-text'>
From the download listings above you should see a link both to the downloadable archives as well as detached signature files. To verify the authenticity of any downloaded data, grab both files and then run: From the download listings above you should see a link both to the downloadable archives as well as detached signature files. To verify the authenticity of any downloaded data, grab both files and then run:
</Text> </Text>

1
src/theme/foundations/index.ts
View File

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

3
src/theme/foundations/shadows.ts Normal file
View File

@ -0,0 +1,3 @@
export const shadows = {
linkBoxShadow: '0 0 0 1px #11866f !important'
}

16
src/theme/index.ts
View File

@ -1,6 +1,6 @@
import { extendTheme } from '@chakra-ui/react'; import { extendTheme } from '@chakra-ui/react';
import { colors, sizes } from './foundations'; import { colors, shadows, sizes } from './foundations';
import { Button, Link } from './components'; import { Button, Link } from './components';
const overrides = { const overrides = {
@ -9,6 +9,7 @@ const overrides = {
Button, Button,
Link Link
}, },
shadows,
sizes, sizes,
styles: { styles: {
global: () => ({ global: () => ({
@ -65,6 +66,19 @@ const overrides = {
fontSize: '13px', fontSize: '13px',
fontFamily: '"Inter", sans-serif' 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 // TODO: refactor w/ semantic tokens for light/dark mode
'link-light': {}, 'link-light': {},
// TODO: refactor w/ semantic tokens for light/dark mode // TODO: refactor w/ semantic tokens for light/dark mode