feat: refs #8833 add neutral color variable and update state color handling in claim components

src/css/quasar.variables.scss

@@ -18,6 +18,7 @@ $positive: #c8e484;
 $negative: #fb5252;
 $info: #84d0e2;
 $warning: #f4b974;
+$neutral: #b0b0b0;
 // Pendiente de cuadrar con la base de datos
 $success: $positive;
 $alert: $negative;
@@ -51,3 +52,6 @@ $width-xl: 1600px;
 .bg-alert {
     background-color: $negative;
 }
+.bg-neutral {
+    background-color: $neutral;
+}

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -29,7 +29,7 @@ const entityId = computed(() => {
 });
 
 function stateColor(entity) {
-    return entity?.claimState?.classColor || 'grey';
+    return entity?.claimState?.classColor;
 }
 
 onMounted(async () => {
@@ -50,7 +50,10 @@ onMounted(async () => {
         <template #body="{ entity }">
             <VnLv v-if="entity.claimState" :label="t('claim.state')">
                 <template #value>
-                    <QBadge :color="stateColor(entity)" text-color="black" dense>
+                    <QBadge
+                        :color="stateColor(entity)"
+                        style="color: var(--vn-black-text-color)"
+                    >
                         {{ entity.claimState.description }}
                     </QBadge>
                 </template>

src/pages/Claim/Card/ClaimSummary.vue

@@ -110,7 +110,7 @@ const markerLabels = [
 
 function stateColor(code) {
     const claimState = claimStates.value.find((state) => state.code === code);
-    return claimState?.classColor || 'grey';
+    return claimState?.classColor;
 }
 
 const developmentColumns = ref([

src/pages/Claim/ClaimList.vue

@@ -103,7 +103,7 @@ const columns = computed(() => [
             condition: () => true,
             color: ({ stateCode }) => {
                 const state = states.value?.find(({ code }) => code === stateCode);
-                return state ? `bg-${state.classColor}` : 'bg-grey';
+                return `bg-${state.classColor}`;
             },
         },
         columnFilter: {