feat(web-stack): replace components CSS color variables with new ones (…

…#7984) Replace legacy CSS colors variables in components with new ones created by #7973
vatesfr · Sep 17, 2024 · 5e11547 · 5e11547
1 parent 04f3a09
commit 5e11547
Show file tree

Hide file tree

Showing 125 changed files with 583 additions and 582 deletions.
diff --git a/@xen-orchestra/lite/src/App.vue b/@xen-orchestra/lite/src/App.vue
@@ -75,7 +75,7 @@ useUnreachableHosts()
   overflow: auto;
   flex: 1;
   height: calc(100vh - 5.5rem);
-  background-color: var(--background-color-secondary);
+  background-color: var(--color-neutral-background-secondary);
 
   &.no-ui {
     height: 100vh;

diff --git a/@xen-orchestra/lite/src/components/AccountButton.vue b/@xen-orchestra/lite/src/components/AccountButton.vue
@@ -51,14 +51,14 @@ const openSettings = () => router.push({ name: 'settings' })
   display: flex;
   align-items: center;
   padding: 1rem;
-  color: var(--color-grey-100);
+  color: var(--color-neutral-txt-primary);
   border: none;
   border-radius: 0.8rem;
-  background-color: var(--background-color-secondary);
+  background-color: var(--color-neutral-background-secondary);
   gap: 0.8rem;
 
   &:disabled {
-    color: var(--color-grey-500);
+    color: var(--color-neutral-border);
   }
 
   &:not(:disabled) {
@@ -67,12 +67,12 @@ const openSettings = () => router.push({ name: 'settings' })
     &:hover,
     &:active,
     &.active {
-      background-color: var(--background-color-primary);
+      background-color: var(--color-neutral-background-primary);
     }
 
     &:active,
     &.active {
-      color: var(--color-purple-base);
+      color: var(--color-normal-txt-base);
     }
   }
 }
@@ -86,6 +86,6 @@ const openSettings = () => router.push({ name: 'settings' })
 }
 
 .menu-item-logout {
-  color: var(--color-red-base);
+  color: var(--color-danger-txt-base);
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/AppHeader.vue b/@xen-orchestra/lite/src/components/AppHeader.vue
@@ -39,8 +39,8 @@ const { trigger: navigationTrigger } = storeToRefs(navigationStore)
   justify-content: space-between;
   height: 5.5rem;
   padding: 1rem;
-  border-bottom: 0.1rem solid var(--color-grey-500);
-  background-color: var(--background-color-secondary);
+  border-bottom: 0.1rem solid var(--color-neutral-border);
+  background-color: var(--color-neutral-background-secondary);
 
   img {
     width: 4rem;

diff --git a/@xen-orchestra/lite/src/components/AppLogin.vue b/@xen-orchestra/lite/src/components/AppLogin.vue
@@ -119,7 +119,7 @@ async function handleSubmit() {
   justify-content: center;
   min-height: 100vh;
   max-width: 100vw;
-  background-color: var(--background-color-primary);
+  background-color: var(--color-neutral-background-primary);
 }
 
 form {
@@ -131,10 +131,10 @@ form {
   justify-content: center;
   margin: 0 auto;
   padding: 8.5rem;
-  background-color: var(--background-color-secondary);
+  background-color: var(--color-neutral-background-secondary);
 
   .error {
-    color: var(--color-red-base);
+    color: var(--color-danger-txt-base);
   }
 }
 
@@ -155,7 +155,7 @@ input {
   max-width: 100%;
   margin-bottom: 1rem;
   padding: 1rem 1.5rem;
-  border: 1px solid var(--color-grey-500);
+  border: 1px solid var(--color-neutral-border);
   border-radius: 0.8rem;
   background-color: white;
 }

diff --git a/@xen-orchestra/lite/src/components/AppMarkdown.vue b/@xen-orchestra/lite/src/components/AppMarkdown.vue
@@ -60,7 +60,7 @@ useEventListener(
     }
 
     code:not(.hljs-code) {
-      background-color: var(--background-color-purple-10);
+      background-color: var(--color-normal-background-selected);
       padding: 0.3rem 0.6rem;
       border-radius: 0.6rem;
     }
@@ -81,12 +81,12 @@ useEventListener(
       }
 
       thead th {
-        border-bottom: 2px solid var(--color-grey-500);
-        background-color: var(--background-color-secondary);
+        border-bottom: 2px solid var(--color-neutral-border);
+        background-color: var(--color-neutral-background-secondary);
       }
 
       tbody td {
-        border-bottom: 1px solid var(--color-grey-500);
+        border-bottom: 1px solid var(--color-neutral-border);
       }
     }
 
@@ -103,11 +103,11 @@ useEventListener(
       background-color: transparent;
 
       &:hover {
-        color: var(--color-purple-base);
+        color: var(--color-normal-txt-base);
       }
 
       &:active {
-        color: var(--color-purple-d20);
+        color: var(--color-normal-txt-hover);
       }
     }
   }

diff --git a/@xen-orchestra/lite/src/components/AppNavigation.vue b/@xen-orchestra/lite/src/components/AppNavigation.vue
@@ -45,8 +45,8 @@ whenever(isOpen, () => {
   max-width: 37rem;
   height: calc(100vh - 5.5rem);
   padding: 0.5rem;
-  border-right: 1px solid var(--color-grey-500);
-  background-color: var(--background-color-primary);
+  border-right: 1px solid var(--color-neutral-border);
+  background-color: var(--color-neutral-background-primary);
 
   &.collapsible {
     position: fixed;

diff --git a/@xen-orchestra/lite/src/components/CollectionFilterRow.vue b/@xen-orchestra/lite/src/components/CollectionFilterRow.vue
@@ -181,7 +181,7 @@ const valueInputAfter = computed(() => (newFilter.value.builder.comparison === '
 .collection-filter-row {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--background-color-secondary);
+  border-bottom: 1px solid var(--color-neutral-background-secondary);
   gap: 1rem;
 
   .or {

diff --git a/@xen-orchestra/lite/src/components/FormWidget.vue b/@xen-orchestra/lite/src/components/FormWidget.vue
@@ -54,14 +54,14 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
   align-items: stretch;
   overflow: hidden;
   padding: 0 0.7rem;
-  border: 1px solid var(--color-grey-500);
+  border: 1px solid var(--color-neutral-border);
   border-radius: 0.8rem;
-  background-color: var(--color-grey-600);
+  background-color: var(--color-normal-txt-item);
   box-shadow: var(--shadow-100);
   gap: 0.1rem;
 
   &:focus-within {
-    outline: 1px solid var(--color-purple-l40);
+    outline: 1px solid var(--color-normal-item-active);
   }
 }
 
@@ -71,7 +71,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
 }
 
 .form-widget:hover .widget {
-  border-color: var(--color-purple-l60);
+  border-color: var(--color-normal-item-disabled);
 }
 
 .element {
@@ -93,8 +93,8 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
   font-size: inherit;
   border: none;
   outline: none;
-  color: var(--color-grey-100);
-  background-color: var(--color-grey-600);
+  color: var(--color-neutral-txt-primary);
+  background-color: var(--color-normal-txt-item);
   flex: 1;
 
   &:disabled {
@@ -134,7 +134,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
 
   &:disabled {
     cursor: not-allowed;
-    color: var(--color-grey-200);
+    color: var(--color-neutral-txt-secondary);
   }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/LoginError.vue b/@xen-orchestra/lite/src/components/LoginError.vue
@@ -23,7 +23,7 @@ defineProps<{
 <style lang="postcss" scoped>
 .error {
   margin: 0.5rem 0;
-  color: var(--color-red-base);
+  color: var(--color-danger-txt-base);
 
   & svg {
     margin-right: 0.5rem;

diff --git a/@xen-orchestra/lite/src/components/NoDataError.vue b/@xen-orchestra/lite/src/components/NoDataError.vue
@@ -22,6 +22,6 @@
   margin: auto;
   width: 8em;
   font-style: normal;
-  color: var(--color-red-base);
+  color: var(--color-danger-txt-base);
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/NoResult.vue b/@xen-orchestra/lite/src/components/NoResult.vue
@@ -27,6 +27,6 @@
   font-weight: 500;
   font-size: 2rem;
   line-height: 150%;
-  color: var(--color-purple-base);
+  color: var(--color-normal-txt-base);
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/ObjectLink.vue b/@xen-orchestra/lite/src/components/ObjectLink.vue
@@ -79,7 +79,7 @@ const objectRoute = computed(() => {
 
 <style lang="postcss" scoped>
 .unknown {
-  color: var(--color-grey-300);
+  color: var(--color-neutral-txt-secondary);
   font-style: italic;
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/ObjectNotFoundWrapper.vue b/@xen-orchestra/lite/src/components/ObjectNotFoundWrapper.vue
@@ -33,7 +33,7 @@ const isRecordNotFound = computed(() => props.isReady && !props.uuidChecker(id.v
 }
 
 .spinner {
-  color: var(--color-purple-base);
+  color: var(--color-normal-txt-base);
   display: flex;
   margin: auto;
   width: 10rem;

diff --git a/@xen-orchestra/lite/src/components/PageUnderConstruction.vue b/@xen-orchestra/lite/src/components/PageUnderConstruction.vue
@@ -24,7 +24,7 @@ import UiStatusPanel from '@/components/ui/UiStatusPanel.vue'
 
 <style lang="postcss" scoped>
 .contact {
-  color: var(--color-grey-100);
+  color: var(--color-neutral-txt-primary);
 
   & a {
     text-transform: lowercase;

diff --git a/@xen-orchestra/lite/src/components/PoolOverrideWarning.vue b/@xen-orchestra/lite/src/components/PoolOverrideWarning.vue
@@ -43,7 +43,7 @@ const masterSessionStorage = useSessionStorage('master', null)
 
 <style lang="postcss" scoped>
 .warning-not-current-pool {
-  color: var(--color-orange-base);
+  color: var(--color-warning-txt-base);
   cursor: pointer;
 
   .wrapper {

diff --git a/@xen-orchestra/lite/src/components/PowerStateIcon.vue b/@xen-orchestra/lite/src/components/PowerStateIcon.vue
@@ -26,18 +26,18 @@ const className = computed(() => `state-${props.state.toLocaleLowerCase()}`)
 
 <style lang="postcss" scoped>
 .power-state-icon {
-  color: var(--color-purple-d60);
+  color: var(--color-normal-txt-item);
 
   &.state-running {
-    color: var(--color-green-base);
+    color: var(--color-success-txt-base);
   }
 
   &.state-paused {
-    color: var(--color-grey-300);
+    color: var(--color-neutral-txt-secondary);
   }
 
   &.state-suspended {
-    color: var(--color-purple-d20);
+    color: var(--color-normal-txt-hover);
   }
 }
 </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-green-base);
+  stroke: var(--color-success-txt-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-grey-500);
+  stroke: var(--color-neutral-border);
 }
 
 .progress-circle-text {
   font-size: 0.7rem;
   font-weight: bold;
-  fill: var(--color-green-base);
+  fill: var(--color-success-txt-base);
   text-anchor: middle;
   alignment-baseline: middle;
 }

diff --git a/@xen-orchestra/lite/src/components/TitleBar.vue b/@xen-orchestra/lite/src/components/TitleBar.vue
@@ -29,18 +29,18 @@ defineProps<{
   align-items: center;
   height: 6rem;
   padding: 0 1.5rem;
-  border-bottom: 1px solid var(--color-grey-500);
-  background-color: var(--background-color-primary);
+  border-bottom: 1px solid var(--color-neutral-border);
+  background-color: var(--color-neutral-background-primary);
   gap: 0.8rem;
 }
 
 .icon {
   font-size: 2.5rem;
-  color: var(--color-purple-base);
+  color: var(--color-normal-txt-base);
 }
 
 .title {
-  color: var(--color-grey-100);
+  color: var(--color-neutral-txt-primary);
 }
 
 .actions {

diff --git a/@xen-orchestra/lite/src/components/UsageBar.vue b/@xen-orchestra/lite/src/components/UsageBar.vue
@@ -60,28 +60,28 @@ const computedData = computed(() => {
 }
 
 .progress-item:nth-child(1) {
-  --progress-bar-color: var(--color-purple-d60);
+  --progress-bar-color: var(--color-normal-txt-item);
 }
 
 .progress-item:nth-child(2) {
-  --progress-bar-color: var(--color-purple-d40);
+  --progress-bar-color: var(--color-normal-txt-active);
 }
 
 .progress-item:nth-child(3) {
-  --progress-bar-color: var(--color-purple-d20);
+  --progress-bar-color: var(--color-normal-txt-hover);
 }
 
 .progress-item {
   --progress-bar-height: 1.2rem;
-  --progress-bar-color: var(--color-purple-l20);
-  --progress-bar-background-color: var(--color-grey-500);
+  --progress-bar-color: var(--color-normal-item-hover);
+  --progress-bar-background-color: var(--color-neutral-border);
 
   &.warning {
-    --progress-bar-color: var(--color-orange-base);
+    --progress-bar-color: var(--color-warning-txt-base);
   }
 
   &.error {
-    --progress-bar-color: var(--color-red-base);
+    --progress-bar-color: var(--color-danger-txt-base);
   }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/component-story/StoryParamsTable.vue b/@xen-orchestra/lite/src/components/component-story/StoryParamsTable.vue
@@ -22,12 +22,12 @@
     th,
     td {
       padding: 0.3rem 0.6rem;
-      border-bottom: 0.1rem solid var(--color-grey-500);
+      border-bottom: 0.1rem solid var(--color-neutral-border);
       vertical-align: center;
     }
 
     &:nth-child(odd) {
-      background-color: var(--background-color-purple-10);
+      background-color: var(--color-normal-background-selected);
     }
   }