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 bffc9dd76d..d03e7ceb7d 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' }, @@ -27,6 +27,20 @@ export const Link = { color: 'brand.light.secondary', textDecorationColor: 'brand.light.secondary' } - } + }, + 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' + } + }, } }; diff --git a/src/theme/foundations/index.ts b/src/theme/foundations/index.ts index b0e872689b..b18404055e 100644 --- a/src/theme/foundations/index.ts +++ b/src/theme/foundations/index.ts @@ -1,3 +1,4 @@ export * from './colors'; export * from './shadows'; 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..0443497cee --- /dev/null +++ b/src/theme/foundations/textStyles.ts @@ -0,0 +1,73 @@ +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' + }, + 'downloads-button-label': { + fontFamily:'"JetBrains Mono", monospace', + color:'yellow.50', + fontSize:'xs', + textTransform:'uppercase', + }, + 'download-tab-label': { + fontFamily: '"JetBrains Mono", monospace', + fontWeight: 700, + textTransform: 'uppercase', + textAlign: 'center', + fontSize: 'sm', + }, + // 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 69069c2030..746344cbd2 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,6 +1,6 @@ import { extendTheme } from '@chakra-ui/react'; -import { colors, shadows, sizes } from './foundations'; +import { colors, shadows, sizes, textStyles } from './foundations'; import { Button, Link } from './components'; const overrides = { @@ -18,72 +18,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' - }, - 'downloads-button-label': { - fontFamily:'"JetBrains Mono", monospace', - color:'yellow.50', - fontSize:'xs', - textTransform:'uppercase', - }, - 'download-tab-label': { - fontFamily: '"JetBrains Mono", monospace', - fontWeight: 700, - textTransform: 'uppercase', - textAlign: 'center', - fontSize: 'sm', - }, - // 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);