red theme reconfig

EscolaLMS · Feb 13, 2024 · 97083c4 · 97083c4
1 parent 8edbb37
commit 97083c4
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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";
   }
 };