feat(web-stack): update components to match new colors from design sy…

…stem (#7989)
vatesfr · Sep 17, 2024 · f969056 · f969056
1 parent 5e11547
commit f969056
Show file tree

Hide file tree

Showing 81 changed files with 726 additions and 531 deletions.
diff --git a/@xen-orchestra/lite/src/components/AccountButton.vue b/@xen-orchestra/lite/src/components/AccountButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <MenuList placement="bottom-end" shadow>
+  <MenuList placement="bottom-end" border>
     <template #trigger="{ open, isOpen }">
       <button type="button" :class="{ active: isOpen }" class="account-button" @click="open">
         <UiIcon :icon="faCircleUser" class="user-icon" />

diff --git a/@xen-orchestra/lite/src/components/AppLogin.vue b/@xen-orchestra/lite/src/components/AppLogin.vue
@@ -27,7 +27,7 @@
           <FormCheckbox v-model="rememberMe" />
           {{ $t('keep-me-logged') }}
         </label>
-        <UiButton type="submit" :busy="isConnecting">
+        <UiButton size="medium" color="normal" level="primary" type="submit" :busy="isConnecting">
           {{ $t('login') }}
         </UiButton>
       </template>
@@ -107,6 +107,7 @@ async function handleSubmit() {
   display: flex;
   margin: 1rem;
   width: fit-content;
+
   & .form-checkbox {
     margin: auto 1rem auto auto;
   }

diff --git a/@xen-orchestra/lite/src/components/FormWidget.vue b/@xen-orchestra/lite/src/components/FormWidget.vue
@@ -56,7 +56,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
   padding: 0 0.7rem;
   border: 1px solid var(--color-neutral-border);
   border-radius: 0.8rem;
-  background-color: var(--color-normal-txt-item);
+  background-color: var(--color-neutral-background-primary);
   box-shadow: var(--shadow-100);
   gap: 0.1rem;
 
@@ -71,7 +71,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
 }
 
 .form-widget:hover .widget {
-  border-color: var(--color-normal-item-disabled);
+  border-color: var(--color-normal-item-hover);
 }
 
 .element {
@@ -94,7 +94,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
   border: none;
   outline: none;
   color: var(--color-neutral-txt-primary);
-  background-color: var(--color-normal-txt-item);
+  background-color: var(--color-neutral-background-primary);
   flex: 1;
 
   &:disabled {

diff --git a/@xen-orchestra/lite/src/components/HostPatchesTable.vue b/@xen-orchestra/lite/src/components/HostPatchesTable.vue
@@ -19,7 +19,7 @@
           }"
           :value="patch.$hostRefs.size"
           class="counter"
-          color="error"
+          color="danger"
         />
       </td>
     </tr>

diff --git a/@xen-orchestra/lite/src/components/PowerStateIcon.vue b/@xen-orchestra/lite/src/components/PowerStateIcon.vue
@@ -29,7 +29,7 @@ const className = computed(() => `state-${props.state.toLocaleLowerCase()}`)
   color: var(--color-normal-txt-item);
 
   &.state-running {
-    color: var(--color-success-txt-base);
+    color: var(--color-success-item-base);
   }
 
   &.state-paused {
@@ -39,5 +39,9 @@ const className = computed(() => `state-${props.state.toLocaleLowerCase()}`)
   &.state-suspended {
     color: var(--color-normal-txt-hover);
   }
+
+  &.state-halted {
+    color: var(--color-danger-item-base);
+  }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/ProgressCircle.vue b/@xen-orchestra/lite/src/components/ProgressCircle.vue
@@ -39,7 +39,7 @@ const progress = computed(() => {
 .progress-circle-fill {
   animation: progress 1s ease-out forwards;
   fill: none;
-  stroke: var(--color-success-txt-base);
+  stroke: var(--color-success-item-base);
   stroke-width: 1.2;
   stroke-linecap: round;
   stroke-dasharray: v-bind(progress), 100;
@@ -48,13 +48,13 @@ const progress = computed(() => {
 .progress-circle-background {
   fill: none;
   stroke-width: 1.2;
-  stroke: var(--color-neutral-border);
+  stroke: var(--color-neutral-background-disabled);
 }
 
 .progress-circle-text {
   font-size: 0.7rem;
   font-weight: bold;
-  fill: var(--color-success-txt-base);
+  fill: var(--color-success-item-base);
   text-anchor: middle;
   alignment-baseline: middle;
 }

diff --git a/@xen-orchestra/lite/src/components/UsageBar.vue b/@xen-orchestra/lite/src/components/UsageBar.vue
@@ -74,14 +74,14 @@ const computedData = computed(() => {
 .progress-item {
   --progress-bar-height: 1.2rem;
   --progress-bar-color: var(--color-normal-item-hover);
-  --progress-bar-background-color: var(--color-neutral-border);
+  --progress-bar-background-color: var(--color-neutral-background-disabled);
 
   &.warning {
-    --progress-bar-color: var(--color-warning-txt-base);
+    --progress-bar-color: var(--color-warning-item-base);
   }
 
   &.error {
-    --progress-bar-color: var(--color-danger-txt-base);
+    --progress-bar-color: var(--color-danger-item-base);
   }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/XoaButton.vue b/@xen-orchestra/lite/src/components/XoaButton.vue
@@ -1,8 +1,24 @@
 <template>
-  <UiButton v-if="xoaFound" :left-icon="faArrowUpRightFromSquare" class="xoa-button" @click="openXoa()">
+  <UiButton
+    v-if="xoaFound"
+    size="medium"
+    color="normal"
+    level="primary"
+    :left-icon="faArrowUpRightFromSquare"
+    class="xoa-button"
+    @click="openXoa()"
+  >
     {{ $t('access-xoa') }}
   </UiButton>
-  <UiButton v-else :left-icon="faDownload" class="xoa-button" @click="openXoaDeploy()">
+  <UiButton
+    v-else
+    size="medium"
+    color="normal"
+    level="primary"
+    :left-icon="faDownload"
+    class="xoa-button"
+    @click="openXoaDeploy()"
+  >
     {{ $t('deploy-xoa') }}
   </UiButton>
 </template>

diff --git a/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue b/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
@@ -7,7 +7,7 @@
     </TabItem>
     <TabItem v-bind="tab(TAB.SLOTS, slotParams)">Slots</TabItem>
     <TabItem v-bind="tab(TAB.SETTINGS, settingParams)">Settings</TabItem>
-    <MenuList placement="bottom" shadow>
+    <MenuList placement="bottom" border>
       <template #trigger="{ open, isOpen }">
         <TabItem :active="isOpen" :disabled="presets === undefined" class="preset-tab" @click="open">
           <UiIcon :icon="faSliders" />
@@ -35,7 +35,9 @@
         <UiCardTitle>
           Logs
           <template #right>
-            <UiButton v-if="eventsLog.length > 0" level="tertiary" @click="eventsLog = []"> Clear </UiButton>
+            <UiButton v-if="eventsLog.length > 0" size="medium" color="normal" level="tertiary" @click="eventsLog = []">
+              Clear
+            </UiButton>
           </template>
         </UiCardTitle>
         <div class="events-log">

diff --git a/@xen-orchestra/lite/src/components/form/FormCheckbox.vue b/@xen-orchestra/lite/src/components/form/FormCheckbox.vue
@@ -81,7 +81,7 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle'
 
   .input.indeterminate + .fake-checkbox > .icon {
     opacity: 1;
-    color: var(--color-neutral-txt-secondary);
+    color: var(--color-normal-txt-item);
   }
 }
 
@@ -162,14 +162,13 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle'
   background-color: var(--background-color);
   box-shadow: var(--shadow-100);
 
-  --border-color: var(--color-neutral-border);
+  --border-color: var(--color-normal-item-base);
 }
 
 .input:disabled {
   & + .fake-checkbox {
     cursor: not-allowed;
-    --background-color: var(--color-neutral-background-secondary);
-    --border-color: var(--color-neutral-border);
+    --border-color: var(--color-neutral-txt-secondary);
   }
 
   &:checked + .fake-checkbox {
@@ -181,25 +180,25 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle'
 .input:not(:disabled) {
   &:hover + .fake-checkbox,
   &:focus + .fake-checkbox {
-    --border-color: var(--color-normal-item-active);
+    --border-color: var(--color-normal-item-hover);
   }
 
   &:active + .fake-checkbox {
-    --border-color: var(--color-normal-item-hover);
+    --border-color: var(--color-normal-item-active);
   }
 
   &:checked + .fake-checkbox {
     --border-color: transparent;
-    --background-color: var(--color-normal-txt-base);
+    --background-color: var(--color-normal-item-base);
   }
 
   &:checked:hover + .fake-checkbox,
   &:checked:focus + .fake-checkbox {
-    --background-color: var(--color-normal-txt-hover);
+    --background-color: var(--color-normal-item-hover);
   }
 
   &:checked:active + .fake-checkbox {
-    --background-color: var(--color-normal-txt-active);
+    --background-color: var(--color-normal-item-active);
   }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/form/FormInput.vue b/@xen-orchestra/lite/src/components/form/FormInput.vue
@@ -193,69 +193,69 @@ defineExpose({
 
   &:disabled {
     cursor: not-allowed;
-    --background-color: var(--color-neutral-background-secondary);
+    --background-color: var(--color-neutral-background-disabled);
   }
 
   &:not(:disabled) {
     &.info {
       &:hover {
-        --border-color: var(--color-normal-item-disabled);
+        --border-color: var(--color-normal-item-hover);
       }
 
       &:active {
         --border-color: var(--color-normal-item-active);
       }
 
       &:focus {
-        --border-color: var(--color-normal-txt-base);
+        --border-color: var(--color-normal-item-base);
       }
     }
 
     &.success {
-      --border-color: var(--color-normal-txt-base);
+      --border-color: var(--color-success-item-base);
 
       &:hover {
-        --border-color: var(--color-success-item-disabled);
+        --border-color: var(--color-success-item-hover);
       }
 
       &:active {
         --border-color: var(--color-success-item-active);
       }
 
       &:focus {
-        --border-color: var(--color-normal-txt-base);
+        --border-color: var(--color-success-item-base);
       }
     }
 
     &.warning {
-      --border-color: var(--color-warning-txt-base);
+      --border-color: var(--color-warning-item-base);
 
       &:hover {
-        --border-color: var(--color-warning-item-disabled);
+        --border-color: var(--color-warning-item-hover);
       }
 
       &:active {
         --border-color: var(--color-warning-item-active);
       }
 
       &:focus {
-        --border-color: var(--color-warning-txt-base);
+        --border-color: var(--color-warning-item-base);
       }
     }
 
     &.error {
-      --border-color: var(--color-danger-txt-base);
+      --border-color: var(--color-danger-item-base);
 
       &:hover {
-        --border-color: var(--color-danger-item-disabled);
+        --border-color: var(--color-danger-item-hover);
       }
 
       &:active {
         --border-color: var(--color-danger-item-active);
       }
 
       &:focus-within {
-        --border-color: var(--color-danger-txt-base);
+        --border-color: var(--color-danger-item-base);
       }
     }
   }

diff --git a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
@@ -4,7 +4,7 @@
       {{ host.name_label || '(Host)' }}
       <template #addons>
         <UiIcon v-if="isPoolMaster" v-tooltip="$t('master')" :icon="faStar" color="warning" />
-        <UiCounter v-if="isReady" v-tooltip="$t('running-vm', { count: vmCount })" :value="vmCount" color="info" />
+        <UiCounter v-if="isReady" v-tooltip="$t('running-vm', { count: vmCount })" :value="vmCount" color="primary" />
       </template>
     </TreeItemLabel>
     <template #sublist>

diff --git a/@xen-orchestra/lite/src/components/modals/CollectionFilterModal.vue b/@xen-orchestra/lite/src/components/modals/CollectionFilterModal.vue
@@ -23,7 +23,7 @@
       </template>
 
       <template #buttons>
-        <UiButton level="tertiary" @click="addNewFilter()">
+        <UiButton size="medium" color="normal" level="tertiary" @click="addNewFilter()">
           {{ $t('add-or') }}
         </UiButton>
         <ModalDeclineButton />

diff --git a/@xen-orchestra/lite/src/components/modals/JsonEditorModal.vue b/@xen-orchestra/lite/src/components/modals/JsonEditorModal.vue
@@ -6,7 +6,7 @@
       </template>
 
       <template #buttons>
-        <UiButton level="tertiary" @click="formatJson()">
+        <UiButton size="medium" color="normal" level="tertiary" @click="formatJson()">
           {{ $t('reformat') }}
         </UiButton>
         <ModalDeclineButton />

diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue
@@ -3,15 +3,15 @@
     <UiCardTitle>
       {{ $t('alarms') }}
       <template v-if="isReady && alarms.length > 0" #right>
-        <UiCounter :value="alarms.length" color="error" />
+        <UiCounter :value="alarms.length" color="danger" />
       </template>
     </UiCardTitle>
     <div v-if="!isStarted" class="pre-start">
       <div>
         <p class="text typo h4-medium">
           {{ $t('click-to-display-alarms') }}
         </p>
-        <UiButton @click="start">{{ $t('load-now') }}</UiButton>
+        <UiButton size="medium" color="normal" level="primary" @click="start">{{ $t('load-now') }}</UiButton>
       </div>
       <div>
         <img alt="" src="@/assets/server-status.svg" />

diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisioning.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisioning.vue
@@ -85,12 +85,12 @@ const hasError = computed(() => hostStoreHasError.value || vmStoreHasError.value
 .progress-item {
   margin-top: 2.6rem;
   --progress-bar-height: 1.2rem;
-  --progress-bar-color: var(--color-normal-txt-base);
-  --progress-bar-background-color: var(--color-neutral-border);
+  --progress-bar-color: var(--color-normal-item-base);
+  --progress-bar-background-color: var(--color-neutral-background-disabled);
 
   &.warning {
-    --progress-bar-color: var(--color-warning-txt-base);
-    --footer-value-color: var(--color-warning-txt-base);
+    --progress-bar-color: var(--color-warning-item-base);
+    --footer-value-color: var(--color-warning-item-base);
   }
 
   & .footer-value {

diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardStatusItem.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardStatusItem.vue
@@ -53,10 +53,10 @@ const inactive = computed(() => props.total - props.active)
   width: 1.3rem;
   height: 1.3rem;
   border-radius: 0.65rem;
-  background-color: var(--color-success-txt-base);
+  background-color: var(--color-success-item-base);
 
   &.inactive {
-    background-color: var(--color-neutral-border);
+    background-color: var(--color-neutral-background-disabled);
   }
 }
 

diff --git a/@xen-orchestra/lite/src/components/ui/UiBadge.vue b/@xen-orchestra/lite/src/components/ui/UiBadge.vue
@@ -22,8 +22,8 @@ defineProps<{
   gap: 0.4rem;
   padding: 0 0.8rem;
   height: 1.8em;
-  color: var(--color-normal-txt-item);
+  color: var(--color-neutral-txt-primary);
   border-radius: 9.6rem;
-  background-color: var(--color-neutral-txt-secondary);
+  background-color: var(--color-neutral-background-disabled);
 }
 </style>