fix: เเก้ การเรียกใช้ตัวเเปรสี

src/components/StatCardComponet.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
   }[];
 }>();
 
-const color = ['purple', 'pink', 'yellow', 'green'];
+const color = ['purple', 'pink', 'yellow', 'green', 'blue'];
 </script>
 
 <template>
@@ -22,12 +22,7 @@ const color = ['purple', 'pink', 'yellow', 'green'];
       :key="v.label"
       class="bordered wave col-12"
       :class="`color-${color[i % 5]}`"
-      style="
+      style="width: 200px; min-width: 150px; box-shadow: var(--shadow-2)"
-        width: 200px;
-        min-width: 150px;
-        max-height: 95px;
-        box-shadow: var(--shadow-2);
-      "
     >
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
         <path
@@ -36,7 +31,7 @@ const color = ['purple', 'pink', 'yellow', 'green'];
         ></path>
       </svg>
 
-      <div class="column justify-around stat-card-comtent">
+      <div class="column justify-around stat-card-content">
         <div class="col-4 text-h5 text-weight-bold">{{ v.amount }}</div>
         <div class="text-weight-bold">{{ v.label }}</div>
       </div>
@@ -64,13 +59,17 @@ svg {
   fill-opacity: 1;
 }
 
-.stat-card-comtent {
+.stat-card-content {
   z-index: 2;
   color: var(--_color-stat-card);
   height: 100%;
   width: 200px;
 }
 
+.color-blue {
+  --_color-stat-card: var(--blue-5);
+}
+
 .color-purple {
   --_color-stat-card: var(--purple-8);
 }

src/css/app.scss

@@ -4,17 +4,6 @@
 @import 'open-props/shadows';
 @import 'open-props/zindex';
 
-:root {
-  --_main-page-branch-tooltip: 100%;
-  --_bg-box-content: var(--blue-5);
-  --_color-box-content-text: var(--_bg-box-content);
-  --_bg-box-content-text: white;
-  --_bg-tooltip-branch: #f0f9ff;
-  --_bg-tooltip-branch-arrow: var(--_bg-tooltip-branch);
-
-  --_color-stat-card: var(--blue-5);
-}
-
 html {
   --brand-1: #035aa1;
   --brand-2: #f50000;