@xen-orchestra/web-core 0.12.0 → 0.14.0

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-info-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-warning-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-danger-txt-base);
+    }
+
     &:active {
       color: var(--color-danger-txt-active);
       background-color: var(--color-danger-background-active);

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

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

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

@@ -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">
       <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,32 +127,32 @@ 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 {
@@ -160,111 +160,26 @@ const attrs = useAttrs()
       }
 
       &: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);
       }
@@ -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);
 
@@ -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/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
@@ -27,11 +27,11 @@ const typoClasses = {
 
 const classNames = computed(() => {
   return [
-    typoClasses[props.size],
+    typoClasses[size],
     toVariants({
-      accent: props.accent,
-      variant: props.variant,
-      size: props.size,
+      accent,
+      variant,
+      size,
     }),
   ]
 })
@@ -52,6 +52,11 @@ const classNames = computed(() => {
   /* VARIANT + ACCENT VARIANTS */
 
   &.variant--primary {
+    &.accent--brand {
+      background-color: var(--color-brand-item-base);
+      color: var(--color-brand-txt-item);
+    }
+
     &.accent--info {
       background-color: var(--color-info-item-base);
       color: var(--color-info-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,4 +1,4 @@
-<!-- v3 -->
+<!-- v5 -->
 <template>
   <button :class="{ selected }" :disabled="isDisabled" class="ui-dropdown-item" type="button">
     <VtsIcon :icon accent="current" class="left-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 {

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

@@ -11,7 +11,7 @@
         v-if="!attrs.disabled && modelValue && clearable"
         :icon="faXmark"
         class="after"
-        accent="info"
+        accent="brand"
         @click="modelValue = ''"
       />
     </div>

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

@@ -1,9 +1,9 @@
 <!-- v3 -->
 <template>
   <li :class="classNames" class="ui-legend">
-    <VtsIcon :icon="faCircle" accent="brand" class="circle-icon" />
+    <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="info" />
+    <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>
   </li>
 </template>