@xen-orchestra/web-core 0.1.0 → 0.2.0

package/lib/components/PowerStateIcon.vue

@@ -1,10 +1,10 @@
 <!-- v1.0 -->
 <template>
-  <UiIcon :class="className" :icon="icon" class="power-state-icon" />
+  <VtsIcon :class="className" accent="current" :icon class="power-state-icon" />
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { POWER_STATE } from '@core/types/power-state.type'
 import { faMoon, faPause, faPlay, faStop } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
@@ -28,19 +28,19 @@ const className = computed(() => `state-${props.state}`)
 <style lang="postcss" scoped>
 .power-state-icon {
   &.state-suspended {
-    color: var(--color-purple-d60);
+    color: var(--color-normal-txt-item);
   }
 
   &.state-running {
-    color: var(--color-green-base);
+    color: var(--color-success-item-base);
   }
 
   &.state-paused {
-    color: var(--color-purple-l40);
+    color: var(--color-normal-item-active);
   }
 
   &.state-halted {
-    color: var(--color-red-base);
+    color: var(--color-danger-item-base);
   }
 }
 </style>

package/lib/components/UiCard.vue

@@ -18,8 +18,8 @@ defineProps<Props>()
   gap: 2.4rem;
   padding: 2.4rem;
   flex-direction: column;
-  background-color: var(--background-color-primary);
-  border: 0.1rem solid var(--color-grey-500);
+  background-color: var(--color-neutral-background-primary);
+  border: 0.1rem solid var(--color-neutral-border);
   border-radius: 0.8rem;
 }
 

package/lib/components/UiTag.vue

@@ -2,76 +2,84 @@
 <template>
   <span :class="[color, { light }]" class="ui-tag typo p3-regular">
     <slot name="icon">
-      <UiIcon :icon fixed-width />
+      <VtsIcon :icon accent="current" fixed-width />
     </slot>
     <span class="text-ellipsis"><slot /></span>
   </span>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { TagColor } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
