Add globals and resets

package.json

@@ -14,7 +14,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.2.0",
@@ -23,6 +24,7 @@
     "@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",

src/main.tsx

@@ -1,8 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { ThemeProvider } from "styled-components";
+import mainTheme from "./styles/mainTheme";
+import GlobalStyle from "./styles/GlobalStyles";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <div />
-  </React.StrictMode>
+    <ThemeProvider theme={mainTheme}>
+      <GlobalStyle />
+      <div />
+    </ThemeProvider>
+  </React.StrictMode>,
 );

src/styles/GlobalStyles.ts

@@ -0,0 +1,36 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+  *,
+  ::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-fammily"]};
+    color: ${({ theme }) => theme.color.font};
+    background-color: ${({ theme }) => theme.color.main};
+    
+  }
+
+`;
+
+export default GlobalStyle;

src/styles/mainTheme.ts

@@ -0,0 +1,18 @@
+import { DefaultTheme } from "styled-components";
+
+const mainTheme: DefaultTheme = {
+  color: {
+    main: "#fbd000",
+    secondary: "#049cd8",
+    "error-background": "#e52521",
+    "check-background": "#43b047",
+    font: "#fff",
+    "secondary-font": "#000",
+  },
+  typography: {
+    "main-font-fammily": "Verdana, Geneva, Tahoma, sans-serif",
+    "secondary-font-family": "'New Super Mario Font U', sans-serif",
+  },
+};
+
+export default mainTheme;

src/styles/styled.d.ts

@@ -0,0 +1,19 @@
+import "styled-components";
+
+declare module "styled-components" {
+  export interface DefaultTheme {
+    color: {
+      main: string;
+      secondary: string;
+      "error-background": string;
+      "check-background": string;
+      font: string;
+      "secondary-font": string;
+    };
+
+    typography: {
+      "main-font-fammily": string;
+      "secondary-font-family": string;
+    };
+  }
+}