@xen-orchestra/web-core 0.14.0 → 0.15.0

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

@@ -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

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/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/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

@@ -2,8 +2,8 @@
   <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>
+    <div class="label typo-h6">{{ label }}</div>
+    <div class="count typo-body-regular-small">{{ count }}</div>
   </li>
 </template>
 
@@ -25,15 +25,14 @@ defineProps<{
 }
 
 .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);
+  border-left: 0.1rem solid var(--color-brand-txt-base);
+  background-color: var(--color-brand-txt-base);
   margin: 0 1.5rem;
 }
 

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/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/tree/VtsTreeItemError.vue

@@ -1,5 +1,5 @@
 <template>
-  <li class="vts-tree-item-error typo h6-semi-bold">
+  <li class="vts-tree-item-error typo-h6">
     <slot />
   </li>
 </template>

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

@@ -47,7 +47,7 @@ const isDisabled = useDisabled()
       content: '';
       position: absolute;
       inset: -0.4rem;
-      border: 0.2rem solid var(--color-info-txt-base);
+      border: 0.2rem solid var(--color-brand-txt-base);
       border-radius: 0.4rem;
     }
   }

package/lib/components/ui/actions-title/UiActionsTitle.vue

@@ -1,6 +1,6 @@
 <!-- v2 -->
 <template>
-  <span class="ui-actions-title typo p2-regular">
+  <span class="ui-actions-title typo-body-regular-small">
     <slot />
   </span>
 </template>

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

@@ -36,9 +36,9 @@ defineSlots<{
 const isDisabled = useDisabled(() => disabled)
 
 const fontClasses = {
-  small: 'typo p3-medium',
-  medium: 'typo h6-medium',
-  large: 'typo h3-semi-bold',
+  small: 'typo-action-button-small',
+  medium: 'typo-action-button',
+  large: 'typo-h3',
 }
 
 const classNames = computed(() => [
@@ -103,7 +103,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-info-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -137,7 +137,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-info-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -171,7 +171,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-info-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -207,7 +207,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-warning-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -241,7 +241,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-warning-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -275,7 +275,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-warning-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -311,7 +311,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-danger-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -345,7 +345,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-danger-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -379,7 +379,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-danger-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {

package/lib/components/ui/button-icon/UiButtonIcon.vue

@@ -102,7 +102,7 @@ const classNames = computed(() => {
     }
 
     &:focus-visible::before {
-      border-color: var(--color-info-txt-base);
+      border-color: var(--color-brand-txt-base);
     }
 
     &:active {
@@ -133,7 +133,7 @@ const classNames = computed(() => {
     }
 
     &:focus-visible::before {
-      border-color: var(--color-warning-txt-base);
+      border-color: var(--color-brand-txt-base);
     }
 
     &:active {
@@ -168,7 +168,7 @@ const classNames = computed(() => {
     }
 
     &:focus-visible::before {
-      border-color: var(--color-danger-txt-base);
+      border-color: var(--color-brand-txt-base);
     }
 
     &:active {

package/lib/components/ui/card-numbers/UiCardNumbers.vue

@@ -1,9 +1,9 @@
 <!-- v1 -->
 <template>
   <div class="ui-card-numbers" :class="sizeClass">
-    <span class="label" :class="labelFontClass">{{ label }}</span>
+    <span class="label typo-caption-small">{{ label }}</span>
     <div class="values" :class="sizeClass">
-      <span v-if="percentValue" class="value typo c2-semi-bold">
+      <span v-if="percentValue" class="value typo-caption-small">
         {{ percentValue }}
       </span>
 
@@ -31,11 +31,9 @@ const { n } = useI18n()
 
 const sizeClass = computed(() => toVariants({ size: props.size }))
 
-const labelFontClass = computed(() => (props.size === 'medium' ? 'typo c3-semi-bold' : 'typo c2-semi-bold'))
+const valueFontClass = computed(() => (props.size === 'medium' ? 'typo-h3' : 'typo-caption-small'))
 
-const valueFontClass = computed(() => (props.size === 'medium' ? 'typo h3-semi-bold' : 'typo c2-semi-bold'))
-
-const unitFontClass = computed(() => (props.size === 'medium' ? 'typo p2-medium' : 'typo c2-semi-bold'))
+const unitFontClass = computed(() => (props.size === 'medium' ? 'typo-body-bold-small' : 'typo-caption-small'))
 
 const percentValue = computed(() => {
   if (props.size !== 'small' || props.max === undefined || props.max === 0) {

package/lib/components/ui/card-subtitle/UiCardSubtitle.vue

@@ -1,8 +1,8 @@
 <!-- v1 -->
 <template>
-  <div class="ui-card-subtitle">
-    <span class="typo h7-semi-bold"><slot /></span>
-    <span v-if="slots.info" class="typo p3-medium"><slot name="info" /></span>
+  <div class="ui-card-subtitle typo-body-bold-small">
+    <span><slot /></span>
+    <span v-if="slots.info"><slot name="info" /></span>
   </div>
 </template>