@xen-orchestra/web-core 0.1.1 → 0.3.0

package/lib/components/button/UiButton.vue

@@ -1,14 +1,14 @@
 <!-- v1.0 -->
 <template>
   <button :class="className" :disabled="busy || isDisabled" class="ui-button" type="button">
-    <UiIcon :busy :icon="leftIcon" class="icon" fixed-width />
+    <VtsIcon :busy :icon="leftIcon" accent="current" class="icon" fixed-width />
     <slot />
-    <UiIcon :icon="rightIcon" class="icon" fixed-width />
+    <VtsIcon :icon="rightIcon" accent="current" class="icon" fixed-width />
   </button>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { useContext } from '@core/composables/context.composable'
 import { DisabledContext } from '@core/context'
 import type { ButtonLevel, ButtonSize } from '@core/types/button.type'
@@ -18,28 +18,25 @@ import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    level?: ButtonLevel
+    level: ButtonLevel
+    color: Color
+    size: ButtonSize
     busy?: boolean
     disabled?: boolean
     leftIcon?: IconDefinition
     rightIcon?: IconDefinition
-    color?: Color
-    size?: ButtonSize
   }>(),
   {
     disabled: undefined,
-    color: 'info',
-    level: 'primary',
-    size: 'small',
   }
 )
 
 const isDisabled = useContext(DisabledContext, () => props.disabled)
 
 const fontClasses = {
-  'extra-small': 'typo p3-medium',
-  small: 'typo h6-medium',
-  medium: 'typo h3-semi-bold',
+  small: 'typo p3-medium',
+  medium: 'typo h6-medium',
+  large: 'typo h3-semi-bold',
 }
 
 const className = computed(() => {
@@ -59,123 +56,389 @@ const className = computed(() => {
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .ui-button {
-  &.info {
-    --accent-color: var(--color-purple-base);
-
-    &:is(:hover, .hover, :focus-visible) {
-      --accent-color: var(--color-purple-d20);
-    }
-
-    &:is(:active, .pressed) {
-      --accent-color: var(--color-purple-d40);
-    }
-
-    &:is(:disabled, .disabled) {
-      --accent-color: var(--color-grey-400);
+  &.primary {
+    &.normal {
+      --background-color: var(--color-normal-item-base);
+      --border-color: var(--color-normal-item-base);
+      --color: var(--color-normal-txt-item);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-normal-item-hover);
+        --border-color: var(--color-normal-item-hover);
+        --color: var(--color-normal-txt-item);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-normal-item-active);
+        --border-color: var(--color-normal-item-active);
+        --color: var(--color-normal-txt-item);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-normal-item-disabled);
+        --border-color: var(--color-normal-item-disabled);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-normal-item-base);
+        --border-color: var(--color-normal-item-base);
+        --color: var(--color-normal-txt-item);
+      }
     }
-  }
 
-  &.success {
-    --accent-color: var(--color-green-base);
-
-    &:is(:hover, .hover, :focus-visible) {
-      --accent-color: var(--color-green-d20);
+    &.success {
+      --background-color: var(--color-success-item-base);
+      --border-color: var(--color-success-item-base);
+      --color: var(--color-success-txt-item);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-success-item-hover);
+        --border-color: var(--color-success-item-hover);
+        --color: var(--color-success-txt-item);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-success-item-active);
+        --border-color: var(--color-success-item-active);
+        --color: var(--color-success-txt-item);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-success-item-disabled);
+        --border-color: var(--color-success-item-disabled);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-success-item-base);
+        --border-color: var(--color-success-item-base);
+        --color: var(--color-success-txt-item);
+      }
     }
 
