@xen-orchestra/web-core 0.13.0 → 0.15.0

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

@@ -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,22 +33,22 @@ defineSlots<{
   default(): any
 }>()
 
-const isDisabled = useDisabled(() => props.disabled)
+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(() => [
-  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,60 +90,60 @@ 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 {
-        border-color: var(--color-info-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &: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 {
-        border-color: var(--color-info-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &: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,30 +154,30 @@ 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 {
-        border-color: var(--color-info-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &: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);
       }
     }
   }
@@ -311,7 +207,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-warning-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -345,7 +241,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-warning-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -379,7 +275,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-warning-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -415,7 +311,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-danger-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -449,7 +345,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-danger-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -483,7 +379,7 @@ const classNames = computed(() => [
       }
 
       &:focus-visible::before {
-        border-color: var(--color-danger-txt-base);
+        border-color: var(--color-brand-txt-base);
       }
 
       &:active {
@@ -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>

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

@@ -13,37 +13,40 @@ import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed } from 'vue'
 
-type ButtonIconAccent = 'info' | 'success' | 'warning' | 'danger'
+type ButtonIconAccent = 'brand' | 'warning' | 'danger'
 type ButtonSize = 'small' | 'medium' | 'large'
 
-const props = withDefaults(
-  defineProps<{
-    icon: IconDefinition
-    size: ButtonSize
-    accent: ButtonIconAccent
-    disabled?: boolean
-    selected?: boolean
-    dot?: boolean
-    targetScale?: number | { x: number; y: number }
-  }>(),
-  { targetScale: 1 }
-)
+const {
+  accent,
+  size,
+  disabled,
+  selected,
+  targetScale = 1,
+} = defineProps<{
+  icon: IconDefinition
+  size: ButtonSize
+  accent: ButtonIconAccent
+  disabled?: boolean
+  selected?: boolean
+  dot?: boolean
+  targetScale?: number | { x: number; y: number }
+}>()
 
 const cssTargetScale = computed(() => {
-  if (typeof props.targetScale === 'number') {
-    return `scale(${props.targetScale})`
+  if (typeof targetScale === 'number') {
+    return `scale(${targetScale})`
   }
 
-  return `scale(${props.targetScale.x}, ${props.targetScale.y})`
+  return `scale(${targetScale.x}, ${targetScale.y})`
 })
 
 const classNames = computed(() => {
   return [
     toVariants({
-      accent: props.accent,
-      size: props.size,
-      muted: props.disabled,
-      selected: props.selected,
+      accent,
+      size,
+      muted: disabled,
+      selected,
     }),
   ]
 })
@@ -72,54 +75,44 @@ const classNames = computed(() => {
     background-color: var(--color-danger-txt-base);
   }
 
-  /* ACCENT VARIANTS */
-
-  &.accent--info {
-    & {
-      color: var(--color-info-txt-base);
-      background-color: transparent;
-    }
+  &:focus-visible {
+    outline: none;
 
-    &:is(:hover, :focus-visible) {
-      color: var(--color-info-txt-hover);
-      background-color: var(--color-info-background-hover);
-    }
-
-    &:active {
-      color: var(--color-info-txt-active);
-      background-color: var(--color-info-background-active);
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -0.2rem;
+      border-radius: 0.4rem;
+      border-width: 0.2rem;
+      border-style: solid;
     }
+  }
 
-    &.selected {
-      color: var(--color-info-txt-base);
-      background-color: var(--color-info-background-selected);
-    }
+  /* ACCENT VARIANTS */
 
-    &.muted {
-      color: var(--color-neutral-txt-secondary);
+  &.accent--brand {
+    & {
+      color: var(--color-brand-txt-base);
       background-color: transparent;
     }
-  }
 
-  &.accent--success {
-    & {
-      color: var(--color-success-txt-base);
-      background-color: transparent;
+    &:hover {
+      color: var(--color-brand-txt-hover);
+      background-color: var(--color-brand-background-hover);
     }
 
-    &:is(:hover, :focus-visible) {
-      color: var(--color-success-txt-hover);
-      background-color: var(--color-success-background-hover);
+    &:focus-visible::before {
+      border-color: var(--color-brand-txt-base);
     }
 
     &:active {
-      color: var(--color-success-txt-active);
-      background-color: var(--color-success-background-active);
+      color: var(--color-brand-txt-active);
+      background-color: var(--color-brand-background-active);
     }
 
     &.selected {
-      color: var(--color-success-txt-base);
-      background-color: var(--color-success-background-selected);
+      color: var(--color-brand-txt-base);
+      background-color: var(--color-brand-background-selected);
     }
 
     &.muted {
@@ -134,11 +127,15 @@ const classNames = computed(() => {
       background-color: transparent;
     }
 
-    &:is(:hover, :focus-visible) {
+    &:hover {
       color: var(--color-warning-txt-hover);
       background-color: var(--color-warning-background-hover);
     }
 
+    &:focus-visible::before {
+      border-color: var(--color-brand-txt-base);
+    }
+
     &:active {
       color: var(--color-warning-txt-active);
       background-color: var(--color-warning-background-active);
@@ -165,11 +162,15 @@ const classNames = computed(() => {
       }
     }
 
-    &:is(:hover, :focus-visible) {
+    &:hover {
       color: var(--color-danger-txt-hover);
       background-color: var(--color-danger-background-hover);
     }
 
+    &:focus-visible::before {
+      border-color: var(--color-brand-txt-base);
+    }
+
     &:active {
       color: var(--color-danger-txt-active);
       background-color: var(--color-danger-background-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>
 
@@ -15,8 +15,8 @@ const slots = defineSlots<{
 
 <style lang="postcss" scoped>
 .ui-card-subtitle {
-  color: var(--color-info-txt-base);
-  border-bottom: 0.1rem solid var(--color-info-txt-base);
+  color: var(--color-brand-txt-base);
+  border-bottom: 0.1rem solid var(--color-brand-txt-base);
   display: flex;
   justify-content: space-between;
   gap: 0.8rem;