-withDefaults(
-  defineProps<{
-    color?: TagColor
-    light?: boolean
-    icon?: IconDefinition
-  }>(),
-  { color: 'grey' }
-)
+defineProps<{
+  color: TagColor
+  light?: boolean
+  icon?: IconDefinition
+}>()
 </script>
 
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .ui-tag {
-  --color: var(--color-grey-600);
+  &.primary {
+    --background-color: var(--color-normal-item-base);
+    --color: var(--color-normal-txt-item);
 
-  &.light {
-    --color: var(--color-grey-100);
+    &.light {
+      --background-color: var(--color-normal-background-selected);
+      --color: var(--color-normal-txt-base);
+    }
   }
-}
 
-/* BACKGROUND COLOR VARIANTS */
-.ui-tag {
-  &.grey {
-    --background-color: var(--color-grey-300);
+  &.secondary {
+    --background-color: var(--color-neutral-txt-primary);
+    --color: var(--color-neutral-background-primary);
 
     &.light {
-      --background-color: var(--background-color-secondary);
+      --background-color: var(--color-neutral-background-secondary);
+      --color: var(--color-neutral-txt-primary);
     }
   }
 
-  &.info {
-    --background-color: var(--color-purple-l20);
+  &.success {
+    --background-color: var(--color-success-item-base);
+    --color: var(--color-success-txt-item);
 
     &.light {
-      --background-color: var(--background-color-purple-10);
+      --background-color: var(--color-success-background-selected);
+      --color: var(--color-success-txt-base);
     }
   }
 
-  &.success {
-    --background-color: var(--color-green-l20);
+  &.warning {
+    --background-color: var(--color-warning-item-base);
+    --color: var(--color-warning-txt-item);
 
     &.light {
-      --background-color: var(--background-color-green-10);
+      --background-color: var(--color-warning-background-selected);
+      --color: var(--color-warning-txt-base);
     }
   }
 
-  &.warning {
-    --background-color: var(--color-orange-l20);
+  &.danger {
+    --background-color: var(--color-danger-item-base);
+    --color: var(--color-danger-txt-item);
 
     &.light {
-      --background-color: var(--background-color-orange-10);
+      --background-color: var(--color-danger-background-selected);
+      --color: var(--color-danger-txt-base);
     }
   }
 
-  &:is(.error, .danger) {
-    --background-color: var(--color-red-l20);
+  &.disabled {
+    --background-color: var(--color-neutral-background-disabled);
+    --color: var(--color-neutral-txt-secondary);
 
     &.light {
-      --background-color: var(--background-color-red-10);
+      --background-color: var(--color-neutral-background-secondary);
+      --color: var(--color-neutral-txt-secondary);
     }
   }
 }

package/lib/components/backup-item/BackupItem.vue

@@ -1,9 +1,12 @@
 <!-- v1.0 -->
 <template>
   <div class="backup-item">
-    <RouterLink :to="backup.route">
+    <RouterLink v-if="backup.route !== undefined" :to="backup.route">
       {{ backup.label }}
     </RouterLink>
+    <p v-else class="typo p3-medium">
+      {{ backup.label }}
+    </p>
     <div class="states">
       <BackupState v-for="(state, index) in backup.states" :key="index" :state />
     </div>
@@ -22,7 +25,7 @@ defineProps<{
 <style lang="postcss" scoped>
 .backup-item {
   padding: 0.8rem 0.4rem;
-  border-top: 0.1rem solid var(--color-grey-500);
+  border-top: 0.1rem solid var(--color-neutral-border);
   display: flex;
   align-items: center;
   gap: 0.2rem;

package/lib/components/backup-state/BackupState.vue

@@ -1,12 +1,11 @@
 <!-- v1.0 -->
 <template>
-  <UiIcon :color :icon class="backup-state" />
+  <VtsIcon :accent="color" :icon class="backup-state" />
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { BackupState } from '@core/types/backup.type'
-import type { Color } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faCheckCircle, faCircleMinus, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
@@ -17,10 +16,10 @@ type Props = {
 
 const props = defineProps<Props>()
 
-const states: Record<Props['state'], { icon: IconDefinition; color: Color }> = {
+const states: Record<Props['state'], { icon: IconDefinition; color: 'success' | 'warning' | 'danger' }> = {
   success: { icon: faCheckCircle, color: 'success' },
   partial: { icon: faCircleMinus, color: 'warning' },
-  failure: { icon: faCircleXmark, color: 'error' },
+  failure: { icon: faCircleXmark, color: 'danger' },
 }
 
 const icon = computed(() => states[props.state].icon)

package/lib/components/button/ButtonIcon.vue

@@ -1,13 +1,13 @@
 <!-- v1.0 -->
 <template>
   <button :class="[color, size, { disabled, active }]" :disabled class="button-icon" type="button">
-    <UiIcon :icon class="icon" />
+    <VtsIcon :icon accent="current" />
     <span v-if="dot" class="dot" />
   </button>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { Color } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed } from 'vue'
@@ -22,7 +22,7 @@ const props = withDefaults(
     dot?: boolean
     targetScale?: number | { x: number; y: number }
   }>(),
-  { color: 'info', size: 'medium', targetScale: 1 }
+  { color: 'normal', size: 'medium', targetScale: 1 }
 )
 
 const cssTargetScale = computed(() => {
@@ -37,114 +37,114 @@ const cssTargetScale = computed(() => {
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .button-icon {
-  &.info {
+  &.normal {
     & {
-      --color: var(--color-purple-base);
+      --color: var(--color-normal-txt-base);
       --background-color: transparent;
-      --dot-color: var(--color-red-base);
+      --dot-color: var(--color-danger-txt-base);
     }
 
     &:is(.active, .selected) {
-      --color: var(--color-purple-base);
-      --background-color: var(--background-color-purple-10);
+      --color: var(--color-normal-txt-base);
+      --background-color: var(--color-normal-background-selected);
     }
 
     &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-purple-d20);
-      --background-color: var(--background-color-purple-20);
+      --color: var(--color-normal-txt-hover);
+      --background-color: var(--color-normal-background-hover);
     }
 
     &:is(:active, .pressed) {
-      --color: var(--color-purple-d40);
-      --background-color: var(--background-color-purple-30);
+      --color: var(--color-normal-txt-active);
+      --background-color: var(--color-normal-background-active);
     }
 
     &:is(:disabled, .disabled) {
-      --color: var(--color-grey-400);
+      --color: var(--color-neutral-txt-secondary);
       --background-color: transparent;
     }
   }
 
   &.success {
     & {
-      --color: var(--color-green-base);
+      --color: var(--color-success-txt-base);
       --background-color: transparent;
-      --dot-color: var(--color-red-base);
+      --dot-color: var(--color-danger-txt-base);
     }
 
     &:is(.active, .selected) {
-      --color: var(--color-green-base);
-      --background-color: var(--background-color-green-10);
+      --color: var(--color-success-txt-base);
+      --background-color: var(--color-success-background-selected);
     }
 
     &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-green-d20);
-      --background-color: var(--background-color-green-20);
+      --color: var(--color-success-txt-hover);
+      --background-color: var(--color-success-background-hover);
     }
 
     &:is(:active, .pressed) {
-      --color: var(--color-green-d40);
-      --background-color: var(--background-color-green-30);
+      --color: var(--color-success-txt-active);
+      --background-color: var(--color-success-background-active);
     }
 
     &:is(:disabled, .disabled) {
-      --color: var(--color-green-l60);
+      --color: var(--color-neutral-txt-secondary);
       --background-color: transparent;
     }
   }
 
   &.warning {
     & {
-      --color: var(--color-orange-base);
+      --color: var(--color-warning-txt-base);
       --background-color: transparent;
-      --dot-color: var(--color-red-base);
+      --dot-color: var(--color-danger-txt-base);
     }
 
     &:is(.active, .selected) {
-      --color: var(--color-orange-base);
-      --background-color: var(--background-color-orange-10);
+      --color: var(--color-warning-txt-base);
+      --background-color: var(--color-warning-background-selected);
     }
 
     &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-orange-d20);
-      --background-color: var(--background-color-orange-20);
+      --color: var(--color-warning-txt-hover);
+      --background-color: var(--color-warning-background-hover);
     }
 
     &:is(:active, .pressed) {
-      --color: var(--color-orange-d40);
-      --background-color: var(--background-color-orange-30);
+      --color: var(--color-warning-txt-active);
+      --background-color: var(--color-warning-background-active);
     }
 
     &:is(:disabled, .disabled) {
-      --color: var(--color-orange-l60);
+      --color: var(--color-neutral-txt-secondary);
       --background-color: transparent;
     }
   }
 
   &:is(.danger, .error) {
     & {
-      --color: var(--color-red-base);
+      --color: var(--color-danger-txt-base);
       --background-color: transparent;
-      --dot-color: var(--color-orange-base);
+      --dot-color: var(--color-warning-txt-base);
     }
 
     &:is(.active, .selected) {
-      --color: var(--color-red-base);
-      --background-color: var(--background-color-red-10);
+      --color: var(--color-danger-txt-base);
+      --background-color: var(--color-danger-background-selected);
     }
 
     &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-red-d20);
-      --background-color: var(--background-color-red-20);
+      --color: var(--color-danger-txt-hover);
+      --background-color: var(--color-danger-background-hover);
     }
 
     &:is(:active, .pressed) {
-      --color: var(--color-red-d40);
-      --background-color: var(--background-color-red-30);
+      --color: var(--color-danger-txt-active);
+      --background-color: var(--color-danger-background-active);
     }
 
     &:is(:disabled, .disabled) {
-      --color: var(--color-red-l60);
+      --color: var(--color-neutral-txt-secondary);
       --background-color: transparent;
     }
   }