From 2b78c04fea9daf72dff7bb7d06d77b96c98d4e83 Mon Sep 17 00:00:00 2001
From: PadjokeJ <jonatan@padjokej.dev>
Date: Tue, 31 Mar 2026 16:04:59 +0200
Subject: [PATCH 1/6] feat: fetch color from directus

---
 src/app/[eventSlug]/layout.tsx | 31 +++++++++++++++++++++++++++++++
 src/styles/base/_colors.scss   |  5 +++--
 2 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 src/app/[eventSlug]/layout.tsx

diff --git a/src/app/[eventSlug]/layout.tsx b/src/app/[eventSlug]/layout.tsx
new file mode 100644
index 0000000..d10438a
--- /dev/null
+++ b/src/app/[eventSlug]/layout.tsx
@@ -0,0 +1,31 @@
+import '@styles/style.scss';
+import { directus } from '@/directus';
+import { Event } from '@/types/aliases';
+import { readItems } from '@directus/sdk';
+
+export default async function EventLayout({ children, params: { eventSlug } }: { children: React.ReactNode, params: { eventSlug: string } }) {
+  let event: Event = (
+    await directus().request(
+      readItems('events', {
+        fields: [
+          // Explicit list to avoid leaking the admin secret
+          'background_color'
+        ],
+        filter: {
+          slug: eventSlug,
+        },
+      })
+    )
+  )[0];
+
+  let col = event.background_color;
+
+  return (
+    <>
+      <style>
+        {`:root { --bg-color: ${col}; };`}
+      </style>
+      <div>{children}</div>
+    </>
+  );
+}
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index 6a0831d..36027b8 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -1,10 +1,11 @@
 @use 'sass:color';
 
 :root {
-  $base: #d65d00;
+  --bg-color: #d65d00;
 
+  $base: #d65d00;
+  // TODO: change this to base css functions
   --text-color: #{color.scale($base, $lightness: 80%)};
-  --bg-color: #{$base};
 
   --button-text-color: #{color.scale($base, $lightness: -50%)};
   --button-bg-color: #{color.scale($base, $lightness: 70%)};

From 27613384ec6a515d9a24a5fb6c75cfb45eadee3b Mon Sep 17 00:00:00 2001
From: PadjokeJ <jonatan@padjokej.dev>
Date: Tue, 31 Mar 2026 16:33:27 +0200
Subject: [PATCH 2/6] feat: migrate scss functions to css equivalents

---
 src/styles/base/_colors.scss | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index 36027b8..1b448d7 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -2,17 +2,28 @@
 
 :root {
   --bg-color: #d65d00;
+  --white: #ffffff;
+  --black: #000000;
+  --transparent-black: rgba(0, 0, 0, 0.7);
 
   $base: #d65d00;
   // TODO: change this to base css functions
-  --text-color: #{color.scale($base, $lightness: 80%)};
 
-  --button-text-color: #{color.scale($base, $lightness: -50%)};
-  --button-bg-color: #{color.scale($base, $lightness: 70%)};
-  --button-bg-color-hover: #{color.scale($base, $lightness: 60%)};
+  --text-color: color-mix(in hsl, var(--bg-color) 20%, var(--white) 100%);
+  //--text-color: #{color.scale($base, $lightness: 80%)};
+
+  --button-text-color: color-mix(in hsl, var(--bg-color) 20%, var(--black) 60%);
+  //--button-text-color: #{color.scale($base, $lightness: -50%)};
+
+  --button-bg-color: color-mix(in hsl, var(--bg-color) 20%, var(--white) 70%);
+  //--button-bg-color: #{color.scale($base, $lightness: 70%)};
+  
+  --button-bg-color-hover: color-mix(in hsl, var(--bg-color) 20%, var(--white) 60%);
+  //--button-bg-color-hover: #{color.scale($base, $lightness: 60%)};
 
   --transparent-white: rgba(255, 255, 255, 0.1);
   --transparent-white-2: rgba(255, 255, 255, 0.2);
 
-  --transparent-dark: #{color.scale($base, $lightness: -15%, $alpha: -30%)};
+  --transparent-dark: color-mix(in hsl, var(--bg-color) 20%, var(--transparent-black) 60%);
+  //--transparent-dark: #{color.scale($base, $lightness: -15%, $alpha: -30%)};
 }

From d045733981cd88ae636140ac638a1ed2dbfb0b78 Mon Sep 17 00:00:00 2001
From: PadjokeJ <jonatan@padjokej.dev>
Date: Tue, 31 Mar 2026 17:06:52 +0200
Subject: [PATCH 3/6] fix: use same syntax as page.tsx for layout.tsx'
 eventSlug getter

---
 src/app/[eventSlug]/layout.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/[eventSlug]/layout.tsx b/src/app/[eventSlug]/layout.tsx
index d10438a..8e04e69 100644
--- a/src/app/[eventSlug]/layout.tsx
+++ b/src/app/[eventSlug]/layout.tsx
@@ -12,6 +12,7 @@ export default async function EventLayout({ children, params: { eventSlug } }: {
           'background_color'
         ],
         filter: {
+          // @ts-expect-error
           slug: eventSlug,
         },
       })

