From 46c835f07bf38afef2dfb71f1eb053ef2fce8096 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Wed, 6 Dec 2023 10:48:28 +0100
Subject: [PATCH] Define basic color palette

---
 dapp/src/theme/Button.ts       |  8 +++--
 dapp/src/theme/index.ts        |  5 +--
 dapp/src/theme/utils/colors.ts | 62 ++++++++++++++++++++++++++++------
 3 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts
index ac143f407..8ced1b54b 100644
--- a/dapp/src/theme/Button.ts
+++ b/dapp/src/theme/Button.ts
@@ -7,12 +7,14 @@ const Button = {
   },
   variants: {
     solid: (props: StyleFunctionProps) => ({
-      backgroundColor: mode("black", "purple")(props),
+      // TODO: Update when the dark theme is ready
+      backgroundColor: mode("brand.400", "brand.400")(props),
       color: "white",
     }),
     outline: (props: StyleFunctionProps) => ({
-      color: mode("black", "grey.80")(props),
-      borderColor: mode("black", "grey.50")(props),
+      // TODO: Update when the dark theme is ready
+      color: mode("grey.700", "grey.700")(props),
+      borderColor: mode("grey.700", "grey.700")(props),
     }),
   },
 }
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
index 980c42838..edb8ed54b 100644
--- a/dapp/src/theme/index.ts
+++ b/dapp/src/theme/index.ts
@@ -8,8 +8,9 @@ const defaultTheme = {
   styles: {
     global: (props: StyleFunctionProps) => ({
       body: {
-        backgroundColor: mode("lightGrey", "darkGrey")(props),
-        color: mode("black", "grey.80")(props),
+        // TODO: Update when the dark theme is ready
+        backgroundColor: mode("gold.100", "gold.100")(props),
+        color: mode("grey.700", "grey.700")(props),
       },
     }),
   },
diff --git a/dapp/src/theme/utils/colors.ts b/dapp/src/theme/utils/colors.ts
index 5ea1f1720..275ae9224 100644
--- a/dapp/src/theme/utils/colors.ts
+++ b/dapp/src/theme/utils/colors.ts
@@ -1,14 +1,56 @@
-// TODO: Currently, the correct colors have not yet been defined.
-// Let's update them later.
 export const colors = {
-  white: "#FFF",
-  black: "#000",
-  purple: "#7D00FF",
-  error: "#F00",
+  brand: {
+    100: "#FFEDEB",
+    200: "#FFC5BF",
+    300: "#FF8B7B",
+    400: "#F34900", // Acre Orange
+    500: "#B53400",
+    600: "#7A2000",
+    700: "#450E00",
+  },
+  gold: {
+    100: "#F3E5C1", // Acre Dust
+    200: "#EDD8A2",
+    300: "#EACF88",
+    400: "#E2B950",
+    500: "#D69B04", // Acre Wheat
+    600: "#D29100",
+    700: "#BE7D00",
+  },
+  green: {
+    100: "#91FF74",
+    200: "#56D803",
+    300: "#43AD02", // Acre Grass
+    400: "#318401",
+    500: "#205C01",
+    600: "#103800",
+    700: "#041600",
+  },
+  blue: {
+    100: "#EEF0FF",
+    200: "#CDD4FE",
+    300: "#9AAAFD",
+    400: "#5E80FC",
+    500: "#1059E6", // Acre Aqua
+    600: "#073B9E",
+    700: "#073B9E",
+  },
+  red: {
+    100: "#FDDADA",
+    200: "#FAA3A4",
+    300: "#F86165",
+    400: "#DA1E28",
+    500: "#9A1219",
+    600: "#5F070B",
+    700: "#2B0102",
+  },
   grey: {
-    50: "rgba(255, 255, 255, 0.50)",
-    80: "rgba(255, 255, 255, 0.80)",
+    100: "#F1F0F1",
+    200: "#D3D0D1",
+    300: "#AFA8A9",
+    400: "#8D8184",
+    500: "#675E60",
+    600: "#443D3F",
+    700: "#231F20", // Acre Dirt
   },
-  lightGrey: "#ECECEC",
-  darkGrey: "#1A1B1D",
 }