feat: color adjustment

src/components/01_branch-management/BranchCard.vue

@@ -3,6 +3,7 @@ defineProps<{
   data: {
     id: string;
     hq: boolean;
+    status: string;
     branchLabelCode: string;
     branchLabelName: string;
     branchLabelTel: string;
@@ -28,7 +29,7 @@ defineProps<{
       class="branch-card__row"
       :class="{ 'branch-card__header': i === 0 }"
       v-for="([k, v], i) in Object.entries(data)
-        .slice(2)
+        .slice(3)
         .filter(
           ([key], idx) =>
             idx === 0 || (fieldSelected ? fieldSelected.includes(key) : true),
@@ -63,6 +64,8 @@ defineProps<{
 .branch-card {
   --_branch-card-row-fg: 0 0% 100%;
   --_branch-card-row-bg: var(--blue-5-hsl);
+  --_branch-badge-fg: var(--green-8-hsl);
+  --_branch-badge-bg: var(--green-6-hsl);
 
   &.branch-card__hq {
     --_branch-card-row-bg: var(--pink-6-hsl);
@@ -73,6 +76,8 @@ defineProps<{
   }
 
   &.branch-card__inactive {
+    --_branch-badge-fg: var(--red-4-hsl);
+    --_branch-badge-bg: var(--red-4-hsl);
     filter: grayscale(40%);
     opacity: 0.5;
   }
@@ -123,13 +128,8 @@ defineProps<{
         display: inline-block;
         border-radius: 999rem;
         padding-inline: var(--size-2);
-        text-transform: lowercase;
-        color: hsl(var(--green-8-hsl));
-        background-color: hsl(var(--green-1-hsl));
-
-        &::first-letter {
-          text-transform: uppercase;
-        }
+        color: hsl(var(--_branch-badge-fg));
+        background-color: hsla(var(--_branch-badge-bg) / 0.1);
       }
     }
   }