import styled from 'styled-components'
export type Size = 'SM' | 'MD' | 'LG' | 'XL' | 'XXL'
export const SIZES = {
SM: 'SM',
MD: 'MD',
LG: 'LG',
XL: 'XL',
XXL: 'XXL',
}
export const BREAKPOINTS = {
[SIZES.SM]: '@media (max-width: 480px)',
[SIZES.MD]: '@media (max-width: 768px)',
[SIZES.LG]: '@media (max-width: 992px)',
[SIZES.XL]: '@media (max-width: 1280px)',
[SIZES.XXL]: '@media (max-width: 1536px)',
}
export const COLORS = {
BLACK: {
100: '#202020',
200: '#595959',
300: '#989898',
400: '#F0F0F0',
},
CORAL: {
100: '#FF7F71',
200: '#FF9B8F',
},
GREEN: {
100: '#355F66',
200: '#88BBBC',
300: '#CFE1E1',
},
GRAY: '#F7F7F7',
WHITE: '#FFFFFF',
}
const textStyling = (
fontWeight: number,
fontSize: string,
lineHeight: string,
smFontSize?: string,
smLineHeight?: string
) => {
return `
font-family: Inter;
font-weight: ${fontWeight};
font-size: ${fontSize};
line-height: ${lineHeight};
margin: 0;
${BREAKPOINTS.SM} {
${smFontSize ? `font-size: ${smFontSize};` : ''}
${smLineHeight ? `line-height: ${smLineHeight};` : ''}
}
`
}
export const FONTS = {
H1: styled.h1`
${textStyling(500, '33px', '40px')}
`,
H2: styled.h2`
${textStyling(600, '23px', '28px', '28px', '34px')}
`,
H3: styled.h3`
${textStyling(500, '19px', '23px', '23px', '28px')}
`,
H4: styled.h4`
${textStyling(500, '16px', '19px', '19px', '23px')}
`,
H5: styled.h5`
${textStyling(400, '14px', '17px', '16px', '19px')}
`,
H6: styled.h6`
${textStyling(400, '12px', '15px', '14px', '17px')}
`,
}
export const SPACING = {
0: '0px',
px: '1px',
1: '4px',
2: '8px',
3: '12px',
4: '16px',
5: '20px',
6: '24px',
7: '28px',
8: '32px',
9: '36px',
10: '40px',
12: '48px',
14: '56px',
16: '64px',
20: '80px',
24: '96px',
28: '112px',
32: '128px',
36: '144px',
40: '160px',
44: '176px',
48: '192px',
52: '208px',
56: '224px',
60: '240px',
64: '256px',
72: '288px',
80: '320px',
96: '384px',
}