refs 6105 css refactoring

src/components/ui/CardDescriptor.vue

@@ -178,9 +178,33 @@ watch($props, async () => {
         }
     }
 }
+body.body--light {
+    .descriptor {
+        .vn-label-value {
+            .label {
+                color: $gray;
+            }
+            .value {
+                color: $light-black;
+            }
+        }
+    }
+}
 </style>
 
 <style lang="scss" scoped>
+$descriptor--light: rgb(87 86 86 / 6%);
+body.body--light {
+    .descriptor {
+        .subtitle {
+            color: $gray;
+        }
+        .list-box {
+            background-color: $descriptor--light;
+        }
+    }
+}
+$descriptor-items-box: rgba(87, 86, 86, 0.2);
 .title {
     overflow: hidden;
     text-overflow: ellipsis;

src/components/ui/CardList.vue

@@ -25,6 +25,18 @@ const $props = defineProps({
     </QCard>
 </template>
 <style lang="scss">
+body.body--light {
+    .card-list-body {
+        .vn-label-value {
+            .label {
+                color: $gray;
+            }
+            .value {
+                color: $light-black;
+            }
+        }
+    }
+}
 .card-list-body {
     .vn-label-value {
         display: flex;

src/components/ui/CardSummary.vue

@@ -58,6 +58,14 @@ watch(props, async () => {
 </template>
 
 <style lang="scss">
+body.body--light {
+    .summary {
+        .header {
+            color: $white;
+        }
+    }
+}
+
 .summary.container {
     display: flex;
     justify-content: center;

src/css/app.scss

@@ -29,32 +29,4 @@ body.body--light {
         background-color: $white;
         color: #555;
     }
-
-    .descriptor {
-        .picture {
-            background-color: $descriptor--light;
-        }
-    }
-
-    .vn-label-value {
-        .label {
-            color: $gray;
-        }
-        .value {
-            color: $light-black;
-        }
-    }
-    .descriptor {
-        .subtitle {
-            color: $gray;
-        }
-        .list-box {
-            background-color: $descriptor--light;
-        }
-    }
-    .summary {
-        .header {
-            color: $white;
-        }
-    }
 }

src/css/quasar.variables.scss

@@ -54,5 +54,3 @@ $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0
 $spacing-md: 16px;
 
 $label-color: rgba(255, 255, 255, 0.6);
-$descriptor-items-box: rgba(87, 86, 86, 0.2);
-$descriptor--light: rgb(87 86 86 / 6%);

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -88,7 +88,7 @@ const setData = (entity) =>
         <template #body="{ entity }">
             <VnLv v-if="entity.ticketState" :label="t('ticket.card.state')">
                 <template #value>
-                    <QBadge :color="entity.ticketState.state.classColor ?? 'orange'">
+                    <QBadge :color="entity.ticketState.state.classColor ?? 'primary'">
                         {{ entity.ticketState.state.name }}
                     </QBadge>
                 </template>