@xen-orchestra/web-core 0.1.0 → 0.2.0

package/lib/components/chip/UiChip.vue

@@ -21,7 +21,7 @@ withDefaults(
     color?: Color
     disabled?: boolean
   }>(),
-  { color: 'info' }
+  { color: 'normal' }
 )
 
 const emit = defineEmits<{
@@ -33,13 +33,13 @@ const emit = defineEmits<{
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .ui-chip {
-  --color: var(--color-grey-100);
+  --color: var(--color-neutral-txt-primary);
 
   &.disabled {
-    --color: var(--color-grey-600);
+    --color: var(--color-normal-txt-item);
 
     &.info {
-      --color: var(--color-grey-300);
+      --color: var(--color-neutral-txt-secondary);
     }
   }
 }
@@ -47,66 +47,66 @@ const emit = defineEmits<{
 /* BACKGROUND COLOR VARIANTS */
 .ui-chip {
   &.info {
-    --background-color: var(--background-color-purple-10);
+    --background-color: var(--color-normal-background-selected);
 
     &:is(:hover, .hover, :focus-visible) {
-      --background-color: var(--background-color-purple-20);
+      --background-color: var(--color-normal-background-hover);
     }
 
     &:is(:active, .pressed) {
-      --background-color: var(--background-color-purple-30);
+      --background-color: var(--color-normal-background-active);
     }
 
     &.disabled {
-      --background-color: var(--background-color-secondary);
+      --background-color: var(--color-neutral-background-secondary);
     }
   }
 
   &.success {
-    --background-color: var(--background-color-green-10);
+    --background-color: var(--color-success-background-selected);
 
     &:is(:hover, .hover, :focus-visible) {
-      --background-color: var(--background-color-green-20);
+      --background-color: var(--color-success-background-hover);
     }
 
     &:is(:active, .pressed) {
-      --background-color: var(--background-color-green-30);
+      --background-color: var(--color-success-background-active);
     }
 
     &.disabled {
-      --background-color: var(--color-green-l60);
+      --background-color: var(--color-success-item-disabled);
     }
   }
 
   &.warning {
-    --background-color: var(--background-color-orange-10);
+    --background-color: var(--color-warning-background-selected);
 
     &:is(:hover, .hover, :focus-visible) {
-      --background-color: var(--background-color-orange-20);
+      --background-color: var(--color-warning-background-hover);
     }
 
     &:is(:active, .pressed) {
-      --background-color: var(--background-color-orange-30);
+      --background-color: var(--color-warning-background-active);
     }
 
     &.disabled {
-      --background-color: var(--color-orange-l60);
+      --background-color: var(--color-warning-item-disabled);
     }
   }
 
   &:is(.danger, .error) {
-    --background-color: var(--background-color-red-10);
+    --background-color: var(--color-danger-background-selected);
 
     &:is(:hover, .hover, :focus-visible) {
-      --background-color: var(--background-color-red-20);
+      --background-color: var(--color-danger-background-hover);
     }
 
     &:is(:active, .pressed) {
-      --background-color: var(--background-color-red-30);
+      --background-color: var(--color-danger-background-active);
     }
 
     &.disabled {
-      --background-color: var(--color-red-l60);
+      --background-color: var(--color-danger-item-disabled);
     }
   }
 }

package/lib/components/counter/VtsCounter.vue

@@ -0,0 +1,147 @@
+<!-- v2 -->
+<template>
+  <span :class="classNames" class="vts-counter">
+    <span class="inner">{{ value }}</span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { toVariants } from '@core/utils/to-variants.util'
+import { computed } from 'vue'
+
+type CounterAccent = 'brand' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'
+type CounterVariant = 'primary' | 'secondary'
+type CounterSize = 'small' | 'medium'
+
+const props = defineProps<{
+  value: number | string
+  accent: CounterAccent
+  variant: CounterVariant
+  size: CounterSize
+}>()
+
+const typoClasses = {
+  small: 'typo p4-semi-bold',
+  medium: 'typo p1-medium',
+}
+
+const classNames = computed(() => {
+  return [
+    typoClasses[props.size],
+    toVariants({
+      accent: props.accent,
+      variant: props.variant,
+      size: props.size,
+    }),
+  ]
+})
+</script>
+
+<style lang="postcss" scoped>
+/*
+VARIANT + ACCENT
+--vts-counter--background-color
+--vts-counter--color
+*/
+.vts-counter {
+  &.variant--primary {
+    &.accent--brand {
+      --vts-counter--background-color: var(--color-normal-item-base);
+      --vts-counter--color: var(--color-normal-txt-item);
+    }
+
+    &.accent--neutral {
+      --vts-counter--background-color: var(--color-neutral-txt-primary);
+      --vts-counter--color: var(--color-neutral-background-primary);
+    }
+
+    &.accent--success {
+      --vts-counter--background-color: var(--color-success-item-base);
+      --vts-counter--color: var(--color-success-txt-item);
+    }
+
+    &.accent--warning {
+      --vts-counter--background-color: var(--color-warning-item-base);
+      --vts-counter--color: var(--color-warning-txt-item);
+    }
+
+    &.accent--danger {
+      --vts-counter--background-color: var(--color-danger-item-base);
+      --vts-counter--color: var(--color-danger-txt-item);
+    }
+
+    &.accent--muted {
+      --vts-counter--background-color: var(--color-neutral-background-disabled);
+      --vts-counter--color: var(--color-neutral-txt-secondary);
+    }
+  }
+
+  &.variant--secondary {
+    &.accent--brand {
+      --vts-counter--background-color: var(--color-normal-background-selected);
+      --vts-counter--color: var(--color-normal-txt-base);
+    }
+
+    &.accent--neutral {
+      --vts-counter--background-color: var(--color-neutral-background-secondary);
+      --vts-counter--color: var(--color-neutral-txt-secondary);
+    }
+
+    &.accent--success {
+      --vts-counter--background-color: var(--color-success-background-selected);
+      --vts-counter--color: var(--color-success-txt-base);
+    }
+
+    &.accent--warning {
+      --vts-counter--background-color: var(--color-warning-background-selected);
+      --vts-counter--color: var(--color-warning-txt-base);
+    }
+
+    &.accent--danger {
+      --vts-counter--background-color: var(--color-danger-background-selected);
+      --vts-counter--color: var(--color-danger-txt-base);
+    }
+
+    &.accent--muted {
+      --vts-counter--background-color: var(--color-neutral-background-secondary);
+      --vts-counter--color: var(--color-neutral-txt-secondary);
+    }
+  }
+}
+
+/*
+SIZE
+--vts-counter--height
+--vts-counter--padding
+*/
+.vts-counter {
+  &.size--small {
+    --vts-counter--height: 1.5rem;
+    --vts-counter--padding: 0 0.4rem;
+  }
+
+  &.size--medium {
+    --vts-counter--height: 2.4rem;
+    --vts-counter--padding: 0 0.6rem;
+  }
+}
+
+/* IMPLEMENTATION */
+.vts-counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  text-transform: lowercase;
+  color: var(--vts-counter--color);
+  height: var(--vts-counter--height);
+  min-width: var(--vts-counter--height);
+  padding: var(--vts-counter--padding);
+  background-color: var(--vts-counter--background-color);
+  border-radius: calc(var(--vts-counter--height) / 2);
+
+  .inner {
+    line-height: 0;
+  }
+}
+</style>

package/lib/components/divider/Divider.vue

@@ -10,8 +10,8 @@ defineProps<{
 
 <style scoped lang="postcss">
 .vts-divider {
-  border-left: 0.1rem solid var(--color-grey-500);
-  border-bottom: 0.1rem solid var(--color-grey-500);
+  border-left: 0.1rem solid var(--color-neutral-border);
+  border-bottom: 0.1rem solid var(--color-neutral-border);
 
   &.tab {
     height: 2.4rem;

package/lib/components/donut-chart/DonutChart.vue

@@ -13,12 +13,12 @@
       cy="50"
       r="40"
     />
-    <UiIcon :icon height="24" width="24" x="38" y="38" />
+    <VtsIcon :icon accent="current" height="24" width="24" x="38" y="38" />
   </svg>
 </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'
 import { computed } from 'vue'
 
@@ -67,30 +67,30 @@ const computedSegments = computed(() => {
   stroke: var(--stroke-color);
   stroke-width: 10;
   fill: transparent;
-  --stroke-color: var(--color-grey-100);
+  --stroke-color: var(--color-neutral-txt-primary);
 
   &.primary {
-    --stroke-color: var(--color-purple-base);
+    --stroke-color: var(--color-normal-item-base);
   }
 
   &.secondary {
-    --stroke-color: var(--color-grey-100);
+    --stroke-color: var(--color-neutral-txt-primary);
   }
 
   &.success {
-    --stroke-color: var(--color-green-base);
+    --stroke-color: var(--color-success-item-base);
   }
 
   &.warning {
-    --stroke-color: var(--color-orange-base);
+    --stroke-color: var(--color-warning-item-base);
   }
 
   &.danger {
-    --stroke-color: var(--color-red-base);
+    --stroke-color: var(--color-danger-item-base);
   }
 
   &.disabled {
-    --stroke-color: var(--color-grey-400);
+    --stroke-color: var(--color-neutral-background-disabled);
   }
 }
 </style>

package/lib/components/dropdown/DropdownItem.vue

@@ -1,19 +1,24 @@
 <template>
   <div v-tooltip="{ selector: '.label' }" :class="[color, { disabled, selected }]" class="dropdown-item">
-    <UiIcon v-if="checkbox" :color="color ?? 'info'" :icon="selected ? faSquareCheck : faSquare" />
+    <!-- TODO: replace with correct color typing when available -->
+    <VtsIcon
+      v-if="checkbox"
+      :accent="color === 'normal' ? 'brand' : color"
+      :icon="selected ? faSquareCheck : faSquare"
+    />
     <slot name="icon">
-      <UiIcon :icon />
+      <VtsIcon :icon accent="current" />
     </slot>
     <div class="label p2 medium text-ellipsis">
       <slot />
     </div>
     <div v-if="info" class="info-text p3 italic">{{ info }}</div>
-    <UiIcon v-if="arrow" :color="disabled ? undefined : 'info'" :icon="faAngleRight" class="right-icon" />
+    <VtsIcon v-if="arrow" :accent="disabled ? 'current' : 'brand'" :icon="faAngleRight" class="right-icon" />
   </div>
 </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 { Color } from '@core/types/color.type'
 import { IK_DROPDOWN_CHECKBOX } from '@core/utils/injection-keys.util'
@@ -24,7 +29,7 @@ import { computed, inject } from 'vue'
 
 defineProps<{
   arrow?: boolean
-  color?: Color
+  color: Color
   disabled?: boolean
   icon?: IconDefinition
   info?: string
@@ -40,128 +45,103 @@ const checkbox = inject(
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .dropdown-item {
-  & {
-    --color: var(--color-grey-100);
-    --background-color: var(--background-color-primary);
+  &.normal {
+    --color: var(--color-neutral-txt-primary);
+    --background-color: var(--color-neutral-background-primary);
 
     &:is(.active, .selected) {
-      --color: var(--color-grey-100);
-      --background-color: var(--background-color-purple-10);
+      --color: var(--color-neutral-txt-primary);
+      --background-color: var(--color-normal-background-selected);
     }
 
     &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-grey-100);
-      --background-color: var(--background-color-purple-20);
+      --color: var(--color-neutral-txt-primary);
+      --background-color: var(--color-normal-background-hover);
     }
 
     &:is(:active, .pressed) {
-      --color: var(--color-grey-100);
-      --background-color: var(--background-color-purple-30);
+      --color: var(--color-neutral-txt-primary);
+      --background-color: var(--color-normal-background-active);
     }
 
     &.disabled {
-      --color: var(--color-grey-400);
-      --background-color: var(--background-color-primary);
-    }
-  }
-
-  &.info {
-    --color: var(--color-purple-base);
-    --background-color: var(--background-color-primary);
-
-    &:is(.active, .selected) {
-      --color: var(--color-purple-base);
-      --background-color: var(--background-color-purple-10);
-    }
-
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-purple-d20);
-      --background-color: var(--background-color-purple-20);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-purple-d40);
-      --background-color: var(--background-color-purple-30);
-    }
-
-    &.disabled {
-      --color: var(--color-purple-l60);
-      --background-color: var(--background-color-primary);
+      --color: var(--color-neutral-txt-secondary);
+      --background-color: var(--color-neutral-background-primary);
     }
   }
 
   &.success {
-    --color: var(--color-green-base);
-    --background-color: var(--background-color-primary);
+    --color: var(--color-success-txt-base);
+    --background-color: var(--color-neutral-background-primary);
 
     &: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);
     }
 
     &.disabled {
-      --color: var(--color-green-l60);
-      --background-color: var(--background-color-primary);
+      --color: var(--color-neutral-txt-secondary);
+      --background-color: var(--color-neutral-background-primary);
     }
   }
 
   &.warning {
-    --color: var(--color-orange-base);
-    --background-color: var(--background-color-primary);
+    --color: var(--color-warning-txt-base);
+    --background-color: var(--color-neutral-background-primary);
 
     &: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);
     }
 
     &.disabled {
-      --color: var(--color-orange-l60);
-      --background-color: var(--background-color-primary);
+      --color: var(--color-neutral-txt-secondary);
+      --background-color: var(--color-neutral-background-primary);
     }
   }
 
-  &:is(.error, .danger) {
-    --color: var(--color-red-base);
-    --background-color: var(--background-color-primary);
+  &.danger {
+    --color: var(--color-danger-txt-base);
+    --background-color: var(--color-neutral-background-primary);
 
     &: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);
     }
 
     &.disabled {
-      --color: var(--color-red-l60);
-      --background-color: var(--background-color-primary);
+      --color: var(--color-neutral-txt-secondary);
+      --background-color: var(--color-neutral-background-primary);
     }
   }
 }
