refactor: statcard new color lime, light-purple

src/components/StatCardComponent.vue

@@ -14,13 +14,17 @@ const props = withDefaults(
         | 'yellow'
         | 'red'
         | 'magenta'
-        | 'blue';
+        | 'blue'
+        | 'lime'
+        | 'light-purple';
     }[];
     dark?: boolean;
+    textSize?: string;
     labelI18n?: boolean;
   }>(),
   {
     labelI18n: false,
+    textSize: '12px',
   },
 );
 </script>
@@ -43,8 +47,13 @@ const props = withDefaults(
           />
         </div>
         <div class="col-6 justify-center column">
-          <div class="col-6 ellipsis text-bold" style="width: 100%">
+          <div
-            {{ labelI18n ? $t(v.label) : v.label }}
+            class="col-6 ellipsis text-bold text-caption"
+            style="width: 100%"
+          >
+            <span :style="`font-size: ${textSize}`">
+              {{ labelI18n ? $t(v.label) : v.label }}
+            </span>
             <q-tooltip
               anchor="top middle"
               self="bottom middle"
@@ -108,6 +117,14 @@ const props = withDefaults(
   --_color: var(--pink-8-hsl);
 }
 
+.stat-card__lime {
+  --_color: var(--jungle-8-hsl);
+}
+
+.stat-card__light-purple {
+  --_color: var(--purple-7-hsl);
+}
+
 .stat-card__blue {
   --_color: var(--blue-6-hsl);
 }