From 301ad2372fe840c38a718509db581eeec9032ae3 Mon Sep 17 00:00:00 2001
From: Olivier Floch <olivier.floch@vates.fr>
Date: Wed, 18 Sep 2024 11:00:10 +0200
Subject: [PATCH] feat(xo-core): update `Counter` component to v2

---
 .../lite/src/components/HostPatchesTable.vue  |   8 +-
 .../component-story/ComponentStory.vue        |  10 +-
 .../src/components/infra/InfraHostItem.vue    |  11 +-
 .../pool/dashboard/PoolDashboardAlarms.vue    |   4 +-
 .../lite/src/components/ui/UiCardTitle.vue    |   4 +-
 .../web-core/card/card-title.story.vue        |   4 +-
 .../vts-counter.story.vue}                    |  14 +-
 .../stories/web-core/tab/tab-item.story.vue   |   4 +-
 .../stories/web-core/tree/tree-list.story.md  |   4 +-
 .../stories/web-core/tree/tree-list.story.vue |   4 +-
 .../lite/src/views/pool/PoolTasksView.vue     |   4 +-
 .../web-core/lib/components/UiCounter.vue     |  97 ------------
 .../lib/components/counter/VtsCounter.vue     | 147 ++++++++++++++++++
 .../lib/components/task/QuickTaskTabBar.vue   |  26 +++-
 .../web-core/lib/types/color.type.ts          |   2 -
 .../web-core/lib/types/size.type.ts           |   2 -
 .../site/dashboard/BackupIssues.vue           |   4 +-
 .../web/src/components/tree/HostTreeItem.vue  |  10 +-
 .../web/src/components/tree/PoolTreeItem.vue  |  10 +-
 19 files changed, 230 insertions(+), 139 deletions(-)
 rename @xen-orchestra/lite/src/stories/web-core/{ui-counter.story.vue => counter/vts-counter.story.vue} (50%)
 delete mode 100644 @xen-orchestra/web-core/lib/components/UiCounter.vue
 create mode 100644 @xen-orchestra/web-core/lib/components/counter/VtsCounter.vue

diff --git a/@xen-orchestra/lite/src/components/HostPatchesTable.vue b/@xen-orchestra/lite/src/components/HostPatchesTable.vue
index 0354bf7c70b..4fa69f74f97 100644
--- a/@xen-orchestra/lite/src/components/HostPatchesTable.vue
+++ b/@xen-orchestra/lite/src/components/HostPatchesTable.vue
@@ -9,7 +9,7 @@
       </th>
       <td v-if="hasMultipleHosts">
         <UiSpinner v-if="!areAllLoaded" />
-        <UiCounter
+        <VtsCounter
           v-else
           v-tooltip="{
             placement: 'left',
@@ -19,7 +19,9 @@
           }"
           :value="patch.$hostRefs.size"
           class="counter"
-          color="danger"
+          accent="danger"
+          variant="primary"
+          size="small"
         />
       </td>
     </tr>
@@ -31,7 +33,7 @@ import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
 import UiSpinner from '@/components/ui/UiSpinner.vue'
 import UiTable from '@/components/ui/UiTable.vue'
 import type { XenApiPatchWithHostRefs } from '@/composables/host-patches.composable'
-import UiCounter from '@core/components/UiCounter.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useUiStore } from '@core/stores/ui.store'
 import { computed } from 'vue'
diff --git a/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue b/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
index 3a16d3fb9c8..fd4569ab04c 100644
--- a/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
+++ b/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
@@ -3,7 +3,13 @@
     <TabItem v-bind="tab(TAB.PROPS, propParams)">Props</TabItem>
     <TabItem class="event-tab" v-bind="tab(TAB.EVENTS, eventParams)">
       Events
-      <UiCounter v-if="unreadEventsCount > 0" :value="unreadEventsCount" color="success" />
+      <VtsCounter
+        v-if="unreadEventsCount > 0"
+        :value="unreadEventsCount"
+        accent="success"
+        variant="primary"
+        size="small"
+      />
     </TabItem>
     <TabItem v-bind="tab(TAB.SLOTS, slotParams)">Slots</TabItem>
     <TabItem v-bind="tab(TAB.SETTINGS, settingParams)">Settings</TabItem>
