style(frontend): 🎨 Setup Color Config in Tailwind + example on ho… (#…

…110) * style(frontend): 🎨 Setup Color Config in Tailwind + example on homepage * refactor(ide): 🎨 Prettier Write * refactor(ide): 🎨 Remove duplicate lines * refactor:
NTNU-SmallSatLab · Feb 26, 2024 · 540a76a · 540a76a
1 parent 2353f33
commit 540a76a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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)",