From 97083c48e174e6f67886163cc914b5cd969b6c27 Mon Sep 17 00:00:00 2001
From: Przemek <przemek.wiktorski@escola.pl>
Date: Tue, 13 Feb 2024 15:24:55 +0100
Subject: [PATCH] red theme reconfig

---
 src/components/atoms/Typography/Text.tsx      |  2 +-
 src/styleguide/ThemeCustomizer.tsx            |  2 +-
 src/theme/provider.tsx                        |  8 +++++++-
 src/theme/red.ts                              | 20 ++++++++++++-------
 src/utils/components/primitives/titleUtils.ts | 10 +++++-----
 5 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/components/atoms/Typography/Text.tsx b/src/components/atoms/Typography/Text.tsx
index 6ccdc9c2..8e6d0057 100644
--- a/src/components/atoms/Typography/Text.tsx
+++ b/src/components/atoms/Typography/Text.tsx
@@ -11,7 +11,7 @@ export interface TextProps
     ExtendableStyledComponent {
   noMargin?: boolean;
   bold?: boolean;
-  size?: "16" | "14" | "12";
+  size?: "16" | "14" | "13" | "12";
   type?: "primary" | "secondary" | "warning" | "danger";
   className?: string;
 }
diff --git a/src/styleguide/ThemeCustomizer.tsx b/src/styleguide/ThemeCustomizer.tsx
index f9a62253..15b48e05 100644
--- a/src/styleguide/ThemeCustomizer.tsx
+++ b/src/styleguide/ThemeCustomizer.tsx
@@ -110,7 +110,7 @@ export const ThemeCustomizer: React.FC<{
     Customize: folder(
       {
         font: {
-          options: ["Inter", "Mulish", "Titillium"],
+          options: ["Inter", "Mulish", "Titillium", "Lato"],
           value: initData.font || "Inter",
         },
         "Main Colors": folder({
diff --git a/src/theme/provider.tsx b/src/theme/provider.tsx
index 8134f843..6a2ce921 100644
--- a/src/theme/provider.tsx
+++ b/src/theme/provider.tsx
@@ -35,7 +35,7 @@ declare module "styled-components" {
     extends SharedDefaultTheme,
       Record<string, unknown> {
     mode?: "light" | "dark";
-    font: "Inter" | "Mulish" | "Titillium";
+    font: "Inter" | "Mulish" | "Titillium" | "Lato";
     radius?: number;
     textColor: string;
     dm__textColor: string;
@@ -89,6 +89,12 @@ export const Fonts: Record<
     ],
     fontFamily: "'Titillium Web', sans-serif;",
   },
+  Lato: {
+    links: [
+      "https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap",
+    ],
+    fontFamily: "'Lato', sans-serif;",
+  },
 };
 
 export const getFontFromTheme = (
diff --git a/src/theme/red.ts b/src/theme/red.ts
index df8267ea..1ad4943c 100644
--- a/src/theme/red.ts
+++ b/src/theme/red.ts
@@ -1,15 +1,21 @@
 import { DefaultTheme } from "styled-components";
-import { blend } from "chroma-js";
+// import { blend } from "chroma-js";
 import { sharedTheme } from "./shared";
 
 export const redTheme: DefaultTheme = {
   ...sharedTheme,
-  font: "Titillium",
-  primaryColor: "#E60037",
-  dm__primaryColor: "#E60037",
-
-  secondaryColor: blend("#E60037", "#BDBDBD", "multiply").hex(),
-  dm__secondaryColor: blend("#E60037", "#BDBDBD", "multiply").hex(),
+  buttonRadius: 5,
+  gray1: "#333333",
+  gray2: "#AFAFAF",
+  gray3: "#EAEAEA",
+  gray4: "#F8F8F8",
+  positive: "#2CBE69",
+  font: "Lato",
+  primaryColor: "#EE312F",
+  dm__primaryColor: "#EE312F",
+
+  secondaryColor: "#FFFF00",
+  dm__secondaryColor: "#FFFF00", // blend("#E60037", "#BDBDBD", "multiply").hex(),
 
   headerColor: "#111111",
 
diff --git a/src/utils/components/primitives/titleUtils.ts b/src/utils/components/primitives/titleUtils.ts
index df92047c..7f8d1ce7 100644
--- a/src/utils/components/primitives/titleUtils.ts
+++ b/src/utils/components/primitives/titleUtils.ts
@@ -6,14 +6,14 @@ export const setFontSizeByHeaderLevel = (
 ): string => {
   switch (level) {
     case 1:
-      return mobile ? "20px" : "50px";
+      return mobile ? "20px" : "30px";
     case 2:
-      return mobile ? "20px" : "40px";
+      return mobile ? "20px" : "24px";
     case 3:
-      return mobile ? "20px" : "36px";
+      return mobile ? "20px" : "18px";
     case 4:
-      return "20px";
-    default:
       return "16px";
+    default:
+      return "13px";
   }
 };