FumeNodes/link-free
1
0
Fork 0
mirror of https://github.com/dsoaress/link-free.git synced 2026-08-17 06:56:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add fonts options

Browse Source
This commit is contained in:
Daniel Soares
2021-12-11 14:22:00 -03:00
parent cd8259a0a5
commit 47bd52ffd7
9 changed files with 38 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Button/styles.ts
View File

@@ -46,7 +46,6 @@ export const Wrapper = styled('button', {
borderWidth: '2.5px',
borderStyle: 'solid',
fontSize: '1rem',
fontWeight: 'bold',
cursor: 'pointer',
transition: 'all 0.25s ease-in-out',

6
src/components/Link/index.tsx
View File

@@ -3,10 +3,10 @@ import { AnchorHTMLAttributes } from 'react'
import { LinkVariantProps, Wrapper } from './styles'
export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> &
LinkVariantProps & {
href: string
color?: LinkVariantProps['color']
}
}
export function Link({ href, ...rest }: LinkProps) {
return (

1
src/components/Link/styles.ts
View File

@@ -17,7 +17,6 @@ const colorVariantFn = (
})
export const Wrapper = styled('a', {
fontWeight: 'medium',
textDecoration: 'none',
transition: 'color 0.25s ease',
cursor: 'pointer',

4
src/components/SocialLinks/styles.ts
View File

@@ -2,9 +2,7 @@ import { styled } from '../../styles/stitches.config'
export const Wrapper = styled('ul', {
display: 'inline-flex',
listStyle: 'none',
margin: 0,
padding: 0
listStyle: 'none'
})
export const SocialItem = styled('li', {

3
src/pages/_app.tsx
View File

@@ -1,5 +1,8 @@
import type { AppProps } from 'next/app'
import { globalStyles } from '../styles/globals'
export default function App({ Component, pageProps }: AppProps) {
globalStyles()
return <Component {...pageProps} />
}

5
src/pages/_document.tsx
View File

@@ -1,12 +1,15 @@
import NextDocument, { Head, Html, Main, NextScript } from 'next/document'
import { getCssText } from '../styles/stitches.config'
import { fonts, getCssText } from '../styles/stitches.config'
export default class Document extends NextDocument {
render() {
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href={fonts['baloo'].href} rel="stylesheet" />
<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
</Head>
<body>

18
src/styles/fonts.ts Normal file
View File

@@ -0,0 +1,18 @@
export const fonts = {
roboto: {
href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap',
name: "'Roboto', sans-serif"
},
openSans: {
href: 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap',
name: "'Open Sans', sans-serif"
},
poppins: {
href: 'https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap',
name: "'Poppins', sans-serif"
},
baloo: {
href: 'https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@500&display=swap',
name: "'Baloo Bhaijaan 2', cursive"
}
}

6
src/styles/globals.ts
View File

@@ -1,9 +1,13 @@
import { globalCss } from './stitches.config'
import { fonts, globalCss } from './stitches.config'
export const globalStyles = globalCss({
'*': {
margin: 0,
padding: 0,
boxSizing: 'border-box'
},
'body, button, a': {
fontFamily: fonts['baloo'].name,
fontWeight: 500
}
})

3
src/styles/stitches.config.ts
View File

@@ -1,5 +1,7 @@
import { createStitches, VariantProps } from '@stitches/react'
import { fonts } from './fonts'
export const { css, styled, globalCss, theme, keyframes, getCssText } = createStitches({
theme: {
colors: {
@@ -251,3 +253,4 @@ export const { css, styled, globalCss, theme, keyframes, getCssText } = createSt
type ColorsType = keyof typeof theme.colors
export type { ColorsType, VariantProps }
export { fonts }