feat: add error color to foregrounds

src/app.scss

@@ -47,8 +47,9 @@
 	--fg-muted: hsla(0, 0%, 0%, 0.6);
 	--fg-on-accent: hsl(0, 0%, 0%);
 	--fg-on-badge: hsl(0, 0%, 0%);
-	/* readable version of the accent color */
+	// readable version of the accent color
 	--fg-accent: var(--accent-pink-muted);
+	--fg-failure: var(--accent-red-alt);
 
 	// backgrounds
 	--bg: hsl(0, 0%, 95%);
@@ -131,6 +132,7 @@
 	--fg-on-accent: hsl(0, 0%, 0%);
 	--fg-on-badge: hsl(0, 0%, 0%);
 	--fg-accent: var(--accent);
+	--fg-failure: var(--accent-red);
 
 	// backgrounds
 	--bg: hsl(220, 5%, 15%);

src/lib/sections/settings/Vertd.svelte

@@ -47,7 +47,7 @@
 		</h2>
 		<p
 			class={clsx("text-sm font-normal", {
-				"text-red-700 dynadark:text-red-100": vertdCommit === null,
+				"text-failure": vertdCommit === null,
 				"text-green-700 dynadark:text-green-300": vertdCommit !== null,
 				"!text-muted": vertdCommit === "loading",
 			})}

src/routes/convert/+page.svelte

@@ -36,13 +36,18 @@
 			(file) => file.converter?.name === "ffmpeg",
 		);
 		const allImages = files.files.every(
-			(file) => file.converter?.name !== "ffmpeg" && file.converter?.name !== "vertd",
+			(file) =>
+				file.converter?.name !== "ffmpeg" &&
+				file.converter?.name !== "vertd",
 		);
 		const allVideos = files.files.every(
 			(file) => file.converter?.name === "vertd",
 		);
 
-		if (files.files.length === 0 || (!allAudio && !allImages && !allVideos)) {
+		if (
+			files.files.length === 0 ||
+			(!allAudio && !allImages && !allVideos)
+		) {
 			gradientColor.set("");
 		} else {
 			gradientColor.set(allAudio ? "purple" : allVideos ? "red" : "blue");
@@ -91,7 +96,7 @@
 		</div>
 		{#if !file.converter}
 			<div
-				class="h-full flex flex-col text-center justify-center text-red-600"
+				class="h-full flex flex-col text-center justify-center text-failure"
 			>
 				<p class="font-body font-bold">We can't convert this file.</p>
 				<p class="font-normal">
@@ -116,8 +121,8 @@
 								style="background: var({isAudio
 									? '--bg-gradient-purple-alt'
 									: isVideo
-									? '--bg-gradient-red-alt'
+										? '--bg-gradient-red-alt'
-									: '--bg-gradient-blue-alt'})"
+										: '--bg-gradient-blue-alt'})"
 							>
 								{#if isAudio}
 									<FileMusicIcon size="56" />
@@ -146,8 +151,8 @@
 								class="btn p-0 w-14 h-14 text-black {isAudio
 									? 'bg-accent-purple'
 									: isVideo
-									? 'bg-accent-red'
+										? 'bg-accent-red'
-									: 'bg-accent-blue'}"
+										: 'bg-accent-blue'}"
 								disabled={!files.ready}
 								onclick={file.convert}
 							>

tailwind.config.ts

@@ -21,6 +21,7 @@ export default {
 				foreground: "var(--fg)",
 				muted: "var(--fg-muted)",
 				accent: "var(--fg-accent)",
+				failure: "var(--fg-failure)",
 				"on-accent": "var(--fg-on-accent)",
 				"on-badge": "var(--fg-on-badge)",
 			},