-    &:is(:active, .pressed) {
-      --accent-color: var(--color-green-d40);
+    &.warning {
+      --background-color: var(--color-warning-item-base);
+      --border-color: var(--color-warning-item-base);
+      --color: var(--color-warning-txt-item);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-warning-item-hover);
+        --border-color: var(--color-warning-item-hover);
+        --color: var(--color-warning-txt-item);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-warning-item-active);
+        --border-color: var(--color-warning-item-active);
+        --color: var(--color-warning-txt-item);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-warning-item-disabled);
+        --border-color: var(--color-warning-item-disabled);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-warning-item-base);
+        --border-color: var(--color-warning-item-base);
+        --color: var(--color-warning-txt-item);
+      }
     }
 
-    &:is(:disabled, .disabled) {
-      --accent-color: var(--color-green-l60);
+    &.danger {
+      --background-color: var(--color-danger-item-base);
+      --border-color: var(--color-danger-item-base);
+      --color: var(--color-danger-txt-item);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-danger-item-hover);
+        --border-color: var(--color-danger-item-hover);
+        --color: var(--color-danger-txt-item);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-danger-item-active);
+        --border-color: var(--color-danger-item-active);
+        --color: var(--color-danger-txt-item);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-danger-item-disabled);
+        --border-color: var(--color-danger-item-disabled);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-danger-item-base);
+        --border-color: var(--color-danger-item-base);
+        --color: var(--color-danger-txt-item);
+      }
     }
   }
 
-  &.warning {
-    --accent-color: var(--color-orange-base);
+  &.secondary {
+    &.normal {
+      --background-color: var(--color-neutral-background-primary);
+      --border-color: var(--color-normal-item-base);
+      --color: var(--color-normal-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-normal-item-hover);
+        --color: var(--color-normal-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-normal-item-active);
+        --color: var(--color-normal-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-neutral-background-disabled);
+        --border-color: var(--color-neutral-txt-secondary);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-normal-item-base);
+        --color: var(--color-normal-txt-base);
+      }
+    }
 
-    &:is(:hover, .hover, :focus-visible) {
-      --accent-color: var(--color-orange-d20);
+    &.success {
+      --background-color: var(--color-neutral-background-primary);
+      --border-color: var(--color-success-txt-base);
+      --color: var(--color-success-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-success-txt-hover);
+        --color: var(--color-success-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-success-txt-active);
+        --color: var(--color-success-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-neutral-background-disabled);
+        --border-color: var(--color-neutral-txt-secondary);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-success-txt-base);
+        --color: var(--color-success-txt-base);
+      }
     }
 
-    &:is(:active, .pressed) {
-      --accent-color: var(--color-orange-d40);
+    &.warning {
+      --background-color: var(--color-neutral-background-primary);
+      --border-color: var(--color-warning-txt-base);
+      --color: var(--color-warning-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-warning-txt-hover);
+        --color: var(--color-warning-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-warning-txt-active);
+        --color: var(--color-warning-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-neutral-background-disabled);
+        --border-color: var(--color-neutral-txt-secondary);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-warning-txt-base);
+        --color: var(--color-warning-txt-base);
+      }
     }
 
-    &:is(:disabled, .disabled) {
-      --accent-color: var(--color-orange-l60);
+    &.danger {
+      --background-color: var(--color-neutral-background-primary);
+      --border-color: var(--color-danger-txt-base);
+      --color: var(--color-danger-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-danger-txt-hover);
+        --color: var(--color-danger-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-danger-txt-active);
+        --color: var(--color-danger-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-neutral-background-disabled);
+        --border-color: var(--color-neutral-txt-secondary);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-danger-txt-base);
+        --color: var(--color-danger-txt-base);
+      }
     }
   }
 
