Fix colors on bookshelf

src/ui/components/bookshelf/Book.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import Self from "./Book.svelte";
-	import { Color, COLOR_NAMES, type ColorName } from "@utils/color";
+	import {
+		Color,
+		COLOR_NAMES,
+		isColorName,
+		type ColorName,
+	} from "@utils/color";
 	import BookTiltedDefault from "./designs/tilted/BookTiltedDefault.svelte";
 	import BookOnDisplay from "./designs/book/BookOnDisplay.svelte";
 	import BookText from "./BookText.svelte";
@@ -45,8 +50,8 @@
 	}
 
 	const color = $derived(
-		colorRaw in COLOR_NAMES
+		isColorName(colorRaw)
-			? Color.fromName(colorRaw as ColorName)
+			? Color.fromName(colorRaw).darken()
 			: Color.fromCSSColor(colorRaw),
 	);
 
@@ -61,7 +66,7 @@
 				{title}
 				{subtitle}
 				{author}
-				color={colorRaw}
+				color={color.hex}
 				{design}
 				{height}
 				{width}

src/ui/components/bookshelf/BookStackElement.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Color, COLOR_NAMES, type ColorName } from "@utils/color";
+	import { Color, isColorName, type ColorName } from "@utils/color";
 	import BookText from "./BookText.svelte";
 	import BookStackColoredSpine from "./designs/stack/BookStackColoredSpine.svelte";
 	import BookStackDefault from "./designs/stack/BookStackDefault.svelte";
@@ -21,8 +21,8 @@
 	}: Props = $props();
 
 	const color = $derived(
-		colorRaw in COLOR_NAMES
+		isColorName(colorRaw)
-			? Color.fromName(colorRaw as ColorName)
+			? Color.fromName(colorRaw).darken()
 			: Color.fromCSSColor(colorRaw),
 	);
 	const textColor = $derived(color.contrastColor.hex);

src/utils/color.ts

@@ -13,6 +13,10 @@ export const COLOR_NAMES = [
 	"pink",
 ] as const;
 
+export function isColorName(color: string): color is ColorName {
+	return COLOR_NAMES.includes(color as ColorName);
+}
+
 export type ColorName = (typeof COLOR_NAMES)[number];
 export type RGB = [number, number, number];
 
@@ -54,6 +58,18 @@ export class Color {
 		return new Color(this.r, this.g, this.b, alpha);
 	}
 
+	darken(amount?: number): Color {
+		return new Color(
+			...chroma([this.r, this.g, this.b]).darken(amount).rgb()
+		);
+	}
+
+	lighten(amount?: number): Color {
+		return new Color(
+			...chroma([this.r, this.g, this.b]).brighten(amount).rgb()
+		);
+	}
+
 	static fromName(color: ColorName): Color {
 		const rawRgb = style
 			.getPropertyValue(`--color-${color}-rgb`)