Add globals and resets

package.json

@@ -24,13 +24,15 @@
     "@testing-library/react": "^14.0.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/styled-components": "^5.1.29",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "eslint": "^8.45.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "styled-components": "^6.1.0",
     "husky": "^8.0.0",
     "jsdom": "^22.1.0",
     "lint-staged": "^15.0.2",

src/main.tsx

@@ -2,11 +2,17 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./components/App/App";
 import { BrowserRouter } from "react-router-dom";
+import { ThemeProvider } from "styled-components";
+import mainTheme from "./styles/mainTheme";
+import GlobalStyle from "./styles/GlobalStyles";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <ThemeProvider theme={mainTheme}>
+      <BrowserRouter>
+        <GlobalStyle />
+        <App />
+      </BrowserRouter>
+    </ThemeProvider>
   </React.StrictMode>,
 );

src/styles/GlobalStyles.ts

@@ -0,0 +1,40 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+  @import url("https://fonts.cdnfonts.com/css/new-super-mario-font-u");
+
+  *,
+  ::after,
+  ::before {
+    box-sizing: border-box;
+  }
+
+  h1,
+  h2,
+  body {
+    margin: 0;
+    padding:0;
+  }
+
+  button {
+    margin:0;
+    background-color: transparent;
+    padding: 0;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  body {
+    font-family: ${({ theme }) => theme.typography["main-font-family"]};
+    color: ${({ theme }) => theme.color["main-font"]};
+    background-color: ${({ theme }) => theme.color["main-background"]};
+    font-size: ${({ theme }) => theme.typography["properties-size"]};
+  }
+
+`;
+
+export default GlobalStyle;

src/styles/mainTheme.ts

@@ -0,0 +1,25 @@
+import { DefaultTheme } from "styled-components";
+
+const mainTheme: DefaultTheme = {
+  color: {
+    "container-background": "#fbd000",
+    "main-background": "#049cd8",
+    "error-background": "#e52521",
+    "successfull-background": "#43b047",
+    "main-font": "#000",
+    "secondary-font": "#fff",
+    "input-background": "#fff",
+  },
+
+  typography: {
+    "main-font-family": "Verdana, Geneva, Tahoma, sans-serif",
+    "secondary-font-family": "'New Super Mario Font U', sans-serif",
+    "properties-size": "1,1875rem",
+    "title-size": "2.5rem",
+    "header-size": "1.875rem",
+    "input-text-size": "1.125rem",
+    "input-title-size": "1.25rem",
+  },
+};
+
+export default mainTheme;

src/styles/styled.d.ts

@@ -0,0 +1,27 @@
+import "styled-components";
+
+declare module "styled-components" {
+  export interface DefaultTheme {
+    color: {
+      "container-background": string;
+      "main-background": string;
+      "error-background": string;
+      "successfull-background": string;
+      "main-font": string;
+      "secondary-font": string;
+      "input-background": string;
+    };
+
+    typography: {
+      "main-font-family": string;
+      "secondary-font-family": string;
+      "properties-size": string;
+      "title-size": string;
+      "header-size": string;
+      "input-title-size": string;
+      "input-text-size": string;
+      "title-size": string;
+      "header-size": string;
+    };
+  }
+}

vite.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
         "**/types.ts",
         "**/*.d.ts",
         "**/src/main.tsx",
+        "**/src/styles/*",
       ],
     },
   },