diff --git a/src/styles/GlobalStyles.ts b/src/styles/GlobalStyles.ts index be845ce..c69f8b2 100644 --- a/src/styles/GlobalStyles.ts +++ b/src/styles/GlobalStyles.ts @@ -3,34 +3,37 @@ import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` *, ::after, - ::before{ + ::before { box-sizing: border-box; } - h1,h2,body{ + h1, + h2, + body { margin: 0; padding:0; } - button{ + button { margin:0; background-color: transparent; padding: 0; } - ul{ + ul { list-style: none; padding: 0; margin: 0; } - body{ - font-family: ${({ theme }) => theme.typography["main-font-fammily"]}; + body { + font-family: ${({ theme }) => theme.typography["main-font-family"]}; color: ${({ theme }) => theme.color.font}; - background-color: ${({ theme }) => theme.color.main}; - + background-color: ${({ theme }) => theme.color["main-background"]}; + font-size: ${({ theme }) => theme.typography.size}; } + `; export default GlobalStyle; diff --git a/src/styles/mainTheme.ts b/src/styles/mainTheme.ts index 551a3d7..2ea02aa 100644 --- a/src/styles/mainTheme.ts +++ b/src/styles/mainTheme.ts @@ -2,16 +2,17 @@ import { DefaultTheme } from "styled-components"; const mainTheme: DefaultTheme = { color: { - main: "#fbd000", - secondary: "#049cd8", + "container-background": "#fbd000", + "main-background": "#049cd8", "error-background": "#e52521", "check-background": "#43b047", font: "#fff", "secondary-font": "#000", }, typography: { - "main-font-fammily": "Verdana, Geneva, Tahoma, sans-serif", + "main-font-family": "Verdana, Geneva, Tahoma, sans-serif", "secondary-font-family": "'New Super Mario Font U', sans-serif", + size: "1,1875rem", }, }; diff --git a/src/styles/styled.d.ts b/src/styles/styled.d.ts index 4151cf8..ffa404a 100644 --- a/src/styles/styled.d.ts +++ b/src/styles/styled.d.ts @@ -3,8 +3,8 @@ import "styled-components"; declare module "styled-components" { export interface DefaultTheme { color: { - main: string; - secondary: string; + "container-background": "#fbd000"; + "main-background": "#049cd8"; "error-background": string; "check-background": string; font: string; @@ -12,8 +12,9 @@ declare module "styled-components" { }; typography: { - "main-font-fammily": string; + "main-font-family": string; "secondary-font-family": string; + size: string; }; } }