-  &:is(.danger, .error) {
-    --accent-color: var(--color-red-base);
+  &.tertiary {
+    &.normal {
+      --background-color: transparent;
+      --border-color: transparent;
+      --color: var(--color-normal-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-normal-background-hover);
+        --border-color: var(--color-normal-background-hover);
+        --color: var(--color-normal-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-normal-background-active);
+        --border-color: var(--color-normal-background-active);
+        --color: var(--color-normal-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: transparent;
+        --border-color: transparent;
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-normal-background-selected);
+        --border-color: var(--color-normal-background-selected);
+        --color: var(--color-normal-txt-base);
+      }
+    }
 
-    &:is(:hover, .hover, :focus-visible) {
-      --accent-color: var(--color-red-d20);
+    &.success {
+      --background-color: transparent;
+      --border-color: transparent;
+      --color: var(--color-success-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-success-background-hover);
+        --border-color: var(--color-success-background-hover);
+        --color: var(--color-success-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-success-background-active);
+        --border-color: var(--color-success-background-active);
+        --color: var(--color-success-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: transparent;
+        --border-color: transparent;
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-success-background-selected);
+        --border-color: var(--color-success-background-selected);
+        --color: var(--color-success-txt-base);
+      }
     }
 
-    &:is(:active, .pressed) {
-      --accent-color: var(--color-red-d40);
+    &.warning {
+      --background-color: transparent;
+      --border-color: transparent;
+      --color: var(--color-warning-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-warning-background-hover);
+        --border-color: var(--color-warning-background-hover);
+        --color: var(--color-warning-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-warning-background-active);
+        --border-color: var(--color-warning-background-active);
+        --color: var(--color-warning-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: transparent;
+        --border-color: transparent;
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-warning-background-selected);
+        --border-color: var(--color-warning-background-selected);
+        --color: var(--color-warning-txt-base);
+      }
     }
 
-    &:is(:disabled, .disabled) {
-      --accent-color: var(--color-red-l60);
+    &.danger {
+      --background-color: transparent;
+      --border-color: transparent;
+      --color: var(--color-danger-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-danger-background-hover);
+        --border-color: var(--color-danger-background-hover);
+        --color: var(--color-danger-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-danger-background-active);
+        --border-color: var(--color-danger-background-active);
+        --color: var(--color-danger-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: transparent;
+        --border-color: transparent;
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-danger-background-selected);
+        --border-color: var(--color-danger-background-selected);
+        --color: var(--color-danger-txt-base);
+      }
     }
   }
 }
 
 /* SIZE VARIANTS */
 .ui-button {
-  &.extra-small {
+  &.small {
     --padding: 0.4rem 0.8rem;
-
-    &.tertiary {
-      --padding: 0;
-    }
+    --border-radius: 0.2rem;
   }
 
-  &.small {
+  &.medium {
     --padding: 0.8rem 1.6rem;
-
-    &.tertiary {
-      --padding: 0.2rem 0;
-    }
+    --border-radius: 0.4rem;
   }
 
-  &.medium {
+  &.large {
     --padding: 1.6rem 2.4rem;
-
-    &.tertiary {
-      --padding: 0.4rem 0;
-    }
-  }
-}
-
-/* LEVELS VARIANTS */
-.ui-button {
-  &.primary {
-    --color: var(--color-grey-600);
-    --background-color: var(--accent-color);
-    --border-color: var(--accent-color);
-    --border-style: solid;
-    --border-radius: 0.8rem;
-  }
-
-  &.secondary {
-    --color: var(--accent-color);
-    --background-color: var(--background-color-primary);
-    --border-color: var(--accent-color);
-    --border-style: solid;
     --border-radius: 0.8rem;
   }
-
-  &.tertiary {
-    --color: var(--accent-color);
-    --background-color: transparent;
-    --border-color: var(--accent-color);
-    --border-style: none none solid;
-    --border-radius: 0;
-  }
 }
 
 /* IMPLEMENTATION */
@@ -190,7 +453,7 @@ const className = computed(() => {
   outline: none;
   border-color: var(--border-color);
   border-radius: var(--border-radius);
-  border-style: var(--border-style);
+  border-style: solid;
   color: var(--color);
   background-color: var(--background-color);
   padding: var(--padding);

package/lib/components/card/CardSubtitle.vue

@@ -15,8 +15,8 @@ defineSlots<{
 
 <style lang="postcss" scoped>
 .card-subtitle {
-  color: var(--color-purple-base);
-  border-bottom: 0.1rem solid var(--color-purple-base);
+  color: var(--color-normal-txt-base);
+  border-bottom: 0.1rem solid var(--color-normal-txt-base);
   display: flex;
   justify-content: space-between;
   gap: 0.8rem;

package/lib/components/card/CardTitle.vue

@@ -2,9 +2,13 @@
 <template>
   <div class="card-title">
     <div class="main-content">
-      <div class="title typo h6-medium"><slot /></div>
+      <div class="title typo h6-medium">
+        <slot />
+      </div>
 
-      <div v-if="$slots.info" class="info typo h7-semi-bold"><slot name="info" /></div>
+      <div v-if="$slots.info" class="info typo h7-semi-bold">
+        <slot name="info" />
+      </div>
     </div>
     <p v-if="$slots.description" class="description typo p3-regular">
       <slot name="description" />
@@ -36,6 +40,7 @@ defineSlots<{
   display: flex;
   align-items: center;
   gap: 1.6rem;
+  color: var(--color-neutral-txt-primary);
 }
 
 .info {
@@ -43,10 +48,10 @@ defineSlots<{
   display: flex;
   align-items: center;
   gap: 0.8rem;
-  color: var(--color-purple-base);
+  color: var(--color-normal-txt-base);
 }
 
 .description {
-  color: var(--color-grey-300);
+  color: var(--color-neutral-txt-secondary);
 }
 </style>

package/lib/components/cell-object/CellObject.vue

@@ -11,8 +11,8 @@
           v-if="isSupported && copiableId"
           :left-icon="faCopy"
           level="secondary"
-          size="extra-small"
-          :color="copied ? 'success' : 'info'"
+          size="small"
+          :color="copied ? 'success' : 'normal'"
           @click="copy(id)"
         >
           {{ copied ? $t('core.copied') : $t('core.copy-id') }}
@@ -39,7 +39,7 @@ const { isSupported, copy, copied } = useClipboard()
 <style lang="postcss" scoped>
 .cell-object {
   padding: 0.8rem;
-  border: 0.1rem solid var(--color-grey-500);
+  border: 0.1rem solid var(--color-neutral-border);
 }
 
 .data {
@@ -49,6 +49,6 @@ const { isSupported, copy, copied } = useClipboard()
 }
 
 .id {
-  color: var(--color-grey-300);
+  color: var(--color-neutral-txt-secondary);
 }
 </style>

package/lib/components/cell-text/CellText.vue

@@ -24,8 +24,8 @@ const slots = defineSlots<{
 <style lang="postcss" scoped>
 .cell-text {
   padding: 0.8rem;
-  border: 0.1rem solid var(--color-grey-500);
-  color: var(--color-grey-000);
+  border: 0.1rem solid var(--color-neutral-border);
+  color: var(--color-neutral-txt-primary);
 }
 
 .data {
@@ -35,6 +35,6 @@ const slots = defineSlots<{
 }
 
 .info {
-  color: var(--color-grey-300);
+  color: var(--color-neutral-txt-secondary);
 }
 </style>

package/lib/components/chip/ChipIcon.vue

@@ -1,9 +1,10 @@
 <template>
-  <UiIcon :class="{ disabled }" :color :icon class="chip-icon" fixed-width />
+  <!-- TODO: replace with correct color typing when available -->
+  <VtsIcon :class="{ disabled }" :accent="color === 'normal' ? 'brand' : color" :icon class="chip-icon" fixed-width />
 </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'
 
@@ -16,13 +17,13 @@ defineProps<{
 
 <style lang="postcss" scoped>
 .chip-icon {
-  color: var(--color-grey-200);
+  color: var(--color-neutral-txt-secondary);
 
   &.disabled {
-    color: var(--color-grey-600);
+    color: var(--color-normal-txt-item);
 
     &.info {
-      color: var(--color-grey-400);
+      color: var(--color-neutral-txt-secondary);
     }
   }
 }