From 80afacda5064f620af2ecb94c27ffbf929a231a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= Date: Sat, 8 Oct 2022 08:15:14 -0500 Subject: [PATCH 1/2] chore: update textStyles --- src/theme/foundations/index.ts | 1 + src/theme/foundations/textStyles.ts | 60 +++++++++++++++++++++++++++++ src/theme/index.ts | 56 +-------------------------- 3 files changed, 63 insertions(+), 54 deletions(-) create mode 100644 src/theme/foundations/textStyles.ts diff --git a/src/theme/foundations/index.ts b/src/theme/foundations/index.ts index 06d0f4f4f0..3e6332ffc5 100644 --- a/src/theme/foundations/index.ts +++ b/src/theme/foundations/index.ts @@ -1,2 +1,3 @@ export * from './colors'; export * from './sizes'; +export * from './textStyles'; diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts new file mode 100644 index 0000000000..fa4bd9b9ae --- /dev/null +++ b/src/theme/foundations/textStyles.ts @@ -0,0 +1,60 @@ +export const textStyles = { + h1: { + fontFamily: '"JetBrains Mono", monospace', + fontWeight: 700, + fontSize: '2.75rem', + lineHeight: '3.375rem', + letterSpacing: '5%', + color: 'brand.light.body' + }, + h2: { + fontFamily: '"JetBrains Mono", monospace', + fontWeight: 400, + fontSize: '1.5rem', + lineHeight: 'auto', + letterSpacing: '4%', + color: 'brand.light.body' + }, + 'homepage-description': { + fontFamily: '"JetBrains Mono", monospace', + fontWeight: 700, + lineHeight: '21px', + letterSpacing: '0.05em', + textAlign: { base: 'center', md: 'left' } + }, + 'homepage-primary-label': { + fontFamily: '"JetBrains Mono", monospace', + color: 'yellow.50', + fontWeight: 700, + textTransform: 'uppercase' + }, + 'home-section-link-label': { + fontFamily: '"JetBrains Mono", monospace', + fontWeight: 700, + textTransform: 'uppercase', + textAlign: 'center', + p: 4 + }, + 'quick-link-text': { + fontFamily: '"Inter", sans-serif', + lineHeight: '26px' + }, + 'quick-link-label': { + fontFamily: '"JetBrains Mono", monospace', + fontWeight: 700, + textTransform: 'uppercase', + textAlign: 'center', + color: 'brand.light.primary', + _groupHover: { color: 'yellow.50' }, + _groupActive: { color: 'yellow.50' }, + _groupFocus: { color: 'yellow.50' } + }, + 'hero-text-small': { + fontSize: '13px', + fontFamily: '"Inter", sans-serif' + }, + // TODO: refactor w/ semantic tokens for light/dark mode + 'link-light': {}, + // TODO: refactor w/ semantic tokens for light/dark mode + 'text-light': {} +}; diff --git a/src/theme/index.ts b/src/theme/index.ts index ee49f0ac91..cccdd60e09 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,6 +1,6 @@ import { extendTheme } from '@chakra-ui/react'; -import { colors, sizes } from './foundations'; +import { colors, sizes, textStyles } from './foundations'; import { Button, Link } from './components'; const overrides = { @@ -17,59 +17,7 @@ const overrides = { } }) }, - textStyles: { - h1: { - fontFamily: '"JetBrains Mono", monospace', - fontWeight: 700, - fontSize: '2.75rem', - lineHeight: '3.375rem', - letterSpacing: '5%', - color: 'brand.light.body' - }, - h2: { - fontFamily: '"JetBrains Mono", monospace', - fontWeight: 400, - fontSize: '1.5rem', - lineHeight: 'auto', - letterSpacing: '4%', - color: 'brand.light.body' - }, - 'homepage-description': { - fontFamily: '"JetBrains Mono", monospace', - fontWeight: 700, - lineHeight: '21px', - letterSpacing: '0.05em', - textAlign: { base: 'center', md: 'left' } - }, - 'homepage-primary-label': { - fontFamily: '"JetBrains Mono", monospace', - color: 'yellow.50', - fontWeight: 700, - textTransform: 'uppercase' - }, - 'quick-link-text': { - fontFamily: '"Inter", sans-serif', - lineHeight: '26px' - }, - 'quick-link-label': { - fontFamily: '"JetBrains Mono", monospace', - fontWeight: 700, - textTransform: 'uppercase', - textAlign: 'center', - color: 'brand.light.primary', - _groupHover: { color: 'yellow.50' }, - _groupActive: { color: 'yellow.50' }, - _groupFocus: { color: 'yellow.50' } - }, - 'hero-text-small': { - fontSize: '13px', - fontFamily: '"Inter", sans-serif' - }, - // TODO: refactor w/ semantic tokens for light/dark mode - 'link-light': {}, - // TODO: refactor w/ semantic tokens for light/dark mode - 'text-light': {} - } + textStyles }; export default extendTheme(overrides); From d2c4ffa523a8c318a6ae71be4c2886886c0bece5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= Date: Sat, 8 Oct 2022 08:18:56 -0500 Subject: [PATCH 2/2] chore: add Link variants --- src/components/UI/homepage/HomeSection.tsx | 2 +- src/pages/index.tsx | 51 ++-------------------- src/theme/components/Link.ts | 16 ++++++- 3 files changed, 19 insertions(+), 50 deletions(-) diff --git a/src/components/UI/homepage/HomeSection.tsx b/src/components/UI/homepage/HomeSection.tsx index 01d47d30ab..2287d34a5d 100644 --- a/src/components/UI/homepage/HomeSection.tsx +++ b/src/components/UI/homepage/HomeSection.tsx @@ -51,7 +51,7 @@ export const HomeSection: FC = ({ - + {linkLabel} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d539a2f864..ceb217fea5 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -31,41 +31,11 @@ const HomePage: NextPage = ({}) => { > Geth (go-ethereum) is a{' '} - + Go {' '} implementation of{' '} - + Ethereum {' '} - a gateway into the decentralized web. @@ -139,22 +109,7 @@ const HomePage: NextPage = ({}) => { We welcome contributions from anyone on the internet, and are grateful for even the smallest of fixes! If you'd like to contribute to the Geth source code, please fork the{' '} - + Github repository , fix, commit and send a pull request for the maintainers to review and merge into the diff --git a/src/theme/components/Link.ts b/src/theme/components/Link.ts index 2e747c4324..295f82f5ff 100644 --- a/src/theme/components/Link.ts +++ b/src/theme/components/Link.ts @@ -1,6 +1,6 @@ export const Link = { variants: { - secondary: { + 'button-link-secondary': { color: 'brand.light.primary', bg: 'green.50', _hover: { textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }, @@ -11,6 +11,20 @@ export const Link = { boxShadow: 'inset 0 0 0 3px #f0f2e2 !important' }, _active: { textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' } + }, + light: { + textDecoration: 'underline', + color: 'brand.light.primary', + _hover: { color: 'brand.light.body', textDecorationColor: 'brand.light.body' }, + _focus: { + color: 'brand.light.primary', + boxShadow: '0 0 0 1px #11866f !important', + textDecoration: 'none' + }, + _pressed: { + color: 'brand.light.secondary', + textDecorationColor: 'brand.light.secondary' + } } } };