From 34e4862c88904f114a36e65c851361b11443fadd Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 13 Dec 2023 18:54:36 +0100
Subject: [PATCH] fix(kanban): make sure kanban cards always have text color
 matching their background

Resolves https://github.com/go-vikunja/frontend/issues/135
---
 src/components/tasks/partials/kanban-card.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 9621c6ab4..0def5dd00 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -5,6 +5,7 @@
 			'is-loading': loadingInternal || loading,
 			'draggable': !(loadingInternal || loading),
 			'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color),
+			'has-custom-background-color': color !== TASK_DEFAULT_COLOR ? color : undefined,
 		}"
 		:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : undefined}"
 		@click.exact="openTaskDetail()"
@@ -48,7 +49,10 @@
 			</progress>
 			<div class="footer">
 				<labels :labels="task.labels"/>
-				<priority-label :priority="task.priority" :done="task.done" class="is-inline-flex is-align-items-center"/>
+				<priority-label
+					:priority="task.priority"
+					:done="task.done"
+					class="is-inline-flex is-align-items-center"/>
 				<assignee-list
 					v-if="task.assignees.length > 0"
 					:assignees="task.assignees"
@@ -114,7 +118,7 @@ async function toggleTaskDone(task: ITask) {
 			...task,
 			done: !task.done,
 		})
-		
+
 		if (updatedTask.done && useAuthStore().settings.frontendSettings.playSoundWhenDone) {
 			playPopSound()
 		}
@@ -280,6 +284,16 @@ $task-background: var(--white);
 		width: auto;
 	}
 
+	&.has-custom-background-color {
+		color: hsl(215, 27.9%, 16.9%); // copied from grey-800 to avoid different values in dark mode
+
+		.footer .icon,
+		.due-date,
+		.priority-label {
+			background: hsl(220, 13%, 91%);
+		}
+	}
+
 	&.has-light-text {
 		color: var(--white);