Remove max-widths, use theme breakpoints module for consistency

src/theme/breakpoints.ts

@@ -1,11 +1,14 @@
-const breakpointsNumber = {
-  mobile: 800
+type Keys = "mobile" | "medium" | "large" | "xlarge";
+
+const breakpointsNumber: Record<Keys, number> = {
+  mobile: 800,
+  medium: 1200,
+  large: 1920,
+  xlarge: 2560
 }
 
-const breakpoints = {};
+const breakpoints = Object.fromEntries(
+  Object.entries(breakpointsNumber).map(([k, v]) => [k, `${v}px`])
+);
 
-Object.keys(breakpointsNumber).forEach((key) => {
-  breakpoints[key] = `${breakpointsNumber[key]  }px`
-});
-
-export default breakpoints;
+export default breakpoints as Record<Keys, string>;

src/theme/colors.ts

@@ -54,3 +54,5 @@ export const colorToClass = (color: Colors): string => color ? `color-div__${col
 export const bgColorToClass = (color: Colors): string => color ? `color-div__background_${color}` : undefined;
 export const hoverColorToClass = (color: Colors): string => color ? `color-div__${color}Hoverable` : undefined;
 export const bgHoverColorToClass = (color: Colors): string => color ? `color-div__background_${color}Hoverable` : undefined;
+
+export default colors;