interesting
/
go-ethereum
mirror of https://github.com/ethereum/go-ethereum.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor colors to use semantic tokens

This commit is contained in:
Paul Wackerow 2022-11-15 18:00:31 -08:00
parent d43682359f
commit c71e2e2e23
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
18 changed files with 139 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/MDXComponents.tsx
View File

@ -43,8 +43,7 @@ const MDXComponents = {
<NextLink href={href} passHref>
<Link
isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')}
// TODO: move color to theme
color='#18bc9c'
color='primary'
>
{children}
</Link>
@ -97,7 +96,7 @@ const MDXComponents = {
// as={'span'}
// padding='0.125em 0.25em'
// color='red.300'
// background='#1c1e2d'
// background='code-bg-contrast'
// borderRadius='0.25em'
// fontFamily='code'
// fontSize='sm'

8
src/components/UI/DataTable.tsx
View File

@ -12,11 +12,11 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
// Note: This wont work on firefox, we are ok with this.
css={{
'&::-webkit-scrollbar': {
borderTop: '2px solid #11866f',
borderTop: '2px solid var(--chakra-colors-primary)',
height: 18
},
'&::-webkit-scrollbar-thumb': {
background: '#11866f'
background: 'var(--chakra-colors-primary)'
}
}}
pt={4}
@ -32,7 +32,7 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
fontFamily='"JetBrains Mono", monospace'
fontWeight={700}
fontSize='md'
color='#868b87'
color='#868b87' //? Use theme color? Or add to theme?
>
{columnHeader}
</Text>
@ -48,7 +48,7 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
key={idx}
// TODO: Get new background color from nuno for hover
transition={'all 0.5s'}
_hover={{ background: 'green.50', transition: 'all 0.5s' }}
_hover={{ background: 'button-bg', transition: 'all 0.5s' }}
>
{columnHeaders.map((columnHeader, idx) => {
// TODO: Make the font size smaller (refer to design system)

32
src/components/UI/Header.tsx
View File

@ -10,14 +10,15 @@ export const Header: FC = () => {
<Flex
mb={4}
border='2px solid'
borderColor='brand.light.primary'
borderColor='primary'
justifyContent='space-between'
>
<Stack
p={4}
justifyContent='center'
alignItems='flex-start'
borderRight={{ base: 'none', sm: '2px solid #11866f'}}
borderRight='2px'
borderColor='primary'
flexGrow={2}
>
<NextLink href={'/'} passHref>
@ -34,14 +35,14 @@ export const Header: FC = () => {
<Stack
p={4}
justifyContent='center'
borderRight='2px solid'
borderColor='brand.light.primary'
borderRight='2px'
borderColor='primary'
display={{ base: 'none', md: 'block' }}
color='brand.light.primary'
color='primary'
_hover={{
textDecoration: 'none',
bg: 'brand.light.primary',
color: 'yellow.50 !important'
bg: 'primary',
color: 'bg !important'
}}
>
<NextLink href={DOWNLOADS_PAGE} passHref>
@ -57,13 +58,14 @@ export const Header: FC = () => {
<Stack
p={4}
justifyContent='center'
borderRight={{ base: 'none', md: '2px solid #11866f' }}
borderRight='2px'
borderColor='primary'
display={{ base: 'none', md: 'block' }}
color='brand.light.primary'
color='primary'
_hover={{
textDecoration: 'none',
bg: 'brand.light.primary',
color: 'yellow.50 !important'
bg: 'primary',
color: 'bg !important'
}}
>
<NextLink href={DOCS_PAGE} passHref>
@ -79,14 +81,15 @@ export const Header: FC = () => {
<Stack
p={4}
display={{ base: 'none', md: 'block' }}
borderRight={{ base: 'none', md: '2px solid #11866f' }}
borderRight='2px'
borderColor='primary'
>
<InputGroup>
<Input
variant='unstyled'
placeholder='search'
size='md'
_placeholder={{ color: 'brand.light.primary', fontStyle: 'italic' }}
_placeholder={{ color: 'primary', fontStyle: 'italic' }}
/>
<Stack pl={4} justifyContent='center' alignItems='center'>
@ -98,7 +101,8 @@ export const Header: FC = () => {
{/* DARK MODE SWITCH */}
<Box
p={4}
borderRight={{ base: '2px solid #11866f', md: 'none' }}
borderRight={{ base: '2px', md: 'none' }}
borderColor='primary'
>
<MoonIcon color="primary" />
</Box>

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

@ -29,7 +29,7 @@ export const DownloadsHero: FC<DownloadsHero> = ({
DOWNLOAD_HEADER_BUTTONS.sourceCode.buildURL = sourceCodeURL;
return (
<Stack border='3px solid' borderColor='brand.light.primary' py={4} px={4}>
<Stack border='3px solid' borderColor='primary' py={4} px={4}>
<Stack alignItems='center'>
<Image src='/images/pages/gopher-downloads-front-light.svg' alt='Gopher plugged in' />
</Stack>

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

@ -11,9 +11,9 @@ interface Props {
export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sectionTitle, id }) => {
return (
<Stack border='2px solid' borderColor='brand.light.primary' id={id}>
<Stack border='2px solid' borderColor='primary' id={id}>
{!!imgSrc && (
<Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
<Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='primary'>
{/* TODO: use NextImage */}
<Image src={imgSrc} alt={imgAltText} />
</Stack>
@ -22,7 +22,7 @@ export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sect
<Stack
p={4}
borderBottom='2px solid'
borderColor='brand.light.primary'
borderColor='primary'
sx={{ mt: '0 !important' }}
>
<Box as='h2' textStyle='h2'>

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

@ -11,9 +11,9 @@ interface Props {
export const DownloadsTable: FC<Props> = ({ data }) => {
return (
<Stack sx={{ mt: '0 !important' }} borderBottom='2px solid' borderColor='brand.light.primary'>
<Stack sx={{ mt: '0 !important' }} borderBottom='2px solid' borderColor='primary'>
<Tabs variant='unstyled'>
<TabList color='brand.light.primary' bg='green.50'>
<TabList color='primary' bg='button-bg'>
{DOWNLOAD_TABS.map((tab, idx) => {
return (
<Tab
@ -21,12 +21,12 @@ export const DownloadsTable: FC<Props> = ({ data }) => {
w={'20%'}
p={4}
_selected={{
bg: 'brand.light.primary',
color: 'yellow.50'
bg: 'primary',
color: 'bg'
}}
borderBottom='2px solid'
borderRight={idx === DOWNLOAD_TABS.length - 1 ? 'none' : '2px solid'}
borderColor='brand.light.primary'
borderColor='primary'
>
<Text textStyle='download-tab-label'>{tab}</Text>
</Tab>

2
src/components/UI/homepage/Gopher.tsx
View File

@ -8,7 +8,7 @@ export const Gopher: FC = () => {
alignItems='center'
p={4}
border='2px solid'
borderColor='brand.light.primary'
borderColor='primary'
h='100%'
>
<Image src='/images/pages/gopher-home-side-mobile.svg' alt='Gopher greeting' />

2
src/components/UI/homepage/HomeHero.tsx
View File

@ -8,7 +8,7 @@ export const HomeHero: FC = () => {
return (
<Stack
border='2px solid'
borderColor='brand.light.primary'
borderColor='primary'
px={4}
py={{ base: 8, md: 24, lg: 48 }}
flexGrow={1}

8
src/components/UI/homepage/HomeSection.tsx
View File

@ -20,9 +20,9 @@ export const HomeSection: FC<Props> = ({
children
}) => {
return (
<Stack border='2px solid' borderColor='brand.light.primary' h='100%'>
<Stack border='2px solid' borderColor='primary' h='100%'>
{!!imgSrc && (
<Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
<Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='primary'>
{/* TODO: use NextImage */}
<Image src={imgSrc} alt={imgAltText} />
</Stack>
@ -31,7 +31,7 @@ export const HomeSection: FC<Props> = ({
<Stack
p={4}
borderBottom='2px solid'
borderColor='brand.light.primary'
borderColor='primary'
sx={{ mt: '0 !important' }}
>
<Box as='h2' textStyle='h2'>
@ -43,7 +43,7 @@ export const HomeSection: FC<Props> = ({
p={4}
spacing={4}
borderBottom='2px solid'
borderColor='brand.light.primary'
borderColor='primary'
sx={{ mt: '0 !important' }}
h='100%'
>

54
src/components/UI/homepage/QuickLinks.tsx
View File

@ -6,8 +6,8 @@ import { CONTRIBUTING_PAGE, DOCS_PAGE, FAQ_PAGE } from '../../../constants';
export const QuickLinks: FC = () => {
return (
<Stack border='2px solid' borderColor='brand.light.primary'>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
<Stack border='2px solid' borderColor='primary'>
<Stack p={4} borderBottom='2px solid' borderColor='primary'>
<Box as='h2' textStyle='h2'>
Quick Links
</Box>
@ -21,7 +21,7 @@ export const QuickLinks: FC = () => {
<GridItem
borderRight='2px solid'
borderBottom='2px solid'
borderColor='brand.light.primary'
borderColor='primary'
>
<Stack p={4} h='100%'>
<Text textStyle='quick-link-text' mb={-1}>
@ -31,23 +31,23 @@ export const QuickLinks: FC = () => {
<Text textStyle='quick-link-text'>We can help.</Text>
</Stack>
</GridItem>
<GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
<GridItem borderBottom='2px solid' borderColor='primary'>
<NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
<Link _hover={{ textDecoration: 'none' }}>
<Stack
data-group
bg='green.50'
_hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
bg='button-bg'
_hover={{ textDecoration: 'none', bg: 'primary', color: 'bg' }}
_focus={{
textDecoration: 'none',
bg: 'brand.light.primary',
color: 'yellow.50',
bg: 'primary',
color: 'bg',
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
}}
_active={{
textDecoration: 'none',
bg: 'brand.light.secondary',
color: 'yellow.50'
bg: 'secondary',
color: 'bg'
}}
justifyContent='center'
h='100%'
@ -63,7 +63,7 @@ export const QuickLinks: FC = () => {
<GridItem
borderRight='2px solid'
borderBottom='2px solid'
borderColor='brand.light.primary'
borderColor='primary'
>
<Stack p={4} h='100%'>
<Text textStyle='quick-link-text' mb={-1}>
@ -73,23 +73,23 @@ export const QuickLinks: FC = () => {
<Text textStyle='quick-link-text'>Check the FAQ section in the documentation.</Text>
</Stack>
</GridItem>
<GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
<GridItem borderBottom='2px solid' borderColor='primary'>
<NextLink href={FAQ_PAGE} passHref>
<Link _hover={{ textDecoration: 'none' }}>
<Stack
data-group
bg='green.50'
_hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
bg='button-bg'
_hover={{ textDecoration: 'none', bg: 'primary', color: 'bg' }}
_focus={{
textDecoration: 'none',
bg: 'brand.light.primary',
color: 'yellow.50',
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
bg: 'primary',
color: 'bg',
boxShadow: 'inset 0 0 0 3px var(--chakra-colors-bg) !important'
}}
_active={{
textDecoration: 'none',
bg: 'brand.light.secondary',
color: 'yellow.50'
bg: 'secondary',
color: 'bg'
}}
justifyContent='center'
h='100%'
@ -102,7 +102,7 @@ export const QuickLinks: FC = () => {
</GridItem>
{/* how to contribute */}
<GridItem borderRight='2px solid' borderColor='brand.light.primary'>
<GridItem borderRight='2px solid' borderColor='primary'>
<Stack p={4} h='100%'>
<Text textStyle='quick-link-text' mb={-1}>
Want to know how to contribute?
@ -116,18 +116,18 @@ export const QuickLinks: FC = () => {
<Link _hover={{ textDecoration: 'none' }}>
<Stack
data-group
bg='green.50'
_hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
bg='button-bg'
_hover={{ textDecoration: 'none', bg: 'primary', color: 'bg' }}
_focus={{
textDecoration: 'none',
bg: 'brand.light.primary',
color: 'yellow.50',
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
bg: 'primary',
color: 'bg',
boxShadow: 'inset 0 0 0 3px var(--chakra-colors-bg) !important'
}}
_active={{
textDecoration: 'none',
bg: 'brand.light.secondary',
color: 'yellow.50'
bg: 'secondary',
color: 'bg'
}}
justifyContent='center'
h='100%'

23
src/components/UI/homepage/WhatIsEthereum.tsx
View File

@ -10,19 +10,21 @@ interface Props {
export const WhatIsEthereum: FC<Props> = ({ children }) => {
return (
<Stack border='2px solid' borderColor='brand.light.primary'>
<Stack border='2px' borderColor='primary'>
<Grid
templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
borderBottom={{ base: 'none', md: '2px solid #11866f' }}
borderBottom='2px'
borderColor='primary'
>
<GridItem
borderRight={{ base: 'none', md: '2px solid #11866f' }}
order={{ base: 2, md: 1 }}
borderRight={{ base: 'none', md: '2px' }}
borderColor='primary !important'
>
<Stack
p={4}
borderBottom='2px solid'
borderColor='brand.light.primary'
borderBottom='2px'
borderColor='primary'
sx={{ mt: '0 !important' }}
>
<Box as='h2' textStyle='h2'>
@ -30,12 +32,7 @@ export const WhatIsEthereum: FC<Props> = ({ children }) => {
</Box>
</Stack>
<Stack
p={4}
borderBottom={{ base: '2px solid', md: 'none' }}
borderColor='brand.light.primary'
sx={{ mt: '0 !important' }}
>
<Stack p={4} sx={{ mt: '0 !important' }}>
{children}
</Stack>
</GridItem>
@ -45,8 +42,8 @@ export const WhatIsEthereum: FC<Props> = ({ children }) => {
justifyContent='center'
alignItems='center'
p={4}
borderBottom={{ base: '2px solid', md: 'none' }}
borderColor='brand.light.primary'
borderBottom={{ base: '2px', md: 'none' }}
borderColor='primary'
h='100%'
>
{/* TODO: use NextImage */}

18
src/components/UI/homepage/WhyRunANode.tsx
View File

@ -10,16 +10,17 @@ interface Props {
export const WhyRunANode: FC<Props> = ({ children }) => {
return (
<Stack border='2px solid' borderColor='brand.light.primary'>
<Stack border='2px solid' borderColor='primary'>
<Grid
templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
borderBottom={{ base: 'none', md: '2px solid #11866f' }}
borderBottom={{ base: 'none', md: '2px' }}
borderColor='primary !important'
>
<GridItem order={{ base: 1, md: 2 }}>
<Stack
p={4}
borderBottom='2px solid'
borderColor='brand.light.primary'
borderBottom='2px'
borderColor='primary'
sx={{ mt: '0 !important' }}
>
<Box as='h2' textStyle='h2'>
@ -29,8 +30,8 @@ export const WhyRunANode: FC<Props> = ({ children }) => {
<Stack
p={4}
borderBottom={{ base: '2px solid', md: 'none' }}
borderColor='brand.light.primary'
borderBottom={{ base: '2px', md: 'none' }}
borderColor='primary'
sx={{ mt: '0 !important' }}
>
{children}
@ -42,8 +43,9 @@ export const WhyRunANode: FC<Props> = ({ children }) => {
justifyContent='center'
alignItems='center'
p={4}
borderBottom={{ base: '2px solid #11866f', md: 'none' }}
borderRight={{ base: 'none', md: '2px solid #11866f' }}
borderBottom={{ base: '2px', md: 'none' }}
borderRight={{ base: 'none', md: '2px' }}
borderColor='primary !important'
h='100%'
>
{/* TODO: use NextImage */}

32
src/components/layouts/Footer.tsx
View File

@ -26,7 +26,7 @@ export const Footer: FC = () => {
direction={{ base: 'column', md: 'row'}}
justifyContent={{md: 'space-between'}}
border='2px solid'
borderColor='brand.light.primary'
borderColor='primary'
>
<Flex
sx={{ mt: '-2px !important' }}
@ -34,19 +34,19 @@ export const Footer: FC = () => {
base: '2px solid',
md: 'none'
}}
borderColor='brand.light.primary'
borderColor='primary'
>
<Stack
flex={1}
color='brand.light.primary'
color='primary'
_hover={{
textDecoration: 'none',
bg: 'brand.light.primary',
color: 'yellow.50 !important'
bg: 'primary',
color: 'bg !important'
}}
justifyContent='center'
borderRight='2px solid'
borderColor='brand.light.primary'
borderColor='primary'
>
<NextLink href={DOWNLOADS_PAGE} passHref>
<Link _hover={{ textDecoration: 'none' }}>
@ -57,17 +57,17 @@ export const Footer: FC = () => {
<Stack
flex={1}
color='brand.light.primary'
color='primary'
_hover={{
textDecoration: 'none',
bg: 'brand.light.primary',
color: 'yellow.50 !important'
bg: 'primary',
color: 'bg !important'
}}
borderRight={{
base: 'none',
md: '2px solid'
}}
borderColor='brand.light.primary'
borderColor='primary'
justifyContent='center'
>
<NextLink href={DOCS_PAGE} passHref>
@ -87,9 +87,9 @@ export const Footer: FC = () => {
md: '2px solid',
lg: 'none'
}}
borderColor='brand.light.primary !important'
borderColor='primary !important'
_hover={{
bg: 'brand.light.primary',
bg: 'primary',
}}
alignItems='center'
p={4}
@ -110,12 +110,12 @@ export const Footer: FC = () => {
data-group
flex={1}
_hover={{
bg: 'brand.light.primary',
bg: 'primary',
}}
alignItems='center'
borderWidth='2px'
borderStyle='none solid'
borderColor='brand.light.primary'
borderColor='primary'
p={4}
>
<NextLink href={GETH_DISCORD_URL} passHref>
@ -134,7 +134,7 @@ export const Footer: FC = () => {
data-group
flex={1}
_hover={{
bg: 'brand.light.primary',
bg: 'primary',
}}
alignItems='center'
p={4}
@ -162,7 +162,7 @@ export const Footer: FC = () => {
base: 'none solid solid solid',
lg: 'solid solid solid none'
}}
borderColor='brand.light.primary'
borderColor='primary'
flex={1}
>
<Text textStyle='footer-text'>{`© 2013–${new Date().getFullYear()}. The go-ethereum Authors.`}</Text>

12
src/pages/downloads.tsx
View File

@ -95,7 +95,7 @@ const DownloadsPage: NextPage = () => {
</DownloadsSection>
<DownloadsSection sectionTitle='Stable releases' id='stablereleases'>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
<Stack p={4} borderBottom='2px solid' borderColor='primary'>
<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{' '}
@ -124,7 +124,7 @@ const DownloadsPage: NextPage = () => {
</DownloadsSection>
<DownloadsSection sectionTitle='Develop builds' id='developbuilds'>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
<Stack p={4} borderBottom='2px solid' borderColor='primary'>
<Text textStyle='quick-link-text'>
These are the develop snapshots of go-ethereum, updated automatically when a new
commit is pushed into our{' '}
@ -153,14 +153,14 @@ const DownloadsPage: NextPage = () => {
</DownloadsSection>
<DownloadsSection sectionTitle='OpenPGP Signatures' id='pgpsignatures'>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
<Stack p={4} borderBottom='2px solid' borderColor='primary'>
<Text textStyle='quick-link-text'>
All the binaries available from this page are signed via our build server PGP keys:
</Text>
</Stack>
{/* TODO: swap for real data */}
<Stack borderBottom='2px solid' borderColor='brand.light.primary'>
<Stack borderBottom='2px solid' borderColor='primary'>
<DataTable columnHeaders={DOWNLOAD_OPENPGP_BUILD_HEADERS} data={pgpBuildTestData} />
</Stack>
@ -174,7 +174,7 @@ const DownloadsPage: NextPage = () => {
</DownloadsSection>
<DownloadsSection sectionTitle='Importing keys and verifying builds' id='importingkeys'>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
<Stack p={4} borderBottom='2px solid' borderColor='primary'>
<Text textStyle='quick-link-text'>
You can import the build server public keys by grabbing the individual keys directly
from the keyserver network:
@ -184,7 +184,7 @@ const DownloadsPage: NextPage = () => {
<Code p={4}>gpg --recv-keys F9585DE6 C2FF8BBF 9BA28146 7B9E2481 D2A67EAC</Code>
</Stack>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
<Stack p={4} borderBottom='2px solid' borderColor='primary'>
<Text textStyle='quick-link-text'>
Similarly you can import all the developer public keys by grabbing them directly
from the keyserver network:

15
src/theme/components/Button.ts
View File

@ -5,13 +5,18 @@ export const Button = {
px: '32px',
borderRadius: 0,
width: { base: '188px', md: 'auto' },
bg: 'brand.light.primary',
_hover: { bg: 'brand.light.secondary' },
bg: 'primary',
_hover: { bg: 'secondary' },
_focus: {
bg: 'brand.light.primary',
boxShadow: 'inset 0 0 0 2px #06fece !important'
bg: 'secondary',
boxShadow: 'inset 0 0 0 2px var(--chakra-colors-primary) !important'
},
_active: { borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }
_active: {
bg: 'secondary',
borderTop: '4px',
borderColor: 'primary',
pt: '4px'
}
}
}
};

26
src/theme/components/Link.ts
View File

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

7
src/theme/foundations/colors.ts
View File

@ -1,11 +1,4 @@
export const colors = {
brand: {
light: {
primary: '#11866f',
secondary: '#25453f',
body: '#1d242c'
}
},
green: {
50: '#d7f5ef',
100: '#98FFEB',

16
src/theme/foundations/textStyles.ts
View File

@ -5,7 +5,7 @@ export const textStyles = {
fontSize: '2.75rem',
lineHeight: '3.375rem',
letterSpacing: '5%',
color: 'brand.light.body'
color: 'body'
},
h2: {
fontFamily: '"JetBrains Mono", monospace',
@ -13,7 +13,7 @@ export const textStyles = {
fontSize: '1.5rem',
lineHeight: 'auto',
letterSpacing: '4%',
color: 'brand.light.body'
color: 'body'
},
'header-font': {
fontFamily: '"JetBrains Mono", monospace',
@ -29,7 +29,7 @@ export const textStyles = {
},
'homepage-primary-label': {
fontFamily: '"JetBrains Mono", monospace',
color: 'yellow.50',
color: 'bg',
fontWeight: 700,
textTransform: 'uppercase'
},
@ -49,10 +49,10 @@ export const textStyles = {
fontWeight: 700,
textTransform: 'uppercase',
textAlign: 'center',
color: 'brand.light.primary',
_groupHover: { color: 'yellow.50' },
_groupActive: { color: 'yellow.50' },
_groupFocus: { color: 'yellow.50' }
color: 'primary',
_groupHover: { color: 'bg' },
_groupActive: { color: 'bg' },
_groupFocus: { color: 'bg' }
},
'hero-text-small': {
fontSize: '13px',
@ -66,7 +66,7 @@ export const textStyles = {
},
'downloads-button-label': {
fontFamily: '"JetBrains Mono", monospace',
color: 'yellow.50',
color: 'bg',
fontSize: 'xs',
textTransform: 'uppercase'
},