@xen-orchestra/web-core 0.14.0 → 0.15.0

package/lib/components/ui/card-title/UiCardTitle.vue

@@ -2,14 +2,14 @@
 <template>
   <div class="ui-card-title">
     <div class="main-content">
-      <div class="title typo h6-medium">
+      <div class="title typo-body-bold">
         <slot />
       </div>
-      <div v-if="slots.info" class="info typo h7-semi-bold">
+      <div v-if="slots.info" class="info typo-body-bold-small">
         <slot name="info" />
       </div>
     </div>
-    <p v-if="slots.description" class="description typo p3-regular">
+    <p v-if="slots.description" class="description typo-body-regular-small">
       <slot name="description" />
     </p>
   </div>

package/lib/components/ui/checkbox/UiCheckbox.vue

@@ -12,7 +12,7 @@
     <span class="fake-checkbox">
       <VtsIcon :icon accent="current" class="icon" />
     </span>
-    <span v-if="slots.default" class="typo p1-regular">
+    <span v-if="slots.default" class="typo-body-regular">
       <slot />
     </span>
   </label>
@@ -156,7 +156,7 @@ const attrs = useAttrs()
       }
 
       &:focus-visible + .fake-checkbox::before {
-        border: 0.2rem solid var(--color-info-txt-base);
+        border: 0.2rem solid var(--color-brand-txt-base);
       }
 
       &:active + .fake-checkbox {
@@ -207,7 +207,7 @@ const attrs = useAttrs()
       }
 
       &:focus-visible + .fake-checkbox::before {
-        border: 0.2rem solid var(--color-warning-txt-base);
+        border: 0.2rem solid var(--color-brand-txt-base);
       }
 
       &:active + .fake-checkbox {
@@ -262,7 +262,7 @@ const attrs = useAttrs()
       }
 
       &:focus-visible + .fake-checkbox::before {
-        border: 0.2rem solid var(--color-danger-txt-base);
+        border: 0.2rem solid var(--color-brand-txt-base);
       }
 
       &:active + .fake-checkbox {

package/lib/components/ui/chip/UiChip.vue

@@ -1,6 +1,6 @@
 <!-- v4 -->
 <template>
-  <span :class="classNames" class="ui-chip typo p3-regular" @click="emit('edit')">
+  <span :class="classNames" class="ui-chip typo-body-regular-small" @click="emit('edit')">
     <ChipIcon :disabled :icon />
     <span class="content text-ellipsis">
       <slot />

package/lib/components/ui/counter/UiCounter.vue

@@ -21,8 +21,8 @@ const { size, accent, variant } = defineProps<{
 }>()
 
 const typoClasses = {
-  small: 'typo p4-semi-bold',
-  medium: 'typo p1-medium',
+  small: 'typo-body-bold-small',
+  medium: 'typo-body-bold',
 }
 
 const classNames = computed(() => {
@@ -57,16 +57,16 @@ const classNames = computed(() => {
       color: var(--color-brand-txt-item);
     }
 
-    &.accent--info {
-      background-color: var(--color-info-item-base);
-      color: var(--color-info-txt-item);
-    }
-
     &.accent--neutral {
       background-color: var(--color-neutral-txt-primary);
       color: var(--color-neutral-background-primary);
     }
 
+    &.accent--info {
+      background-color: var(--color-info-item-base);
+      color: var(--color-info-txt-item);
+    }
+
     &.accent--success {
       background-color: var(--color-success-item-base);
       color: var(--color-success-txt-item);

package/lib/components/ui/dropdown-button/UiDropdownButton.vue

@@ -2,7 +2,7 @@
 <template>
   <button :class="{ selected }" :disabled="isDisabled" class="ui-dropdown-item" type="button">
     <VtsIcon :icon accent="current" class="left-icon" fixed-width />
-    <span class="typo p1-regular label">
+    <span class="typo-action-button label">
       <slot />
     </span>
     <VtsIcon :icon="faAngleDown" accent="current" class="right-icon" fixed-width />
@@ -62,7 +62,7 @@ const isDisabled = useDisabled(() => disabled)
       content: '';
       position: absolute;
       inset: -0.5rem;
-      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/head-bar/UiHeadBar.vue

@@ -7,11 +7,11 @@
           <VtsIcon :icon accent="current" />
         </slot>
       </span>
-      <h4 v-tooltip class="typo h4-medium label text-ellipsis">
+      <h4 v-tooltip class="typo-h4 label text-ellipsis">
         <slot />
       </h4>
     </div>
-    <div v-if="slots.status" class="status typo c3-regular">
+    <div v-if="slots.status" class="status typo-caption-small">
       <slot name="status" />
     </div>
     <div v-if="slots.actions" class="actions">

package/lib/components/ui/info/UiInfo.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="ui-info">
     <VtsIcon :accent class="icon" :icon="faCircle" :overlay-icon="icon" />
-    <p v-tooltip="!wrap" class="typo p3-regular" :class="{ 'text-ellipsis': !wrap }">
+    <p v-tooltip="!wrap" class="typo-form-info" :class="{ 'text-ellipsis': !wrap }">
       <slot />
     </p>
   </div>

package/lib/components/ui/input/UiInput.vue

@@ -6,7 +6,14 @@
     </UiLabel>
     <div>
       <VtsIcon :icon accent="current" class="before" />
-      <input :id v-model.trim="modelValue" class="typo p1-regular input text-ellipsis" :type :disabled v-bind="attrs" />
+      <input
+        :id
+        v-model.trim="modelValue"
+        class="typo-body-regular input text-ellipsis"
+        :type
+        :disabled
+        v-bind="attrs"
+      />
       <VtsIcon
         v-if="!attrs.disabled && modelValue && clearable"
         :icon="faXmark"

package/lib/components/ui/label/UiLabel.vue

@@ -2,7 +2,7 @@
 <template>
   <div :class="toVariants({ accent })" class="ui-label">
     <VtsIcon accent="current" :icon class="icon" />
-    <label :for="htmlFor" :class="{ required }" class="typo c2-semi-bold label">
+    <label :for="htmlFor" :class="{ required }" class="typo-caption label">
       <slot />
     </label>
     <UiLink v-if="href" class="learn-more-link" size="small" :href>{{ $t('learn-more') }}</UiLink>

package/lib/components/ui/legend/UiLegend.vue

@@ -2,9 +2,9 @@
 <template>
   <li :class="classNames" class="ui-legend">
     <VtsIcon :icon="faCircle" accent="current" class="circle-icon" />
-    <span class="label typo p3-regular"><slot /></span>
-    <VtsIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" accent="brand" />
-    <span v-if="valueLabel" class="value-and-unit typo c3-semi-bold">{{ valueLabel }}</span>
+    <span class="label typo-body-regular-small"><slot /></span>
+    <VtsIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" accent="info" />
+    <span v-if="valueLabel" class="value-and-unit typo-caption-small">{{ valueLabel }}</span>
   </li>
 </template>
 

package/lib/components/ui/legend-title/UiLegendTitle.vue

@@ -1,6 +1,6 @@
 <!-- v3 -->
 <template>
-  <div class="ui-legend-title typo c3-semi-bold">
+  <div class="ui-legend-title typo-caption-small">
     <slot />
     <VtsIcon v-tooltip="iconTooltip ?? false" :icon accent="info" />
   </div>

package/lib/components/ui/link/UiLink.vue

@@ -22,8 +22,8 @@ const props = defineProps<
 >()
 
 const typoClasses = {
-  small: 'typo p3-regular-underline',
-  medium: 'typo p1-regular-underline',
+  small: 'typo-action-link-small',
+  medium: 'typo-action-link',
 }
 
 const { component, attributes, isDisabled } = useLinkComponent('span', () => props)
@@ -53,7 +53,7 @@ const classes = computed(() => [typoClasses[props.size], { disabled: isDisabled.
       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/object-link/UiObjectLink.vue

@@ -1,6 +1,6 @@
 <!-- v3 -->
 <template>
-  <RouterLink v-if="route && !disabled" :to="route" class="ui-object-link is-link typo p3-regular-underline">
+  <RouterLink v-if="route && !disabled" :to="route" class="ui-object-link is-link typo-action-link-small">
     <span class="icon">
       <slot name="icon">
         <VtsIcon :icon accent="current" />
@@ -10,7 +10,7 @@
       <slot />
     </span>
   </RouterLink>
-  <span v-else :class="{ disabled }" class="ui-object-link typo p3-regular-underline">
+  <span v-else :class="{ disabled }" class="ui-object-link typo-action-link-small">
     <span class="icon">
       <slot name="icon">
         <VtsIcon :icon accent="current" />
@@ -43,7 +43,7 @@ defineSlots<{
   display: flex;
   min-width: 0;
   align-items: center;
-  color: var(--color-info-txt-base);
+  color: var(--color-brand-txt-base);
   gap: 1rem;
 
   &.disabled {
@@ -53,18 +53,18 @@ defineSlots<{
 
   .icon {
     color: var(--color-neutral-txt-primary);
-    font-size: 0.8rem;
+    font-size: 1.6rem;
   }
 
   /* INTERACTION VARIANTS */
 
   &.is-link {
     &:hover {
-      color: var(--color-info-txt-hover);
+      color: var(--color-brand-txt-hover);
     }
 
     &:active {
-      color: var(--color-info-txt-active);
+      color: var(--color-brand-txt-active);
     }
 
     &:focus-visible {
@@ -74,7 +74,7 @@ defineSlots<{
         content: '';
         position: absolute;
         inset: -0.6rem;
-        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/panel/UiPanel.vue

@@ -23,10 +23,12 @@ const slots = defineSlots<{
 
 <style scoped lang="postcss">
 .ui-panel {
-  height: 100%;
+  max-height: calc(100dvh - 5.5rem);
+  position: sticky;
+  top: 0;
   display: flex;
   flex-direction: column;
-  border: 0.1rem solid var(--color-neutral-border);
+  border-inline-start: 0.1rem solid var(--color-neutral-border);
   background-color: var(--color-neutral-background-secondary);
 
   .header {

package/lib/components/ui/query-search-bar/UiQuerySearchBar.vue

@@ -1,7 +1,7 @@
 <!-- v3 -->
 <template>
   <form class="ui-query-search-bar" @submit.prevent="emit('search', value)">
-    <label v-if="uiStore.isDesktop" :for="id" class="typo p2-regular label">
+    <label v-if="uiStore.isDesktop" :for="id" class="typo-body-regular-small label">
       {{ $t('core.query-search-bar.label') }}
     </label>
     <UiInput

package/lib/components/ui/quick-task-item/UiQuickTaskItem.vue

@@ -5,7 +5,7 @@
       <UiButtonIcon accent="brand" :icon="isExpanded ? faAngleDown : faAngleRight" size="small" />
     </div>
     <div class="content">
-      <div class="typo p1-medium">
+      <div class="typo-body-bold">
         {{ task.name }}
       </div>
       <div class="informations">
@@ -13,10 +13,10 @@
           <UiTag v-if="task.tag" accent="neutral" variant="primary">{{ task.tag }}</UiTag>
           <div v-if="hasSubTasks" class="subtasks">
             <VtsIcon :icon="faCircleNotch" accent="current" />
-            <span class="typo p4-medium">{{ $t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
+            <span class="typo-body-regular-small">{{ $t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
           </div>
         </div>
-        <div v-if="task.start" class="line-2 typo p4-regular">
+        <div v-if="task.start" class="line-2 typo-body-regular-small">
           {{ $d(task.start, 'datetime_short') }}
           <template v-if="task.end">
             <VtsIcon :icon="faArrowRight" accent="current" />

package/lib/components/ui/radio-button/UiRadioButton.vue

@@ -1,6 +1,6 @@
 <!-- v4 -->
 <template>
-  <label :class="variant" class="ui-radio-button typo p1-regular">
+  <label :class="variant" class="ui-radio-button typo-body-regular">
     <span class="radio-container">
       <input v-model="model" :disabled="isDisabled" :value class="input" type="radio" />
       <VtsIcon :icon="faCircle" accent="current" class="radio-icon" />
@@ -60,7 +60,7 @@ const isDisabled = useDisabled(() => disabled)
         position: absolute;
         content: '';
         inset: -0.5rem;
-        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/stacked-bar/StackedBarSegment.vue

@@ -4,7 +4,7 @@
     v-tooltip="{ selector: '.text-ellipsis' }"
     :class="`accent--${accent}`"
     :style="{ width: percentage + '%' }"
-    class="stacked-bar-segment typo c4-semi-bold"
+    class="stacked-bar-segment typo-caption-small"
   >
     <div ref="ellipsisElement" :class="{ hidden }" class="text-ellipsis">
       {{ $n(percentage / 100, 'percent') }}

package/lib/components/ui/table-pagination/UiTablePagination.vue

@@ -7,13 +7,13 @@
       <PaginationButton :disabled="isLastPage || disabled" :icon="faAngleRight" @click="goToNextPage()" />
       <PaginationButton :disabled="isLastPage || disabled" :icon="faAngleDoubleRight" @click="goToLastPage()" />
     </div>
-    <span class="typo p3-regular label">
+    <span class="typo-body-regular-small label">
       {{ $t('core.select.n-object-of', { from: startIndex, to: endIndex, total: totalItems }) }}
     </span>
-    <span class="typo p3-regular label show">{{ $t('core.show-by') }}</span>
+    <span class="typo-body-regular-small label show">{{ $t('core.show-by') }}</span>
     <div class="dropdown-wrapper">
-      <select v-model="pageSize" :disabled class="dropdown typo c3-regular" @change="goToFirstPage">
-        <option v-for="option in pageSizeOptions" :key="option" :value="option" class="typo p2-medium">
+      <select v-model="pageSize" :disabled class="dropdown typo-body-regular-small" @change="goToFirstPage">
+        <option v-for="option in pageSizeOptions" :key="option" :value="option" class="typo-body-bold-small">
           {{ option }}
         </option>
       </select>

package/lib/components/ui/tag/UiTag.vue

@@ -1,7 +1,7 @@
 <!-- v3 -->
 <!-- TODO: implement tertiary variant to bump to v4 -->
 <template>
-  <span :class="toVariants({ accent, variant })" class="ui-tag typo p3-regular">
+  <span :class="toVariants({ accent, variant })" class="ui-tag typo-body-regular-small">
     <slot name="icon">
       <VtsIcon :icon accent="current" fixed-width />
     </slot>

package/lib/components/ui/title/UiTitle.vue

@@ -1,7 +1,7 @@
 <!-- v2 -->
 <template>
   <div class="ui-title">
-    <div class="typo h4-medium label">
+    <div class="typo-h4 label">
       <slot />
     </div>
     <div v-if="slots.actions" class="actions">
@@ -23,10 +23,10 @@ const slots = defineSlots<{
   align-items: center;
   gap: 2.4rem;
   padding-block-end: 0.4rem;
-  border-bottom: 0.1rem solid var(--color-info-txt-base);
+  border-bottom: 0.1rem solid var(--color-brand-txt-base);
 
   .label {
-    color: var(--color-info-txt-base);
+    color: var(--color-brand-txt-base);
   }
 
   .actions {

package/lib/components/ui/toaster/UiToaster.vue

@@ -4,10 +4,10 @@
     <div class="content">
       <VtsIcon class="information-icon" :accent :icon="faCircle" :overlay-icon="icon" />
       <div>
-        <div class="typo h5-semi-bold">
+        <div class="typo-h5">
           <slot />
         </div>
-        <div v-if="slots.description" class="typo p2-regular">
+        <div v-if="slots.description" class="typo-body-regular-small">
           <slot name="description" />
         </div>
       </div>

package/lib/components/ui/toggle/UiToggle.vue

@@ -1,6 +1,6 @@
 <!-- v2 -->
 <template>
-  <label class="ui-toggle typo c2-semi-bold">
+  <label class="ui-toggle typo-caption">
     <slot />
     <span class="toggle-container">
       <input v-model="checked" :disabled="isDisabled || busy" class="input" type="checkbox" />
@@ -68,7 +68,7 @@ const isDisabled = useDisabled(() => disabled)
         position: absolute;
         content: '';
         inset: -0.5rem;
-        border: 0.2rem solid var(--color-info-txt-base);
+        border: 0.2rem solid var(--color-brand-txt-base);
         border-radius: 0.4rem;
       }
     }
@@ -88,7 +88,7 @@ const isDisabled = useDisabled(() => disabled)
     width: 2rem;
     height: 2rem;
     margin: -0.1rem 0 0 -0.1rem;
-    color: var(--color-info-txt-base);
+    color: var(--color-brand-txt-base);
     background-color: var(--color-neutral-background-primary);
     border: 0.1rem solid var(--border-color);
     border-radius: 1rem;

package/lib/components/ui/tooltip/UiTooltip.vue

@@ -1,6 +1,6 @@
 <!-- v2 -->
 <template>
-  <div v-if="!isDisabled" ref="tooltipElement" class="ui-tooltip typo p3-regular">
+  <div v-if="!isDisabled" ref="tooltipElement" class="ui-tooltip typo-body-regular-small">
     {{ content }}
   </div>
 </template>

package/lib/components/ui/top-bottom-table/UiTopBottomTable.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="ui-top-bottom-table">
     <div class="content">
-      <span class="typo p3-regular label">
+      <span class="typo-body-regular-small label">
         {{ $t('core.select.n-selected-of', { count: selectedItems, total: totalItems }) }}
       </span>
 

package/lib/components/ui/tree-item-label/UiTreeItemLabel.vue

@@ -25,7 +25,7 @@
         @click="emit('toggle')"
       />
       <div v-else class="h-line" />
-      <a v-tooltip="{ selector: '.text' }" :href class="link typo p2-medium" @click="navigate">
+      <a v-tooltip="{ selector: '.text' }" :href class="link typo-body-bold-small" @click="navigate">
         <slot name="icon">
           <VtsIcon :icon accent="current" class="icon" />
         </slot>

package/lib/components/ui/user-link/UiUserLink.vue

@@ -1,10 +1,10 @@
 <!-- v3 -->
 <template>
-  <RouterLink v-if="route && !disabled" :to="route" class="ui-user-link is-link typo p3-regular-underline">
+  <RouterLink v-if="route && !disabled" :to="route" class="ui-user-link is-link typo-action-link-small">
     <UiUserLogo size="extra-small" class="logo" />
     {{ username }}
   </RouterLink>
-  <span v-else :class="toVariants({ disabled })" class="ui-user-link typo p3-regular-underline">
+  <span v-else :class="toVariants({ disabled })" class="ui-user-link typo-action-link-small">
     <UiUserLogo size="extra-small" class="logo" />
     {{ username }}
   </span>
@@ -26,7 +26,7 @@ defineProps<{
 .ui-user-link {
   display: inline-flex;
   align-items: center;
-  color: var(--color-info-txt-base);
+  color: var(--color-brand-txt-base);
   gap: 0.8rem;
 
   &.disabled {
@@ -37,18 +37,18 @@ defineProps<{
 
   &.is-link {
     &:hover {
-      color: var(--color-info-txt-hover);
+      color: var(--color-brand-txt-hover);
 
       .logo {
-        border-color: var(--color-info-txt-hover);
+        border-color: var(--color-brand-txt-hover);
       }
     }
 
     &:active {
-      color: var(--color-info-txt-active);
+      color: var(--color-brand-txt-active);
 
       .logo {
-        border-color: var(--color-info-txt-active);
+        border-color: var(--color-brand-txt-active);
       }
     }
 
@@ -59,7 +59,7 @@ defineProps<{
         content: '';
         position: absolute;
         inset: -0.6rem;
-        border: 0.2rem solid var(--color-info-txt-base);
+        border: 0.2rem solid var(--color-brand-txt-base);
         border-radius: 0.4rem;
       }
     }

package/lib/i18n.ts

@@ -33,6 +33,10 @@ export const locales: Locales = {
     code: 'cs',
     name: 'čeština',
   },
+  sv: {
+    code: 'sv',
+    name: 'Svenska',
+  },
 }
 
 export default createI18n({