From 1c9fe1a3d97955ebf57a3b11fc978c1a8652a9a8 Mon Sep 17 00:00:00 2001
From: Tobias Frischmann <tobias.frischmann@proton.me>
Date: Thu, 8 Oct 2026 09:12:06 +0200
Subject: [PATCH] use darkend color for tag outline

---
 app/components/Utils/Label/TagLabel.vue |  5 ++
 app/utils/color.ts                      | 68 +++++++++++++++++++++----
 2 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/app/components/Utils/Label/TagLabel.vue b/app/components/Utils/Label/TagLabel.vue
index 38402e9..39b9386 100644
--- a/app/components/Utils/Label/TagLabel.vue
+++ b/app/components/Utils/Label/TagLabel.vue
@@ -19,6 +19,10 @@
 			? getContrastColor(props.label.color)
 			: props.label.color;
 	});
+
+	const borderColor = computed(() => {
+		return props.isSelected ? darkenHex(props.label.color, 25) : undefined;
+	});
 </script>
 <template>
 	<button
@@ -29,6 +33,7 @@
     }"
 		:style="{
       color: fontColor,
+      'border-color': borderColor,
       'background-color': bgColor,
     }"
 		@click="emits('press')"
diff --git a/app/utils/color.ts b/app/utils/color.ts
index 5ebd34d..5d2be6e 100644
--- a/app/utils/color.ts
+++ b/app/utils/color.ts
@@ -1,8 +1,7 @@
 function hslToRgb(h: number, s: number, l: number): [number, number, number] {
-	s /= 100;
-	l /= 100;
+	const hDegrees = h * 360;
 
-	const k = (n: number) => (n + h / 30) % 12;
+	const k = (n: number) => (n + hDegrees / 30) % 12;
 	const a = s * Math.min(l, 1 - l);
 
 	const f = (n: number) =>
@@ -15,14 +14,36 @@ function hslToRgb(h: number, s: number, l: number): [number, number, number] {
 	];
 }
 
-export function randomPleasantHex(): string {
-	const h = Math.random() * 360;
-	const s = Math.random() * 30 + 40;
-	const l = Math.random() * 50 + 30;
+function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+	const normR = r / 255;
+	const normG = g / 255;
+	const normB = b / 255;
 
-	const [r, g, b] = hslToRgb(h, s, l);
+	const max = Math.max(normR, normG, normB);
+	const min = Math.min(normR, normG, normB);
+	const d = max - min;
 
-	return `#${[r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+	let h = 0;
+	let s = 0;
+	const l = (max + min) / 2;
+
+	if (max !== min) {
+		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+		switch (max) {
+			case normR:
+				h = (normG - normB) / d + (normG < normB ? 6 : 0);
+				break;
+			case normG:
+				h = (normB - normR) / d + 2;
+				break;
+			case normB:
+				h = (normR - normG) / d + 4;
+				break;
+		}
+		h /= 6;
+	}
+
+	return [h, s, l];
 }
 
 function hexToRgb(color: string): [number, number, number] | null {
@@ -44,6 +65,18 @@ function hexToRgb(color: string): [number, number, number] | null {
 	return null;
 }
 
+function rgbToHex(r: number, g: number, b: number): string {
+	return `#${[r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+}
+
+export function randomPleasantHex(): string {
+	const h = Math.random();
+	const s = Math.random() * 0.3 + 0.4;
+	const l = Math.random() * 0.5 + 0.3;
+
+	return rgbToHex(...hslToRgb(h, s, l));
+}
+
 function isLightColor(color: string): boolean {
 	const rgb = hexToRgb(color);
 	if (!rgb) return false;
@@ -55,3 +88,20 @@ function isLightColor(color: string): boolean {
 export function getContrastColor(color: string): "#222" | "#eee" {
 	return isLightColor(color) ? "#222" : "#eee";
 }
+
+export function darkenHex(hex: string, percent: number): string {
+	const rgb = hexToRgb(hex);
+	if (!rgb) return hex;
+
+	console.log(rgb);
+
+	const [h, s, l] = rgbToHsl(...rgb);
+
+	console.log(h, s, l);
+
+	const newL = Math.max(0, l - percent / 100);
+
+	console.log(h, s, newL);
+
+	return rgbToHex(...hslToRgb(h, s, newL));
+}
-- 
2.54.0