apply utils

This commit is contained in:
mattyl006 2022-07-05 11:23:31 +02:00
parent 3124a08bc7
commit e2b0f0473b
6 changed files with 155 additions and 6 deletions

View File

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

View File

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

7
src/utils/colors.js Normal file
View File

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

42
src/utils/containers.js Normal file
View File

@ -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};

83
src/utils/fonts.js Normal file
View File

@ -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};

10
src/utils/theme.js Normal file
View File

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