@xen-orchestra/web-core 0.13.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>
@@ -46,7 +46,7 @@ const slots = defineSlots<{
     display: flex;
     align-items: center;
     gap: 0.8rem;
-    color: var(--color-info-txt-base);
+    color: var(--color-brand-txt-base);
   }
 
   .description {

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

@@ -1,4 +1,4 @@
-<!-- v3 -->
+<!-- v5 -->
 <template>
   <label :class="classNames" class="ui-checkbox" v-bind="wrapperAttrs">
     <input
@@ -10,13 +10,13 @@
       v-bind="attrs"
     />
     <span class="fake-checkbox">
-      <VtsIcon :icon accent="info" class="icon" />
+      <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>
-  <UiInfo v-if="slots.info" :accent>
+  <UiInfo v-if="slots.info" :accent="accent === 'brand' ? 'info' : accent">
     <slot name="info" />
   </UiInfo>
 </template>
@@ -29,11 +29,11 @@ import { toVariants } from '@core/utils/to-variants.util'
 import { faCheck, faMinus } from '@fortawesome/free-solid-svg-icons'
 import { computed, type LabelHTMLAttributes, useAttrs } from 'vue'
 
-type CheckboxAccent = 'info' | 'success' | 'warning' | 'danger'
+type CheckboxAccent = 'brand' | 'warning' | 'danger'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<{
+const { accent, disabled } = defineProps<{
   accent: CheckboxAccent
   disabled?: boolean
   wrapperAttrs?: LabelHTMLAttributes
@@ -46,11 +46,11 @@ const slots = defineSlots<{
   info?(): any
 }>()
 
-const isDisabled = useDisabled(() => props.disabled)
+const isDisabled = useDisabled(() => disabled)
 
 const classNames = computed(() => [
   toVariants({
-    accent: props.accent,
+    accent,
     disabled: isDisabled.value,
   }),
 ])
@@ -127,144 +127,59 @@ const attrs = useAttrs()
     }
   }
 
-  &.accent--info {
-    .input {
+  &.accent--brand {
+    .input:not(:disabled) {
       & + .fake-checkbox {
-        border-color: var(--color-info-item-base);
+        border-color: var(--color-brand-item-base);
       }
 
       &.indeterminate + .fake-checkbox {
-        background-color: var(--color-info-item-base);
+        background-color: var(--color-brand-item-base);
 
         &:hover {
           border-color: transparent;
-          background-color: var(--color-info-item-hover);
+          background-color: var(--color-brand-item-hover);
         }
 
         &:active {
-          background-color: var(--color-info-item-active);
+          background-color: var(--color-brand-item-active);
         }
       }
 
       &.indeterminate:hover + .fake-checkbox {
         border-color: transparent;
-        background-color: var(--color-info-item-hover);
+        background-color: var(--color-brand-item-hover);
       }
 
       &:hover + .fake-checkbox {
-        border-color: var(--color-info-item-hover);
+        border-color: var(--color-brand-item-hover);
       }
 
       &: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 {
-        border-color: var(--color-info-item-active);
+        border-color: var(--color-brand-item-active);
       }
 
       &:checked + .fake-checkbox {
         border-color: transparent;
-        background-color: var(--color-info-item-base);
+        background-color: var(--color-brand-item-base);
       }
 
       &:checked:hover + .fake-checkbox {
-        background-color: var(--color-info-item-hover);
+        background-color: var(--color-brand-item-hover);
       }
 
       &:checked:active + .fake-checkbox {
-        background-color: var(--color-info-item-active);
-      }
-
-      &:disabled {
-        & + .fake-checkbox {
-          cursor: not-allowed;
-          border-color: var(--color-neutral-txt-secondary);
-
-          > .icon {
-            color: var(--color-neutral-txt-secondary);
-          }
-        }
-
-        &:checked + .fake-checkbox,
-        &.indeterminate + .fake-checkbox {
-          border-color: transparent;
-          background-color: var(--color-info-item-disabled);
-        }
-      }
-    }
-  }
-
-  &.accent--success {
-    .input {
-      & + .fake-checkbox {
-        border-color: var(--color-success-item-base);
-      }
-
-      &.indeterminate + .fake-checkbox {
-        background-color: var(--color-success-item-base);
-
-        &:hover {
-          border-color: transparent;
-          background-color: var(--color-success-item-hover);
-        }
-
-        &:active {
-          background-color: var(--color-success-item-active);
-        }
-      }
-
-      &.indeterminate:hover + .fake-checkbox {
-        border-color: transparent;
-        background-color: var(--color-success-item-hover);
-      }
-
-      &:hover + .fake-checkbox {
-        border-color: var(--color-success-item-hover);
-      }
-
-      &:focus-visible + .fake-checkbox::before {
-        border: 0.2rem solid var(--color-success-txt-base);
-      }
-
-      &:active + .fake-checkbox {
-        border-color: var(--color-success-item-active);
-      }
-
-      &:checked + .fake-checkbox {
-        border-color: transparent;
-        background-color: var(--color-success-item-base);
-      }
-
-      &:checked:hover + .fake-checkbox {
-        background-color: var(--color-success-item-hover);
-      }
-
-      &:checked:active + .fake-checkbox {
-        background-color: var(--color-success-item-active);
-      }
-
-      &:disabled {
-        & + .fake-checkbox {
-          cursor: not-allowed;
-          border-color: var(--color-neutral-txt-secondary);
-
-          > .icon {
-            color: var(--color-neutral-txt-secondary);
-          }
-        }
-
-        &:checked + .fake-checkbox,
-        &.indeterminate + .fake-checkbox {
-          border-color: transparent;
-          background-color: var(--color-success-item-disabled);
-        }
+        background-color: var(--color-brand-item-active);
       }
     }
   }
 
   &.accent--warning {
-    .input {
+    .input:not(:disabled) {
       & + .fake-checkbox {
         border-color: var(--color-warning-item-base);
       }
@@ -292,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 {
@@ -311,28 +226,11 @@ const attrs = useAttrs()
       &:checked:active + .fake-checkbox {
         background-color: var(--color-warning-item-active);
       }
-
-      &:disabled {
-        & + .fake-checkbox {
-          cursor: not-allowed;
-          border-color: var(--color-neutral-txt-secondary);
-
-          > .icon {
-            color: var(--color-neutral-txt-secondary);
-          }
-        }
-
-        &:checked + .fake-checkbox,
-        &.indeterminate + .fake-checkbox {
-          border-color: transparent;
-          background-color: var(--color-warning-item-disabled);
-        }
-      }
     }
   }
 
   &.accent--danger {
-    .input {
+    .input:not(:disabled) {
       & + .fake-checkbox {
         border-color: var(--color-danger-item-base);
 
@@ -364,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 {
@@ -383,24 +281,24 @@ const attrs = useAttrs()
       &:checked:active + .fake-checkbox {
         background-color: var(--color-danger-item-active);
       }
+    }
+  }
 
-      &:disabled {
-        & + .fake-checkbox {
-          cursor: not-allowed;
-          border-color: var(--color-neutral-txt-secondary);
-
-          > .icon {
-            color: var(--color-neutral-txt-secondary);
-          }
-        }
+  .input:disabled {
+    & + .fake-checkbox {
+      cursor: not-allowed;
+      border-color: var(--color-neutral-txt-secondary);
 
-        &:checked + .fake-checkbox,
-        &.indeterminate + .fake-checkbox {
-          border-color: transparent;
-          background-color: var(--color-danger-item-disabled);
-        }
+      > .icon {
+        color: var(--color-neutral-background-disabled);
       }
     }
+
+    &:checked + .fake-checkbox,
+    &.indeterminate + .fake-checkbox {
+      border-color: transparent;
+      background-color: var(--color-neutral-txt-secondary);
+    }
   }
 }
 </style>

package/lib/components/ui/checkbox-group/UiCheckboxGroup.vue

@@ -10,7 +10,7 @@
       <slot />
     </div>
     <slot v-if="slots.info || info !== undefined" name="info">
-      <UiInfo :accent>
+      <UiInfo :accent="accent === 'brand' ? 'info' : accent">
         {{ info }}
       </UiInfo>
     </slot>
@@ -22,8 +22,8 @@ import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiLabel from '@core/components/ui/label/UiLabel.vue'
 import { computed } from 'vue'
 
-const props = defineProps<{
-  accent: 'info' | 'warning' | 'danger'
+const { accent } = defineProps<{
+  accent: 'brand' | 'warning' | 'danger'
   label?: string
   info?: string
   vertical?: boolean
@@ -35,7 +35,7 @@ const slots = defineSlots<{
   info?(): any
 }>()
 
-const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.accent))
+const labelAccent = computed(() => (accent === 'brand' ? 'neutral' : accent))
 </script>
 
 <style scoped lang="postcss">

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

@@ -1,13 +1,17 @@
 <template>
-  <VtsButtonIcon :accent :icon="faXmark" size="small" />
+  <UiButtonIcon :accent="buttonAccent" :icon="faXmark" size="small" />
 </template>
 
 <script lang="ts" setup>
-import VtsButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import type { ChipAccent } from '@core/components/ui/chip/UiChip.vue'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
 
-defineProps<{
+const { accent } = defineProps<{
   accent: ChipAccent
 }>()
+
+// FIXME: temporary fix for the 'success' accent, since it doesn't exist in the UiButtonIcon component
+const buttonAccent = computed(() => (accent === 'info' || accent === 'success' ? 'brand' : accent))
 </script>

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

@@ -1,4 +1,4 @@
-<!-- v2 -->
+<!-- v3 -->
 <template>
   <span :class="classNames" class="ui-counter">
     <span class="inner">{{ value }}</span>
@@ -9,11 +9,11 @@
 import { toVariants } from '@core/utils/to-variants.util'
 import { computed } from 'vue'
 
-type CounterAccent = 'info' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'
+type CounterAccent = 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
 type CounterVariant = 'primary' | 'secondary'
 type CounterSize = 'small' | 'medium'
 
-const props = defineProps<{
+const { size, accent, variant } = defineProps<{
   value: number | string
   accent: CounterAccent
   variant: CounterVariant
@@ -21,17 +21,17 @@ const props = defineProps<{
 }>()
 
 const typoClasses = {
-  small: 'typo p4-semi-bold',
-  medium: 'typo p1-medium',
+  small: 'typo-body-bold-small',
+  medium: 'typo-body-bold',
 }
 
 const classNames = computed(() => {
   return [
-    typoClasses[props.size],
+    typoClasses[size],
     toVariants({
-      accent: props.accent,
-      variant: props.variant,
-      size: props.size,
+      accent,
+      variant,
+      size,
     }),
   ]
 })
@@ -52,9 +52,9 @@ const classNames = computed(() => {
   /* VARIANT + ACCENT VARIANTS */
 
   &.variant--primary {
-    &.accent--info {
-      background-color: var(--color-info-item-base);
-      color: var(--color-info-txt-item);
+    &.accent--brand {
+      background-color: var(--color-brand-item-base);
+      color: var(--color-brand-txt-item);
     }
 
     &.accent--neutral {
@@ -62,6 +62,11 @@ const classNames = computed(() => {
       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);
@@ -84,6 +89,11 @@ const classNames = computed(() => {
   }
 
   &.variant--secondary {
+    &.accent--brand {
+      background-color: var(--color-brand-background-selected);
+      color: var(--color-brand-txt-base);
+    }
+
     &.accent--info {
       background-color: var(--color-info-background-selected);
       color: var(--color-info-txt-base);

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

@@ -1,8 +1,8 @@
-<!-- v3 -->
+<!-- v5 -->
 <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 />
@@ -28,31 +28,31 @@ const isDisabled = useDisabled(() => disabled)
 .ui-dropdown-item {
   display: inline-flex;
   align-items: center;
-  padding-block: 0.4rem;
+  padding-block: 1.2rem;
   padding-inline: 1.6rem;
   gap: 0.8rem;
   background: var(--color-neutral-background-primary);
-  border: 0.1rem solid var(--color-info-txt-base);
+  border: 0.1rem solid var(--color-brand-txt-base);
   border-radius: 9rem;
   cursor: pointer;
   position: relative;
-  color: var(--color-info-txt-base);
+  color: var(--color-brand-txt-base);
 
   &:hover {
-    border-color: var(--color-info-txt-hover);
-    background-color: var(--color-info-background-hover);
-    color: var(--color-info-txt-hover);
+    border-color: var(--color-brand-txt-hover);
+    background-color: var(--color-brand-background-hover);
+    color: var(--color-brand-txt-hover);
   }
 
   &:active {
-    border-color: var(--color-info-txt-active);
-    background-color: var(--color-info-background-active);
-    color: var(--color-info-txt-active);
+    border-color: var(--color-brand-txt-active);
+    background-color: var(--color-brand-background-active);
+    color: var(--color-brand-txt-active);
   }
 
   &.selected:not(:disabled) {
-    background-color: var(--color-info-background-selected);
-    outline: 0.1rem solid var(--color-info-txt-base);
+    background-color: var(--color-brand-background-selected);
+    outline: 0.1rem solid var(--color-brand-txt-base);
   }
 
   &:focus-visible {
@@ -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,12 +6,19 @@
     </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"
         class="after"
-        accent="info"
+        accent="brand"
         @click="modelValue = ''"
       />
     </div>

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

@@ -1,10 +1,10 @@
 <!-- v3 -->
 <template>
   <li :class="classNames" class="ui-legend">
-    <VtsIcon :icon="faCircle" accent="brand" class="circle-icon" />
-    <span class="label typo p3-regular"><slot /></span>
+    <VtsIcon :icon="faCircle" accent="current" class="circle-icon" />
+    <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 c3-semi-bold">{{ valueLabel }}</span>
+    <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

@@ -1,14 +1,9 @@
-<!-- v2 -->
+<!-- v3 -->
 <template>
   <component :is="component" :class="classes" class="ui-link" v-bind="attributes">
     <VtsIcon :icon accent="current" />
     <slot />
-    <VtsIcon
-      v-if="attributes.target === '_blank'"
-      :icon="faArrowUpRightFromSquare"
-      accent="current"
-      class="external-icon"
-    />
+    <VtsIcon v-if="attributes.target === '_blank'" :icon="faUpRightFromSquare" accent="current" class="external-icon" />
   </component>
 </template>
 
@@ -16,7 +11,7 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { type LinkOptions, useLinkComponent } from '@core/composables/link-component.composable'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 const props = defineProps<
@@ -27,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)
@@ -41,14 +36,14 @@ const classes = computed(() => [typoClasses[props.size], { disabled: isDisabled.
   display: inline-flex;
   align-items: center;
   gap: 0.8rem;
-  color: var(--color-info-txt-base);
+  color: var(--color-brand-txt-base);
 
   &: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 {
@@ -57,8 +52,8 @@ const classes = computed(() => [typoClasses[props.size], { disabled: isDisabled.
     &::before {
       content: '';
       position: absolute;
-      inset: -0.6rem;
-      border: 0.2rem solid var(--color-info-txt-base);
+      inset: -0.4rem;
+      border: 0.2rem solid var(--color-brand-txt-base);
       border-radius: 0.4rem;
     }
   }