From 6a0be2a425100a8b70f24191850f066d592bc4d3 Mon Sep 17 00:00:00 2001
From: PadjokeJ <jonatan@padjokej.dev>
Date: Tue, 31 Mar 2026 17:26:54 +0200
Subject: [PATCH 4/6] fix: use type any instead of ts-expect-error

---
 src/app/[eventSlug]/layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/[eventSlug]/layout.tsx b/src/app/[eventSlug]/layout.tsx
index 8e04e69..7b6dce7 100644
--- a/src/app/[eventSlug]/layout.tsx
+++ b/src/app/[eventSlug]/layout.tsx
@@ -3,7 +3,8 @@ import { directus } from '@/directus';
 import { Event } from '@/types/aliases';
 import { readItems } from '@directus/sdk';
 
-export default async function EventLayout({ children, params: { eventSlug } }: { children: React.ReactNode, params: { eventSlug: string } }) {
+export default async function EventLayout({ children, params }: { children: React.ReactNode, params: any}) {
+  let eventSlug = params.eventSlug;
   let event: Event = (
     await directus().request(
       readItems('events', {
@@ -12,7 +13,6 @@ export default async function EventLayout({ children, params: { eventSlug } }: {
           'background_color'
         ],
         filter: {
-          // @ts-expect-error
           slug: eventSlug,
         },
       })

From eab64e6242a9130ec580127f411dcb32b6750eb0 Mon Sep 17 00:00:00 2001
From: PadjokeJ <jonatan@padjokej.dev>
Date: Thu, 2 Apr 2026 11:19:18 +0200
Subject: [PATCH 5/6] fix: from type any to type string

---
 src/app/[eventSlug]/layout.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/[eventSlug]/layout.tsx b/src/app/[eventSlug]/layout.tsx
index 7b6dce7..d5b2a47 100644
--- a/src/app/[eventSlug]/layout.tsx
+++ b/src/app/[eventSlug]/layout.tsx
@@ -3,8 +3,7 @@ import { directus } from '@/directus';
 import { Event } from '@/types/aliases';
 import { readItems } from '@directus/sdk';
 
-export default async function EventLayout({ children, params }: { children: React.ReactNode, params: any}) {
-  let eventSlug = params.eventSlug;
+export default async function EventLayout({ children, params: { eventSlug } }: { children: React.ReactNode, params: { eventSlug: string } }) {
   let event: Event = (
     await directus().request(
       readItems('events', {
@@ -13,7 +12,7 @@ export default async function EventLayout({ children, params }: { children: Reac
           'background_color'
         ],
         filter: {
-          slug: eventSlug,
+          slug: { _eq: eventSlug },
         },
       })
     )

From e6dae01c1c170440b45743ca61a7842d117960a9 Mon Sep 17 00:00:00 2001
From: PadjokeJ <jonatan@padjokej.dev>
Date: Thu, 2 Apr 2026 16:36:24 +0200
Subject: [PATCH 6/6] fix: reorder and remove code comments from _colors.scss

---
 src/styles/base/_colors.scss | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index 1b448d7..812d55a 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -5,25 +5,14 @@
   --white: #ffffff;
   --black: #000000;
   --transparent-black: rgba(0, 0, 0, 0.7);
-
-  $base: #d65d00;
-  // TODO: change this to base css functions
+  --transparent-white: rgba(255, 255, 255, 0.1);
+  --transparent-white-2: rgba(255, 255, 255, 0.2);
 
   --text-color: color-mix(in hsl, var(--bg-color) 20%, var(--white) 100%);
-  //--text-color: #{color.scale($base, $lightness: 80%)};
 
   --button-text-color: color-mix(in hsl, var(--bg-color) 20%, var(--black) 60%);
-  //--button-text-color: #{color.scale($base, $lightness: -50%)};
-
   --button-bg-color: color-mix(in hsl, var(--bg-color) 20%, var(--white) 70%);
-  //--button-bg-color: #{color.scale($base, $lightness: 70%)};
-  
   --button-bg-color-hover: color-mix(in hsl, var(--bg-color) 20%, var(--white) 60%);
-  //--button-bg-color-hover: #{color.scale($base, $lightness: 60%)};
-
-  --transparent-white: rgba(255, 255, 255, 0.1);
-  --transparent-white-2: rgba(255, 255, 255, 0.2);
-
+  
   --transparent-dark: color-mix(in hsl, var(--bg-color) 20%, var(--transparent-black) 60%);
-  //--transparent-dark: #{color.scale($base, $lightness: -15%, $alpha: -30%)};
 }