From 74a3ab500810d666c09ae64c50022dc22d6ef238 Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Tue, 16 Sep 2025 14:36:11 +0200
Subject: [PATCH] fix: Fix colors from due dates and done

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 src/components/cards/CardBadges.vue     | 36 -------------------------
 src/components/cards/badges/DueDate.vue | 12 ++++-----
 2 files changed, 6 insertions(+), 42 deletions(-)

diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 4e989c6e5..3bf4f73fe 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -131,42 +131,6 @@ export default {
 		height: var(--default-clickable-area);
 	}
 
-	.badges .icon.due {
-		background-position: 4px center;
-		border-radius: var(--border-radius);
-		padding: 4px;
-		font-size: 13px;
-		display: flex;
-		align-items: center;
-		opacity: .5;
-		flex-shrink: 1;
-
-		.icon {
-			background-size: contain;
-		}
-
-		&.overdue {
-			background-color: var(--color-error);
-			color: var(--color-primary-element-text);
-			opacity: .7;
-		}
-		&.now {
-			background-color: var(--color-warning);
-			opacity: .7;
-		}
-		&.next {
-			background-color: var(--color-background-dark);
-			opacity: .7;
-		}
-
-		span {
-			margin-left: 20px;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-		}
-	}
-
 	.badge-left, .badge-right {
 		display: flex;
 	}
diff --git a/src/components/cards/badges/DueDate.vue b/src/components/cards/badges/DueDate.vue
index 1b3d8baf7..51f8c8be4 100644
--- a/src/components/cards/badges/DueDate.vue
+++ b/src/components/cards/badges/DueDate.vue
@@ -95,16 +95,16 @@ export default {
 		z-index: 2;
 
 		[data-due-state='Overdue'] & {
-			color: var(--color-error-text);
-			background-color: rgba(var(--color-error-rgb), .1);
+			color: var(--color-element-error, var(--color-error-text));
+			background-color: rgba(var(--color-error-rgb), .5);
 		}
 		[data-due-state='Now'] & {
-			color: var(--color-warning-text);
-			background-color: rgba(var(--color-warning-rgb), .1);
+			color: var(--color-element-warning, var(--color-warning-text));
+			background-color: rgba(var(--color-warning-rgb), .5);
 		}
 		[data-due-state='Done'] & {
-			color: var(--color-success-text);
-			background-color: rgba(var(--color-success-rgb), .1);
+			color: var(--color-element-success, var(--color-success-text));
+			background-color: rgba(var(--color-success-rgb), .5);
 		}
 
 		.due--label {