From be983f5e703b5a1777d1f340a188ed7439b468d4 Mon Sep 17 00:00:00 2001
From: awwpotato <awwpotato@voidq.com>
Date: Thu, 14 Nov 2024 10:59:09 -0800
Subject: [PATCH] feat: update colorsceme

---
 src/lib/components/Action.svelte      |  6 ++--
 src/lib/components/SuccessFail.svelte |  8 ++---
 src/routes/+layout.svelte             |  2 +-
 src/routes/+page.svelte               |  7 +++--
 src/routes/scout/+page.svelte         |  6 ++--
 src/routes/scout/ActionInputs.svelte  | 42 +++++++++++++--------------
 tailwind.config.js                    | 19 ++++++------
 7 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/lib/components/Action.svelte b/src/lib/components/Action.svelte
index 1a5a1be..781559d 100644
--- a/src/lib/components/Action.svelte
+++ b/src/lib/components/Action.svelte
@@ -7,7 +7,9 @@
 	}: { action_data: AutoActionData; deleteself: () => void } = $props();
 
 	//let actionBorderColor = $derived(action.success ? 'border-cresc_green' : 'border-fail_red');
-	let actionBackgroundColor = $derived(action_data.success ? 'bg-cresc_green' : 'bg-fail_red');
+	let actionBackgroundColor = $derived(
+		action_data.success ? 'bg-jungle_green' : 'bg-flaming_red'
+	);
 </script>
 
 <!-- <button -->
@@ -18,7 +20,7 @@
 <!-- </button> -->
 
 <button
-	class="{actionBackgroundColor} w-full p-1 rounded border-2 border-outline_gray text-text_white"
+	class="{actionBackgroundColor} w-full p-1 rounded border-2 border-outline_gray text-white"
 	onclick={deleteself}
 >
 	{action_data.action}
diff --git a/src/lib/components/SuccessFail.svelte b/src/lib/components/SuccessFail.svelte
index 007da5b..155b0f5 100644
--- a/src/lib/components/SuccessFail.svelte
+++ b/src/lib/components/SuccessFail.svelte
@@ -4,18 +4,18 @@
 </script>
 
 <div
-	class="bg-zinc-800 text-zinc-50 text-xl font-extrabold fixed inset-0 grid grid-cols-2 grid-rows-3 gap-4 p-4"
+	class="bg-eerie_black text-white text-xl font-extrabold fixed inset-0 grid grid-cols-2 grid-rows-4 gap-4 p-4"
 >
 	<button
-		class="rounded-lg row-span-2 shadow-lg shadow-green-600/50 bg-green-600"
+		class="rounded-lg row-span-3 shadow-lg shadow-jungle_green/50 bg-jungle_green"
 		onclick={() => complete(true)}>Success</button
 	>
 	<button
-		class="rounded-lg row-span-2 shadow-lg shadow-red-600/50 bg-red-600"
+		class="rounded-lg row-span-3 shadow-lg shadow-flaming_red/50 bg-flaming_red"
 		onclick={() => complete(false)}>Fail</button
 	>
 	<button
-		class="rounded-lg col-span-2 shadow-lg shadow-zinc-600/50 bg-zinc-600"
+		class="rounded-lg col-span-2 shadow-lg shadow-gunmetal/50 bg-gunmetal"
 		onclick={() => cancel()}>Cancel</button
 	>
 </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4b474b2..493a0b6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,6 +7,6 @@
 
 <style lang="postcss">
 	:global(body) {
-		@apply bg-zinc-800;
+		@apply bg-eerie_black text-white;
 	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index aefc4d7..8010bab 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,9 @@
-<div class="flex flex-col items-center justify-evenly h-dvh text-text_white">
+<div class="flex flex-col items-center justify-evenly h-dvh">
 	<h1 class="text-center text-5xl font-bold">hiiii :3</h1>
-	<a class="text-center text-2xl rounded bg-btn_grey px-4 py-2 font-bold" href="/scout">
+	<a
+		class="text-center text-2xl text-yolk_yellow rounded bg-gunmetal px-4 py-2 font-bold"
+		href="/scout"
+	>
 		scout
 	</a>
 </div>
diff --git a/src/routes/scout/+page.svelte b/src/routes/scout/+page.svelte
index ddf130b..6cd0d8a 100644
--- a/src/routes/scout/+page.svelte
+++ b/src/routes/scout/+page.svelte
@@ -26,14 +26,14 @@
 	});
 </script>
 