@@ -80,11 +86,11 @@ import {
   type Param,
 } from '@/libs/story/story-param'
 import UiButton from '@core/components/button/UiButton.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import MenuItem from '@core/components/menu/MenuItem.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { faSliders } from '@fortawesome/free-solid-svg-icons'
 import 'highlight.js/styles/github-dark.css'
 import { uniqueId, upperFirst } from 'lodash-es'
diff --git a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
index 43064c5dbe7..e6e586a3451 100644
--- a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
+++ b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
@@ -4,7 +4,14 @@
       {{ host.name_label || '(Host)' }}
       <template #addons>
         <UiIcon v-if="isPoolMaster" v-tooltip="$t('master')" :icon="faStar" color="warning" />
-        <UiCounter v-if="isReady" v-tooltip="$t('running-vm', { count: vmCount })" :value="vmCount" color="primary" />
+        <VtsCounter
+          v-if="isReady"
+          v-tooltip="$t('running-vm', { count: vmCount })"
+          :value="vmCount"
+          accent="brand"
+          variant="secondary"
+          size="small"
+        />
       </template>
     </TreeItemLabel>
     <template #sublist>
@@ -21,11 +28,11 @@ import type { XenApiHost } from '@/libs/xen-api/xen-api.types'
 import { useHostStore } from '@/stores/xen-api/host.store'
 import { usePoolStore } from '@/stores/xen-api/pool.store'
 import { useVmStore } from '@/stores/xen-api/vm.store'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faServer, faStar } from '@fortawesome/free-solid-svg-icons'
 import { useToggle } from '@vueuse/shared'
diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue
index 2ea46b6642c..58761b3ec09 100644
--- a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue
+++ b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue
@@ -3,7 +3,7 @@
     <UiCardTitle>
       {{ $t('alarms') }}
       <template v-if="isReady && alarms.length > 0" #right>
-        <UiCounter :value="alarms.length" color="danger" />
+        <VtsCounter :value="alarms.length" accent="danger" variant="primary" size="small" />
       </template>
     </UiCardTitle>
     <div v-if="!isStarted" class="pre-start">
@@ -46,7 +46,7 @@ import UiCardTitle from '@/components/ui/UiCardTitle.vue'
 import UiTable from '@/components/ui/UiTable.vue'
 import { useAlarmStore } from '@/stores/xen-api/alarm.store'
 import UiButton from '@core/components/button/UiButton.vue'
-import UiCounter from '@core/components/UiCounter.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 
 const { records: alarms, start, isStarted, isReady, hasError } = useAlarmStore().subscribe({ defer: true })
 </script>
diff --git a/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue b/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue
index 26ae1cc9c06..67cf6f5fa03 100644
--- a/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue
+++ b/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue
@@ -2,7 +2,7 @@
   <div class="ui-section-title" :class="tags.left">
     <component :is="tags.left" v-if="$slots.default || left" class="left">
       <slot>{{ left }}</slot>
-      <UiCounter v-if="count > 0" class="count" :value="count" color="primary" />
+      <VtsCounter v-if="count > 0" class="count" :value="count" accent="brand" variant="primary" size="small" />
     </component>
     <component :is="tags.right" v-if="$slots.right || right" class="right">
       <slot name="right">{{ right }}</slot>
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import { UiCardTitleLevel } from '@/types/enums'
-import UiCounter from '@core/components/UiCounter.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import { computed } from 'vue'
 
 const props = withDefaults(
diff --git a/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue b/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue
index 5c27f77c692..1c24ed69089 100644
--- a/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue
@@ -12,7 +12,7 @@
   >
     <CardTitle v-bind="properties">
       {{ settings.defaultSlotContent }}
-      <UiCounter :value="3" color="danger" size="medium" />
+      <VtsCounter :value="3" accent="danger" size="medium" variant="primary" />
       <template #info>
         {{ settings.infoSlotContent }}
         <UiButton level="tertiary" size="small" color="normal" :right-icon="faAngleRight">See all</UiButton>
@@ -28,6 +28,6 @@ import { slot, setting } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
 import UiButton from '@core/components/button/UiButton.vue'
 import CardTitle from '@core/components/card/CardTitle.vue'
-import UiCounter from '@core/components/UiCounter.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui-counter.story.vue b/@xen-orchestra/lite/src/stories/web-core/counter/vts-counter.story.vue
similarity index 50%
rename from @xen-orchestra/lite/src/stories/web-core/ui-counter.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/counter/vts-counter.story.vue
index be11650c59e..89f3a3ae240 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui-counter.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/counter/vts-counter.story.vue
@@ -3,21 +3,21 @@
     v-slot="{ properties }"
     :params="[
       prop('value').type(`'number' | 'string'`).str().required().preset(2).widget(),
-      prop('color')
-        .type('CounterColor')
+      prop('accent')
         .required()
-        .enum('primary', 'secondary', 'success', 'warning', 'danger', 'disabled')
-        .preset('primary')
+        .enum('brand', 'neutral', 'success', 'warning', 'danger', 'muted')
+        .preset('brand')
         .widget(),
-      prop('size').type('CounterSize').enum('small', 'medium').widget(),
+      prop('size').enum('small', 'medium').required().preset('small').widget(),
+      prop('variant').enum('primary', 'secondary').required().preset('primary').widget(),
     ]"
   >
