Refactor: move styles utils to theme (#363)

src/design-tokens/ResetStyles.tsx

@@ -1,17 +1,16 @@
 import { makeStyles } from '@material-ui/styles';
 import React from 'react';
 
-import { fontWeight } from '../utils/styles/sizes';
-import { breakpoints } from '../utils/styles/media';
+import { Theme } from './theme';
 
-const resetStyles = makeStyles(() => ({
+const resetStyles = makeStyles(({ theme }: { theme?: Theme }) => ({
   '@global': {
     // eslint-disable-next-line max-len
     'html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video': {
       fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif',
     },
     strong: {
-      fontWeight: fontWeight.semiBold,
+      fontWeight: theme && theme.fontWeight.semiBold,
     },
     'html, body, #root': {
       height: '100%',
@@ -25,8 +24,8 @@ const resetStyles = makeStyles(() => ({
       padding: 15,
       flex: 1,
 
-      [`@media screen and (min-width: ${breakpoints.container}px)`]: {
-        maxWidth: breakpoints.container,
+      [`@media screen and (min-width: ${theme && theme.breakPoints.container}px)`]: {
+        maxWidth: theme && theme.breakPoints.container,
         width: '100%',
         marginLeft: 'auto',
         marginRight: 'auto',

src/design-tokens/theme.ts

@@ -28,6 +28,44 @@ const colors = {
 
 export type Colors = keyof typeof colors;
 
+const fontSize = {
+  xxl: 26,
+  xl: 24,
+  lg: 21,
+  md: 18,
+  default: 16,
+  sm: 14,
+};
+
+export type FontSize = keyof typeof fontSize;
+
+const fontWeight = {
+  light: 300,
+  regular: 400,
+  semiBold: 500,
+  bold: 700,
+};
+
+export type FontWeight = keyof typeof fontWeight;
+
+export const breakPoints = {
+  small: 576,
+  medium: 768,
+  large: 1024,
+  container: 1240,
+  xlarge: 1275,
+};
+
+export type BreakPoints = typeof breakPoints;
+
+const customizedTheme = {
+  fontSize,
+  fontWeight,
+  breakPoints,
+};
+
+type CustomizedTheme = typeof customizedTheme;
+
 export const theme = createMuiTheme({
   typography: {
     fontFamily: 'inherit',
@@ -38,10 +76,18 @@ export const theme = createMuiTheme({
     secondary: { main: colors.secondary },
     error: { main: colors.red },
   },
+  ...customizedTheme,
 });
 
 export type Theme = typeof theme;
 
+declare module '@material-ui/core/styles/createMuiTheme' {
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface Theme extends CustomizedTheme {}
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface ThemeOptions extends CustomizedTheme {}
+}
+
 declare module '@material-ui/core/styles/createPalette' {
   interface CustomPalette {
     black: string;