-<div class="grid grid-row-10 text-zinc-50 p-2 h-svh place-items-center">
+<div class="grid grid-row-10 p-2 h-dvh place-items-center">
 	<h1 class="row-span-1 text-center font-bold pb-2 h-5">Team {team_key}</h1>
 	{#if timelineExtended}
 		<div class="row-span-8">
 			<Timeline bind:actions />
 		</div>
 		<button
-			class="row-span-1 bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
+			class="row-span-1 bg-gunmetal h-10 w-80 p-1 rounded static"
 			onclick={() => (timelineExtended = false)}>Hide Timeline</button
 		>
 	{:else}
@@ -42,7 +42,7 @@
 		</div>
 
 		<button
-			class="row-span-1 bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
+			class="row-span-1 bg-gunmetal h-10 w-80 p-1 rounded static"
 			onclick={() => (timelineExtended = true)}>Show Timeline</button
 		>
 	{/if}
diff --git a/src/routes/scout/ActionInputs.svelte b/src/routes/scout/ActionInputs.svelte
index eadb514..17ffa1d 100644
--- a/src/routes/scout/ActionInputs.svelte
+++ b/src/routes/scout/ActionInputs.svelte
@@ -57,104 +57,104 @@
 <div class="grid gap-2 grid-cols-1 grid-rows-2 place-items-center">
 	{#if is_none_state}
 		<div class="grid gap-2 grid-cols-2">
-			<button class="bg-zinc-500 p-2 rounded" onclick={intake_piece}>Intake</button>
+			<button class="bg-gunmetal p-2 rounded" onclick={intake_piece}>Intake</button>
 			{#if held_scorables > 0}
-				<button class="bg-zinc-500 p-2 rounded" onclick={score_piece}>Score</button>
+				<button class="bg-gunmetal p-2 rounded" onclick={score_piece}>Score</button>
 			{/if}
 			{#if held_ejectables > 0}
-				<button class="bg-zinc-500 p-2 rounded" onclick={eject_piece}>Eject</button>
+				<button class="bg-gunmetal p-2 rounded" onclick={eject_piece}>Eject</button>
 			{/if}
 		</div>
 	{:else if is_intake_state}
 		<div class="grid gap-3 grid-cols-2 grid-rows-2 flex-grow">
-			<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'IntakeBunny')}
+			<button class="bg-gunmetal p-2 rounded" onclick={() => (actionState = 'IntakeBunny')}
 				>Intake Bunny</button
 			>
-			<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'IntakeTote')}
+			<button class="bg-gunmetal p-2 rounded" onclick={() => (actionState = 'IntakeTote')}
 				>Intake Tote</button
 			>
-			<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'IntakeBalloon')}
+			<button class="bg-gunmetal p-2 rounded" onclick={() => (actionState = 'IntakeBalloon')}
 				>Intake Balloon From Ground</button
 			>
 			<button
-				class="bg-zinc-500 p-2 rounded"
+				class="bg-gunmetal p-2 rounded"
 				onclick={() => (actionState = 'IntakeBalloonCoral')}
 				>Intake Ballon From Coral</button
 			>
 			<button
