@xen-orchestra/web-core 0.13.0 → 0.14.0

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<
@@ -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,7 +52,7 @@ const classes = computed(() => [typoClasses[props.size], { disabled: isDisabled.
     &::before {
       content: '';
       position: absolute;
-      inset: -0.6rem;
+      inset: -0.4rem;
       border: 0.2rem solid var(--color-info-txt-base);
       border-radius: 0.4rem;
     }

package/lib/components/ui/object-link/UiObjectLink.vue

@@ -3,7 +3,7 @@
   <RouterLink v-if="route && !disabled" :to="route" class="ui-object-link is-link typo p3-regular-underline">
     <span class="icon">
       <slot name="icon">
-        <UiIcon :icon accent="current" />
+        <VtsIcon :icon accent="current" />
       </slot>
     </span>
     <span v-tooltip class="content text-ellipsis">
@@ -13,7 +13,7 @@
   <span v-else :class="{ disabled }" class="ui-object-link typo p3-regular-underline">
     <span class="icon">
       <slot name="icon">
-        <UiIcon :icon accent="current" />
+        <VtsIcon :icon accent="current" />
       </slot>
     </span>
     <slot />
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/VtsIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { type RouteLocationRaw } from 'vue-router'

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

@@ -14,12 +14,12 @@
       :placeholder="$t('core.query-search-bar.placeholder')"
     />
     <template v-if="uiStore.isDesktop">
-      <UiButton size="medium" accent="info" variant="primary" type="submit">{{ $t('core.search') }}</UiButton>
+      <UiButton size="medium" accent="brand" variant="primary" type="submit">{{ $t('core.search') }}</UiButton>
       <VtsDivider type="stretch" />
       <UiButton
         v-tooltip="$t('coming-soon')"
         size="medium"
-        accent="info"
+        accent="brand"
         variant="secondary"
         :left-icon="faFilter"
         disabled
@@ -28,8 +28,8 @@
       </UiButton>
     </template>
     <template v-else>
-      <UiButtonIcon accent="info" size="medium" type="submit" :icon="faMagnifyingGlass" />
-      <UiButtonIcon accent="info" size="medium" disabled :icon="faFilter" />
+      <UiButtonIcon accent="brand" size="medium" type="submit" :icon="faMagnifyingGlass" />
+      <UiButtonIcon accent="brand" size="medium" disabled :icon="faFilter" />
     </template>
   </form>
 </template>

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

@@ -2,7 +2,7 @@
 <template>
   <li class="ui-quick-task-item">
     <div v-if="hasSubTasks" class="toggle" @click="toggleExpand()">
-      <UiButtonIcon accent="info" :icon="isExpanded ? faAngleDown : faAngleRight" size="small" />
+      <UiButtonIcon accent="brand" :icon="isExpanded ? faAngleDown : faAngleRight" size="small" />
     </div>
     <div class="content">
       <div class="typo p1-medium">

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

@@ -17,7 +17,7 @@ import { faCircle } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 const { accent, value, disabled } = defineProps<{
-  accent: 'info' | 'success' | 'warning' | 'danger'
+  accent: 'brand' | 'warning' | 'danger'
   value: any
   disabled?: boolean
 }>()
@@ -65,19 +65,6 @@ const isDisabled = useDisabled(() => disabled)
       }
     }
 
-    &:has(.input:disabled) {
-      cursor: not-allowed;
-
-      /*
-      TODO: To be removed or kept after a decision has been taken
-      See https://www.figma.com/design/l2O2VvzJRnOCvqxhM7d124?node-id=8-1940#1021964394
-      */
-
-      &:not(:has(.input:checked)) {
-        --accent-color: var(--color-neutral-txt-secondary);
-      }
-    }
-
     &:has(.input:checked) {
       background-color: var(--accent-color);
     }
@@ -95,58 +82,37 @@ const isDisabled = useDisabled(() => disabled)
     .radio-icon {
       font-size: 0.8rem;
       position: absolute;
-      opacity: 0;
-      transition: opacity 0.125s ease-in-out;
+      transition: font-size 0.125s ease-in-out;
+      color: var(--radio-icon-color);
+      --radio-icon-color: var(--color-neutral-background-primary);
     }
 
-    .input:disabled + .radio-icon {
-      color: var(--color-neutral-txt-secondary);
+    .input:not(:checked) + .radio-icon {
+      font-size: 1.2rem;
     }
 
-    .input:checked + .radio-icon {
-      opacity: 1;
+    .input:disabled + .radio-icon {
+      --radio-icon-color: var(--color-neutral-background-disabled);
     }
   }
 
   /* ACCENT */
 
-  &.accent--info {
-    --accent-color: var(--color-info-item-base);
-
-    &:hover {
-      --accent-color: var(--color-info-item-hover);
-    }
-
-    &:active {
-      --accent-color: var(--color-info-item-active);
-    }
-
-    &:has(.input:disabled) {
-      --accent-color: var(--color-info-item-disabled);
-    }
-
-    .radio-icon {
-      color: var(--color-info-txt-item);
-    }
-  }
-
-  &.accent--success {
-    --accent-color: var(--color-success-item-base);
+  &.accent--brand {
+    --accent-color: var(--color-brand-item-base);
 
     &:hover {
-      --accent-color: var(--color-success-item-hover);
+      --accent-color: var(--color-brand-item-hover);
     }
 
     &:active {
-      --accent-color: var(--color-success-item-active);
+      --accent-color: var(--color-brand-item-active);
     }
 
-    &:has(.input:disabled) {
-      --accent-color: var(--color-success-item-disabled);
-    }
-
-    .radio-icon {
-      color: var(--color-success-txt-item);
+    &:has(.input:checked:not(:disabled)) {
+      .radio-icon {
+        --radio-icon-color: var(--color-brand-txt-item);
+      }
     }
   }
 
@@ -161,12 +127,10 @@ const isDisabled = useDisabled(() => disabled)
       --accent-color: var(--color-warning-item-active);
     }
 
-    &:has(.input:disabled) {
-      --accent-color: var(--color-warning-item-disabled);
-    }
-
-    .radio-icon {
-      color: var(--color-warning-txt-item);
+    &:has(.input:checked:not(:disabled)) {
+      .radio-icon {
+        --radio-icon-color: var(--color-warning-txt-item);
+      }
     }
   }
 
@@ -181,13 +145,18 @@ const isDisabled = useDisabled(() => disabled)
       --accent-color: var(--color-danger-item-active);
     }
 
-    &:has(.input:disabled) {
-      --accent-color: var(--color-danger-item-disabled);
+    &:has(.input:checked:not(:disabled)) {
+      .radio-icon {
+        --radio-icon-color: var(--color-danger-txt-item);
+      }
     }
+  }
 
-    .radio-icon {
-      color: var(--color-danger-txt-item);
-    }
+  /* DISABLED */
+
+  &:has(.input:disabled) {
+    cursor: not-allowed;
+    --accent-color: var(--color-neutral-txt-secondary);
   }
 }
 </style>

package/lib/components/ui/radio-button-group/UiRadioButtonGroup.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
@@ -34,7 +34,7 @@ const slots = defineSlots<{
   label?(): any
   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/table-pagination/PaginationButton.vue

@@ -1,28 +1,31 @@
 <template>
-  <UiButtonIcon :disabled accent="info" class="pagination-button" size="small" :icon />
+  <UiButtonIcon :disabled accent="brand" class="pagination-button" size="medium" :icon />
 </template>
 
 <script setup lang="ts">
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
-const { disabled, icon } = defineProps<{
+defineProps<{
   disabled: boolean
   icon: IconDefinition
 }>()
 </script>
 
 <style scoped lang="postcss">
-.pagination-button.accent--info {
+.pagination-button.accent--brand {
   border: 0.1rem solid var(--color-neutral-border);
   font-size: 1rem;
+  /* Override UiButtonIcon size to match DS */
+  width: 3rem;
+  height: 3rem;
 
   &:hover {
-    border-color: var(--color-info-item-hover);
+    border-color: var(--color-brand-item-hover);
   }
 
   &:active {
-    border-color: var(--color-info-item-active);
+    border-color: var(--color-brand-item-active);
   }
 
   &:disabled {

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

@@ -1,4 +1,4 @@
-<!-- v2 -->
+<!-- v3 -->
 <template>
   <div class="ui-table-pagination">
     <div class="buttons-container">
@@ -111,21 +111,21 @@ watch([currentPage, currentPageSize], ([newPage, newPageSize]) => {
     .dropdown {
       cursor: pointer;
       padding: 0.2rem 0.6rem;
-      height: 2.6rem;
-      width: 4.8rem;
+      height: 3rem;
+      width: 5rem;
       appearance: none;
       border-radius: 0.4rem;
-      color: var(--color-info-txt-base);
+      color: var(--color-brand-txt-base);
       border: 0.1rem solid var(--color-neutral-border);
       background-color: var(--color-neutral-background-primary);
 
       &:hover {
-        border-color: var(--color-info-item-hover);
-        background-color: var(--color-info-background-hover);
-        color: var(--color-info-txt-hover);
+        border-color: var(--color-brand-item-hover);
+        background-color: var(--color-brand-background-hover);
+        color: var(--color-brand-txt-hover);
 
         + .icon {
-          color: var(--color-info-txt-hover);
+          color: var(--color-brand-txt-hover);
         }
       }
 
@@ -141,18 +141,18 @@ watch([currentPage, currentPageSize], ([newPage, newPageSize]) => {
       }
 
       &:active {
-        background-color: var(--color-info-background-active);
-        border-color: var(--color-info-item-active);
+        background-color: var(--color-brand-background-active);
+        border-color: var(--color-brand-item-active);
       }
 
       &:focus-visible {
-        outline: 0.1rem solid var(--color-info-item-base);
-        border: 0.1rem solid var(--color-info-item-base);
-        color: var(--color-info-txt-base);
-        background-color: var(--color-info-background-selected);
+        outline: 0.1rem solid var(--color-brand-item-base);
+        border: 0.1rem solid var(--color-brand-item-base);
+        color: var(--color-brand-txt-base);
+        background-color: var(--color-brand-background-selected);
 
         + .icon {
-          color: var(--color-info-txt-base);
+          color: var(--color-brand-txt-base);
         }
       }
 
@@ -171,7 +171,7 @@ watch([currentPage, currentPageSize], ([newPage, newPageSize]) => {
       transform: translateY(-50%);
       pointer-events: none;
       font-size: 1rem;
-      color: var(--color-info-txt-base);
+      color: var(--color-brand-txt-base);
     }
   }
 }

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

@@ -11,7 +11,7 @@
           <slot name="description" />
         </div>
       </div>
-      <UiButtonIcon class="close-icon" :icon="faXmark" :accent size="medium" />
+      <UiButtonIcon class="close-icon" :icon="faXmark" accent="brand" size="medium" />
     </div>
     <div v-if="slots.actions" class="actions">
       <slot name="actions" />

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

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

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

@@ -8,7 +8,7 @@
 
       <UiButton
         :disabled="selectedItems === totalItems"
-        accent="info"
+        accent="brand"
         size="small"
         variant="tertiary"
         @click="emit('toggleSelectAll', true)"
@@ -17,7 +17,7 @@
       </UiButton>
       <UiButton
         :disabled="selectedItems === 0"
-        accent="info"
+        accent="brand"
         size="small"
         variant="tertiary"
         @click="emit('toggleSelectAll', false)"

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

@@ -1,4 +1,4 @@
-<!-- v2 -->
+<!-- v3 -->
 <template>
   <RouterLink v-slot="{ isExactActive, isActive, href, navigate }" :to="route" custom>
     <div
@@ -18,7 +18,7 @@
         v-if="hasToggle"
         v-tooltip="isExpanded ? $t('core.close') : $t('core.open')"
         class="toggle"
-        accent="info"
+        accent="brand"
         :icon="isExpanded ? faAngleDown : faAngleRight"
         size="small"
         :target-scale="{ x: 1.5, y: 2 }"
@@ -27,7 +27,7 @@
       <div v-else class="h-line" />
       <a v-tooltip="{ selector: '.text' }" :href class="link typo p2-medium" @click="navigate">
         <slot name="icon">
-          <UiIcon :icon accent="current" class="icon" />
+          <VtsIcon :icon accent="current" class="icon" />
         </slot>
         <div class="text text-ellipsis">
           <slot />
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/VtsIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsTreeLine from '@core/components/tree/VtsTreeLine.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
@@ -114,22 +114,22 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
 
   .h-line {
     width: 2rem;
-    border-bottom: 0.1rem solid var(--color-info-txt-base);
+    border-bottom: 0.1rem solid var(--color-brand-txt-base);
     margin-left: -0.4rem;
   }
 
   /* INTERACTION VARIANTS */
 
   &:is(.exact-active, .active) {
-    background-color: var(--color-info-background-selected);
+    background-color: var(--color-brand-background-selected);
   }
 
   &: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);
   }
 }
 </style>

package/lib/components/ui/user-logo/UiUserLogo.vue

@@ -18,7 +18,7 @@ defineProps<{
   display: block;
   background: var(--color-neutral-txt-primary) url('../../../assets/user.png') no-repeat;
   border-style: solid;
-  border-color: var(--color-info-item-base);
+  border-color: var(--color-brand-item-base);
   border-radius: 20rem;
 
   /* SIZE VARIANTS */

package/lib/layouts/CoreLayout.vue

@@ -7,7 +7,7 @@
           content: sidebarStore.isExpanded ? $t('core.sidebar.close') : $t('core.sidebar.open'),
           placement: 'right',
         }"
-        accent="info"
+        accent="brand"
         size="medium"
         :icon="sidebarStore.isExpanded ? faAngleDoubleLeft : faBars"
         class="sidebar-toggle"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "private": false,
   "exports": {
     "./*": {