fix(labels): correctly fall back to variable colors when no label color is set (#1124)

frontend/src/components/tasks/partials/EditLabels.vue

@@ -17,7 +17,7 @@
 	>
 		<template #tag="{item: label}">
 			<span
-				:style="{'background': label.hexColor, 'color': label.textColor}"
+				:style="getLabelStyles(label)"
 				class="tag"
 			>
 				<span>{{ label.title }}</span>
@@ -38,7 +38,7 @@
 			</span>
 			<span
 				v-else
-				:style="{'background': option.hexColor, 'color': option.textColor}"
+				:style="getLabelStyles(option)"
 				class="tag search-result"
 			>
 				<span>{{ option.title }}</span>
@@ -61,6 +61,7 @@ import type {ILabel} from '@/modelTypes/ILabel'
 import {useLabelStore} from '@/stores/labels'
 import {useTaskStore} from '@/stores/tasks'
 import {getRandomColorHex} from '@/helpers/color/randomColor'
+import {useLabelStyles} from '@/composables/useLabelStyles'
 
 const props = withDefaults(defineProps<{
 	modelValue: ILabel[] | undefined
@@ -96,6 +97,7 @@ watch(
 
 const taskStore = useTaskStore()
 const labelStore = useLabelStore()
+const {getLabelStyles} = useLabelStyles()
 
 const foundLabels = computed(() => labelStore.filterLabelsByQuery(labels.value, query.value))
 const loading = computed(() => labelTaskService.loading || labelStore.isLoading)

frontend/src/components/tasks/partials/Label.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import type {ILabel} from '@/modelTypes/ILabel'
+import {useLabelStyles} from '@/composables/useLabelStyles'
 
 defineProps<{
 	label: ILabel
 }>()
+
+const {getLabelStyles} = useLabelStyles()
 </script>
 
 <template>
 	<span
 		:key="label.id"
-		:style="{'background': label.hexColor, 'color': label.textColor}"
+		:style="getLabelStyles(label)"
 		class="tag"
 	>
 		<span>{{ label.title }}</span>

frontend/src/composables/useLabelStyles.ts

@@ -0,0 +1,14 @@
+import type {ILabel} from '@/modelTypes/ILabel'
+
+export function useLabelStyles() {
+	function getLabelStyles(label: ILabel) {
+		return {
+			'background': label.hexColor || 'var(--grey-200)',
+			'color': label.textColor || 'var(--grey-800)',
+		}
+	}
+
+	return {
+		getLabelStyles,
+	}
+}

frontend/src/models/label.ts

@@ -28,10 +28,7 @@ export default class LabelModel extends AbstractModel<ILabel> implements ILabel
 			this.hexColor = '#' + this.hexColor
 		}
 
-		if (this.hexColor === '') {
-			this.hexColor = 'var(--grey-200)'
-			this.textColor = 'var(--grey-800)'
-		} else {
+		if (this.hexColor !== '') {
 			this.textColor = colorIsDark(this.hexColor)
 				// Fixed colors to avoid flipping in dark mode
 				? 'hsl(215, 27.9%, 16.9%)' // grey-800

frontend/src/views/labels/ListLabels.vue

@@ -33,7 +33,7 @@
 					v-for="label in labelStore.labelsArray"
 					:key="label.id"
 					:class="{'disabled': userInfo.id !== label.createdBy.id}"
-					:style="{'background': label.hexColor, 'color': label.textColor}"
+					:style="getLabelStyles(label)"
 					class="tag"
 				>
 					<span
@@ -149,6 +149,7 @@ import {useAuthStore} from '@/stores/auth'
 import {useLabelStore} from '@/stores/labels'
 
 import { useTitle } from '@/composables/useTitle'
+import {useLabelStyles} from '@/composables/useLabelStyles'
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -167,6 +168,7 @@ const labelStore = useLabelStore()
 labelStore.loadAllLabels()
 
 const loading = computed(() => labelStore.isLoading)
+const {getLabelStyles} = useLabelStyles()
 
 function deleteLabel(label?: ILabel) {
 	if (!label) {