@xen-orchestra/web-core 0.12.0 → 0.14.0

package/lib/assets/css/_colors.pcss

@@ -30,7 +30,7 @@
 
   /* INFO */
 
-  --color-info-txt-base: #6b63bf;
+  --color-info-txt-base: #1f76af;
   --color-info-txt-hover: color-mix(in srgb, #000000 20%, var(--color-info-txt-base));
   --color-info-txt-active: color-mix(in srgb, #000000 40%, var(--color-info-txt-base));
 
@@ -38,11 +38,11 @@
   --color-info-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-info-item-base));
   --color-info-background-active: color-mix(in srgb, #ffffff 70%, var(--color-info-item-base));
 
-  --color-info-txt-item: #030029;
-  --color-info-item-base: #8f84ff;
+  --color-info-txt-item: #041018;
+  --color-info-item-base: #2ca3f2;
   --color-info-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-info-item-base));
   --color-info-item-active: color-mix(in srgb, #ffffff 40%, var(--color-info-item-base));
-  --color-info-item-disabled: #d2ceff;
+  --color-info-item-disabled: #abdafa;
 
   /* SUCCESS */
 
@@ -125,7 +125,7 @@
 
   /* INFO */
 
-  --color-info-txt-base: #9b92ff;
+  --color-info-txt-base: #2ca3f2;
   --color-info-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-info-txt-base));
   --color-info-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-info-txt-base));
 
@@ -133,11 +133,11 @@
   --color-info-background-hover: color-mix(in srgb, #000000 60%, var(--color-info-item-base));
   --color-info-background-active: color-mix(in srgb, #000000 50%, var(--color-info-item-base));
 
-  --color-info-txt-item: #030029;
-  --color-info-item-base: #8f84ff;
+  --color-info-txt-item: #041018;
+  --color-info-item-base: #2ca3f2;
   --color-info-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-info-item-base));
   --color-info-item-active: color-mix(in srgb, #ffffff 40%, var(--color-info-item-base));
-  --color-info-item-disabled: #393566;
+  --color-info-item-disabled: #124161;
 
   /* SUCCESS */
 

package/lib/assets/css/base.pcss

@@ -19,8 +19,8 @@
 
   --scrollbar-width: 1.4rem;
   --scrollbar-border: 0.4rem;
-  --scrollbar-thumb-color: var(--color-info-item-active);
-  --scrollbar-track-color: var(--color-info-background-selected);
+  --scrollbar-thumb-color: var(--color-brand-item-active);
+  --scrollbar-track-color: var(--color-brand-background-selected);
 
   /* Firefox/Gecko and Chrome versions >= 121 */
   scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);

package/lib/components/cell-object/VtsCellObject.vue

@@ -12,7 +12,7 @@
           :left-icon="faCopy"
           variant="secondary"
           size="small"
-          :accent="copied ? 'success' : 'info'"
+          accent="brand"
           @click="copy(id)"
         >
           {{ copied ? $t('core.copied') : $t('core.copy-id') }}

package/lib/components/console/VtsActionsConsole.vue

@@ -2,7 +2,7 @@
   <UiCardTitle>{{ $t('console-actions') }}</UiCardTitle>
   <UiButton
     class="button"
-    accent="info"
+    accent="brand"
     variant="tertiary"
     size="medium"
     :left-icon="isFullscreen ? faDownLeftAndUpRightToCenter : faUpRightAndDownLeftFromCenter"
@@ -12,7 +12,7 @@
   </UiButton>
   <UiButton
     class="button"
-    accent="info"
+    accent="brand"
     variant="tertiary"
     size="medium"
     :left-icon="faArrowUpRightFromSquare"
@@ -22,7 +22,7 @@
   </UiButton>
   <UiButton
     class="button"
-    accent="info"
+    accent="brand"
     variant="tertiary"
     size="medium"
     :left-icon="faKeyboard"

package/lib/components/console/VtsClipboardConsole.vue

@@ -3,10 +3,10 @@
     <UiCardTitle>{{ $t('console-clipboard') }}</UiCardTitle>
     <UiTextarea v-tooltip="$t('coming-soon')" accent="info" disabled :model-value="modelValue" />
     <div class="buttons-container">
-      <UiButton v-tooltip="$t('coming-soon')" accent="info" variant="primary" size="medium" disabled>
+      <UiButton v-tooltip="$t('coming-soon')" accent="brand" variant="primary" size="medium" disabled>
         {{ $t('send') }}
       </UiButton>
-      <UiButton v-tooltip="$t('coming-soon')" accent="info" variant="secondary" size="medium" disabled>
+      <UiButton v-tooltip="$t('coming-soon')" accent="brand" variant="secondary" size="medium" disabled>
         {{ $t('receive') }}
       </UiButton>
     </div>

