feat: document colours!

src/app.scss

@@ -6,7 +6,8 @@
 @import url("$lib/assets/style/host-grotesk.css");
 
 :root {
-	--font-body: "Host Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
+	--font-body:
+		"Host Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
 		"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
 		"Helvetica Neue", sans-serif;
 	--font-display: "Radio Canada Big", var(--font-body);
@@ -39,6 +40,8 @@
 	--accent-purple-alt: hsl(264, 100%, 50%);
 	--accent-blue: hsl(220, 100%, 78%);
 	--accent-blue-alt: hsl(220, 100%, 50%);
+	--accent-green: hsl(140, 70%, 74%);
+	--accent-green-alt: hsl(140, 70%, 30%);
 	--accent: var(--accent-pink);
 	--accent-alt: var(--accent-pink-alt);
 
@@ -98,6 +101,16 @@
 		var(--accent-blue),
 		hsl(220, 100%, 91%) 100%
 	);
+	--bg-gradient-green: linear-gradient(
+		to bottom,
+		var(--accent-green),
+		hsla(140, 70%, 30%, 0) 25%
+	);
+	--bg-gradient-green-alt: linear-gradient(
+		to top,
+		var(--accent-green),
+		hsl(140, 70%, 91%) 100%
+	);
 	--bg-gradient-image: linear-gradient(
 		to bottom,
 		hsla(0, 0%, 95%, 0.5),

src/routes/+page.svelte

@@ -2,7 +2,8 @@
 	import Uploader from "$lib/components/functional/Uploader.svelte";
 	import { converters } from "$lib/converters";
 	import { vertdLoaded } from "$lib/store/index.svelte";
-	import { AudioLines, Check, Film, Image } from "lucide-svelte";
+	import clsx from "clsx";
+	import { AudioLines, BookText, Check, Film, Image } from "lucide-svelte";
 
 	const { data } = $props();
 
@@ -30,7 +31,7 @@
 		Documents: {
 			ready: converters.find((c) => c.name === "pandoc")?.ready || false,
 			formats: getSupportedFormats("pandoc"),
-			icon: Image,
+			icon: BookText,
 		},
 		Video: {
 			ready:
@@ -77,7 +78,14 @@
 				{@const Icon = s.icon}
 				<div class="file-category-card w-full">
 					<div class="file-category-card-inner">
-						<div class="icon-container bg-accent-blue">
+						<div
+							class={clsx("icon-container", {
+								"bg-accent-blue": key === "Images",
+								"bg-accent-purple": key === "Audio",
+								"bg-accent-green": key === "Documents",
+								"bg-accent-red": key === "Video",
+							})}
+						>
 							<Icon size="20" />
 						</div>
 						<span>{key}</span>

src/routes/convert/+page.svelte

@@ -17,6 +17,7 @@
 	import { VertFile } from "$lib/types";
 	import {
 		AudioLines,
+		BookText,
 		DownloadIcon,
 		FileMusicIcon,
 		FileQuestionIcon,
@@ -55,6 +56,10 @@
 			(file) => file.findConverter()?.name === "vertd",
 		);
 
+		const allDocuments = files.files.every(
+			(file) => file.findConverter()?.name === "pandoc",
+		);
+
 		if (files.files.length === 1 && files.files[0].blobUrl && !allVideos) {
 			showGradient.set(false);
 		} else {
@@ -67,7 +72,15 @@
 		) {
 			gradientColor.set("");
 		} else {
-			gradientColor.set(allAudio ? "purple" : allVideos ? "red" : "blue");
+			gradientColor.set(
+				allAudio
+					? "purple"
+					: allVideos
+						? "red"
+						: allDocuments
+							? "green"
+							: "blue",
+			);
 		}
 	});
 </script>
@@ -88,6 +101,9 @@
 	{@const isImage = converters
 		.find((c) => c.name === "libvips")
 		?.supportedFormats.includes(file.from)}
+	{@const isDocument = converters
+		.find((c) => c.name === "pandoc")
+		?.supportedFormats.includes(file.from)}
 	<Panel class="p-5 flex flex-col min-w-0 gap-4 relative">
 		<div class="flex-shrink-0 h-8 w-full flex items-center gap-2">
 			{#if !converters.length}
@@ -96,6 +112,8 @@
 				<AudioLines size="24" class="flex-shrink-0" />
 			{:else if isVideo}
 				<FilmIcon size="24" class="flex-shrink-0" />
+			{:else if isDocument}
+				<BookText size="24" class="flex-shrink-0" />
 			{:else}
 				<ImageIcon size="24" class="flex-shrink-0" />
 			{/if}
@@ -149,7 +167,7 @@
 					</p>
 				</div>
 			{/if}
-		{:else if isVideo && !isAudio && !isImage && !$vertdLoaded}
+		{:else if isVideo && !isAudio && !isImage && !isDocument && !$vertdLoaded}
 			<div
 				class="h-full flex flex-col text-center justify-center text-failure"
 			>
@@ -178,12 +196,16 @@
 									? '--bg-gradient-purple-alt'
 									: isVideo
 										? '--bg-gradient-red-alt'
-										: '--bg-gradient-blue-alt'})"
+										: isDocument
+											? '--bg-gradient-green-alt'
+											: '--bg-gradient-blue-alt'})"
 							>
 								{#if isAudio}
 									<FileMusicIcon size="56" />
 								{:else if isVideo}
 									<FileVideo2 size="56" />
+								{:else if isDocument}
+									<BookText size="56" />
 								{:else}
 									<ImageOffIcon size="56" />
 								{/if}
@@ -217,7 +239,9 @@
 										? 'bg-accent-purple'
 										: isVideo
 											? 'bg-accent-red'
-											: 'bg-accent-blue'}"
+											: isDocument
+												? 'bg-accent-green'
+												: 'bg-accent-blue'}"
 									disabled={!files.ready}
 									onclick={file.convert}
 								>

tailwind.config.ts

@@ -36,6 +36,8 @@ export default {
 				"accent-purple": "var(--accent-purple)",
 				"accent-blue": "var(--accent-blue)",
 				"accent-blue-alt": "var(--accent-blue-alt)",
+				"accent-green": "var(--accent-green)",
+				"accent-green-alt": "var(--accent-green-alt)",
 			},
 			boxShadow: {
 				panel: "var(--shadow-panel)",