-    <UiCounter v-bind="properties" />
+    <VtsCounter v-bind="properties" />
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop } from '@/libs/story/story-param'
-import UiCounter from '@core/components/UiCounter.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tab/tab-item.story.vue b/@xen-orchestra/lite/src/stories/web-core/tab/tab-item.story.vue
index 67077932140..04cf1573283 100644
--- a/@xen-orchestra/lite/src/stories/web-core/tab/tab-item.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/tab/tab-item.story.vue
@@ -13,7 +13,7 @@
     <TabList>
       <TabItem v-bind="properties">
         {{ settings.label }}
-        <UiCounter v-if="settings.counter" :value="settings.counter" color="info" />
+        <VtsCounter v-if="settings.counter" :value="settings.counter" accent="brand" variant="primary" size="small" />
       </TabItem>
     </TabList>
   </ComponentStory>
@@ -23,7 +23,7 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, setting, slot } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md b/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md
index eb2302170be..32859ec5b95 100644
--- a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md
+++ b/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md
@@ -11,7 +11,7 @@
             Host - {{ i }}
             <template #addons>
               <ButtonIcon v-if="i === 2" :icon="faStar" color="warning" />
-              <UiCounter color="info" value="3" />
+              <VtsCounter accent="brand" value="3" variant="secondary" size="small" />
             </template>
           </TreeItemLabel>
           <template #sublist>
@@ -40,10 +40,10 @@
 ```vue-script
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { faCity, faEllipsis, faServer, faStar } from '@fortawesome/free-solid-svg-icons'
 ```
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue b/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue
index dc37424eae1..935952b159d 100644
--- a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue
@@ -10,7 +10,7 @@
                 Host - {{ i }}
                 <template #addons>
                   <ButtonIcon v-if="i === 2" :icon="faStar" color="warning" />
-                  <UiCounter color="info" value="3" />
+                  <VtsCounter accent="brand" value="3" variant="secondary" size="small" />
                 </template>
               </TreeItemLabel>
               <template #sublist>
@@ -42,10 +42,10 @@ import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import { slot } from '@/libs/story/story-param'
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { faCity, faEllipsis, faServer, faStar } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue b/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue
index fab0e833cbd..4851b2136c0 100644
--- a/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue
+++ b/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue
@@ -2,7 +2,7 @@
   <UiCard :color="hasError ? 'error' : undefined">
     <UiTitle class="title-with-counter" type="h4">
       {{ $t('tasks') }}
-      <UiCounter :value="pendingTasks.length" color="primary" size="medium" />
+      <VtsCounter :value="pendingTasks.length" accent="brand" size="medium" variant="primary" />
     </UiTitle>
     <TasksTable :finished-tasks="finishedTasks" :pending-tasks="pendingTasks" />
     <UiCardSpinner v-if="!isReady" />
@@ -16,7 +16,7 @@ import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
 import UiTitle from '@/components/ui/UiTitle.vue'
 import { usePageTitleStore } from '@/stores/page-title.store'
 import { useTaskStore } from '@/stores/xen-api/task.store'
-import UiCounter from '@core/components/UiCounter.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import { useI18n } from 'vue-i18n'
 
 const { pendingTasks, finishedTasks, isReady, hasError } = useTaskStore().subscribe()
