feat: add theme

virginiarcruz · Apr 8, 2021 · a202b9a · a202b9a
1 parent 1fe26df
commit a202b9a
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 17 deletions.
diff --git a/generators/templates/Component.tsx.hbs b/generators/templates/Component.tsx.hbs
@@ -1,9 +1,9 @@
-import * as S from './styles'
+import { Container } from './styles'
 
 const {{pascalCase name}} = () => (
-  <S.Wrapper>
+  <Container>
     <h1>{{pascalCase name}}</h1>
-  </S.Wrapper>
+  </Container>
 )
 
 export default {{pascalCase name}}
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
@@ -1,14 +1,14 @@
-import * as S from './styles'
+import { Wrapper, Logo, Title, Description } from './styles'
 
 const Main = ({
   title = 'Shelter Buddy',
   description = 'Shelter Management Software, track your animals, volunteers, donors and more'
 }) => (
-  <S.Wrapper>
-    <S.Logo src="/img/logo.svg" alt="shelter buddy brand" />
-    <S.Title>{title}</S.Title>
-    <S.Description>{description}</S.Description>
-  </S.Wrapper>
+  <Wrapper>
+    <Logo src="/img/logo.svg" alt="shelter buddy brand" />
+    <Title>{title}</Title>
+    <Description>{description}</Description>
+  </Wrapper>
 )
 
 export default Main
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,11 +1,13 @@
 import { AppProps } from 'next/app'
 import Head from 'next/head'
+import { ThemeProvider } from 'styled-components'
 
 import GlobalStyles from 'styles/global'
+import theme from 'styles/theme'
 
 function App({ Component, pageProps }: AppProps) {
   return (
-    <>
+    <ThemeProvider theme={theme}>
       <Head>
         <title>
           Shelter Buddy | Animal Shelter Database System, Animal Shelter, Animal
@@ -14,15 +16,19 @@ function App({ Component, pageProps }: AppProps) {
         <link rel="shortcut icon" href="/img/icon-512.png" />
         <link rel="apple-touch-icon" href="/img/icon-512.png" />
         <link rel="manifest" href="/manifest.json" />
-        <meta name="theme-color" content="##F6F7FA" />
         <meta
           name="description"
           content="Shelter Management Software, track your animals, volunteers, donors and more."
         />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+          rel="stylesheet"
+        />
       </Head>
       <GlobalStyles />
       <Component {...pageProps} />
-    </>
+    </ThemeProvider>
   )
 }
 

diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -7,16 +7,12 @@ const GlobalStyles = createGlobalStyle`
     box-sizing: border-box;
   }
 
-  html {
-    font-size: 62.5%;
-  }
-
   html, body, #__next {
     height: 100%;
   }
 
   body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+    font-family: 'Inter', -apple-system,  sans-serif
   }
 `
 

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -0,0 +1,43 @@
+export default {
+  grid: {
+    container: '1128px',
+    gutter: '156px'
+  },
+  border: {
+    radius: {
+      medium: '12px',
+      pill: '100px'
+    }
+  },
+  font: {
+    family: "'Inter', -apple-system, sans-serif",
+    regular: 400,
+    medium: 500,
+    bold: 600,
+    sizes: {
+      xsmall: '12px',
+      small: '14px',
+      medium: '16px',
+      large: '22px'
+    }
+  },
+  colors: {
+    mainBg: '#F6F7FA',
+    black: '#000121',
+    darkGray: '#707183',
+    blue: '#002FD6',
+    middleGray: '##A1A2AF',
+    white: '#FFFFFF',
+    softBlue: '#E0E7FD'
+  },
+  transition: {
+    default: '0.3s ease-in-out',
+    fast: '0.1s ease-in-out'
+  },
+  mediaQueries: {
+    small: 375,
+    medium: 768,
+    large: 992,
+    extraLarge: 1200
+  }
+} as const