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

refactor colors to use semantic tokens

Browse Source
pull/26459/head^2
Paul Wackerow 2 years ago
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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      src/components/MDXComponents.tsx
  2. 8
      src/components/UI/DataTable.tsx
  3. 32
      src/components/UI/Header.tsx
  4. 2
      src/components/UI/downloads/DownloadsHero.tsx
  5. 6
      src/components/UI/downloads/DownloadsSection.tsx
  6. 10
      src/components/UI/downloads/DownloadsTable.tsx
  7. 2
      src/components/UI/homepage/Gopher.tsx
  8. 2
      src/components/UI/homepage/HomeHero.tsx
  9. 8
      src/components/UI/homepage/HomeSection.tsx
  10. 54
      src/components/UI/homepage/QuickLinks.tsx
  11. 23
      src/components/UI/homepage/WhatIsEthereum.tsx
  12. 18
      src/components/UI/homepage/WhyRunANode.tsx
  13. 32
      src/components/layouts/Footer.tsx
  14. 12
      src/pages/downloads.tsx
  15. 15
      src/theme/components/Button.ts
  16. 26
      src/theme/components/Link.ts
  17. 7
      src/theme/foundations/colors.ts
  18. 16
      src/theme/foundations/textStyles.ts

5
src/components/MDXComponents.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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'
},

Write Preview
Loading…
Cancel
Save