feat: update Person Card

src/components/StatCardComponent.vue

@@ -5,7 +5,15 @@ const props = withDefaults(
       icon: string;
       count: number;
       label: string;
-      color: 'pink' | 'purple' | 'green' | 'orange';
+      color:
+        | 'pink'
+        | 'purple'
+        | 'green'
+        | 'orange'
+        | 'cyan'
+        | 'yellow'
+        | 'red'
+        | 'magenta';
     }[];
     dark?: boolean;
     labelI18n?: boolean;
@@ -79,10 +87,26 @@ const props = withDefaults(
   --_color: var(--teal-10-hsl);
 }
 
+.stat-card__cyan {
+  --_color: var(--cyan-7-hsl);
+}
+
+.stat-card__red {
+  --_color: var(--red-6-hsl);
+}
+
+.stat-card__yellow {
+  --_color: var(--orange-4-hsl);
+}
+
 .stat-card__orange {
   --_color: var(--orange-5-hsl);
 }
 
+.stat-card__magenta {
+  --_color: var(--pink-8-hsl);
+}
+
 .dark .stat-card__purple {
   --_color: var(--violet-10-hsl);
 }
@@ -94,4 +118,8 @@ const props = withDefaults(
 .dark .stat-card__orange {
   --_color: var(--orange-6-hsl);
 }
+
+.dark .stat-card__magenta {
+  --_color: var(--pink-7-hsl);
+}
 </style>