@xen-orchestra/web-core 0.13.0 → 0.15.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/_typography.pcss

@@ -1,7 +1,149 @@
-@import 'typography/_size.pcss';
-@import 'typography/_weight.pcss';
-@import 'typography/_style.pcss';
-@import 'typography/_line-height.pcss';
-@import 'typography/_letter-spacing.pcss';
-@import 'typography/_legacy.pcss';
 @import 'typography/_utils.pcss';
+
+/* HEADINGS */
+
+.typo-h1 {
+  font-size: 3.6rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.typo-h2 {
+  font-size: 2.8rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.typo-h3 {
+  font-size: 2.4rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.typo-h4 {
+  font-size: 2rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.typo-h5 {
+  font-size: 1.8rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.typo-h6 {
+  font-size: 1.6rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+/* BODY */
+
+.typo-body-regular {
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.typo-body-bold {
+  font-size: 1.6rem;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.typo-body-underline {
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 1.5;
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+}
+
+.typo-body-regular-small {
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.typo-body-bold-small {
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.typo-body-underline-small {
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 1.5;
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+}
+
+/* CAPTIONS */
+
+.typo-caption {
+  font-size: 1.6rem;
+  font-weight: 600;
+  line-height: 1.5;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.typo-caption-small {
+  font-size: 1.4rem;
+  font-weight: 600;
+  line-height: 1.5;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* FORM */
+
+.typo-form-label {
+  font-size: 1.6rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.typo-form-value {
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 1;
+}
+
+.typo-form-info {
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+/* ACTION */
+
+.typo-action-button {
+  font-size: 1.6rem;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.typo-action-button-small {
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.typo-action-link {
+  font-size: 1.6rem;
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: underline;
+}
+
+.typo-action-link-small {
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: underline;
+}

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);
@@ -45,7 +45,7 @@
 }
 
 a {
-  color: var(--color-info-txt-base);
+  color: var(--color-brand-txt-base);
 }
 
 code,
@@ -62,17 +62,17 @@ pre {
 
 .link {
   text-decoration: underline;
-  color: var(--color-info-txt-base);
+  color: var(--color-brand-txt-base);
   cursor: pointer;
 }
 
 .link:hover {
-  color: var(--color-info-txt-hover);
+  color: var(--color-brand-txt-hover);
 }
 
 .link:active,
 .link.router-link-active {
-  color: var(--color-info-txt-active);
+  color: var(--color-brand-txt-active);
 }
 
 .link.router-link-active {

package/lib/components/backup-item/VtsBackupItem.vue

@@ -3,7 +3,7 @@
     <RouterLink v-if="backup.route !== undefined" :to="backup.route">
       {{ backup.label }}
     </RouterLink>
-    <p v-else class="typo p3-medium">
+    <p v-else class="typo-body-bold">
       {{ backup.label }}
     </p>
     <div class="states">

package/lib/components/card/VtsCardRowKeyValue.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vts-card-row-key-value typo p3-regular">
+  <div class="vts-card-row-key-value typo-body-regular-small">
     <div class="key">
       <slot name="key" />
     </div>
@@ -26,15 +26,17 @@ const slots = defineSlots<{
 .vts-card-row-key-value {
   display: flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: 1.2rem;
 
   .key {
+    width: 12rem;
     min-width: 12rem;
     overflow-wrap: break-word;
     color: var(--color-neutral-txt-secondary);
   }
 
   .value {
+    width: 20rem;
     color: var(--color-neutral-txt-primary);
   }
 

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

@@ -4,7 +4,7 @@
     <div class="data">
       <slot />
       <template v-if="id !== undefined">
-        <span v-tooltip class="id typo p4-regular-italic text-ellipsis">
+        <span v-tooltip class="id typo-form-info text-ellipsis">
           {{ id }}
         </span>
         <UiButton
@@ -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/cell-text/VtsCellText.vue

@@ -1,11 +1,11 @@
 <!-- WIP -->
 <template>
   <td class="vts-cell-text">
-    <div class="data typo p2-regular">
+    <div class="data typo-body-regular-small">
       <span v-tooltip class="text-ellipsis">
         <slot />
       </span>
-      <span v-if="slots.secondary" class="info typo p4-regular">
+      <span v-if="slots.secondary" class="info">
         <slot name="secondary" />
       </span>
     </div>

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/data-table/VtsDataTable.vue

@@ -38,21 +38,29 @@ defineSlots<{
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
+  overflow-x: auto;
 
   :deep(tbody) tr {
     &:hover {
       cursor: pointer;
-      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);
     }
+
     &:last-child {
       border-bottom: 0.1rem solid var(--color-neutral-border);
     }
   }
+
+  :deep(th) {
+    width: 10rem;
+  }
 }
 </style>

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/menu/MenuTrigger.vue

@@ -40,12 +40,12 @@ defineProps<{
     cursor: pointer;
 
     &:hover {
-      background-color: var(--color-info-background-selected);
+      background-color: var(--color-brand-background-selected);
     }
 
     &:active,
     &.active {
-      background-color: var(--color-info-background-hover);
+      background-color: var(--color-brand-background-hover);
     }
   }
 }

package/lib/components/resources/VtsResource.vue

@@ -0,0 +1,42 @@
+<template>
+  <li class="vts-resource">
+    <VtsIcon accent="brand" :icon class="icon" />
+    <div class="separator" />
+    <div class="label typo-h6">{{ label }}</div>
+    <div class="count typo-body-regular-small">{{ 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 {
+  font-size: 3.2rem;
+}
+
+.separator {
+  height: 4.5rem;
+  width: 0;
+  border-left: 0.1rem solid var(--color-brand-txt-base);
+  background-color: var(--color-brand-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/state-hero/VtsPageNotFoundHero.vue

@@ -19,7 +19,7 @@ defineProps<{
   margin-top: 4rem;
 
   .numeric {
-    color: var(--color-info-txt-base);
+    color: var(--color-brand-txt-base);
     font-size: 9.6rem;
     font-weight: 900;
     letter-spacing: 1em;

package/lib/components/state-hero/VtsStateHero.vue

@@ -24,7 +24,7 @@ const slots = defineSlots<{
   default?(): any
 }>()
 
-const typoClass = computed(() => (props.type === 'page' ? 'typo h2-black' : 'typo h4-medium'))
+const typoClass = computed(() => (props.type === 'page' ? 'typo-h2' : 'typo-h4'))
 const error = computed(() => !props.busy && props.image === 'error')
 
 const imageSrc = computed(() => {
@@ -54,7 +54,7 @@ const imageSrc = computed(() => {
 
   .loader,
   .text {
-    color: var(--color-info-txt-base);
+    color: var(--color-brand-txt-base);
   }
 
   .image {

package/lib/components/tab/TabItem.vue

@@ -1,6 +1,6 @@
 <!-- v1.0 -->
 <template>
-  <component :is="tag" :class="classNames" class="tab-item typo">
+  <component :is="tag" :class="classNames" class="tab-item">
     <slot />
   </component>
 </template>
@@ -26,7 +26,7 @@ const isDisabled = useDisabled(() => props.disabled)
 
 const classNames = computed(() => {
   return [
-    isMobile.value ? 'c3-semi-bold' : 'c1-semi-bold',
+    isMobile.value ? 'typo-caption-small' : 'typo-caption',
     {
       disabled: isDisabled.value,
       active: props.active,
@@ -46,20 +46,20 @@ const classNames = computed(() => {
 
   &:is(:hover, .hover, :focus-visible) {
     --color: var(--color-neutral-txt-primary);
-    --border-color: var(--color-info-item-hover);
-    --background-color: var(--color-info-background-hover);
+    --border-color: var(--color-brand-item-hover);
+    --background-color: var(--color-brand-background-hover);
   }
 
   &:is(:active, .pressed) {
     --color: var(--color-neutral-txt-primary);
-    --border-color: var(--color-info-item-active);
-    --background-color: var(--color-info-background-active);
+    --border-color: var(--color-brand-item-active);
+    --background-color: var(--color-brand-background-active);
   }
 
   &:is(.active, .selected) {
     --color: var(--color-neutral-txt-primary);
-    --border-color: var(--color-info-item-base);
-    --background-color: var(--color-info-background-selected);
+    --border-color: var(--color-brand-item-base);
+    --background-color: var(--color-brand-background-selected);
   }
 
   &:is(:disabled, .disabled) {
@@ -71,11 +71,11 @@ const classNames = computed(() => {
 
 /* SIZE VARIANTS */
 .tab-item {
-  &.c3-semi-bold {
+  &.typo-caption-small {
     --spacing: 0.8rem;
   }
 
-  &.c1-semi-bold {
+  &.typo-caption {
     --spacing: 1.6rem;
   }
 }

package/lib/components/table/ColumnTitle.vue

@@ -25,7 +25,7 @@
     >
       <VtsIcon :icon="interaction.icon" accent="current" />
       {{ interaction.label }}
-      <i v-if="currentInteraction?.id === interaction.id" class="current-interaction typo p3-regular-italic">
+      <i v-if="currentInteraction?.id === interaction.id" class="current-interaction typo-body-regular-small">
         {{ $t('core.current').toLowerCase() }}
       </i>
     </MenuItem>
@@ -95,22 +95,22 @@ const updateInteraction = (interaction: Interaction) => {
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .column-header.interactive {
-  --color: var(--color-info-txt-base);
+  --color: var(--color-brand-txt-base);
   --background-color: var(--color-neutral-background-primary);
 
   &.focus {
-    --color: var(--color-info-txt-base);
-    --background-color: var(--color-info-background-selected);
+    --color: var(--color-brand-txt-base);
+    --background-color: var(--color-brand-background-selected);
   }
 
   &:hover {
-    --color: var(--color-info-txt-hover);
-    --background-color: var(--color-info-background-hover);
+    --color: var(--color-brand-txt-hover);
+    --background-color: var(--color-brand-background-hover);
   }
 
   &:active {
-    --color: var(--color-info-txt-active);
-    --background-color: var(--color-info-background-active);
+    --color: var(--color-brand-txt-active);
+    --background-color: var(--color-brand-background-active);
   }
 
   &.disabled {

package/lib/components/table/VtsTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <table :class="{ 'vertical-border': verticalBorder }" class="vts-table typo p2-regular">
+  <table :class="{ 'vertical-border': verticalBorder }" class="vts-table typo-body-regular-small">
     <slot />
   </table>
 </template>
@@ -43,7 +43,7 @@ provide('tableName', props.name)
   :deep(thead) {
     th,
     td {
-      color: var(--color-info-txt-base);
+      color: var(--color-brand-txt-base);
       font-size: 1.4rem;
       font-weight: 400;
       text-transform: uppercase;

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/VtsQuickTaskList.vue

@@ -7,7 +7,7 @@
       </div>
     </li>
     <template v-else>
-      <li v-if="tasks.length === 0" class="typo p1-medium">{{ $t('tasks.no-tasks') }}</li>
+      <li v-if="tasks.length === 0" class="typo-body-bold">{{ $t('tasks.no-tasks') }}</li>
       <UiQuickTaskItem v-for="task of tasks" :key="task.id" :task />
     </template>
   </ul>

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') }}