-				class="bg-zinc-500 col-span-2 p-2 rounded"
+				class="bg-gunmetal col-span-2 p-2 rounded"
 				onclick={() => (actionState = 'None')}>Cancel</button
 			>
 		</div>
 	{:else if is_score_state}
 		<div class="grid gap-2 grid-cols-2 grid-rows-4">
 			{#if held_bunnies > 0}
-				<button class="bg-zinc-500 p-2 rounded" onclick={() => score_bunny('Low')}
+				<button class="bg-gunmetal p-2 rounded" onclick={() => score_bunny('Low')}
 					>Score Bunny in Low Zone</button
 				>
 				<button
-					class="bg-zinc-500 p-2 rounded"
+					class="bg-gunmetal p-2 rounded"
 					onclick={() => score_bunny('UncontrolledTote')}
 					>Score Bunny in Uncontrolled Tote</button
 				>
 				{#if held_totes > 0}
 					<button
-						class="bg-zinc-500 p-2 rounded"
+						class="bg-gunmetal p-2 rounded"
 						onclick={() => score_bunny('InternalTote')}
 						>Score Bunny in Internal Held Tote</button
 					>
 				{/if}
-				<button class="bg-zinc-500 p-2 rounded" onclick={() => score_bunny('ExternalTote')}
+				<button class="bg-gunmetal p-2 rounded" onclick={() => score_bunny('ExternalTote')}
 					>Score Bunny in External Held Tote</button
 				>
 			{/if}
 			{#if held_balloons > 0}
-				<button class="bg-zinc-500 p-2 rounded" onclick={() => score_balloon('Low')}
+				<button class="bg-gunmetal p-2 rounded" onclick={() => score_balloon('Low')}
 					>Score Ballon in Low Zone</button
 				>
 				<button
-					class="bg-zinc-500 p-2 rounded"
+					class="bg-gunmetal p-2 rounded"
 					onclick={() => score_balloon('UncontrolledTote')}
 					>Score Bunny in Uncontrolled Tote</button
 				>
 				{#if held_totes > 0}
 					<button
-						class="bg-zinc-500 p-2 rounded"
+						class="bg-gunmetal p-2 rounded"
 						onclick={() => score_balloon('InternalTote')}
 						>Score Balloon in Internal Held Tote</button
 					>
 				{/if}
 				<button
-					class="bg-zinc-500 p-2 rounded"
+					class="bg-gunmetal p-2 rounded"
 					onclick={() => score_balloon('ExternalTote')}
 					>Score Balloon in External Held Tote
 				</button>
 			{/if}
 			<button
-				class="bg-zinc-500 col-span-2 p-2 rounded"
+				class="bg-gunmetal col-span-2 p-2 rounded"
 				onclick={() => (actionState = 'None')}>Cancel</button
 			>
 		</div>
 	{:else if is_eject_state}
 		<div class="grid gap-2 grid-cols-2 grid-rows-4">
 			{#if held_bunnies > 0}
-				<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'EjectBunny')}
+				<button class="bg-gunmetal p-2 rounded" onclick={() => (actionState = 'EjectBunny')}
 					>Eject Bunny</button
 				>
 			{/if}
 			{#if held_balloons > 0}
 				<button
-					class="bg-zinc-500 p-2 rounded"
+					class="bg-gunmetal p-2 rounded"
 					onclick={() => (actionState = 'EjectBalloon')}>Eject Ballon</button
 				>
 			{/if}
 			{#if held_totes > 0}
-				<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'EjectTote')}
+				<button class="bg-gunmetal p-2 rounded" onclick={() => (actionState = 'EjectTote')}
 					>Eject Tote</button
 				>
 			{/if}
 			<button
-				class="bg-zinc-500 col-span-2 p-2 rounded"
+				class="bg-gunmetal col-span-2 p-2 rounded"
 				onclick={() => (actionState = 'None')}>Cancel</button
 			>
 		</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 3e2b173..a8e0cce 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,16 +4,15 @@ export default {
 	theme: {
 		extend: {
 			colors: {
-				navbar_black: '#1c1c1c',
-				outline_gray: '#c2c2c2',
-				cresc_green: '#00d586',
-				bg_gray: '#2c2c2c',
-				slack_purple: '#4A154B',
-				robot_blue: '#0083E6',
-				robot_red: '#ED1C24',
-				fail_red: '#EE3C42',
-				btn_grey: '#5C5C5C',
-				text_white: '#ffffff'
+				white: '#ffffff',
+				eerie_black: '#1C1C1C',
+				yolk_yellow: '#FFC145',
+				flaming_red: '#ED2C2C',
+				steel_blue: '#358188',
+				gunmetal: '#20282C',
+				chicken_orange: '#F7901E',
+				eminence: '#6C3082',
+				jungle_green: '#49A078'
 			}
 		}
 	},