package/lib/components/dropdown/DropdownItem.vue

@@ -8,7 +8,7 @@
       <slot />
     </div>
     <div v-if="info" class="info-text p3 italic">{{ info }}</div>
-    <VtsIcon v-if="arrow" :accent="disabled ? 'current' : 'info'" :icon="faAngleRight" class="right-icon" />
+    <VtsIcon v-if="arrow" :accent="disabled ? 'current' : 'brand'" :icon="faAngleRight" class="right-icon" />
   </div>
 </template>
 

package/lib/components/icon/VtsIcon.vue

@@ -50,10 +50,10 @@ defineProps<{
   }
 
   &.brand {
-    color: var(--color-info-item-base);
+    color: var(--color-brand-item-base);
 
     .overlay-icon {
-      color: var(--color-info-txt-item);
+      color: var(--color-brand-txt-item);
     }
   }
 

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -9,7 +9,7 @@
           content: sidebar.isLocked ? $t('core.sidebar.unlock') : $t('core.sidebar.lock'),
           placement: 'right',
         }"
-        accent="info"
+        accent="brand"
         size="medium"
         :icon="sidebar.isLocked ? faLock : faLockOpen"
         @click="sidebar.toggleLock()"

package/lib/components/resources/VtsResource.vue

@@ -0,0 +1,43 @@
+<template>
+  <li class="vts-resource">
+    <VtsIcon accent="brand" :icon class="icon" />
+    <div class="separator" />
+    <div class="label typo h6-semi-bold">{{ label }}</div>
+    <div class="count typo p2-regular">{{ count }}</div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+defineProps<{
+  icon: IconDefinition
+  label: string
+  count: string | number
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-resource {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  color: var(--color-info-txt-base);
+  font-size: 3.2rem;
+}
+
+.separator {
+  height: 4.5rem;
+  width: 0;
+  border-left: 0.1rem solid var(--color-info-txt-base);
+  background-color: var(--color-info-txt-base);
+  margin: 0 1.5rem;
+}
+
+.count {
+  margin-left: 2rem;
+}
+</style>

package/lib/components/resources/VtsResources.vue

@@ -0,0 +1,13 @@
+<template>
+  <ul class="vts-resources">
+    <slot />
+  </ul>
+</template>
+
+<style lang="postcss" scoped>
+.vts-resources {
+  display: flex;
+  gap: 1rem 5.4rem;
+  flex-wrap: wrap;
+}
+</style>

package/lib/components/task/VtsQuickTaskButton.vue

@@ -2,7 +2,7 @@
   <UiButtonIcon
     ref="buttonRef"
     v-tooltip="{ content: $t('tasks.quick-view'), placement: 'bottom-end' }"
-    accent="info"
+    accent="brand"
     :dot="hasNewTask"
     :icon="faBarsProgress"
     size="large"

package/lib/components/task/VtsQuickTaskTabBar.vue

@@ -2,7 +2,13 @@
   <TabList :disabled="loading">
     <TabItem v-bind="tabs.pending.bindings">
       {{ $t('tasks.quick-view.in-progress') }}
-      <UiCounter v-if="pendingCount !== undefined" :value="pendingCount" accent="info" variant="primary" size="small" />
+      <UiCounter
+        v-if="pendingCount !== undefined"
+        :value="pendingCount"
+        accent="warning"
+        variant="primary"
+        size="small"
+      />
     </TabItem>
     <TabItem v-bind="tabs.success.bindings">
       {{ $t('tasks.quick-view.done') }}

package/lib/components/tree/VtsTreeLine.vue

@@ -22,7 +22,7 @@ defineProps<{
 
   .tree-line-vertical {
     width: 0.1rem;
-    background: var(--color-info-txt-base);
+    background: var(--color-brand-txt-base);
     height: calc(100% + 0.7rem);
     transform: translateY(calc(0.7rem * -1));
   }
@@ -33,7 +33,7 @@ defineProps<{
     background: transparent;
 
     &.right {
-      background: var(--color-info-txt-base);
+      background: var(--color-brand-txt-base);
     }
   }
 }

package/lib/components/tree/VtsTreeLoadingItem.vue

@@ -44,7 +44,7 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
     .loader {
       flex: 1;
       animation: pulse alternate 1s infinite;
-      background-color: var(--color-info-background-selected);
+      background-color: var(--color-brand-background-selected);
     }
   }
 

package/lib/components/ui/account-menu-button/UiAccountMenuButton.vue

