From 540a76a58b7000e0c8776570ceb4a1a1945afa8a Mon Sep 17 00:00:00 2001
From: Mads Hermansen <119772939+madshermansen@users.noreply.github.com>
Date: Mon, 26 Feb 2024 15:46:22 +0100
Subject: [PATCH] =?UTF-8?q?style(frontend):=20:art:=20Setup=20Color=20Conf?=
 =?UTF-8?q?ig=20in=20Tailwind=20+=20example=20on=20ho=E2=80=A6=20(#110)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style(frontend): :art: Setup Color Config in Tailwind + example on homepage

* refactor(ide): :art: Prettier Write

* refactor(ide): :art: Remove duplicate lines

* refactor:
---
 frontend/src/app/globals.css | 23 ++++++++++++++---------
 frontend/src/app/page.tsx    |  4 ++--
 frontend/tailwind.config.ts  | 24 ++++++++++++++----------
 3 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 212fcbc..f0afa48 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -4,27 +4,18 @@
 
 @layer base {
     :root {
-        --background: 0 0% 100%;
-        --foreground: 222.2 84% 4.9%;
-
         --card: 0 0% 100%;
         --card-foreground: 222.2 84% 4.9%;
 
         --popover: 0 0% 100%;
         --popover-foreground: 222.2 84% 4.9%;
 
-        --primary: 222.2 47.4% 11.2%;
-        --primary-foreground: 210 40% 98%;
-
         --secondary: 210 40% 96.1%;
         --secondary-foreground: 222.2 47.4% 11.2%;
 
         --muted: 210 40% 96.1%;
         --muted-foreground: 215.4 16.3% 46.9%;
 
-        --accent: 210 40% 96.1%;
-        --accent-foreground: 222.2 47.4% 11.2%;
-
         --destructive: 0 84.2% 60.2%;
         --destructive-foreground: 210 40% 98%;
 
@@ -33,6 +24,20 @@
         --ring: 222.2 84% 4.9%;
 
         --radius: 0.5rem;
+
+        /* NTNU colors */
+        --background: 150, 7%, 6%; /* 0E100F */
+        --foreground: 0, 0%, 100%; /* FFFFFF */
+        --accent: 182, 41%, 71%; /* 97D2D4 */
+        --primary: 210, 100%, 31%; /* 00509E */
+        --ntnuBlue: 210, 100%, 31%; /* 00509E */
+        --ntnuCyan: 182, 41%, 71%; /* 97D2D4 */
+        --ntnuPurple: 271, 23%, 50%; /* 7F619C */
+        --ntnuOrange: 29, 87%, 68%; /* F4AC67 */
+        --ntnuYellow: 251, 223, 123; /* FBDF7B */
+        --ntnuLightblue: 47, 94%, 73%; /* 9DB7E1 */
+        --ntnuPink: 319, 44%, 61%; /* C871AC */
+        --ntnuBrown: 40, 44%, 78%; /* E0D0AF */
     }
 
     .dark {
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 3fb1b7d..dcb69d4 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -23,7 +23,7 @@ export default function Home() {
                 id="about-us"
                 className="flex flex-col items-center py-12 px-8"
             >
-                <div className="flex flex-col items-center text-center prose dark:prose-invert prose-img:rounded-xl">
+                <div className="flex flex-col items-center text-center prose dark:prose-invert prose-img:rounded-xl bg-ntnuBlue">
                     <h1>
                         Empowering Space Exploration One Satellite at a Time
                     </h1>
@@ -36,7 +36,7 @@ export default function Home() {
                             layout="fill"
                         />
                     </div>
-                    <div className="flex flex-col gap-4 items-center col-span-2 lg:col-span-2">
+                    <div className="flex flex-col gap-4 items-center col-span-2 lg:col-span-2 ">
                         <div className=" self-center">
                             <p>
                                 NTNU Small Satellite Lab is an initiative to
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index e23919a..ebbf33e 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -22,12 +22,6 @@ const config = {
                 border: "hsl(var(--border))",
                 input: "hsl(var(--input))",
                 ring: "hsl(var(--ring))",
-                background: "hsl(var(--background))",
-                foreground: "hsl(var(--foreground))",
-                primary: {
-                    DEFAULT: "hsl(var(--primary))",
-                    foreground: "hsl(var(--primary-foreground))",
-                },
                 secondary: {
                     DEFAULT: "hsl(var(--secondary))",
                     foreground: "hsl(var(--secondary-foreground))",
@@ -40,10 +34,6 @@ const config = {
                     DEFAULT: "hsl(var(--muted))",
                     foreground: "hsl(var(--muted-foreground))",
                 },
-                accent: {
-                    DEFAULT: "hsl(var(--accent))",
-                    foreground: "hsl(var(--accent-foreground))",
-                },
                 popover: {
                     DEFAULT: "hsl(var(--popover))",
                     foreground: "hsl(var(--popover-foreground))",
@@ -52,6 +42,20 @@ const config = {
                     DEFAULT: "hsl(var(--card))",
                     foreground: "hsl(var(--card-foreground))",
                 },
+
+                // Small Satellite Lab Hypso colors
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: "hsl(var(--ntnuBlue))",
+                accent: "hsl(var(--accent))",
+                ntnuBlue: "hsl(var(--ntnuBlue))",
+                ntnuCyan: "hsl(var(--ntnuCyan))",
+                ntnuPurple: "hsl(var(--ntnuPurple))",
+                ntnuOrange: "hsl(var(--ntnuOrange))",
+                ntnuYellow: "hsl(var(--ntnuYellow))",
+                ntnuLightblue: "hsl(var(--ntnuLightblue))",
+                ntnuPink: "hsl(var(--ntnuPink))",
+                ntnuBrown: "hsl(var(--ntnuBrown))",
             },
             borderRadius: {
                 lg: "var(--radius)",