diff --git a/@xen-orchestra/web-core/lib/components/UiCounter.vue b/@xen-orchestra/web-core/lib/components/UiCounter.vue
deleted file mode 100644
index 9e426b6f780..00000000000
--- a/@xen-orchestra/web-core/lib/components/UiCounter.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <span :class="classNames" class="ui-counter typo">
-    <span class="inner">{{ value }}</span>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import type { CounterColor } from '@core/types/color.type'
-import type { CounterSize } from '@core/types/size.type'
-import { computed } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    value: number | string
-    color: CounterColor
-    size?: CounterSize
-  }>(),
-  { size: 'small' }
-)
-
-const fontClasses = {
-  small: 'p4-semi-bold',
-  medium: 'p1-medium',
-}
-
-const classNames = computed(() => {
-  return [props.color, props.size, fontClasses[props.size]]
-})
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.ui-counter {
-  &.primary {
-    --background-color: var(--color-normal-item-base);
-    --color: var(--color-normal-txt-item);
-  }
-
-  &.secondary {
-    --background-color: var(--color-neutral-txt-primary);
-    --color: var(--color-neutral-background-primary);
-  }
-
-  &.success {
-    --background-color: var(--color-success-item-base);
-    --color: var(--color-success-txt-item);
-  }
-
-  &.warning {
-    --background-color: var(--color-warning-item-base);
-    --color: var(--color-warning-txt-item);
-  }
-
-  &.danger {
-    --background-color: var(--color-danger-item-base);
-    --color: var(--color-danger-txt-item);
-  }
-
-  &.disabled {
-    --background-color: var(--color-neutral-background-disabled);
-    --color: var(--color-neutral-txt-secondary);
-  }
-}
-
-/* SIZE VARIANTS */
-.ui-counter {
-  &.small {
-    --height: 1.5rem;
-    --padding: 0 0.4rem;
-  }
-
-  &.medium {
-    --height: 2.4rem;
-    --padding: 0 0.6rem;
-  }
-}
-
-/* IMPLEMENTATION */
-.ui-counter {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  text-transform: lowercase;
-  color: var(--color);
-  height: var(--height);
-  min-width: var(--height);
-  padding: var(--padding);
-  background-color: var(--background-color);
-  border-radius: calc(var(--height) / 2);
-
-  .inner {
-    line-height: 0;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/counter/VtsCounter.vue b/@xen-orchestra/web-core/lib/components/counter/VtsCounter.vue
new file mode 100644
index 00000000000..4a9608cafe5
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/counter/VtsCounter.vue
@@ -0,0 +1,147 @@
+<!-- v2 -->
+<template>
+  <span :class="classNames" class="vts-counter">
+    <span class="inner">{{ value }}</span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { toVariants } from '@core/utils/to-variants.util'
+import { computed } from 'vue'
+
+type CounterAccent = 'brand' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'
+type CounterVariant = 'primary' | 'secondary'
+type CounterSize = 'small' | 'medium'
+
+const props = defineProps<{
+  value: number | string
+  accent: CounterAccent
+  variant: CounterVariant
+  size: CounterSize
+}>()
+
+const typoClasses = {
+  small: 'typo p4-semi-bold',
+  medium: 'typo p1-medium',
+}
+
+const classNames = computed(() => {
+  return [
+    typoClasses[props.size],
+    toVariants({
+      accent: props.accent,
+      variant: props.variant,
+      size: props.size,
+    }),
+  ]
+})
+</script>
+
+<style lang="postcss" scoped>
+/*
+VARIANT + ACCENT
+--vts-counter--background-color
+--vts-counter--color
+*/
+.vts-counter {
+  &.variant--primary {
+    &.accent--brand {
+      --vts-counter--background-color: var(--color-normal-item-base);
+      --vts-counter--color: var(--color-normal-txt-item);
+    }
+
+    &.accent--neutral {
+      --vts-counter--background-color: var(--color-neutral-txt-primary);
+      --vts-counter--color: var(--color-neutral-background-primary);
+    }
+
+    &.accent--success {
+      --vts-counter--background-color: var(--color-success-item-base);
+      --vts-counter--color: var(--color-success-txt-item);
+    }
+
+    &.accent--warning {
+      --vts-counter--background-color: var(--color-warning-item-base);
+      --vts-counter--color: var(--color-warning-txt-item);
+    }
+
+    &.accent--danger {
+      --vts-counter--background-color: var(--color-danger-item-base);
+      --vts-counter--color: var(--color-danger-txt-item);
+    }
+
+    &.accent--muted {
+      --vts-counter--background-color: var(--color-neutral-background-disabled);
+      --vts-counter--color: var(--color-neutral-txt-secondary);
+    }
+  }
+
+  &.variant--secondary {
+    &.accent--brand {
+      --vts-counter--background-color: var(--color-normal-background-selected);
+      --vts-counter--color: var(--color-normal-txt-base);
+    }
+
+    &.accent--neutral {
+      --vts-counter--background-color: var(--color-neutral-background-secondary);
+      --vts-counter--color: var(--color-neutral-txt-secondary);
+    }
+
+    &.accent--success {
+      --vts-counter--background-color: var(--color-success-background-selected);
+      --vts-counter--color: var(--color-success-txt-base);
+    }
+
+    &.accent--warning {
+      --vts-counter--background-color: var(--color-warning-background-selected);
+      --vts-counter--color: var(--color-warning-txt-base);
+    }
+
+    &.accent--danger {
+      --vts-counter--background-color: var(--color-danger-background-selected);
+      --vts-counter--color: var(--color-danger-txt-base);
+    }
+
+    &.accent--muted {
+      --vts-counter--background-color: var(--color-neutral-background-secondary);
+      --vts-counter--color: var(--color-neutral-txt-secondary);
+    }
+  }
+}
+
+/*
+SIZE
+--vts-counter--height
+--vts-counter--padding
+*/
+.vts-counter {
+  &.size--small {
+    --vts-counter--height: 1.5rem;
+    --vts-counter--padding: 0 0.4rem;
+  }
+
+  &.size--medium {
+    --vts-counter--height: 2.4rem;
+    --vts-counter--padding: 0 0.6rem;
+  }
+}
+
+/* IMPLEMENTATION */
+.vts-counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  text-transform: lowercase;
+  color: var(--vts-counter--color);
+  height: var(--vts-counter--height);
+  min-width: var(--vts-counter--height);
+  padding: var(--vts-counter--padding);
+  background-color: var(--vts-counter--background-color);
+  border-radius: calc(var(--vts-counter--height) / 2);
+
+  .inner {
+    line-height: 0;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue b/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
index 64471bdad6a..255253e3696 100644
--- a/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
+++ b/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
@@ -2,15 +2,33 @@
   <TabList :disabled="loading">
     <TabItem v-bind="tabs.pending.bindings">
       {{ $t('tasks.quick-view.in-progress') }}
-      <UiCounter v-if="pendingCount !== undefined" :value="pendingCount" color="primary" />
+      <VtsCounter
+        v-if="pendingCount !== undefined"
+        :value="pendingCount"
+        accent="brand"
+        variant="primary"
+        size="small"
+      />
     </TabItem>
     <TabItem v-bind="tabs.success.bindings">
       {{ $t('tasks.quick-view.done') }}
-      <UiCounter v-if="successCount !== undefined" :value="successCount" color="success" />
+      <VtsCounter
+        v-if="successCount !== undefined"
+        :value="successCount"
+        accent="success"
+        variant="primary"
+        size="small"
+      />
     </TabItem>
     <TabItem v-bind="tabs.failure.bindings">
       {{ $t('tasks.quick-view.failed') }}
-      <UiCounter v-if="failureCount !== undefined" :value="failureCount" color="danger" />
+      <VtsCounter
+        v-if="failureCount !== undefined"
+        :value="failureCount"
+        accent="danger"
+        variant="primary"
+        size="small"
+      />
     </TabItem>
     <Divider type="tab" />
     <TabItem v-bind="tabs.all.bindings">
@@ -26,10 +44,10 @@
 </template>
 
 <script lang="ts" setup>
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import Divider from '@core/components/divider/Divider.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { useTabList } from '@core/composables/tab-list.composable'
 import type { TaskTab } from '@core/types/task.type'
 
diff --git a/@xen-orchestra/web-core/lib/types/color.type.ts b/@xen-orchestra/web-core/lib/types/color.type.ts
index 271d492b4fb..439f65d419b 100644
--- a/@xen-orchestra/web-core/lib/types/color.type.ts
+++ b/@xen-orchestra/web-core/lib/types/color.type.ts
@@ -2,6 +2,4 @@ export type Color = 'normal' | 'success' | 'warning' | 'danger'
 
 export type IconColor = 'current' | 'normal' | 'success' | 'warning' | 'danger'
 
-export type CounterColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
-
 export type TagColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
diff --git a/@xen-orchestra/web-core/lib/types/size.type.ts b/@xen-orchestra/web-core/lib/types/size.type.ts
index 2c4896871da..87af42d1773 100644
--- a/@xen-orchestra/web-core/lib/types/size.type.ts
+++ b/@xen-orchestra/web-core/lib/types/size.type.ts
@@ -1,3 +1 @@
-export type CounterSize = 'small' | 'medium'
-
 export type UserLogoSize = 'extra-small' | 'small' | 'medium'
diff --git a/@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue b/@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue
index 7a265c12326..a735852a9ab 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue
@@ -2,7 +2,7 @@
   <UiCard>
     <CardTitle>
       {{ $t('backup-issues') }}
-      <UiCounter :value="backupIssues.length" color="danger" size="medium" />
+      <VtsCounter :value="backupIssues.length" accent="danger" size="medium" variant="primary" />
       <template #description>{{ $t('in-last-three-jobs') }}</template>
     </CardTitle>
     <LoadingHero :disabled="isReady" type="card">
@@ -19,10 +19,10 @@ import { useDashboardStore } from '@/stores/xo-rest-api/dashboard.store'
 import { convertBackupIssueToCore } from '@/utils/convert-backup-issue-to-core.util'
 import BackupItem from '@core/components/backup-item/BackupItem.vue'
 import CardTitle from '@core/components/card/CardTitle.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
 import NoDataHero from '@core/components/state-hero/NoDataHero.vue'
 import UiCard from '@core/components/UiCard.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { computed } from 'vue'
 
 const { backupIssues, isReady } = useDashboardStore().subscribe()
diff --git a/@xen-orchestra/web/src/components/tree/HostTreeItem.vue b/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
index 405ea366823..20f2fb49e5f 100644
--- a/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
+++ b/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
@@ -11,7 +11,13 @@
       </template>
       <template #addons>
         <UiIcon v-if="isMaster" v-tooltip="$t('master')" :icon="faStar" color="warning" />
-        <UiCounter v-tooltip="$t('running-vm', runningVmsCount)" :value="runningVmsCount" color="primary" />
+        <VtsCounter
+          v-tooltip="$t('running-vm', runningVmsCount)"
+          :value="runningVmsCount"
+          accent="brand"
+          variant="secondary"
+          size="small"
+        />
       </template>
     </TreeItemLabel>
     <template v-if="branch.hasChildren" #sublist>
@@ -28,12 +34,12 @@ import { useHostStore } from '@/stores/xo-rest-api/host.store'
 import { useVmStore } from '@/stores/xo-rest-api/vm.store'
 import type { HostBranch } from '@/types/tree.type'
 import type { HostState } from '@core/types/object-icon.type'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faServer, faStar } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
diff --git a/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue b/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue
index b7e92c99f94..48f0dc44e70 100644
--- a/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue
+++ b/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue
@@ -3,7 +3,13 @@
     <TreeItemLabel :icon="faCity" :route="`/pool/${branch.data.id}`" @toggle="branch.toggleExpand()">
       {{ branch.data.name_label }}
       <template #addons>
-        <UiCounter v-tooltip="$t('running-vm', runningVmsCount)" :value="runningVmsCount" color="primary" />
+        <VtsCounter
+          v-tooltip="$t('running-vm', runningVmsCount)"
+          :value="runningVmsCount"
+          accent="brand"
+          variant="secondary"
+          size="small"
+        />
       </template>
     </TreeItemLabel>
     <template v-if="branch.hasChildren" #sublist>
@@ -20,10 +26,10 @@ import HostTreeList from '@/components/tree/HostTreeList.vue'
 import VmTreeList from '@/components/tree/VmTreeList.vue'
 import { useVmStore } from '@/stores/xo-rest-api/vm.store'
 import type { HostBranch, PoolBranch, VmLeaf } from '@/types/tree.type'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faCity } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'