@xen-orchestra/web-core 0.1.1 → 0.2.0

package/lib/components/icon/ObjectIcon.vue

@@ -5,13 +5,13 @@
 <!-- Network v1.0 -->
 <template>
   <FontAwesomeLayers :class="[size, { disabled: stateConfig === undefined }]" class="object-icon">
-    <UiIcon :icon="mainIcon" />
-    <UiIcon :icon="stateIcon" :style="stateIconStyle" class="state" />
+    <VtsIcon :icon="mainIcon" accent="current" />
+    <VtsIcon :icon="stateIcon" accent="current" :style="stateIconStyle" class="state" />
   </FontAwesomeLayers>
 </template>
 
 <script generic="TType extends SupportedType" lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { ObjectIconConfig, ObjectIconSize, SupportedState, SupportedType } from '@core/types/object-icon.type'
 import {
   faCheckCircle,
@@ -46,7 +46,7 @@ const config: ObjectIconConfig = {
     states: {
       running: {
         icon: faPlay,
-        color: '--color-green-base',
+        color: '--color-success-item-base',
         translate: {
           x: [100, 132, 148],
           y: [65, 75, 90],
@@ -54,7 +54,7 @@ const config: ObjectIconConfig = {
       },
       halted: {
         icon: faStop,
-        color: '--color-red-base',
+        color: '--color-danger-item-base',
         translate: {
           x: [100, 136, 144],
           y: [65, 75, 90],
@@ -62,7 +62,7 @@ const config: ObjectIconConfig = {
       },
       suspended: {
         icon: faMoon,
-        color: '--color-purple-d60',
+        color: '--color-normal-item-base',
         translate: {
           x: [88, 130, 140],
           y: [65, 75, 90],
@@ -70,7 +70,7 @@ const config: ObjectIconConfig = {
       },
       paused: {
         icon: faPause,
-        color: '--color-purple-l40',
+        color: '--color-normal-item-active',
         translate: {
           x: [110, 154, 170],
           y: [65, 75, 90],
@@ -83,7 +83,7 @@ const config: ObjectIconConfig = {
     states: {
       running: {
         icon: faPlay,
-        color: '--color-green-base',
+        color: '--color-success-item-base',
         translate: {
           x: [82, 122, 136],
           y: [66, 70, 90],
@@ -91,7 +91,7 @@ const config: ObjectIconConfig = {
       },
       halted: {
         icon: faStop,
-        color: '--color-red-base',
+        color: '--color-danger-item-base',
         translate: {
           x: [90, 122, 134],
           y: [65, 72, 85],
@@ -99,7 +99,7 @@ const config: ObjectIconConfig = {
       },
       maintenance: {
         icon: faTriangleExclamation,
-        color: '--color-orange-base',
+        color: '--color-warning-item-base',
         translate: {
           x: [60, 88, 100],
           y: [68, 72, 82],
@@ -112,7 +112,7 @@ const config: ObjectIconConfig = {
     states: {
       connected: {
         icon: faCheckCircle,
-        color: '--color-green-base',
+        color: '--color-success-item-base',
         translate: {
           x: [60, 90, 100],
           y: [65, 75, 90],
@@ -120,7 +120,7 @@ const config: ObjectIconConfig = {
       },
       'partially-connected': {
         icon: faCircleMinus,
-        color: '--color-orange-base',
+        color: '--color-warning-item-base',
         translate: {
           x: [60, 90, 100],
           y: [65, 75, 90],
@@ -128,7 +128,7 @@ const config: ObjectIconConfig = {
       },
       disconnected: {
         icon: faCircleXmark,
-        color: '--color-red-base',
+        color: '--color-danger-item-base',
         translate: {
           x: [60, 90, 100],
           y: [65, 75, 90],
@@ -141,7 +141,7 @@ const config: ObjectIconConfig = {
     states: {
       connected: {
         icon: faCheckCircle,
-        color: '--color-green-base',
+        color: '--color-success-item-base',
         translate: {
           x: [112, 130, 162],
           y: [74, 78, 102],
@@ -149,7 +149,7 @@ const config: ObjectIconConfig = {
       },
       disconnected: {
         icon: faCircleXmark,
-        color: '--color-red-base',
+        color: '--color-danger-item-base',
         translate: {
           x: [112, 130, 162],
           y: [74, 78, 102],
@@ -162,7 +162,7 @@ const config: ObjectIconConfig = {
     states: {
       connected: {
         icon: faCheckCircle,
-        color: '--color-green-base',
+        color: '--color-success-item-base',
         translate: {
           x: [84, 110, 128],
           y: [66, 72, 88],
@@ -170,7 +170,7 @@ const config: ObjectIconConfig = {
       },
       disconnected: {
         icon: faCircleXmark,
-        color: '--color-red-base',
+        color: '--color-danger-item-base',
         translate: {
           x: [84, 110, 128],
           y: [66, 72, 88],
@@ -200,7 +200,7 @@ const stateIconStyle = computed(() => {
   }
 
   return {
-    '--color': `var(${stateConfig.value.color})`,
+    '--vts-icon--color': `var(${stateConfig.value.color})`,
     '--state-icon-translate-x': `${stateConfig.value.translate.x[translateIndex]}%`,
     '--state-icon-translate-y': `${stateConfig.value.translate.y[translateIndex]}%`,
   }
@@ -232,7 +232,7 @@ const stateIconStyle = computed(() => {
   font-size: var(--font-size);
 
   &.disabled {
-    color: var(--color-grey-400);
+    color: var(--color-neutral-txt-secondary);
   }
 }
 

package/lib/components/icon/VtsIcon.vue

@@ -0,0 +1,96 @@
+<!-- WIP -->
+<template>
+  <UiSpinner v-if="busy" class="vts-icon" />
+  <div v-else-if="overlayIcon !== undefined && icon !== undefined" class="vts-icon stacked" :class="accent">
+    <FontAwesomeIcon :fixed-width="fixedWidth" :icon />
+    <FontAwesomeIcon class="overlay-icon" :fixed-width="fixedWidth" :icon="overlayIcon" />
+  </div>
+  <FontAwesomeIcon v-else-if="icon !== undefined" :class="accent" :fixed-width="fixedWidth" :icon class="vts-icon" />
+</template>
+
+<script lang="ts" setup>
+import UiSpinner from '@core/components/UiSpinner.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+export type IconAccent = 'current' | 'brand' | 'success' | 'warning' | 'danger'
+
+defineProps<{
+  accent: IconAccent
+  icon?: IconDefinition
+  overlayIcon?: IconDefinition
+  busy?: boolean
+  fixedWidth?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+/*
+ACCENT
+--vts-icon--color
+--vts-icon__overlay-icon--color
+*/
+.vts-icon {
+  &.current {
+    --vts-icon--color: currentColor;
+
+    &.stacked {
+      --vts-icon__overlay-icon--color: var(--color-neutral-background-primary);
+    }
+  }
+
+  &.brand {
+    --vts-icon--color: var(--color-normal-item-base);
+
+    &.stacked {
+      --vts-icon__overlay-icon--color: var(--color-normal-txt-item);
+    }
+  }
+
+  &.success {
+    --vts-icon--color: var(--color-success-item-base);
+
+    &.stacked {
+      --vts-icon__overlay-icon--color: var(--color-success-txt-item);
+    }
+  }
+
+  &.warning {
+    --vts-icon--color: var(--color-warning-item-base);
+
+    &.stacked {
+      --vts-icon__overlay-icon--color: var(--color-warning-txt-item);
+    }
+  }
+
+  &.danger {
+    --vts-icon--color: var(--color-danger-item-base);
+
+    &.stacked {
+      --vts-icon__overlay-icon--color: var(--color-danger-txt-item);
+    }
+  }
+}
+
+/* IMPLEMENTATION */
+.vts-icon {
+  color: var(--vts-icon--color);
+
+  &.stacked {
+    display: inline-grid;
+    place-items: center;
+
+    .overlay-icon {
+      color: var(--vts-icon__overlay-icon--color);
+    }
+
+    svg {
+      grid-area: 1 / -1;
+
+      &:last-child {
+        font-size: 0.75rem;
+      }
+    }
+  }
+}
+</style>

package/lib/components/info/VtsInfo.vue

@@ -0,0 +1,55 @@
+<!-- v2 -->
+<template>
+  <div class="vts-info">
+    <VtsIcon :accent class="icon" :icon="faCircle" :overlay-icon="icon" />
+    <p class="message"><slot /></p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import {
+  faCheck,
+  faCircle,
+  faExclamation,
+  faInfo,
+  faXmark,
+  type IconDefinition,
+} from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+type Props = {
+  accent: 'brand' | 'success' | 'warning' | 'danger'
+}
+
+const props = defineProps<Props>()
+
+defineSlots<{
+  default(): any
+}>()
+
+const iconByAccent: Record<Props['accent'], IconDefinition> = {
+  brand: faInfo,
+  success: faCheck,
+  warning: faExclamation,
+  danger: faXmark,
+}
+
+const icon = computed(() => iconByAccent[props.accent])
+</script>
+
+<style lang="postcss" scoped>
+.vts-info {
+  align-items: start;
+  display: flex;
+  gap: 0.8rem;
+}
+
+.icon {
+  font-size: 1.6rem;
+}
+
+.message {
+  font-size: 1.2rem;
+}
+</style>

package/lib/components/input/UiInput.vue

@@ -1,14 +1,20 @@
 <!-- WIP -->
 <template>
   <div class="ui-input">
-    <UiIcon :icon class="before" />
+    <VtsIcon :icon accent="current" class="before" />
     <input :id v-model.trim="modelValue" class="typo p1-regular input" type="search" v-bind="$attrs" />
-    <UiIcon v-if="!$attrs.disabled && modelValue" :icon="faXmark" class="after" color="info" @click="modelValue = ''" />
+    <VtsIcon
+      v-if="!$attrs.disabled && modelValue"
+      :icon="faXmark"
+      class="after"
+      accent="brand"
+      @click="modelValue = ''"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { uniqueId } from '@core/utils/unique-id.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
@@ -31,28 +37,28 @@ const id = computed(() => uniqueId('input-'))
 /* COLOR VARIANTS */
 .input {
   & {
-    --border-color: var(--color-grey-500);
-    --background-color: var(--background-color-primary);
+    --border-color: var(--color-neutral-border);
+    --background-color: var(--color-neutral-background-primary);
   }
 
   &:is(:hover, :focus-visible) {
-    --border-color: var(--color-purple-d20);
-    --background-color: var(--background-color-primary);
+    --border-color: var(--color-normal-item-hover);
+    --background-color: var(--color-neutral-background-primary);
   }
 
   &:focus {
-    --border-color: var(--color-purple-base);
-    --background-color: var(--background-color-primary);
+    --border-color: var(--color-normal-item-base);
+    --background-color: var(--color-neutral-background-primary);
   }
 
   &:active {
-    --border-color: var(--color-purple-d40);
-    --background-color: var(--background-color-primary);
+    --border-color: var(--color-normal-item-active);
+    --background-color: var(--color-neutral-background-primary);
   }
 
   &:disabled {
-    --border-color: var(--color-grey-500);
-    --background-color: var(--background-color-secondary);
+    --border-color: var(--color-neutral-border);
+    --background-color: var(--color-neutral-background-disabled);
   }
 }
 
@@ -93,7 +99,7 @@ const id = computed(() => uniqueId('input-'))
   width: 100%;
   height: 4rem;
   padding: 0.8rem 1.6rem;
-  color: var(--color-grey-000);
+  color: var(--color-neutral-txt-primary);
   background-color: var(--background-color);
 
   &:has(+ .after) {
@@ -105,7 +111,7 @@ const id = computed(() => uniqueId('input-'))
   }
 
   &::placeholder {
-    color: var(--color-grey-300);
+    color: var(--color-neutral-txt-secondary);
   }
 
   &[type='search']::-webkit-search-cancel-button {
@@ -120,7 +126,7 @@ const id = computed(() => uniqueId('input-'))
 }
 
 .before {
-  color: var(--color-grey-400);
+  color: var(--color-neutral-txt-secondary);
   inset-inline-start: 1.6rem;
   pointer-events: none;
   z-index: 1;

package/lib/components/layout/LayoutSidebar.vue

@@ -54,8 +54,8 @@ const ui = useUiStore()
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: var(--background-color-secondary);
-  border-right: 0.1rem solid var(--color-grey-500);
+  background-color: var(--color-neutral-background-secondary);
+  border-right: 0.1rem solid var(--color-neutral-border);
   width: v-bind('sidebar.cssWidth');
   z-index: 1001;
   transition:
@@ -93,7 +93,7 @@ const ui = useUiStore()
 
   &:hover,
   &.active {
-    background-color: var(--color-grey-500);
+    background-color: var(--color-neutral-border);
     transition: background-color 0.05s;
   }
 }

package/lib/components/legend/LegendItem.vue

@@ -1,15 +1,15 @@
 <!-- v1.0 -->
 <template>
   <li :class="color" class="legend-item">
-    <UiIcon :icon="faCircle" class="circle-icon" />
+    <VtsIcon :icon="faCircle" accent="brand" class="circle-icon" />
     <span class="label typo p3-regular"><slot /></span>
-    <UiIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" color="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>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faCircle, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
@@ -36,27 +36,27 @@ const valueLabel = computed(() => [props.value, props.unit].join(' ').trim())
 /* COLOR VARIANTS */
 .legend-item {
   &.primary {
-    --circle-color: var(--color-purple-base);
+    --circle-color: var(--color-normal-item-base);
   }
 
   &.secondary {
-    --circle-color: var(--color-grey-100);
+    --circle-color: var(--color-neutral-txt-primary);
   }
 
   &.success {
-    --circle-color: var(--color-green-base);
+    --circle-color: var(--color-success-item-base);
   }
 
   &.warning {
-    --circle-color: var(--color-orange-base);
+    --circle-color: var(--color-warning-item-base);
   }
 
   &.danger {
-    --circle-color: var(--color-red-base);
+    --circle-color: var(--color-danger-item-base);
   }
 
   &.disabled {
-    --circle-color: var(--color-grey-300);
+    --circle-color: var(--color-neutral-background-disabled);
   }
 }
 
@@ -77,10 +77,10 @@ const valueLabel = computed(() => [props.value, props.unit].join(' ').trim())
 }
 
 .label {
-  color: var(--color-grey-000);
+  color: var(--color-neutral-txt-primary);
 }
 
 .value-and-unit {
-  color: var(--color-grey-300);
+  color: var(--color-neutral-txt-secondary);
 }
 </style>

package/lib/components/menu/MenuItem.vue

@@ -11,11 +11,11 @@
     >
       <slot />
     </MenuTrigger>
-    <MenuList v-else :disabled="isDisabled" shadow>
+    <MenuList v-else :disabled="isDisabled" border>
       <template #trigger="{ open, isOpen }">
         <MenuTrigger :active="isOpen" :busy="isBusy" :disabled="isDisabled" :icon @click="open">
           <slot />
-          <UiIcon :fixed-width="false" :icon="submenuIcon" class="submenu-icon" />
+          <VtsIcon :fixed-width="false" :icon="submenuIcon" accent="current" class="submenu-icon" />
         </MenuTrigger>
       </template>
       <slot name="submenu" />
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
 import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
 import { useContext } from '@core/composables/context.composable'
@@ -73,7 +73,7 @@ const handleClick = async () => {
 
 <style lang="postcss" scoped>
 .menu-item {
-  color: var(--color-grey-000);
+  color: var(--color-neutral-txt-primary);
 }
 
 .submenu-icon {

package/lib/components/menu/MenuList.vue

@@ -2,7 +2,7 @@
 <template>
   <slot :is-open="isOpen" :open="open" name="trigger" />
   <Teleport :disabled="!shouldTeleport" to="body">
-    <ul v-if="!hasTrigger || isOpen" ref="menu" :class="{ horizontal, shadow }" class="menu-list" v-bind="$attrs">
+    <ul v-if="!hasTrigger || isOpen" ref="menu" :class="{ horizontal, border }" class="menu-list" v-bind="$attrs">
       <slot />
     </ul>
   </Teleport>
@@ -23,7 +23,7 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     horizontal?: boolean
-    shadow?: boolean
+    border?: boolean
     disabled?: boolean
     placement?: Options['placement']
   }>(),
@@ -88,17 +88,17 @@ const open = (event: MouseEvent) => {
   flex-direction: column;
   padding: 0.4rem;
   cursor: default;
-  color: var(--color-grey-200);
+  color: var(--color-neutral-txt-primary);
   border-radius: 0.4rem;
-  background-color: var(--color-grey-600);
+  background-color: var(--color-neutral-background-primary);
   gap: 0.2rem;
 
   &.horizontal {
     flex-direction: row;
   }
 
-  &.shadow {
-    box-shadow: var(--shadow-300);
+  &.border {
+    border: 0.1rem solid var(--color-neutral-border);
   }
 }
 </style>

package/lib/components/menu/MenuSeparator.vue

@@ -17,11 +17,11 @@ const horizontal = inject(
 .menu-separator {
   &.horizontal {
     margin: 0 0.5rem;
-    border-right: 1px solid var(--color-grey-500);
+    border-right: 1px solid var(--color-neutral-border);
   }
 
   &:not(.horizontal) {
-    border-bottom: 1px solid var(--color-grey-500);
+    border-bottom: 1px solid var(--color-neutral-border);
   }
 }
 </style>

package/lib/components/menu/MenuTrigger.vue

@@ -1,13 +1,13 @@
 <!-- v1.0 -->
 <template>
   <div :class="{ active, disabled }" class="menu-trigger">
-    <UiIcon :busy="busy" :icon="icon" />
+    <VtsIcon :busy :icon accent="current" />
     <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 defineProps<{
@@ -30,22 +30,22 @@ defineProps<{
   white-space: nowrap;
   border-radius: 0.8rem;
   gap: 1rem;
-  background-color: var(--color-grey-600);
+  background-color: var(--color-neutral-background-primary);
 
   &.disabled {
-    color: var(--color-grey-500);
+    color: var(--color-neutral-txt-secondary);
   }
 
   &:not(.disabled) {
     cursor: pointer;
 
     &:hover {
-      background-color: var(--background-color-purple-10);
+      background-color: var(--color-normal-background-selected);
     }
 
     &:active,
     &.active {
-      background-color: var(--background-color-purple-20);
+      background-color: var(--color-normal-background-hover);
     }
   }
 }

package/lib/components/object-link/ObjectLink.vue

@@ -3,7 +3,7 @@
   <RouterLink v-if="route && !disabled" :to="route" class="object-link is-link typo p3-medium">
     <span class="icon">
       <slot name="icon">
-        <UiIcon :icon />
+        <VtsIcon :icon accent="current" />
       </slot>
     </span>
     <span v-tooltip class="content text-ellipsis">
@@ -13,7 +13,7 @@
   <span v-else :class="{ disabled }" class="object-link typo p3-medium">
     <span class="icon">
       <slot name="icon">
-        <UiIcon :icon />
+        <VtsIcon :icon accent="current" />
       </slot>
     </span>
     <slot />
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.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'
@@ -41,24 +41,24 @@ defineSlots<{
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .object-link {
-  --color: var(--color-purple-base);
-  --border-color: var(--color-purple-base);
+  --color: var(--color-normal-txt-base);
+  --border-color: var(--color-normal-txt-base);
 
   &.is-link {
     &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-purple-d20);
-      --border-color: var(--color-purple-d20);
+      --color: var(--color-normal-txt-hover);
+      --border-color: var(--color-normal-txt-hover);
     }
 
     &:is(:active, .pressed) {
-      --color: var(--color-purple-d40);
-      --border-color: var(--color-purple-d40);
+      --color: var(--color-normal-txt-active);
+      --border-color: var(--color-normal-txt-active);
     }
   }
 
   &.disabled {
-    --color: var(--color-grey-400);
-    --border-color: var(--color-grey-400);
+    --color: var(--color-neutral-txt-secondary);
+    --border-color: var(--color-neutral-txt-secondary);
   }
 }
 
@@ -81,7 +81,7 @@ defineSlots<{
 }
 
 .icon {
-  color: var(--color-grey-100);
+  color: var(--color-neutral-txt-primary);
   font-size: 0.8rem;
 }
 </style>