diff --git a/src/App.tsx b/src/App.tsx index 14121b64..11a1f039 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,8 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { BrowserRouter } from "react-router-dom"; +import "./sass/index.scss"; + import MainRouter from "./routes/MainRouter/MainRouter"; const queryClient = new QueryClient(); diff --git a/src/main.tsx b/src/main.tsx index 408e0573..62181ec4 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,10 +3,8 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { RecoilRoot } from "recoil"; -import "./sass/index.scss"; -import { customTheme } from "./sass/chakraCustomTheme.tsx"; - import App from "./App.tsx"; +import { customTheme } from "./sass/chakraCustomTheme.tsx"; async function enableMocking() { if (import.meta.env.MODE !== "development") { diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss index e987a5cc..5ff3cea8 100644 --- a/src/sass/abstracts/_variables.scss +++ b/src/sass/abstracts/_variables.scss @@ -69,18 +69,18 @@ $typography-font-size-map: ( ); $typography-font-weight-map: ( - "headline": bold, - "titleLarge": bold, - "titleMedium": bold, - "titleSmall": bold, - "subTitle": medium, - "bodyLarge": normal, - "bodySmall": normal, - "button": bold, - "tabLabel": medium, - "captionLarge": medium, - "captionMidium": bold, - "captionSmall": medium, + "headline": 700, + "titleLarge": 700, + "titleMedium": 700, + "titleSmall": 700, + "subTitle": 500, + "bodyLarge": 400, + "bodySmall": 400, + "button": 700, + "tabLabel": 500, + "captionLarge": 500, + "captionMidium": 700, + "captionSmall": 500, ); $typography-line-height-map: ( diff --git a/src/sass/chakraCustomTheme.tsx b/src/sass/chakraCustomTheme.tsx index 22f31d7d..14c408a1 100644 --- a/src/sass/chakraCustomTheme.tsx +++ b/src/sass/chakraCustomTheme.tsx @@ -1,6 +1,10 @@ import { extendTheme } from "@chakra-ui/react"; export const customTheme = extendTheme({ + fonts: { + heading: `'suit', sans-serif`, + body: `'suit', sans-serif`, + }, colors: { primary: { 100: "#d4e8ff", @@ -77,18 +81,18 @@ export const customTheme = extendTheme({ //$typography-font-weight-map fontWeights: { - headline: "bold", - titleLarge: "bold", - titleMedium: "bold", - titleSmall: "bold", - subTitle: "medium", - bodyLarge: "normal", - bodySmall: "normal", - button: "bold", - tabLabel: "medium", - captionLarge: "medium", - captionMedium: "bold", - captionSmall: "medium", + headline: "700", + titleLarge: "700", + titleMedium: "700", + titleSmall: "700", + subTitle: "500", + bodyLarge: "400", + bodySmall: "400", + button: "700", + tabLabel: "500", + captionLarge: "500", + captionMedium: "700", + captionSmall: "500", }, //$typography-line-height-map