feat: create theme for common styles

api/src/endpoints/get_repos.rs

@@ -41,9 +41,8 @@ pub async fn get_repos(
         .get_repositories(&user.id)
         .await?
         .into_iter()
-        .map(|r| r.id.clone())
+        .map(|r| r.id)
         .collect::<HashSet<String>>();
-    tracing::debug!(added_response = ?added_ids);
     let data = response
         .json::<Vec<Repository>>()
         .await?

src/lib/Repos.svelte

@@ -86,23 +86,20 @@
 	};
 
 	const languageColors: Record<string, string> = {
-		GDScript: 'bg-blue-500',
+		GDScript: 'bg-lang-gdscript',
-		'C#': 'bg-green-500',
+		Rust: 'bg-lang-rust'
-		Rust: 'bg-orange-500',
-		C: 'bg-gray-500',
-		'C++': 'bg-pink-500'
 	};
 </script>
 
-<div class="rounded-xl bg-gray-900 p-6 shadow-xl ring-1 ring-gray-800">
+<div class="rounded-xl bg-surface p-6 shadow-xl ring-1 ring-border">
 	<div class="mb-6 flex items-center justify-between">
 		<div class="flex items-center gap-3">
-			<GitBranch class="h-6 w-6 text-gray-400" />
+			<GitBranch class="h-6 w-6 text-icon" />
-			<h2 class="text-xl font-semibold text-white">Import Git Repository</h2>
+			<h2 class="text-xl font-semibold text-text-primary">Import Git Repository</h2>
-			<span class="text-xs text-gray-500">repo must be public</span>
+			<span class="text-xs text-text-muted">repo must be public</span>
 		</div>
 		<Button.Root
-			class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-gray-400 transition-colors hover:bg-gray-800 hover:text-white"
+			class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary"
 			onclick={() => (searching ? searchResultsQuery.refetch() : query.refetch())}
 		>
 			<RefreshCw class="h-4 w-4" />
@@ -111,34 +108,35 @@
 	</div>
 
 	<div class="relative mb-6">
-		<Search class="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-500" />
+		<Search class="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-icon-muted" />
 		<input
 			type="text"
 			bind:value={searchQuery}
 			placeholder="Search repositories..."
-			class="w-full rounded-lg border border-gray-700 bg-gray-800 py-2.5 pr-4 pl-10 text-white placeholder-gray-500 transition-colors outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+			class="w-full rounded-lg border border-border-hover bg-surface-hover py-2.5 pr-4 pl-10 text-text-primary placeholder-text-muted transition-colors outline-none focus:border-border-focus focus:ring-1 focus:ring-border-focus"
 		/>
 	</div>
 
 	<div class="space-y-3">
 		{#each repos as repo (repo.id)}
 			<div
-				class="group flex items-center justify-between rounded-lg border border-gray-800 bg-gray-800/40 p-4 transition-colors hover:border-gray-700 hover:bg-gray-800"
+				class="group flex items-center justify-between rounded-lg border border-border bg-surface-muted p-4 transition-colors hover:border-border-hover hover:bg-surface-hover"
 			>
 				<div class="flex-1">
 					<div class="flex items-center gap-2">
-						<h3 class="truncate font-medium text-white">{repo.name}</h3>
+						<h3 class="truncate font-medium text-text-primary">{repo.name}</h3>
 					</div>
 					{#if repo.description}
-						<p class="mt-1 truncate text-sm text-gray-400">{repo.description}</p>
+						<p class="mt-1 truncate text-sm text-text-secondary">{repo.description}</p>
 					{:else}
-						<p class="mt-1 text-sm text-gray-500 italic">No description</p>
+						<p class="mt-1 text-sm text-text-muted italic">No description</p>
 					{/if}
-					<div class="mt-2 flex items-center gap-4 text-xs text-gray-500">
+					<div class="mt-2 flex items-center gap-4 text-xs text-text-muted">
 						{#if repo.language}
 							<span class="flex items-center gap-1.5">
 								<span
-									class="h-2.5 w-2.5 rounded-full {languageColors[repo.language] ?? 'bg-gray-500'}"
+									class="h-2.5 w-2.5 rounded-full {languageColors[repo.language] ??
+										'bg-lang-default'}"
 								></span>
 								{repo.language}
 							</span>
@@ -154,11 +152,11 @@
 					</div>
 				</div>
 				<Button.Root
-					class="ml-4 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors {added.includes(
+					class="ml-4 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-text-primary transition-colors {added.includes(
 						repo.id
 					)
-						? 'border-green-800 bg-green-900'
+						? 'border-success-border bg-success'
-						: 'bg-blue-600'} disabled:cursor-default disabled:opacity-50"
+						: 'bg-primary'} disabled:cursor-default disabled:opacity-50"
 					disabled={adding !== null}
 					onclick={() => handleImport(repo)}
 				>
@@ -177,14 +175,14 @@
 					<LoaderCircle class="animate-spin" />
 				</div>
 			{:else}
-				<div class="py-8 text-center text-gray-500">
+				<div class="py-8 text-center text-text-muted">
 					<p>No repositories found matching "{searchQuery}"</p>
 				</div>
 			{/if}
 		{/each}
 	</div>
 
-	<p class="mt-6 text-center text-sm text-gray-500">
+	<p class="mt-6 text-center text-sm text-text-muted">
 		You must have a dist/ folder with index.html + index.wasm
 	</p>
 </div>

src/routes/layout.css

@@ -1,5 +1,35 @@
 @import "tailwindcss";
 
+@theme {
+  --color-surface: var(--color-gray-900);
+  --color-surface-hover: var(--color-gray-800);
+  --color-surface-muted: oklch(from var(--color-gray-800) l c h / 40%);
+
+  --color-border: var(--color-gray-800);
+  --color-border-hover: var(--color-gray-700);
+  --color-border-focus: var(--color-blue-500);
+
+  --color-text-primary: var(--color-white);
+  --color-text-secondary: var(--color-gray-400);
+  --color-text-muted: var(--color-gray-500);
+
+  --color-icon: var(--color-gray-400);
+  --color-icon-muted: var(--color-gray-500);
+
+  --color-primary: var(--color-blue-600);
+  --color-primary-hover: var(--color-blue-500);
+
+  --color-success: var(--color-green-900);
+  --color-success-border: var(--color-green-800);
+
+  --color-lang-gdscript: var(--color-blue-500);
+  --color-lang-csharp: var(--color-green-500);
+  --color-lang-rust: var(--color-orange-500);
+  --color-lang-c: var(--color-gray-500);
+  --color-lang-cpp: var(--color-pink-500);
+  --color-lang-default: var(--color-gray-500);
+}
+
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -61,10 +91,6 @@ h1 {
   @apply hover:bg-gray-800;
 }
 
-#nprogress .bar {
-  top: 3.5rem;
-}
-
 button:default {
   border-radius: 8px;
   border: 1px solid transparent;