From 12a94c7cb46f0aa8f9f93c0e4bf0c28fc9e85319 Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Fri, 15 Sep 2023 09:14:25 -0500
Subject: [PATCH] Add new colors and define green theme

---
 src/App.tsx    | 10 ++++++++--
 src/colors.tsx | 38 ++++++++++++++++++++++++++++++++++++++
 src/index.tsx  |  3 ++-
 src/theme.tsx  | 30 ++++++++++++++++++++++++++++--
 4 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 src/colors.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 987933d3..d1246e51 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,7 +12,7 @@ import {
   prefGlobal
 } from "./preferences";
 import { store } from "./store";
-import { theme } from "./theme";
+import { greenTheme, grayscaleTheme } from "./theme";
 
 import "../style/index.css";
 
@@ -78,7 +78,13 @@ export class App<
   render(): React.ReactNode {
     return (
       <PrefContext.Provider value={this.state.pref}>
-        <ThemeProvider theme={theme}>
+        <ThemeProvider
+          theme={
+            this.state.pref.styleType === "grayscale"
+              ? grayscaleTheme
+              : greenTheme
+          }
+        >
           <Provider store={store}>
             <AppRouter />
           </Provider>
diff --git a/src/colors.tsx b/src/colors.tsx
new file mode 100644
index 00000000..d0a9957f
--- /dev/null
+++ b/src/colors.tsx
@@ -0,0 +1,38 @@
+export const green = {
+  50: "#D6EEDC",
+  100: "#ADDCBA",
+  200: "#85CB97",
+  300: "#5CB975",
+  400: "#36AB55",
+  500: "#298642",
+  600: "#206532",
+  700: "#144321",
+  800: "#0A2210",
+  900: "#051108"
+};
+
+export const gray = {
+  50: "#F7F8F8",
+  100: "#E1E3E4",
+  200: "#C3C7CB",
+  300: "#A6ACB2",
+  400: "#90969C",
+  500: "#5B5F63",
+  600: "#44474A",
+  700: "#3C3C3B",
+  800: "#242628",
+  900: "#1A1C1D"
+};
+
+export const purple = {
+  50: "#E7E0F0",
+  100: "#D0C0E5",
+  200: "#B9A1DA",
+  300: "#A78BD0",
+  400: "#8966C2",
+  500: "#6643A8",
+  600: "#55309D",
+  700: "#3B216E",
+  800: "#2F1957",
+  900: "#231240"
+};
diff --git a/src/index.tsx b/src/index.tsx
index 6d5d9c40..809391f1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,5 @@
 export * from "./App";
 export { IPreferences } from "./preferences";
 export { store } from "./store";
-export { theme, themeDecorator } from "./theme";
+export { grayscaleTheme, greenTheme, themeDecorator } from "./theme";
+export * from "./colors";
diff --git a/src/theme.tsx b/src/theme.tsx
index fb2dca9b..2711e80b 100644
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -1,7 +1,9 @@
 import { createTheme, ThemeProvider } from "@mui/material";
 import React from "react";
 
-export const theme = createTheme({
+import { green, purple, gray } from "./colors";
+
+export const grayscaleTheme = createTheme({
   typography: {
     fontFamily: '"Inter", sans-serif'
   },
@@ -15,6 +17,30 @@ export const theme = createTheme({
   }
 });
 
+export const greenTheme = createTheme({
+  typography: {
+    fontFamily: '"Inter", sans-serif'
+  },
+  palette: {
+    primary: {
+      light: green[100],
+      main: green[400],
+      dark: green[600]
+    },
+    secondary: {
+      light: gray[100],
+      main: gray[400],
+      dark: gray[600]
+    },
+    warning: {
+      light: purple[100],
+      main: purple[400],
+      dark: purple[600]
+    },
+    mode: "light"
+  }
+});
+
 export const themeDecorator = (func: any) => (
-  <ThemeProvider theme={theme}>{func()}</ThemeProvider>
+  <ThemeProvider theme={greenTheme}>{func()}</ThemeProvider>
 );