@@ -184,6 +164,6 @@ const checkbox = inject(
 }
 
 .info-text {
-  color: var(--color-grey-300);
+  color: var(--color-neutral-txt-secondary);
 }
 </style>

package/lib/components/dropdown/DropdownList.vue

@@ -25,7 +25,7 @@ provide(
   padding: 0.4rem 0;
   gap: 0.2rem;
   border-radius: 0.4rem;
-  background: var(--background-color-primary);
+  background: var(--color-neutral-background-primary);
   box-shadow: var(--shadow-300);
 }
 </style>

package/lib/components/dropdown/DropdownTitle.vue

@@ -4,7 +4,7 @@
  -->
 <template>
   <div class="dropdown-title">
-    <UiIcon :icon />
+    <VtsIcon :icon accent="current" />
     <div class="label c3 semi-bold">
       <slot />
     </div>
@@ -20,7 +20,7 @@
 </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'
 
 withDefaults(
@@ -44,7 +44,7 @@ const emit = defineEmits<{
   padding: 0.4rem 1.6rem;
   gap: 0.8rem;
   height: 2.6rem;
-  background: var(--background-color-secondary);
+  background: var(--color-neutral-background-secondary);
 }
 
 .buttons {
@@ -55,14 +55,14 @@ const emit = defineEmits<{
   span {
     cursor: pointer;
     text-decoration: underline;
-    color: var(--color-purple-base);
+    color: var(--color-normal-txt-base);
 
     &:hover {
-      color: var(--color-purple-l20);
+      color: var(--color-normal-item-hover);
     }
 
     &:active {
-      color: var(--color-purple-l40);
+      color: var(--color-normal-item-active);
     }
   }
 }

package/lib/components/head-bar/HeadBar.vue

@@ -4,7 +4,7 @@
     <div class="label-wrapper">
       <span v-if="slots.icon || icon" class="icon">
         <slot name="icon">
-          <UiIcon :icon />
+          <VtsIcon :icon accent="current" />
         </slot>
       </span>
       <h4 v-tooltip class="typo h4-medium label text-ellipsis">
@@ -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'
 
@@ -43,8 +43,8 @@ const slots = defineSlots<{
   display: flex;
   gap: 4.8rem;
   align-items: center;
-  border-bottom: 0.1rem solid var(--color-grey-500);
-  background-color: var(--background-color-primary);
+  border-bottom: 0.1rem solid var(--color-neutral-border);
+  background-color: var(--color-neutral-background-primary);
 }
 
 .label-wrapper {
@@ -55,7 +55,7 @@ const slots = defineSlots<{
 }
 
 .label {
-  color: var(--color-grey-100);
+  color: var(--color-neutral-txt-primary);
 }
 
 .icon {
@@ -63,7 +63,7 @@ const slots = defineSlots<{
 }
 
 .status {
-  color: var(--color-grey-200);
+  color: var(--color-neutral-txt-secondary);
   display: flex;
   align-items: center;
   gap: 1.6rem;

package/lib/components/icon/ComplexIcon.vue

@@ -41,7 +41,7 @@ withDefaults(
     transform: translate(100%, 80%);
 
     :deep(path) {
-      stroke: var(--color-grey-600);
+      stroke: var(--color-neutral-background-primary);
       stroke-width: 100px;
       stroke-linejoin: round;
       paint-order: stroke;