@@ -29,15 +29,15 @@ const isDisabled = useDisabled()
   }
 
   &:hover {
-    background-color: var(--color-info-background-hover);
+    background-color: var(--color-brand-background-hover);
   }
 
   &:active {
-    background-color: var(--color-info-background-active);
+    background-color: var(--color-brand-background-active);
   }
 
   &.selected {
-    background-color: var(--color-info-background-selected);
+    background-color: var(--color-brand-background-selected);
   }
 
   &:focus-visible {

package/lib/components/ui/button/UiButton.vue

@@ -1,4 +1,4 @@
-<!-- v4 -->
+<!-- v6 -->
 <template>
   <button :class="classNames" :disabled="busy || isDisabled || lockIcon" class="ui-button" type="button">
     <VtsIcon :busy :icon="leftIcon" accent="current" class="icon" fixed-width />
@@ -16,10 +16,10 @@ import { faLock } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
-type ButtonAccent = 'info' | 'success' | 'warning' | 'danger'
-type ButtonSize = 'small' | 'medium' | 'large'
+type ButtonAccent = 'brand' | 'warning' | 'danger'
+type ButtonSize = 'small' | 'medium'
 
-const props = defineProps<{
+const { accent, variant, size, disabled, busy, lockIcon } = defineProps<{
   variant: ButtonVariant
   accent: ButtonAccent
   size: ButtonSize
@@ -33,7 +33,7 @@ defineSlots<{
   default(): any
 }>()
 
-const isDisabled = useDisabled(() => props.disabled)
+const isDisabled = useDisabled(() => disabled)
 
 const fontClasses = {
   small: 'typo p3-medium',
@@ -42,13 +42,13 @@ const fontClasses = {
 }
 
 const classNames = computed(() => [
-  fontClasses[props.size],
+  fontClasses[size],
   toVariants({
-    accent: props.accent,
-    variant: props.variant,
-    size: props.size,
-    busy: props.busy,
-    lock: props.lockIcon,
+    accent,
+    variant,
+    size,
+    busy,
+    lock: lockIcon,
     disabled: isDisabled.value,
   }),
 ])
@@ -90,16 +90,16 @@ const classNames = computed(() => [
 
   /* ACCENT + VARIANT */
 
-  &.accent--info {
+  &.accent--brand {
     &.variant--primary {
-      background-color: var(--color-info-item-base);
-      border-color: var(--color-info-item-base);
-      color: var(--color-info-txt-item);
+      background-color: var(--color-brand-item-base);
+      border-color: var(--color-brand-item-base);
+      color: var(--color-brand-txt-item);
 
       &:hover {
-        background-color: var(--color-info-item-hover);
-        border-color: var(--color-info-item-hover);
-        color: var(--color-info-txt-item);
+        background-color: var(--color-brand-item-hover);
+        border-color: var(--color-brand-item-hover);
+        color: var(--color-brand-txt-item);
       }
 
       &:focus-visible::before {
@@ -107,33 +107,33 @@ const classNames = computed(() => [
       }
 
       &:active {
-        background-color: var(--color-info-item-active);
-        border-color: var(--color-info-item-active);
-        color: var(--color-info-txt-item);
+        background-color: var(--color-brand-item-active);
+        border-color: var(--color-brand-item-active);
+        color: var(--color-brand-txt-item);
       }
 
       &:is(:disabled, .disabled) {
-        background-color: var(--color-info-item-disabled);
-        border-color: var(--color-info-item-disabled);
+        background-color: var(--color-brand-item-disabled);
+        border-color: var(--color-brand-item-disabled);
         color: var(--color-neutral-txt-secondary);
       }
 
       &.busy {
-        background-color: var(--color-info-item-base);
-        border-color: var(--color-info-item-base);
-        color: var(--color-info-txt-item);
+        background-color: var(--color-brand-item-base);
+        border-color: var(--color-brand-item-base);
+        color: var(--color-brand-txt-item);
       }
     }
 
     &.variant--secondary {
       background-color: var(--color-neutral-background-primary);
-      border-color: var(--color-info-item-base);
-      color: var(--color-info-txt-base);
+      border-color: var(--color-brand-item-base);
+      color: var(--color-brand-txt-base);
 
       &:hover {
         background-color: var(--color-neutral-background-primary);
-        border-color: var(--color-info-item-hover);
-        color: var(--color-info-txt-hover);
+        border-color: var(--color-brand-item-hover);
+        color: var(--color-brand-txt-hover);
       }
 
       &:focus-visible::before {
@@ -142,8 +142,8 @@ const classNames = computed(() => [
 
       &:active {
         background-color: var(--color-neutral-background-primary);
-        border-color: var(--color-info-item-active);
-        color: var(--color-info-txt-active);
+        border-color: var(--color-brand-item-active);
+        color: var(--color-brand-txt-active);
       }
 
       &:is(:disabled, .disabled) {
@@ -154,20 +154,20 @@ const classNames = computed(() => [
 
       &.busy {
         background-color: var(--color-neutral-background-primary);
-        border-color: var(--color-info-item-base);
-        color: var(--color-info-txt-base);
+        border-color: var(--color-brand-item-base);
+        color: var(--color-brand-txt-base);
       }
     }
 
     &.variant--tertiary {
       background-color: transparent;
       border-color: transparent;
-      color: var(--color-info-txt-base);
+      color: var(--color-brand-txt-base);
 
       &:hover {
-        background-color: var(--color-info-background-hover);
-        border-color: var(--color-info-background-hover);
-        color: var(--color-info-txt-hover);
+        background-color: var(--color-brand-background-hover);
+        border-color: var(--color-brand-background-hover);
+        color: var(--color-brand-txt-hover);
       }
 
       &:focus-visible::before {
@@ -175,9 +175,9 @@ const classNames = computed(() => [
       }
 
       &:active {
-        background-color: var(--color-info-background-active);
-        border-color: var(--color-info-background-active);
-        color: var(--color-info-txt-active);
+        background-color: var(--color-brand-background-active);
+        border-color: var(--color-brand-background-active);
+        color: var(--color-brand-txt-active);
       }
 
       &:is(:disabled, .disabled) {
@@ -187,113 +187,9 @@ const classNames = computed(() => [
       }
 
       &.busy {
-        background-color: var(--color-info-background-selected);
-        border-color: var(--color-info-background-selected);
-        color: var(--color-info-txt-base);
-      }
-    }
-  }
-
-  &.accent--success {
-    &.variant--primary {
-      background-color: var(--color-success-item-base);
-      border-color: var(--color-success-item-base);
-      color: var(--color-success-txt-item);
-
-      &:hover {
-        background-color: var(--color-success-item-hover);
-        border-color: var(--color-success-item-hover);
-        color: var(--color-success-txt-item);
-      }
-
-      &:focus-visible::before {
-        border-color: var(--color-success-txt-base);
-      }
-
-      &:active {
-        background-color: var(--color-success-item-active);
-        border-color: var(--color-success-item-active);
-        color: var(--color-success-txt-item);
-      }
-
-      &:is(:disabled, .disabled) {
-        background-color: var(--color-success-item-disabled);
-        border-color: var(--color-success-item-disabled);
-        color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        background-color: var(--color-success-item-base);
-        border-color: var(--color-success-item-base);
-        color: var(--color-success-txt-item);
-      }
-    }
-
-    &.variant--secondary {
-      background-color: var(--color-neutral-background-primary);
-      border-color: var(--color-success-txt-base);
-      color: var(--color-success-txt-base);
-
-      &:hover {
-        background-color: var(--color-neutral-background-primary);
-        border-color: var(--color-success-txt-hover);
-        color: var(--color-success-txt-hover);
-      }
-
-      &:focus-visible::before {
-        border-color: var(--color-success-txt-base);
-      }
-
-      &:active {
-        background-color: var(--color-neutral-background-primary);
-        border-color: var(--color-success-txt-active);
-        color: var(--color-success-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        background-color: var(--color-neutral-background-disabled);
-        border-color: var(--color-neutral-txt-secondary);
-        color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        background-color: var(--color-neutral-background-primary);
-        border-color: var(--color-success-txt-base);
-        color: var(--color-success-txt-base);
-      }
-    }
-
-    &.variant--tertiary {
-      background-color: transparent;
-      border-color: transparent;
-      color: var(--color-success-txt-base);
-
-      &:hover {
-        background-color: var(--color-success-background-hover);
-        border-color: var(--color-success-background-hover);
-        color: var(--color-success-txt-hover);
-      }
-
-      &:focus-visible::before {
-        border-color: var(--color-success-txt-base);
-      }
-
-      &:active {
-        background-color: var(--color-success-background-active);
-        border-color: var(--color-success-background-active);
-        color: var(--color-success-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        background-color: transparent;
-        border-color: transparent;
-        color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        background-color: var(--color-success-background-selected);
-        border-color: var(--color-success-background-selected);
-        color: var(--color-success-txt-base);
+        background-color: var(--color-brand-background-selected);
+        border-color: var(--color-brand-background-selected);
+        color: var(--color-brand-txt-base);
       }
     }
   }
@@ -509,18 +405,13 @@ const classNames = computed(() => [
   /* SIZE */
 
   &.size--small {
-    padding: 0.4rem 0.8rem;
+    padding: 0.8rem;
     border-radius: 0.2rem;
   }
 
   &.size--medium {
-    padding: 0.8rem 1.6rem;
+    padding: 1.2rem 1.6rem;
     border-radius: 0.4rem;
   }
-
-  &.size--large {
-    padding: 1.6rem 2.4rem;
-    border-radius: 0.8rem;
-  }
 }
 </style>