feat: drawer bg props thingy

package.json

@@ -47,7 +47,8 @@
     "echarts-stat": "^1.2.0",
     "lucide-svelte": "^0.469.0",
     "socket.io": "^4.8.1",
-    "socket.io-client": "^4.8.1"
+    "socket.io-client": "^4.8.1",
+    "tailwindcss-color-mix": "^0.0.9"
   },
   "prisma": {
     "seed": "bun ./prisma/seed.ts"

src/lib/components/Drawer.svelte

@@ -2,8 +2,10 @@
     let {
         children,
         displaying = $bindable(),
+        bg = "bg-eerie_black",
     }: {
         displaying: boolean
+        bg: String
     } = $props()
 </script>
 
@@ -18,7 +20,7 @@
     }}
 >
     <div
-        class="no-scrollbar absolute inset-x-0 bottom-0 flex max-h-[80svh] min-h-[40svh] w-dvw flex-col items-center gap-2 overflow-y-scroll rounded-t-lg bg-gunmetal p-2 text-white"
+        class="no-scrollbar absolute inset-x-0 bottom-0 flex max-h-[80svh] min-h-[40svh] w-dvw flex-col items-center gap-2 overflow-y-scroll rounded-t-lg {bg} p-2 text-white"
     >
         {#if children}
             {@render children()}

src/routes/match-scout/Timeline.svelte

@@ -7,10 +7,12 @@
         actions = $bindable(),
         displaying = $bindable(),
         furthest_auto_index = $bindable(),
+        bg = "bg-eerie_black",
     }: {
         actions: AutoActionData[] // TODO Action[]
         furthest_auto_index: number
         displaying: boolean
+        bg: String
     } = $props()
 
     /// Determine if currying is the right solution or if we should use a binding
@@ -27,7 +29,7 @@
     }
 </script>
 
-<Drawer bind:displaying>
+<Drawer bind:displaying {bg}>
     {#each actions as _, i}
         <Action
             action_data={actions[actions.length - i - 1]}

src/routes/match-scout/auto/+page.svelte

@@ -34,7 +34,9 @@
     )
 </script>
 
-<div class="flex min-h-dvh flex-col bg-steel_blue/5 accent-steel_blue">
+<div
+    class="flex min-h-dvh flex-col bg-eerie_black accent-steel_blue bg-mix-steel_blue bg-mix-amount-10"
+>
     <Header
         game_stage={"Auto"}
         team_name={1540}
@@ -79,6 +81,7 @@
         }}>Show Timeline</button
     >
     <Timeline
+        bg={"bg-eerie_black bg-mix-steel_blue bg-mix-amount-10"}
         bind:actions
         bind:displaying={displaying_timeline}
         bind:furthest_auto_index

src/routes/match-scout/tele/+page.svelte

@@ -41,7 +41,9 @@
     )
 </script>
 
-<div class="flex min-h-dvh flex-col bg-eminence/10 accent-eminence">
+<div
+    class="flex min-h-dvh flex-col bg-eerie_black accent-eminence bg-mix-eminence bg-mix-amount-10"
+>
     <Header
         game_stage={"Tele"}
         team_name={1540}
@@ -86,6 +88,7 @@
         }}>Show Timeline</button
     >
     <Timeline
+        bg={"bg-eerie_black bg-mix-amount-10 bg-mix-amount-10"}
         bind:actions
         bind:displaying={displaying_timeline}
         bind:furthest_auto_index

tailwind.config.ts

@@ -1,10 +1,12 @@
 import { fontFamily } from "tailwindcss/defaultTheme"
 import type { Config } from "tailwindcss"
+const colorMix = require("tailwindcss-color-mix")
 
 const config: Config = {
     darkMode: ["class"],
     content: ["./src/**/*.{html,js,svelte,ts}"],
     safelist: ["dark"],
+    plugins: [colorMix()],
     theme: {
         container: {
             center: true,