diff --git a/public/images/pages/glyph-home-light.svg b/public/images/pages/glyph-home-light.svg
deleted file mode 100644
index 36fed55efc..0000000000
--- a/public/images/pages/glyph-home-light.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-
diff --git a/public/images/pages/gopher-downloads-front-light.svg b/public/images/pages/gopher-downloads-front-light.svg
deleted file mode 100644
index 41c2984306..0000000000
--- a/public/images/pages/gopher-downloads-front-light.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
diff --git a/public/images/pages/gopher-home-front.svg b/public/images/pages/gopher-home-front.svg
deleted file mode 100644
index 5729375b7d..0000000000
--- a/public/images/pages/gopher-home-front.svg
+++ /dev/null
@@ -1,453 +0,0 @@
-
diff --git a/public/images/pages/gopher-home-nodes.svg b/public/images/pages/gopher-home-nodes.svg
deleted file mode 100644
index 6c412aa7d1..0000000000
--- a/public/images/pages/gopher-home-nodes.svg
+++ /dev/null
@@ -1,298 +0,0 @@
-
diff --git a/public/images/pages/gopher-home-side-desktop.svg b/public/images/pages/gopher-home-side-desktop.svg
deleted file mode 100644
index e823d8927b..0000000000
--- a/public/images/pages/gopher-home-side-desktop.svg
+++ /dev/null
@@ -1,417 +0,0 @@
-
diff --git a/public/images/pages/gopher-home-side-mobile.svg b/public/images/pages/gopher-home-side-mobile.svg
deleted file mode 100644
index a4bfbbd93c..0000000000
--- a/public/images/pages/gopher-home-side-mobile.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
diff --git a/public/images/pages/linux-penguin.svg b/public/images/pages/linux-penguin.svg
deleted file mode 100644
index f66b859b43..0000000000
--- a/public/images/pages/linux-penguin.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/public/images/pages/macos-logo.svg b/public/images/pages/macos-logo.svg
deleted file mode 100644
index 6c6180ff5e..0000000000
--- a/public/images/pages/macos-logo.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/public/images/pages/source-branch.svg b/public/images/pages/source-branch.svg
deleted file mode 100644
index 0ae94f6e20..0000000000
--- a/public/images/pages/source-branch.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/public/images/pages/windows-logo.svg b/public/images/pages/windows-logo.svg
deleted file mode 100644
index 13729fe7ff..0000000000
--- a/public/images/pages/windows-logo.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/components/MDXComponents.tsx b/src/components/MDXComponents.tsx
index 27b2e65aa8..bfc92fc18c 100644
--- a/src/components/MDXComponents.tsx
+++ b/src/components/MDXComponents.tsx
@@ -43,8 +43,7 @@ const MDXComponents = {
{children}
@@ -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'
diff --git a/src/components/UI/ButtonLinkSecondary.tsx b/src/components/UI/ButtonLinkSecondary.tsx
new file mode 100644
index 0000000000..882a8a4a2d
--- /dev/null
+++ b/src/components/UI/ButtonLinkSecondary.tsx
@@ -0,0 +1,22 @@
+import { Link, Stack, Text } from '@chakra-ui/react';
+import NextLink, { LinkProps } from 'next/link';
+
+import { Link as LinkTheme } from "../../theme/components"
+
+interface Props extends LinkProps {
+ children: React.ReactNode;
+}
+
+export const ButtonLinkSecondary: React.FC = ({ href, children, ...restProps}) => {
+ const isExternal: boolean = href.toString().startsWith('http');
+ const variant = LinkTheme.variants["button-link-secondary"]
+ return (
+
+
+
+ {children}
+
+
+
+ );
+};
diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx
index c94cbc2d4d..12fe2f9af6 100644
--- a/src/components/UI/DataTable.tsx
+++ b/src/components/UI/DataTable.tsx
@@ -12,11 +12,11 @@ export const DataTable: FC = ({ 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 = ({ columnHeaders, data }) => {
fontFamily='"JetBrains Mono", monospace'
fontWeight={700}
fontSize='md'
- color='#868b87'
+ color='#868b87' //? Use theme color? Or add to theme?
>
{columnHeader}
@@ -48,7 +48,7 @@ export const DataTable: FC = ({ 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)
diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index cb7641849c..4df7e9ad65 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -1,23 +1,21 @@
-import { Box, Flex, Input, InputGroup, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Flex, Input, InputGroup, Link, Stack, Text, useColorMode } from '@chakra-ui/react';
import { FC } from 'react';
import NextLink from 'next/link';
-import { HamburguerIcon, LensIcon, MoonIcon } from '../UI/icons';
+import { HamburgerIcon, LensIcon, MoonIcon, SunIcon } from '../UI/icons';
import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants';
export const Header: FC = () => {
+ const { colorMode, toggleColorMode } = useColorMode();
+ const isDark = colorMode === 'dark';
return (
-
+
@@ -32,14 +30,14 @@ export const Header: FC = () => {
@@ -55,13 +53,14 @@ export const Header: FC = () => {
@@ -77,30 +76,41 @@ export const Header: FC = () => {
-
+
{/* DARK MODE SWITCH */}
-
-
+
+ {isDark ? : }
- {/* HAMBURGUER MENU */}
+ {/* HAMBURGER MENU */}
-
+
diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx
index c31edbc37a..610e5aa2a4 100644
--- a/src/components/UI/downloads/DownloadsHero.tsx
+++ b/src/components/UI/downloads/DownloadsHero.tsx
@@ -1,7 +1,9 @@
-import { Box, Center, Button, Grid, Image, Link, Stack, HStack, Text } from '@chakra-ui/react';
+import { Box, Button, Center, Grid, HStack, Image, Link, Stack,Text } from '@chakra-ui/react';
import { FC } from 'react';
import NextLink from 'next/link';
+import { GopherDownloads } from '../svgs';
+
import { DOWNLOAD_HEADER_BUTTONS } from '../../../constants';
interface DownloadsHero {
@@ -31,7 +33,7 @@ export const DownloadsHero: FC = ({
return (
= ({
Download go-ethereum
-
= ({
order={{ base: -1, md: 1 }}
>
-
+
{Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
+ const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key];
return (
-
+
);
diff --git a/src/components/UI/downloads/DownloadsSection.tsx b/src/components/UI/downloads/DownloadsSection.tsx
index adf55abe6e..dfdb760029 100644
--- a/src/components/UI/downloads/DownloadsSection.tsx
+++ b/src/components/UI/downloads/DownloadsSection.tsx
@@ -1,35 +1,34 @@
-import { Center, Flex, Image, Stack, Text } from '@chakra-ui/react';
+import { Center, Flex, IconProps, Stack, Text } from '@chakra-ui/react';
import { FC } from 'react';
interface Props {
- children: React.ReactNode;
id: string;
- imgSrc?: string;
- imgAltText?: string;
- sectionDescription?: React.ReactNode;
sectionTitle: string;
+ sectionDescription?: React.ReactNode;
+ children: React.ReactNode;
+ Svg?: React.FC;
+ ariaLabel?: string;
}
export const DownloadsSection: FC = ({
- children,
- imgSrc,
- imgAltText,
- sectionDescription,
+ id,
sectionTitle,
- id
+ sectionDescription,
+ children,
+ Svg,
+ ariaLabel
}) => {
return (
-
- {!!imgSrc && (
-
- {/* TODO: use NextImage */}
-
+
+ {Svg && (
+
+
)}
@@ -43,8 +42,9 @@ export const DownloadsSection: FC = ({
{sectionDescription && (
{sectionDescription}
diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx
index 7dd5e52aac..a8b69925d2 100644
--- a/src/components/UI/downloads/DownloadsTable.tsx
+++ b/src/components/UI/downloads/DownloadsTable.tsx
@@ -11,9 +11,9 @@ interface Props {
export const DownloadsTable: FC = ({ data }) => {
return (
-
+
-
+
{DOWNLOAD_TABS.map((tab, idx) => {
return (
= ({ 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'
>
{tab}
diff --git a/src/components/UI/downloads/SpecificVersionsSection.tsx b/src/components/UI/downloads/SpecificVersionsSection.tsx
index d7f9279771..340f6f6817 100644
--- a/src/components/UI/downloads/SpecificVersionsSection.tsx
+++ b/src/components/UI/downloads/SpecificVersionsSection.tsx
@@ -1,5 +1,6 @@
import { Box, Flex, Image, Stack } from '@chakra-ui/react';
import { FC } from 'react';
+import { GopherHomeLinks } from '../svgs';
interface Props {
children: React.ReactNode;
@@ -9,26 +10,26 @@ export const SpecificVersionsSection: FC = ({ children }) => {
return (
- {/* TODO: use NextImage */}
-
+
diff --git a/src/components/UI/homepage/Gopher.tsx b/src/components/UI/homepage/Gopher.tsx
deleted file mode 100644
index 1a4cb47e7e..0000000000
--- a/src/components/UI/homepage/Gopher.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Image, Stack } from '@chakra-ui/react';
-import { FC } from 'react';
-
-export const Gopher: FC = () => {
- return (
-
-
-
- );
-};
diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx
index cb68860bdb..6174269345 100644
--- a/src/components/UI/homepage/HomeHero.tsx
+++ b/src/components/UI/homepage/HomeHero.tsx
@@ -8,7 +8,7 @@ export const HomeHero: FC = () => {
return (
;
+ ariaLabel?: string;
}
export const HomeSection: FC = ({
- imgSrc,
- imgAltText,
+ Svg,
+ ariaLabel,
sectionTitle,
linkLabel,
buttonHref,
children
}) => {
return (
-
- {!!imgSrc && (
-
- {/* TODO: use NextImage */}
-
+
+ {Svg && (
+
+
)}
-
-
+
{sectionTitle}
@@ -43,20 +36,14 @@ export const HomeSection: FC = ({
p={4}
spacing={4}
borderBottom='2px solid'
- borderColor='brand.light.primary'
+ borderColor='primary'
sx={{ mt: '0 !important' }}
h='100%'
>
{children}
-
-
-
- {linkLabel}
-
-
-
+ {linkLabel}
);
};
diff --git a/src/components/UI/homepage/QuickLinks.tsx b/src/components/UI/homepage/QuickLinks.tsx
index bd7df05b9a..28e6d5e895 100644
--- a/src/components/UI/homepage/QuickLinks.tsx
+++ b/src/components/UI/homepage/QuickLinks.tsx
@@ -6,8 +6,8 @@ import { CONTRIBUTING_PAGE, DOCS_PAGE, FAQ_PAGE } from '../../../constants';
export const QuickLinks: FC = () => {
return (
-
-
+
+
Quick Links
@@ -21,7 +21,7 @@ export const QuickLinks: FC = () => {
@@ -31,23 +31,23 @@ export const QuickLinks: FC = () => {
We can help.
-
+
{
@@ -73,23 +73,23 @@ export const QuickLinks: FC = () => {
Check the FAQ section in the documentation.
-
+
{
{/* how to contribute */}
-
+
Want to know how to contribute?
@@ -116,18 +116,18 @@ export const QuickLinks: FC = () => {
= ({ children }) => {
return (
-
+
-
+
What is Ethereum
-
+
{children}
@@ -45,23 +37,16 @@ export const WhatIsEthereum: FC = ({ 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 */}
-
+
-
-
-
- Learn more on Ethereum.org
-
-
-
+ Learn more on Ethereum.org
);
};
diff --git a/src/components/UI/homepage/WhyRunANode.tsx b/src/components/UI/homepage/WhyRunANode.tsx
index f9cb05c75b..bed89b8eec 100644
--- a/src/components/UI/homepage/WhyRunANode.tsx
+++ b/src/components/UI/homepage/WhyRunANode.tsx
@@ -1,7 +1,8 @@
-import { Box, Grid, GridItem, Image, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Grid, GridItem, Stack } from '@chakra-ui/react';
import { FC } from 'react';
-import NextLink from 'next/link';
+import { ButtonLinkSecondary } from '..'
+import { GopherHomeNodes } from '../svgs/GopherHomeNodes';
import { ETHEREUM_ORG_RUN_A_NODE_URL } from '../../../constants';
interface Props {
@@ -10,18 +11,14 @@ interface Props {
export const WhyRunANode: FC = ({ children }) => {
return (
-
+
-
+
Why run a node?
@@ -29,8 +26,8 @@ export const WhyRunANode: FC = ({ children }) => {
{children}
@@ -42,23 +39,19 @@ export const WhyRunANode: FC = ({ 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 */}
-
+
-
-
-
- Read more about running a node
-
-
-
+
+ Read more about running a node
+
);
};
diff --git a/src/components/UI/homepage/index.ts b/src/components/UI/homepage/index.ts
index 95f8371b8c..278ac8a77a 100644
--- a/src/components/UI/homepage/index.ts
+++ b/src/components/UI/homepage/index.ts
@@ -1,4 +1,3 @@
-export * from './Gopher';
export * from './HomeHero';
export * from './HomeSection';
export * from './WhatIsEthereum';
diff --git a/src/components/UI/icons/DiscordIcon.tsx b/src/components/UI/icons/DiscordIcon.tsx
index d1fe20d402..5fc6c33c78 100644
--- a/src/components/UI/icons/DiscordIcon.tsx
+++ b/src/components/UI/icons/DiscordIcon.tsx
@@ -4,11 +4,8 @@ export const DiscordIcon = createIcon({
displayName: 'DiscordIcon',
viewBox: '0 0 32 24',
path: (
-
@@ -164,7 +140,7 @@ export const Footer: FC = () => {
base: 'none solid solid solid',
lg: 'solid solid solid none'
}}
- borderColor='brand.light.primary'
+ borderColor='primary'
flex={1}
>
{`© 2013–${new Date().getFullYear()}. The go-ethereum Authors.`}
diff --git a/src/constants.ts b/src/constants.ts
index e7002d00cc..5abd377b56 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,3 +1,7 @@
+import React from 'react';
+import { IconProps } from '@chakra-ui/react';
+import { WindowsLogo, MacosLogo, LinuxPenguin, SourceBranch } from './components/UI/icons';
+
// internal pages
export const DOWNLOADS_PAGE = '/downloads';
export const DOCS_PAGE = '/docs';
@@ -16,30 +20,35 @@ export const GO_URL = 'https://go.dev/';
// Downloads
export const DEFAULT_BUILD_AMOUNT_TO_SHOW = 10;
export const DOWNLOAD_HEADER_BUTTONS: {
- [index: string]: { name: string; image: string; imageAlt: string; buildURL: string };
+ [index: string]: {
+ name: string;
+ ariaLabel: string;
+ buildURL: string;
+ Svg: React.FC;
+ };
} = {
linuxBuild: {
name: 'Linux',
- image: '/images/pages/linux-penguin.svg',
- imageAlt: 'Linux logo',
+ ariaLabel: 'Linux logo',
+ Svg: LinuxPenguin,
buildURL: ''
},
macOSBuild: {
name: 'macOS',
- image: '/images/pages/macos-logo.svg',
- imageAlt: 'macOS logo',
+ ariaLabel: 'macOS logo',
+ Svg: MacosLogo,
buildURL: ''
},
windowsBuild: {
name: 'Windows',
- image: '/images/pages/windows-logo.svg',
- imageAlt: 'Windows logo',
+ ariaLabel: 'Windows logo',
+ Svg: WindowsLogo,
buildURL: ''
},
sourceCode: {
name: 'Sources',
- image: '/images/pages/source-branch.svg',
- imageAlt: 'Source branch logo',
+ ariaLabel: 'Source branch logo',
+ Svg: SourceBranch,
buildURL: ''
}
};
diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx
index c0d1ab2156..3a674688da 100644
--- a/src/pages/downloads.tsx
+++ b/src/pages/downloads.tsx
@@ -272,7 +272,7 @@ const DownloadsPage: NextPage = ({ data }) => {
sectionTitle='OpenPGP Signatures'
>
{/* TODO: swap for real data */}
-
+
@@ -288,8 +288,8 @@ const DownloadsPage: NextPage = ({ data }) => {
@@ -308,8 +308,8 @@ const DownloadsPage: NextPage = ({ data }) => {
@@ -328,8 +328,8 @@ const DownloadsPage: NextPage = ({ data }) => {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c95046c86c..e37364a150 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,14 +1,16 @@
import { Box, Grid, GridItem, Link, Stack, Text } from '@chakra-ui/react';
import type { NextPage } from 'next';
+import { GopherHomeFront } from '../components/UI/svgs';
+
import {
- Gopher,
HomeHero,
HomeSection,
QuickLinks,
WhatIsEthereum,
WhyRunANode
} from '../components/UI/homepage';
+import { GopherHomeLinks } from '../components/UI/svgs';
import {
CONTRIBUTING_PAGE,
@@ -32,11 +34,11 @@ const HomePage: NextPage = ({}) => {
{/* SECTION: What is Geth */}
Geth (go-ethereum) is a{' '}
@@ -142,7 +144,16 @@ const HomePage: NextPage = ({}) => {
{/* TODO: replace with animated/video version */}
-
+
+
+
diff --git a/src/theme/components/Button.ts b/src/theme/components/Button.ts
index db07f8e61c..1efd558779 100644
--- a/src/theme/components/Button.ts
+++ b/src/theme/components/Button.ts
@@ -5,24 +5,29 @@ 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'
+ }
},
downloadsHeader: {
py: '8px',
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: 'primary',
+ boxShadow: 'inset 0 0 0 2px var(--chakra-colors-green-200) !important'
},
_active: { borderTop: '4px solid', borderColor: 'green.200' }
}
diff --git a/src/theme/components/Link.ts b/src/theme/components/Link.ts
index 295f82f5ff..ca8aaf93c1 100644
--- a/src/theme/components/Link.ts
+++ b/src/theme/components/Link.ts
@@ -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',
+ _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)'
},
- _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)',
textDecoration: 'none'
},
_pressed: {
- color: 'brand.light.secondary',
- textDecorationColor: 'brand.light.secondary'
+ color: 'secondary',
+ textDecorationColor: 'secondary'
}
}
}
diff --git a/src/theme/foundations/colors.ts b/src/theme/foundations/colors.ts
index 2fc5df88a2..ed3fef3533 100644
--- a/src/theme/foundations/colors.ts
+++ b/src/theme/foundations/colors.ts
@@ -1,14 +1,18 @@
export const colors = {
- brand: {
- light: {
- primary: '#11866f',
- secondary: '#25453f',
- body: '#1d242c'
- }
- },
green: {
50: '#d7f5ef',
- 200: '#06fece'
+ 100: '#98FFEB',
+ 200: '#06fece',
+ 300: '#23EDC5',
+ 400: '#1FD3B0',
+ 500: '#2EBDA1',
+ 600: '#11866f',
+ 700: '#08715C',
+ 800: '#25453f',
+ 900: '#02211B'
+ },
+ gray: {
+ 800: '#1d242c'
},
yellow: {
50: '#f0f2e2'
diff --git a/src/theme/foundations/config.ts b/src/theme/foundations/config.ts
new file mode 100644
index 0000000000..c02702847e
--- /dev/null
+++ b/src/theme/foundations/config.ts
@@ -0,0 +1,12 @@
+import { type ThemeConfig } from '@chakra-ui/react';
+/**
+ * https://chakra-ui.com/docs/styled-system/color-mode
+ * initialColorMode: 'system' —— Will default to users system color mode
+ * useSystemColorMode=true —— Color mode will change if user changes their system color mode
+ * Can be overridden with toggle on site and will persist after refresh
+ * Choice is stored/managed with local storage
+ */
+export const config: ThemeConfig = {
+ initialColorMode: 'system',
+ useSystemColorMode: true
+};
diff --git a/src/theme/foundations/index.ts b/src/theme/foundations/index.ts
index b18404055e..fce166179d 100644
--- a/src/theme/foundations/index.ts
+++ b/src/theme/foundations/index.ts
@@ -1,4 +1,5 @@
export * from './colors';
+export * from './config';
export * from './shadows';
export * from './sizes';
export * from './textStyles';
diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts
index 03e747bd61..31ecc3f365 100644
--- a/src/theme/foundations/textStyles.ts
+++ b/src/theme/foundations/textStyles.ts
@@ -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,13 +66,13 @@ export const textStyles = {
},
'downloads-button-label': {
fontFamily: '"JetBrains Mono", monospace',
- color: 'yellow.50',
+ color: 'bg',
fontSize: { base: 'md', lg: 'xl' },
textTransform: 'uppercase'
},
'downloads-button-sublabel': {
fontFamily: '"JetBrains Mono", monospace',
- color: 'yellow.50',
+ color: 'bg',
fontSize: { base: 'xs', lg: 'sm' },
textTransform: 'uppercase'
},
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 746344cbd2..ff6c89914e 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,9 +1,10 @@
import { extendTheme } from '@chakra-ui/react';
-import { colors, shadows, sizes, textStyles } from './foundations';
+import { config, colors, shadows, sizes, textStyles } from './foundations';
import { Button, Link } from './components';
const overrides = {
+ config,
colors,
components: {
Button,
@@ -14,11 +15,23 @@ const overrides = {
styles: {
global: () => ({
body: {
- bg: 'yellow.50'
+ bg: 'bg',
+ transition: 'all 200ms linear !important'
}
})
},
- textStyles
+ textStyles,
+ semanticTokens: {
+ colors: {
+ primary: { _light: 'green.600', _dark: 'green.200' },
+ secondary: { _light: 'green.800', _dark: 'green.600' },
+ 'button-bg': { _light: 'green.50', _dark: 'green.900' },
+ body: { _light: 'gray.800', _dark: 'yellow.50' },
+ 'code-bg': { _light: 'gray.200', _dark: 'gray.700' },
+ 'code-bg-contrast': { _light: 'gray.800', _dark: 'gray.900' },
+ bg: { _light: 'yellow.50', _dark: 'gray.800' }
+ }
+ }
};
export default extendTheme(overrides);