fix: Fix colors from due dates and done

Signed-off-by: Joas Schilling <coding@schilljs.com>

Author: nickvergessen

src/components/cards/CardBadges.vue

@@ -127,42 +127,6 @@ export default {
 		gap: 3px;
 	}
 
-	.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;
 	}

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 {