From c71e2e2e2329b2907e5caa3a40863698f8dcb4f1 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 15 Nov 2022 18:00:31 -0800 Subject: [PATCH] refactor colors to use semantic tokens --- src/components/MDXComponents.tsx | 5 +- src/components/UI/DataTable.tsx | 8 +-- src/components/UI/Header.tsx | 32 ++++++----- src/components/UI/downloads/DownloadsHero.tsx | 2 +- .../UI/downloads/DownloadsSection.tsx | 6 +-- .../UI/downloads/DownloadsTable.tsx | 10 ++-- src/components/UI/homepage/Gopher.tsx | 2 +- src/components/UI/homepage/HomeHero.tsx | 2 +- src/components/UI/homepage/HomeSection.tsx | 8 +-- src/components/UI/homepage/QuickLinks.tsx | 54 +++++++++---------- src/components/UI/homepage/WhatIsEthereum.tsx | 23 ++++---- src/components/UI/homepage/WhyRunANode.tsx | 18 ++++--- src/components/layouts/Footer.tsx | 32 +++++------ src/pages/downloads.tsx | 12 ++--- src/theme/components/Button.ts | 15 ++++-- src/theme/components/Link.ts | 26 ++++----- src/theme/foundations/colors.ts | 7 --- src/theme/foundations/textStyles.ts | 16 +++--- 18 files changed, 139 insertions(+), 139 deletions(-) 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/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 490951ca7b..47c92d811c 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -10,14 +10,15 @@ export const Header: FC = () => { @@ -34,14 +35,14 @@ export const Header: FC = () => { @@ -57,13 +58,14 @@ export const Header: FC = () => { @@ -79,14 +81,15 @@ export const Header: FC = () => { @@ -98,7 +101,8 @@ export const Header: FC = () => { {/* DARK MODE SWITCH */} diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx index 2c01270953..15e71a9571 100644 --- a/src/components/UI/downloads/DownloadsHero.tsx +++ b/src/components/UI/downloads/DownloadsHero.tsx @@ -29,7 +29,7 @@ export const DownloadsHero: FC = ({ DOWNLOAD_HEADER_BUTTONS.sourceCode.buildURL = sourceCodeURL; return ( - + Gopher plugged in diff --git a/src/components/UI/downloads/DownloadsSection.tsx b/src/components/UI/downloads/DownloadsSection.tsx index 365bb49411..9e0a8bb500 100644 --- a/src/components/UI/downloads/DownloadsSection.tsx +++ b/src/components/UI/downloads/DownloadsSection.tsx @@ -11,9 +11,9 @@ interface Props { export const DownloadsSection: FC = ({ children, imgSrc, imgAltText, sectionTitle, id }) => { return ( - + {!!imgSrc && ( - + {/* TODO: use NextImage */} {imgAltText} @@ -22,7 +22,7 @@ export const DownloadsSection: FC = ({ children, imgSrc, imgAltText, sect 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/homepage/Gopher.tsx b/src/components/UI/homepage/Gopher.tsx index 1a4cb47e7e..788cfa1ece 100644 --- a/src/components/UI/homepage/Gopher.tsx +++ b/src/components/UI/homepage/Gopher.tsx @@ -8,7 +8,7 @@ export const Gopher: FC = () => { alignItems='center' p={4} border='2px solid' - borderColor='brand.light.primary' + borderColor='primary' h='100%' > Gopher greeting diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx index 600c6715de..dd7531d1d0 100644 --- a/src/components/UI/homepage/HomeHero.tsx +++ b/src/components/UI/homepage/HomeHero.tsx @@ -8,7 +8,7 @@ export const HomeHero: FC = () => { return ( = ({ children }) => { return ( - + {!!imgSrc && ( - + {/* TODO: use NextImage */} {imgAltText} @@ -31,7 +31,7 @@ export const HomeSection: FC = ({ @@ -43,7 +43,7 @@ export const HomeSection: FC = ({ p={4} spacing={4} borderBottom='2px solid' - borderColor='brand.light.primary' + borderColor='primary' sx={{ mt: '0 !important' }} h='100%' > 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 ( - + @@ -30,12 +32,7 @@ export const WhatIsEthereum: FC = ({ children }) => { - + {children} @@ -45,8 +42,8 @@ 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 */} diff --git a/src/components/UI/homepage/WhyRunANode.tsx b/src/components/UI/homepage/WhyRunANode.tsx index f9cb05c75b..59e773a25b 100644 --- a/src/components/UI/homepage/WhyRunANode.tsx +++ b/src/components/UI/homepage/WhyRunANode.tsx @@ -10,16 +10,17 @@ interface Props { export const WhyRunANode: FC = ({ children }) => { return ( - + @@ -29,8 +30,8 @@ export const WhyRunANode: FC = ({ children }) => { {children} @@ -42,8 +43,9 @@ 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 */} diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx index a5b5ebe24b..01e3d64a65 100644 --- a/src/components/layouts/Footer.tsx +++ b/src/components/layouts/Footer.tsx @@ -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' > { base: '2px solid', md: 'none' }} - borderColor='brand.light.primary' + borderColor='primary' > @@ -57,17 +57,17 @@ export const Footer: FC = () => { @@ -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} > @@ -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} > {`© 2013–${new Date().getFullYear()}. The go-ethereum Authors.`} diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx index c612af2d6c..e3eb8e941a 100644 --- a/src/pages/downloads.tsx +++ b/src/pages/downloads.tsx @@ -95,7 +95,7 @@ const DownloadsPage: NextPage = () => { - + 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 = () => { - + 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 = () => { - + All the binaries available from this page are signed via our build server PGP keys: {/* TODO: swap for real data */} - + @@ -174,7 +174,7 @@ const DownloadsPage: NextPage = () => { - + 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 = () => { gpg --recv-keys F9585DE6 C2FF8BBF 9BA28146 7B9E2481 D2A67EAC - + Similarly you can import all the developer public keys by grabbing them directly from the keyserver network: diff --git a/src/theme/components/Button.ts b/src/theme/components/Button.ts index 5d953f46c0..69fc5c3183 100644 --- a/src/theme/components/Button.ts +++ b/src/theme/components/Button.ts @@ -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' + } } } }; diff --git a/src/theme/components/Link.ts b/src/theme/components/Link.ts index 295f82f5ff..7c70f4ce18 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 !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' } } } diff --git a/src/theme/foundations/colors.ts b/src/theme/foundations/colors.ts index a72fc5861a..ed3fef3533 100644 --- a/src/theme/foundations/colors.ts +++ b/src/theme/foundations/colors.ts @@ -1,11 +1,4 @@ export const colors = { - brand: { - light: { - primary: '#11866f', - secondary: '#25453f', - body: '#1d242c' - } - }, green: { 50: '#d7f5ef', 100: '#98FFEB', diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts index df3252d467..38b9386ac2 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,7 +66,7 @@ export const textStyles = { }, 'downloads-button-label': { fontFamily: '"JetBrains Mono", monospace', - color: 'yellow.50', + color: 'bg', fontSize: 'xs', textTransform: 'uppercase' },