apply utils

src/App.js

@@ -1,5 +1,6 @@
-import styled from 'styled-components';
+import styled, {ThemeProvider} from 'styled-components';
 import Media from 'react-media';
+import theme from "./utils/theme";
 
 const H1 = styled.h1`
   color: green;
@@ -7,7 +8,7 @@ const H1 = styled.h1`
 
 function App() {
     return (
-        <>
+        <ThemeProvider theme={theme}>
             <Media query="(max-width: 768px)">
                 <H1>
                     Hello Gonito mobile!
@@ -18,7 +19,7 @@ function App() {
                     Hello Gonito desktop!
                 </H1>
             </Media>
-        </>
+        </ThemeProvider>
     );
 }
 

src/index.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:wght@300;400;500&display=swap');
+
 html {
     box-sizing: border-box;
     scroll-behavior: smooth;
@@ -8,3 +10,7 @@ html {
 *:after {
     box-sizing: inherit;
 }
+
+body {
+    font-family: 'Roboto', sans-serif;
+}

src/utils/colors.js

@@ -0,0 +1,7 @@
+const colors = {
+    white: '#FCFCFC',
+    green: '#1B998B',
+    dark: '#343434',
+};
+
+export default colors;

src/utils/containers.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+  padding: ${({setPadding}) => setPadding ? setPadding : '0'};
+  margin: ${({setMargin}) => setMargin ? setMargin : '0'};
+  width: ${({setWidth}) => setWidth ? setWidth : 'auto'};
+  max-width: ${({setMaxWidth}) => setMaxWidth ? setMaxWidth : 'auto'};
+  min-width: ${({setMinWidth}) => setMinWidth ? setMinWidth : 'auto'};
+  height: ${({setHeight}) => setHeight ? setHeight : 'auto'};
+  max-height: ${({setMaxHeight}) => setMaxHeight ? setMaxHeight : 'auto'};
+  min-height: ${({setMinHeight}) => setMinHeight ? setMinHeight : 'auto'};
+  background-color: ${({setBackgroundColor}) => setBackgroundColor ? setBackgroundColor : 'transparent'};
+  border-radius: ${({setBorderRadius}) => setBorderRadius ? setBorderRadius : '0'};
+  box-shadow: ${({shadow}) => shadow ? shadow : 'none'};
+  gap: ${({setGap}) => setGap ? setGap : '0'};
+  border: ${({setBorder}) => setBorder ? setBorder : 'none'};
+  cursor: ${({setCursor}) => setCursor ? setCursor : 'auto'};
+  display: ${({setDisplay}) => setDisplay ? setDisplay : 'block'};
+  opacity: ${({setOpacity}) => setOpacity ? setOpacity : '1'};
+  outline: ${({setOutline}) => setOutline ? setOutline : 'none'};
+  transition: opacity 0.3s ease-in-out;
+`;
+
+const FlexRow = styled(Container)`
+  display: ${({setDisplay}) => setDisplay ? setDisplay : 'flex'};
+  justify-content: ${({alignment}) => alignment ? alignment : 'center'};
+  align-items: ${({alignmentY}) => alignmentY ? alignmentY : 'center'};
+`;
+
+const FlexColumn = styled(FlexRow)`
+  flex-direction: column;
+  justify-content: ${({alignmentY}) => alignmentY ? alignmentY : 'center'};
+  align-items: ${({alignment}) => alignment ? alignment : 'center'};
+`;
+
+const Grid = styled(Container)`
+  display: grid;
+  grid-template-columns: ${({setTemplateColumns}) => setTemplateColumns ? setTemplateColumns : 'auto'};
+  grid-template-rows: ${({setTemplateRows}) => setTemplateRows ? setTemplateRows : 'auto'};
+`;
+
+export {Container, FlexRow, FlexColumn, Grid};

src/utils/fonts.js

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+import {Container} from './containers';
+
+const H1 = styled(Container)`
+  font-family: 'Kanit', sans-serif;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 24px;
+  color: ${({theme, color}) => color ? color : theme.colors.dark};
+
+  @media (min-width: ${({theme}) => theme.overMobile}) {
+    font-size: 48px;
+    line-height: 52px;
+  }
+`;
+
+const H2 = styled(Container)`
+  font-family: 'Kanit', sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 24px;
+  color: ${({theme, color}) => color ? color : theme.colors.dark};
+
+  @media (min-width: ${({theme}) => theme.overMobile}) {
+    font-size: 32px;
+    line-height: 36px;
+  }
+`;
+
+const H3 = styled(Container)`
+  font-family: 'Kanit', sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 20px;
+  color: ${({theme, color}) => color ? color : theme.colors.dark};
+
+  @media (min-width: ${({theme}) => theme.overMobile}) {
+    font-size: 24px;
+    line-height: 26px;
+  }
+`;
+
+const Body = styled(Container)`
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 20px;
+  color: ${({theme, color}) => color ? color : theme.colors.dark};
+
+  @media (min-width: ${({theme}) => theme.overMobile}) {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+  }
+`;
+
+const Medium = styled(Container)`
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: ${({theme, color}) => color ? color : theme.colors.dark};
+
+  @media (min-width: ${({theme}) => theme.overMobile}) {
+    font-size: 16px;
+    line-height: 22px;
+    font-weight: 500;
+  }
+`;
+
+const Menu = styled(Container)`
+  font-family: 'Roboto', sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 400;
+  color: ${({theme, color}) => color ? color : theme.colors.dark};
+`;
+
+const Label = styled(Menu)`
+  font-weight: 300;
+`;
+
+export {H1, H2, H3, Body, Medium, Menu, Label};

src/utils/theme.js

@@ -0,0 +1,10 @@
+import colors from './colors';
+
+const theme = {
+    colors,
+    overMobile: '768px',
+    mobile: '(max-width: 768px)',
+    desktop: '(min-width: 769px)',
+};
+
+export default theme;