From 5e11547439840667d403cf2382f2627c28706788 Mon Sep 17 00:00:00 2001 From: OlivierFL <66562640+OlivierFL@users.noreply.github.com> Date: Tue, 17 Sep 2024 08:39:52 +0200 Subject: [PATCH] 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 --- @xen-orchestra/lite/src/App.vue | 2 +- .../lite/src/components/AccountButton.vue | 12 +-- .../lite/src/components/AppHeader.vue | 4 +- .../lite/src/components/AppLogin.vue | 8 +- .../lite/src/components/AppMarkdown.vue | 12 +-- .../lite/src/components/AppNavigation.vue | 4 +- .../src/components/CollectionFilterRow.vue | 2 +- .../lite/src/components/FormWidget.vue | 14 +-- .../lite/src/components/LoginError.vue | 2 +- .../lite/src/components/NoDataError.vue | 2 +- .../lite/src/components/NoResult.vue | 2 +- .../lite/src/components/ObjectLink.vue | 2 +- .../src/components/ObjectNotFoundWrapper.vue | 2 +- .../src/components/PageUnderConstruction.vue | 2 +- .../src/components/PoolOverrideWarning.vue | 2 +- .../lite/src/components/PowerStateIcon.vue | 8 +- .../lite/src/components/ProgressCircle.vue | 6 +- .../lite/src/components/TitleBar.vue | 8 +- .../lite/src/components/UsageBar.vue | 14 +-- .../component-story/StoryParamsTable.vue | 4 +- .../component-story/StoryPropParams.vue | 10 +- .../lite/src/components/form/FormCheckbox.vue | 28 ++--- .../lite/src/components/form/FormInput.vue | 42 ++++---- .../src/components/form/FormInputWrapper.vue | 12 +-- .../lite/src/components/form/FormSection.vue | 10 +- .../src/components/infra/InfraItemLabel.vue | 18 ++-- .../src/components/infra/InfraLoadingItem.vue | 6 +- .../pool/dashboard/PoolDashboardAlarms.vue | 2 +- .../PoolDashboardCpuProvisioning.vue | 8 +- .../dashboard/PoolDashboardHostsPatches.vue | 2 +- .../dashboard/PoolDashboardStatusItem.vue | 4 +- .../pool/dashboard/alarm/AlarmRow.vue | 2 +- .../lite/src/components/tasks/TasksTable.vue | 6 +- .../src/components/ui/SizeStatsSummary.vue | 4 +- .../lite/src/components/ui/UiActionButton.vue | 12 +-- .../lite/src/components/ui/UiBadge.vue | 4 +- .../lite/src/components/ui/UiCard.vue | 2 +- .../lite/src/components/ui/UiCardFooter.vue | 2 +- .../lite/src/components/ui/UiCardSpinner.vue | 2 +- .../lite/src/components/ui/UiCardTitle.vue | 12 +-- .../lite/src/components/ui/UiFilter.vue | 10 +- .../lite/src/components/ui/UiFilterGroup.vue | 2 +- .../lite/src/components/ui/UiKeyValueRow.vue | 2 +- .../lite/src/components/ui/UiRaw.vue | 2 +- .../lite/src/components/ui/UiSeparator.vue | 2 +- .../lite/src/components/ui/UiStatusPanel.vue | 2 +- .../lite/src/components/ui/UiTable.vue | 12 +-- .../lite/src/components/ui/UiTitle.vue | 2 +- .../src/components/ui/icon/UiStatusIcon.vue | 8 +- .../ui/modals/layouts/ConfirmModalLayout.vue | 2 +- .../components/ui/progress/UiProgressBar.vue | 10 +- .../ui/progress/UiProgressScale.vue | 2 +- .../components/ui/resources/UiResource.vue | 6 +- .../VmActionItems/VmActionPowerStateItems.vue | 2 +- .../lite/src/components/vm/VmsActionsBar.vue | 4 +- .../src/composables/chart-theme.composable.ts | 10 +- .../web-core/head-bar/head-bar.story.vue | 2 +- .../lite/src/views/ObjectNotFoundView.vue | 2 +- .../lite/src/views/PageNotFoundView.vue | 4 +- .../lite/src/views/settings/SettingsView.vue | 5 +- .../lite/src/views/story/HomeView.vue | 2 +- .../lite/src/views/vm/VmConsoleView.vue | 8 +- .../src/views/xoa-deploy/XoaDeployView.vue | 10 +- .../web-core/docs/contexts/color-context.md | 20 ++-- @xen-orchestra/web-core/docs/css/variants.md | 60 +++++------ .../web-core/lib/components/CardNumbers.vue | 8 +- .../web-core/lib/components/LegendTitle.vue | 2 +- .../lib/components/PowerStateIcon.vue | 8 +- .../web-core/lib/components/UiCard.vue | 4 +- .../web-core/lib/components/UiCounter.vue | 14 +-- .../web-core/lib/components/UiTag.vue | 24 ++--- .../lib/components/backup-item/BackupItem.vue | 2 +- .../lib/components/button/ButtonIcon.vue | 72 ++++++------- .../lib/components/button/UiButton.vue | 36 +++---- .../lib/components/card/CardSubtitle.vue | 4 +- .../lib/components/card/CardTitle.vue | 4 +- .../lib/components/cell-object/CellObject.vue | 4 +- .../lib/components/cell-text/CellText.vue | 6 +- .../web-core/lib/components/chip/ChipIcon.vue | 6 +- .../web-core/lib/components/chip/UiChip.vue | 38 +++---- .../lib/components/divider/Divider.vue | 4 +- .../lib/components/donut-chart/DonutChart.vue | 14 +-- .../lib/components/dropdown/DropdownItem.vue | 102 +++++++++--------- .../lib/components/dropdown/DropdownList.vue | 2 +- .../lib/components/dropdown/DropdownTitle.vue | 8 +- .../lib/components/head-bar/HeadBar.vue | 8 +- .../lib/components/icon/ComplexIcon.vue | 2 +- .../lib/components/icon/ObjectIcon.vue | 30 +++--- .../web-core/lib/components/icon/UiIcon.vue | 8 +- .../web-core/lib/components/input/UiInput.vue | 26 ++--- .../lib/components/layout/LayoutSidebar.vue | 6 +- .../lib/components/legend/LegendItem.vue | 16 +-- .../web-core/lib/components/menu/MenuItem.vue | 2 +- .../web-core/lib/components/menu/MenuList.vue | 4 +- .../lib/components/menu/MenuSeparator.vue | 4 +- .../lib/components/menu/MenuTrigger.vue | 8 +- .../lib/components/object-link/ObjectLink.vue | 18 ++-- .../query-search-bar/QuerySearchBar.vue | 2 +- .../lib/components/stacked-bar/StackedBar.vue | 2 +- .../stacked-bar/StackedBarSegment.vue | 10 +- .../lib/components/state-hero/StateHero.vue | 4 +- .../web-core/lib/components/tab/TabItem.vue | 22 ++-- .../web-core/lib/components/tab/TabList.vue | 4 +- .../lib/components/table/ColumnTitle.vue | 22 ++-- .../web-core/lib/components/table/UiTable.vue | 10 +- .../lib/components/task/QuickTaskItem.vue | 4 +- .../lib/components/task/QuickTaskList.vue | 2 +- .../lib/components/task/QuickTaskPanel.vue | 2 +- .../lib/components/tooltip/TooltipItem.vue | 4 +- .../lib/components/tree/TreeItemError.vue | 2 +- .../lib/components/tree/TreeItemLabel.vue | 20 ++-- .../web-core/lib/components/tree/TreeLine.vue | 4 +- .../lib/components/tree/TreeLoadingItem.vue | 6 +- .../web-core/lib/components/user/UserLink.vue | 16 +-- .../web-core/lib/components/user/UserLogo.vue | 4 +- .../web-core/lib/layouts/CoreLayout.vue | 6 +- .../web/src/components/LogoTextOnly.vue | 2 +- .../web/src/components/NoResults.vue | 2 +- .../web/src/components/SidebarSearch.vue | 2 +- .../components/account-menu/AccountMenu.vue | 4 +- .../account-menu/AccountMenuTrigger.vue | 16 +-- .../web/src/components/tree/PoolTreeList.vue | 2 +- .../web/src/pages/host/[id]/vms.vue | 2 +- .../web/src/pages/pool/[id]/hosts.vue | 2 +- .../web/src/pages/pool/[id]/vms.vue | 2 +- 125 files changed, 583 insertions(+), 582 deletions(-) diff --git a/@xen-orchestra/lite/src/App.vue b/@xen-orchestra/lite/src/App.vue index f2cf425b2d9..425d2fccc5f 100644 --- 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 index cc7581dbe64..09328ad1362 100644 --- 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); } diff --git a/@xen-orchestra/lite/src/components/AppHeader.vue b/@xen-orchestra/lite/src/components/AppHeader.vue index ff031223061..2366b70e4f9 100644 --- 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 index 90609ef6242..4a1fc5fbd37 100644 --- 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 index c97efef85e2..fbaec6dce2f 100644 --- 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 index daa14adc9c5..1140a3df754 100644 --- 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 index 7b4dac0af41..10cf493234e 100644 --- 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 index 9853c31e4ea..9e3fd3f71ac 100644 --- 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); } } diff --git a/@xen-orchestra/lite/src/components/LoginError.vue b/@xen-orchestra/lite/src/components/LoginError.vue index fa4baf606ad..1cfcfff5866 100644 --- a/@xen-orchestra/lite/src/components/LoginError.vue +++ b/@xen-orchestra/lite/src/components/LoginError.vue @@ -23,7 +23,7 @@ defineProps<{ diff --git a/@xen-orchestra/lite/src/components/NoResult.vue b/@xen-orchestra/lite/src/components/NoResult.vue index 7b6c417c290..28b51fb4379 100644 --- 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); } diff --git a/@xen-orchestra/lite/src/components/ObjectLink.vue b/@xen-orchestra/lite/src/components/ObjectLink.vue index c01526a5a19..ecec3b37d3f 100644 --- a/@xen-orchestra/lite/src/components/ObjectLink.vue +++ b/@xen-orchestra/lite/src/components/ObjectLink.vue @@ -79,7 +79,7 @@ const objectRoute = computed(() => { diff --git a/@xen-orchestra/lite/src/components/ObjectNotFoundWrapper.vue b/@xen-orchestra/lite/src/components/ObjectNotFoundWrapper.vue index 13c93fee247..242deb857d7 100644 --- 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 index e0f66877e4a..524d706035c 100644 --- 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' diff --git a/@xen-orchestra/lite/src/components/ProgressCircle.vue b/@xen-orchestra/lite/src/components/ProgressCircle.vue index 0fd701e1330..903633fdc97 100644 --- 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 index 0704810cb44..6f8a8338a6c 100644 --- 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 index 7a47831fa23..9def76c93f4 100644 --- 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); } } diff --git a/@xen-orchestra/lite/src/components/component-story/StoryParamsTable.vue b/@xen-orchestra/lite/src/components/component-story/StoryParamsTable.vue index 0886065d573..669d0823196 100644 --- 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); } } diff --git a/@xen-orchestra/lite/src/components/component-story/StoryPropParams.vue b/@xen-orchestra/lite/src/components/component-story/StoryPropParams.vue index 9ac3bd31750..f6e11e013a4 100644 --- a/@xen-orchestra/lite/src/components/component-story/StoryPropParams.vue +++ b/@xen-orchestra/lite/src/components/component-story/StoryPropParams.vue @@ -127,14 +127,14 @@ const openRawValueModal = (code: string) => align-items: center; padding: 0.4rem 0.6rem; cursor: pointer; - color: var(--color-grey-300); + color: var(--color-neutral-txt-secondary); border-radius: 0.4rem; gap: 0.6rem; &.active { font-weight: 600; cursor: default; - color: var(--color-green-l20); + color: var(--color-success-item-hover); } } } @@ -157,7 +157,7 @@ const openRawValueModal = (code: string) => .help { font-style: italic; - color: var(--color-grey-200); + color: var(--color-neutral-txt-secondary); } .default-value { @@ -168,12 +168,12 @@ const openRawValueModal = (code: string) => font-weight: 600; font-style: normal; opacity: 1; - color: var(--color-green-base); + color: var(--color-success-txt-base); } } .v-model-indicator, .context-indicator { - color: var(--color-green-base); + color: var(--color-success-txt-base); } diff --git a/@xen-orchestra/lite/src/components/form/FormCheckbox.vue b/@xen-orchestra/lite/src/components/form/FormCheckbox.vue index c95d4495f2b..3f9be3c38e4 100644 --- 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-grey-300); + color: var(--color-neutral-txt-secondary); } } @@ -91,7 +91,7 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle' .fake-checkbox { width: 1.25em; - --background-color: var(--background-color-primary); + --background-color: var(--color-neutral-background-primary); } .icon { @@ -114,7 +114,7 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle' .fake-checkbox { width: 2.5em; - --background-color: var(--color-grey-500); + --background-color: var(--color-neutral-border); } .icon { @@ -128,7 +128,7 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle' .input.indeterminate + .fake-checkbox > .icon { opacity: 1; - color: var(--color-grey-300); + color: var(--color-neutral-txt-secondary); transform: translateX(0); } } @@ -143,7 +143,7 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle' .icon { font-size: var(--checkbox-icon-size); position: absolute; - color: var(--color-grey-600); + color: var(--color-normal-txt-item); filter: drop-shadow(0 0.0625em 0.5em rgba(0, 0, 0, 0.1)) drop-shadow(0 0.1875em 0.1875em rgba(0, 0, 0, 0.06)) drop-shadow(0 0.1875em 0.25em rgba(0, 0, 0, 0.08)); @@ -162,44 +162,44 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle' background-color: var(--background-color); box-shadow: var(--shadow-100); - --border-color: var(--color-grey-500); + --border-color: var(--color-neutral-border); } .input:disabled { & + .fake-checkbox { cursor: not-allowed; - --background-color: var(--background-color-secondary); - --border-color: var(--color-grey-500); + --background-color: var(--color-neutral-background-secondary); + --border-color: var(--color-neutral-border); } &:checked + .fake-checkbox { --border-color: transparent; - --background-color: var(--color-purple-l60); + --background-color: var(--color-normal-item-disabled); } } .input:not(:disabled) { &:hover + .fake-checkbox, &:focus + .fake-checkbox { - --border-color: var(--color-purple-l40); + --border-color: var(--color-normal-item-active); } &:active + .fake-checkbox { - --border-color: var(--color-purple-l20); + --border-color: var(--color-normal-item-hover); } &:checked + .fake-checkbox { --border-color: transparent; - --background-color: var(--color-purple-base); + --background-color: var(--color-normal-txt-base); } &:checked:hover + .fake-checkbox, &:checked:focus + .fake-checkbox { - --background-color: var(--color-purple-d20); + --background-color: var(--color-normal-txt-hover); } &:checked:active + .fake-checkbox { - --background-color: var(--color-purple-d40); + --background-color: var(--color-normal-txt-active); } } diff --git a/@xen-orchestra/lite/src/components/form/FormInput.vue b/@xen-orchestra/lite/src/components/form/FormInput.vue index ace80e341ac..dbbf3bff5c7 100644 --- a/@xen-orchestra/lite/src/components/form/FormInput.vue +++ b/@xen-orchestra/lite/src/components/form/FormInput.vue @@ -144,14 +144,14 @@ defineExpose({ --after-width: v-bind('afterWidth || "1.625em"'); --caret-width: 1.5em; - --text-color: var(--color-grey-100); + --text-color: var(--color-neutral-txt-primary); &.empty { - --text-color: var(--color-grey-300); + --text-color: var(--color-neutral-txt-secondary); } &.disabled { - --text-color: var(--color-grey-500); + --text-color: var(--color-neutral-border); } } @@ -188,74 +188,74 @@ defineExpose({ text-align: right; } - --background-color: var(--background-color-primary); - --border-color: var(--color-grey-500); + --background-color: var(--color-neutral-background-primary); + --border-color: var(--color-neutral-border); &:disabled { cursor: not-allowed; - --background-color: var(--background-color-secondary); + --background-color: var(--color-neutral-background-secondary); } &:not(:disabled) { &.info { &:hover { - --border-color: var(--color-purple-l60); + --border-color: var(--color-normal-item-disabled); } &:active { - --border-color: var(--color-purple-l40); + --border-color: var(--color-normal-item-active); } &:focus { - --border-color: var(--color-purple-base); + --border-color: var(--color-normal-txt-base); } } &.success { - --border-color: var(--color-green-base); + --border-color: var(--color-normal-txt-base); &:hover { - --border-color: var(--color-green-l60); + --border-color: var(--color-success-item-disabled); } &:active { - --border-color: var(--color-green-l40); + --border-color: var(--color-success-item-active); } &:focus { - --border-color: var(--color-green-base); + --border-color: var(--color-normal-txt-base); } } &.warning { - --border-color: var(--color-orange-base); + --border-color: var(--color-warning-txt-base); &:hover { - --border-color: var(--color-orange-l60); + --border-color: var(--color-warning-item-disabled); } &:active { - --border-color: var(--color-orange-l40); + --border-color: var(--color-warning-item-active); } &:focus { - --border-color: var(--color-orange-base); + --border-color: var(--color-warning-txt-base); } } &.error { - --border-color: var(--color-red-base); + --border-color: var(--color-danger-txt-base); &:hover { - --border-color: var(--color-red-l60); + --border-color: var(--color-danger-item-disabled); } &:active { - --border-color: var(--color-red-l40); + --border-color: var(--color-danger-item-active); } &:focus-within { - --border-color: var(--color-red-base); + --border-color: var(--color-danger-txt-base); } } } diff --git a/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue b/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue index f4b481261e3..ad9bb9e5d3d 100644 --- a/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue +++ b/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue @@ -101,12 +101,12 @@ useContext(DisabledContext, () => props.disabled) padding: 1rem 0; &.light { - color: var(--color-grey-300); + color: var(--color-neutral-txt-secondary); } &:not(.light) { text-transform: uppercase; - color: var(--color-grey-100); + color: var(--color-neutral-txt-primary); } } @@ -128,7 +128,7 @@ useContext(DisabledContext, () => props.disabled) align-items: center; gap: 0.5rem; text-decoration: none; - color: var(--color-purple-base); + color: var(--color-normal-txt-base); & > span { text-decoration: underline; @@ -136,14 +136,14 @@ useContext(DisabledContext, () => props.disabled) } .warning { - color: var(--color-orange-base); + color: var(--color-warning-txt-base); } .error { - color: var(--color-red-base); + color: var(--color-danger-txt-base); } .help { - color: var(--color-grey-300); + color: var(--color-neutral-txt-secondary); } diff --git a/@xen-orchestra/lite/src/components/form/FormSection.vue b/@xen-orchestra/lite/src/components/form/FormSection.vue index dab2107b719..078369bd740 100644 --- a/@xen-orchestra/lite/src/components/form/FormSection.vue +++ b/@xen-orchestra/lite/src/components/form/FormSection.vue @@ -53,7 +53,7 @@ whenever( diff --git a/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue b/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue index 50ae6864869..db8e21daae3 100644 --- a/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue +++ b/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue @@ -39,27 +39,27 @@ defineProps<{ .infra-item-label { display: flex; align-items: stretch; - color: var(--color-grey-100); + color: var(--color-neutral-txt-primary); border-radius: 0.8rem; - background-color: var(--background-color-primary); + background-color: var(--color-neutral-background-primary); &:hover { - color: var(--color-grey-100); - background-color: var(--background-color-secondary); + color: var(--color-neutral-txt-primary); + background-color: var(--color-neutral-background-secondary); } &:active, &.active { - color: var(--color-purple-base); - background-color: var(--background-color-primary); + color: var(--color-normal-txt-base); + background-color: var(--color-neutral-background-primary); } &.exact-active { - 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); .icon { - color: var(--color-purple-base); + color: var(--color-normal-txt-base); } } } diff --git a/@xen-orchestra/lite/src/components/infra/InfraLoadingItem.vue b/@xen-orchestra/lite/src/components/infra/InfraLoadingItem.vue index 7c402ec81cf..af5c1d95a59 100644 --- a/@xen-orchestra/lite/src/components/infra/InfraLoadingItem.vue +++ b/@xen-orchestra/lite/src/components/infra/InfraLoadingItem.vue @@ -23,11 +23,11 @@ defineProps<{ display: flex; height: 6rem; margin-bottom: 0.2rem; - background-color: var(--background-color-primary); + background-color: var(--color-neutral-background-primary); } .icon { - color: var(--color-grey-100); + color: var(--color-neutral-txt-primary); } .link-placeholder { @@ -41,7 +41,7 @@ defineProps<{ .loader { flex: 1; animation: pulse alternate 1s infinite; - background-color: var(--background-color-purple-10); + background-color: var(--color-normal-background-selected); } @keyframes pulse { diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue index 708505c3052..fd094e8341b 100644 --- a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue +++ b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue @@ -70,7 +70,7 @@ const { records: alarms, start, isStarted, isReady, hasError } = useAlarmStore() } .no-alarm & { - color: var(--color-green-base); + color: var(--color-success-txt-base); } } diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisioning.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisioning.vue index dca8044e833..7c210a18b4a 100644 --- 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-purple-base); - --progress-bar-background-color: var(--color-grey-500); + --progress-bar-color: var(--color-normal-txt-base); + --progress-bar-background-color: var(--color-neutral-border); &.warning { - --progress-bar-color: var(--color-orange-base); - --footer-value-color: var(--color-orange-base); + --progress-bar-color: var(--color-warning-txt-base); + --footer-value-color: var(--color-warning-txt-base); } & .footer-value { diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardHostsPatches.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardHostsPatches.vue index a68cb046ddc..87a3f6d1683 100644 --- a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardHostsPatches.vue +++ b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardHostsPatches.vue @@ -31,7 +31,7 @@ const { count, patches, areSomeLoaded, areAllLoaded } = useHostPatches(hosts) diff --git a/@xen-orchestra/lite/src/components/ui/UiCard.vue b/@xen-orchestra/lite/src/components/ui/UiCard.vue index 25a7a564b8f..f1e37d2d6d8 100644 --- a/@xen-orchestra/lite/src/components/ui/UiCard.vue +++ b/@xen-orchestra/lite/src/components/ui/UiCard.vue @@ -34,6 +34,6 @@ const classProp = computed(() => { } .bg-primary { - background-color: var(--background-color-primary); + background-color: var(--color-neutral-background-primary); } diff --git a/@xen-orchestra/lite/src/components/ui/UiCardFooter.vue b/@xen-orchestra/lite/src/components/ui/UiCardFooter.vue index 90ae423912b..6e0d1a90b7d 100644 --- a/@xen-orchestra/lite/src/components/ui/UiCardFooter.vue +++ b/@xen-orchestra/lite/src/components/ui/UiCardFooter.vue @@ -11,7 +11,7 @@ diff --git a/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue b/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue index 1b1822f018d..69c73594770 100644 --- a/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue +++ b/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue @@ -44,28 +44,28 @@ const tags = computed(() => { justify-content: space-between; --section-title-left-size: 2rem; - --section-title-left-color: var(--color-grey-100); + --section-title-left-color: var(--color-neutral-txt-primary); --section-title-left-weight: 500; --section-title-right-size: 1.6rem; - --section-title-right-color: var(--color-purple-base); + --section-title-right-color: var(--color-normal-txt-base); --section-title-right-weight: 700; &.h6 { margin-bottom: 1rem; --section-title-left-size: 1.5rem; - --section-title-left-color: var(--color-grey-300); + --section-title-left-color: var(--color-neutral-txt-secondary); --section-title-left-weight: 400; } &.h5 { margin-top: 2rem; margin-bottom: 1rem; - border-bottom: 1px solid var(--color-purple-base); + border-bottom: 1px solid var(--color-normal-txt-base); --section-title-left-size: 1.6rem; - --section-title-left-color: var(--color-purple-base); + --section-title-left-color: var(--color-normal-txt-base); --section-title-left-weight: 700; --section-title-right-size: 1.4rem; - --section-title-right-color: var(--color-purple-base); + --section-title-right-color: var(--color-normal-txt-base); --section-title-right-weight: 400; } } diff --git a/@xen-orchestra/lite/src/components/ui/UiFilter.vue b/@xen-orchestra/lite/src/components/ui/UiFilter.vue index 525819ab030..7bf4adc54bc 100644 --- a/@xen-orchestra/lite/src/components/ui/UiFilter.vue +++ b/@xen-orchestra/lite/src/components/ui/UiFilter.vue @@ -26,11 +26,11 @@ const emit = defineEmits<{ align-items: stretch; justify-content: center; height: 3.4rem; - color: var(--color-purple-base); + color: var(--color-normal-txt-base); border-radius: 1.7rem; - background-color: var(--background-color-purple-10); + background-color: var(--color-normal-background-selected); gap: 1rem; - border: 1px solid var(--color-purple-base); + border: 1px solid var(--color-normal-txt-base); } .label, @@ -54,10 +54,10 @@ const emit = defineEmits<{ border-radius: 1.4rem; width: 2.8rem; margin: 0.2rem; - background-color: var(--color-purple-l40); + background-color: var(--color-normal-item-active); &:hover { - background-color: var(--color-red-l20); + background-color: var(----color-danger-item-hover); } } diff --git a/@xen-orchestra/lite/src/components/ui/UiFilterGroup.vue b/@xen-orchestra/lite/src/components/ui/UiFilterGroup.vue index 468a9df5984..b947f8f2fbc 100644 --- a/@xen-orchestra/lite/src/components/ui/UiFilterGroup.vue +++ b/@xen-orchestra/lite/src/components/ui/UiFilterGroup.vue @@ -9,7 +9,7 @@ display: flex; align-items: center; padding: 1rem; - background-color: var(--background-color-primary); + background-color: var(--color-neutral-background-primary); gap: 1rem; } diff --git a/@xen-orchestra/lite/src/components/ui/UiKeyValueRow.vue b/@xen-orchestra/lite/src/components/ui/UiKeyValueRow.vue index 0c891250ce4..a5277a03772 100644 --- a/@xen-orchestra/lite/src/components/ui/UiKeyValueRow.vue +++ b/@xen-orchestra/lite/src/components/ui/UiKeyValueRow.vue @@ -19,7 +19,7 @@ .key { padding-right: 2rem; text-align: left; - color: var(--color-grey-300); + color: var(--color-neutral-txt-secondary); @media (--desktop) { min-width: 20rem; diff --git a/@xen-orchestra/lite/src/components/ui/UiRaw.vue b/@xen-orchestra/lite/src/components/ui/UiRaw.vue index 13b6e0ac374..ac50215b421 100644 --- a/@xen-orchestra/lite/src/components/ui/UiRaw.vue +++ b/@xen-orchestra/lite/src/components/ui/UiRaw.vue @@ -4,7 +4,7 @@ diff --git a/@xen-orchestra/lite/src/components/ui/UiStatusPanel.vue b/@xen-orchestra/lite/src/components/ui/UiStatusPanel.vue index 74e44d6d3e7..1e414922f5e 100644 --- a/@xen-orchestra/lite/src/components/ui/UiStatusPanel.vue +++ b/@xen-orchestra/lite/src/components/ui/UiStatusPanel.vue @@ -24,7 +24,7 @@ defineProps<{ flex-direction: column; align-items: center; justify-content: center; - color: var(--color-purple-base); + color: var(--color-normal-txt-base); } .title { diff --git a/@xen-orchestra/lite/src/components/ui/UiTable.vue b/@xen-orchestra/lite/src/components/ui/UiTable.vue index f72baf9035a..a3c5e62406b 100644 --- a/@xen-orchestra/lite/src/components/ui/UiTable.vue +++ b/@xen-orchestra/lite/src/components/ui/UiTable.vue @@ -15,14 +15,14 @@ defineProps<{ .ui-table { width: 100%; border-spacing: 0; - background-color: var(--background-color-primary); + background-color: var(--color-neutral-background-primary); line-height: 2.4rem; - color: var(--color-grey-200); + color: var(--color-neutral-txt-secondary); :deep(th), :deep(td) { padding: 1rem; - border-top: 1px solid var(--color-grey-500); + border-top: 1px solid var(--color-neutral-border); text-align: left; } @@ -33,7 +33,7 @@ defineProps<{ :deep(thead) { th, td { - color: var(--color-purple-base); + color: var(--color-normal-txt-base); font-size: 1.4rem; font-weight: 400; text-transform: uppercase; @@ -43,7 +43,7 @@ defineProps<{ &.vertical-border { :deep(th), :deep(td) { - border-right: 1px solid var(--color-grey-500); + border-right: 1px solid var(--color-neutral-border); &:last-child { border-right: none; @@ -53,6 +53,6 @@ defineProps<{ } .error { - background-color: var(--background-color-red-10); + background-color: var(--color-danger-background-selected); } diff --git a/@xen-orchestra/lite/src/components/ui/UiTitle.vue b/@xen-orchestra/lite/src/components/ui/UiTitle.vue index 7f0c505b661..14b94378c8d 100644 --- a/@xen-orchestra/lite/src/components/ui/UiTitle.vue +++ b/@xen-orchestra/lite/src/components/ui/UiTitle.vue @@ -25,7 +25,7 @@ const tag = computed(() => { line-height: 150%; align-self: stretch; flex-grow: 0; - color: var(--color-grey-100); + color: var(--color-neutral-txt-primary); &.display { font-size: 6.4rem; diff --git a/@xen-orchestra/lite/src/components/ui/icon/UiStatusIcon.vue b/@xen-orchestra/lite/src/components/ui/icon/UiStatusIcon.vue index 8eb92eddaee..f934943ddcb 100644 --- a/@xen-orchestra/lite/src/components/ui/icon/UiStatusIcon.vue +++ b/@xen-orchestra/lite/src/components/ui/icon/UiStatusIcon.vue @@ -30,16 +30,16 @@ const icon = computed(() => { color: var(--icon-color); &.error { - --icon-color: var(--color-red-base); + --icon-color: var(--color-danger-txt-base); } &.warning { - --icon-color: var(--color-orange-base); + --icon-color: var(--color-warning-txt-base); } &.info { - --icon-color: var(--color-purple-base); + --icon-color: var(--color-normal-txt-base); } &.success { - --icon-color: var(--color-green-base); + --icon-color: var(--color-success-txt-base); } } diff --git a/@xen-orchestra/lite/src/components/ui/modals/layouts/ConfirmModalLayout.vue b/@xen-orchestra/lite/src/components/ui/modals/layouts/ConfirmModalLayout.vue index 13b0f0764b5..85966b5eddb 100644 --- a/@xen-orchestra/lite/src/components/ui/modals/layouts/ConfirmModalLayout.vue +++ b/@xen-orchestra/lite/src/components/ui/modals/layouts/ConfirmModalLayout.vue @@ -71,6 +71,6 @@ const { textClass } = useContext(ColorContext) .subtitle { font-weight: 400; - color: var(--color-grey-200); + color: var(--color-neutral-txt-secondary); } diff --git a/@xen-orchestra/lite/src/components/ui/progress/UiProgressBar.vue b/@xen-orchestra/lite/src/components/ui/progress/UiProgressBar.vue index 19c67cfccb0..f12d061bff9 100644 --- a/@xen-orchestra/lite/src/components/ui/progress/UiProgressBar.vue +++ b/@xen-orchestra/lite/src/components/ui/progress/UiProgressBar.vue @@ -29,22 +29,22 @@ const cssFillWidth = computed(() => { height: var(--progress-bar-height, 0.4rem); margin: 1rem 0; border-radius: 0.4rem; - background-color: var(--progress-bar-background-color, var(--background-color-purple-10)); + background-color: var(--progress-bar-background-color, var(--color-normal-background-selected)); &.color-info { - --progress-bar-color: var(--color-purple-base); + --progress-bar-color: var(--color-normal-txt-base); } &.color-success { - --progress-bar-color: var(--color-green-base); + --progress-bar-color: var(--color-success-txt-base); } &.color-warning { - --progress-bar-color: var(--color-orange-base); + --progress-bar-color: var(--color-warning-txt-base); } &.color-error { - --progress-bar-color: var(--color-red-base); + --progress-bar-color: var(--color-danger-txt-base); } } diff --git a/@xen-orchestra/lite/src/components/ui/progress/UiProgressScale.vue b/@xen-orchestra/lite/src/components/ui/progress/UiProgressScale.vue index e4fb90191ee..8abfff45877 100644 --- a/@xen-orchestra/lite/src/components/ui/progress/UiProgressScale.vue +++ b/@xen-orchestra/lite/src/components/ui/progress/UiProgressScale.vue @@ -19,7 +19,7 @@ withDefaults( diff --git a/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue b/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue index e37cb1a4cd2..c3cfcaa1ec9 100644 --- a/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue +++ b/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue @@ -53,7 +53,7 @@ const { isMobile } = storeToRefs(useUiStore()) diff --git a/@xen-orchestra/lite/src/composables/chart-theme.composable.ts b/@xen-orchestra/lite/src/composables/chart-theme.composable.ts index 33cd022abe9..30ef467799a 100644 --- a/@xen-orchestra/lite/src/composables/chart-theme.composable.ts +++ b/@xen-orchestra/lite/src/composables/chart-theme.composable.ts @@ -9,11 +9,11 @@ export const useChartTheme = () => { const style = window.getComputedStyle(window.document.documentElement) const getColors = () => ({ - background: style.getPropertyValue('--background-color-primary'), - text: style.getPropertyValue('--color-grey-300'), - splitLine: style.getPropertyValue('--color-grey-500'), - primary: style.getPropertyValue('--color-purple-base'), - secondary: style.getPropertyValue('--color-orange-base'), + background: style.getPropertyValue('--color-neutral-background-primary'), + text: style.getPropertyValue('--color-neutral-txt-secondary'), + splitLine: style.getPropertyValue('--color-neutral-border'), + primary: style.getPropertyValue('--color-normal-txt-base'), + secondary: style.getPropertyValue('--color-warning-txt-base'), }) const colors = ref(getColors()) diff --git a/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.vue b/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.vue index 919222cb0ac..d7adbb1a915 100644 --- a/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.vue +++ b/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.vue @@ -39,6 +39,6 @@ import { faPlus, faPowerOff } from '@fortawesome/free-solid-svg-icons' diff --git a/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue b/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue index 56ed89b9e58..53f29db122a 100644 --- a/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue +++ b/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue @@ -36,7 +36,7 @@ img { } .text { - color: var(--color-purple-base); + color: var(--color-normal-txt-base); font-size: 36px; font-weight: 400; line-height: 150%; diff --git a/@xen-orchestra/lite/src/views/PageNotFoundView.vue b/@xen-orchestra/lite/src/views/PageNotFoundView.vue index de779e80208..ed9d564d57a 100644 --- a/@xen-orchestra/lite/src/views/PageNotFoundView.vue +++ b/@xen-orchestra/lite/src/views/PageNotFoundView.vue @@ -30,7 +30,7 @@ img { width: 30%; } .numeric { - color: var(--color-purple-base); + color: var(--color-normal-txt-base); font-size: 96px; font-weight: 900; letter-spacing: 1em; @@ -40,7 +40,7 @@ img { } .text { - color: var(--color-purple-base); + color: var(--color-normal-txt-base); font-size: 36px; font-weight: 400; line-height: 150%; diff --git a/@xen-orchestra/lite/src/views/settings/SettingsView.vue b/@xen-orchestra/lite/src/views/settings/SettingsView.vue index 6560ab700be..6a578c5414d 100644 --- a/@xen-orchestra/lite/src/views/settings/SettingsView.vue +++ b/@xen-orchestra/lite/src/views/settings/SettingsView.vue @@ -178,9 +178,10 @@ h5 { flex-direction: column; gap: 1.6em; &.selected { - color: var(--color-purple-base); + color: var(--color-normal-txt-base); + img { - outline: solid 2px var(--color-purple-base); + outline: solid 2px var(--color-normal-txt-base); } } &:not(.selected) { diff --git a/@xen-orchestra/lite/src/views/story/HomeView.vue b/@xen-orchestra/lite/src/views/story/HomeView.vue index ffa5017483f..f0310c1bea5 100644 --- a/@xen-orchestra/lite/src/views/story/HomeView.vue +++ b/@xen-orchestra/lite/src/views/story/HomeView.vue @@ -259,7 +259,7 @@ watch( .warning { font-size: 1.6rem; font-weight: 600; - color: var(--color-orange-base); + color: var(--color-warning-txt-base); } .code-highlight { diff --git a/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue b/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue index 58fba8aaa43..658e24140d3 100644 --- a/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue +++ b/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue @@ -124,7 +124,7 @@ const openInNewTab = () => { } .spinner { - color: var(--color-purple-base); + color: var(--color-normal-txt-base); display: flex; margin: auto; width: 10rem; @@ -144,7 +144,7 @@ const openInNewTab = () => { flex-direction: column; text-align: center; gap: 4rem; - color: var(--color-purple-base); + color: var(--color-normal-txt-base); font-size: 3.6rem; } @@ -158,8 +158,8 @@ const openInNewTab = () => { display: flex; align-items: center; gap: 1rem; - background-color: var(--color-purple-base); - color: var(--color-grey-600); + background-color: var(--color-normal-txt-base); + color: var(--color-normal-txt-item); text-decoration: none; padding: 1.5rem; font-size: 1.6rem; diff --git a/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue b/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue index 4b2c73ae35f..7c0822a6184 100644 --- a/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue +++ b/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue @@ -520,7 +520,7 @@ async function cancel() { justify-content: center; align-items: center; min-height: 76.5vh; - color: var(--color-purple-base); + color: var(--color-normal-txt-base); text-align: center; padding: 5rem; margin: auto; @@ -536,15 +536,15 @@ async function cancel() { font-size: 2rem; } .status { - color: var(--color-grey-100); + color: var(--color-neutral-txt-primary); } .success { - color: var(--color-green-base); + color: var(--color-success-txt-base); } .danger { - color: var(--color-red-base); + color: var(--color-danger-txt-base); } .success, .danger { @@ -560,6 +560,6 @@ async function cancel() { gap: 0.5em; } .warning { - color: var(--color-orange-base); + color: var(--color-warning-txt-base); } diff --git a/@xen-orchestra/web-core/docs/contexts/color-context.md b/@xen-orchestra/web-core/docs/contexts/color-context.md index 3c0022a8c0c..9fb3db239fe 100644 --- a/@xen-orchestra/web-core/docs/contexts/color-context.md +++ b/@xen-orchestra/web-core/docs/contexts/color-context.md @@ -37,19 +37,19 @@ When you set a color context, the variables are updated with the help of CSS cla ```css .color-context-info { - --color-context-primary: var(--color-purple-base); - --color-context-primary-hover: var(--color-purple-d20); - --color-context-primary-active: var(--color-purple-d40); - --color-context-primary-disabled: var(--color-grey-400); - - --color-context-secondary: var(--background-color-purple-10); - --color-context-secondary-hover: var(--background-color-purple-20); - --color-context-secondary-active: var(--background-color-purple-30); + --color-context-primary: var(--color-normal-txt-base); + --color-context-primary-hover: var(--color-normal-txt-hover); + --color-context-primary-active: var(--color-normal-txt-active); + --color-context-primary-disabled: var(--color-neutral-txt-secondary); + + --color-context-secondary: var(--color-normal-background-selected); + --color-context-secondary-hover: var(--color-normal-background-hover); + --color-context-secondary-active: var(--color-normal-background-active); } .color-context-success { - --color-context-primary: var(--color-green-base); - --color-context-primary-hover: var(--color-green-d20); + --color-context-primary: var(--color-success-txt-base); + --color-context-primary-hover: var(--color-success-txt-hover); /*...*/ } ``` diff --git a/@xen-orchestra/web-core/docs/css/variants.md b/@xen-orchestra/web-core/docs/css/variants.md index 5cb118e1717..539d25bc423 100644 --- a/@xen-orchestra/web-core/docs/css/variants.md +++ b/@xen-orchestra/web-core/docs/css/variants.md @@ -13,11 +13,11 @@ code readability and facilitate code folding. /* COLOR VARIANTS */ .my-component { &.info { - --color: var(--color-purple-base); + --color: var(--color-normal-txt-base); } &.success { - --color: var(--color-green-base); + --color: var(--color-success-txt-base); } } @@ -55,7 +55,7 @@ This approach ensures that the CSS is more intelligible, simpler to maintain, an /* COLOR VARIANTS */ .my-component { .success { - --color: var(--color-green-base); + --color: var(--color-success-txt-base); } } @@ -71,7 +71,7 @@ This approach ensures that the CSS is more intelligible, simpler to maintain, an } .my-component { - color: var(--color, var(--color-purple-base)); + color: var(--color, var(--color-normal-txt-base)); font-size: var(--font-size, 1.6rem); } ``` @@ -83,10 +83,10 @@ If you need a default property when no specific class is applied, define it at t ```postcss /* COLOR VARIANTS */ .my-component { - --color: var(--color-purple-base); + --color: var(--color-normal-txt-base); &.free { - --color: var(--color-green-base); + --color: var(--color-success-txt-base); } } @@ -105,15 +105,15 @@ enhance readability. /* COLOR VARIANTS */ .my-component { & { - --color: var(--color-purple-base); - --background-color: var(--background-color-purple-10); - --border-color: var(--color-purple-d20); + --color: var(--color-normal-txt-base); + --background-color: var(--color-normal-background-selected); + --border-color: var(--color-normal-txt-hover); } &.free { - --color: var(--color-green-base); - --background-color: var(--background-color-green-10); - --border-color: var(--color-green-d20); + --color: var(--color-success-txt-base); + --background-color: var(--color-success-background-selected); + --border-color: var(--color-success-txt-hover); } } @@ -141,29 +141,29 @@ As before, grouping variants by type and annotating them enhances maintainabilit .my-component { &.info { &.small { - --color: var(--color-purple-base); + --color: var(--color-normal-txt-base); } &.medium { - --color: var(--color-purple-l20); + --color: var(--color-normal-item-hover); } &.large { - --color: var(--color-purple-l40); + --color: var(--color-normal-item-active); } } &.success { &.small { - --color: var(--color-green-base); + --color: var(--color-success-txt-base); } &.medium { - --color: var(--color-green-l20); + --color: var(--color-success-item-hover); } &.large { - --color: var(--color-green-l40); + --color: var(--color-success-item-active); } } } @@ -203,31 +203,31 @@ In the following example, the variant is the color, so the font size should not .my-component { .small { .info { - --color: var(--color-purple-base); + --color: var(--color-normal-txt-base); } .success { - --color: var(--color-green-base); + --color: var(--color-success-txt-base); } } .medium { .info { - --color: var(--color-purple-l20); + --color: var(--color-normal-item-hover); } .success { - --color: var(--color-green-l20); + --color: var(--color-success-item-hover); } } .large { .info { - --color: var(--color-purple-l40); + --color: var(--color-normal-item-active); } .success { - --color: var(--color-green-l40); + --color: var(--color-success-item-active); } } } @@ -284,11 +284,11 @@ readability. --font-size: 1rem; &.info { - --color: var(--color-purple-base); + --color: var(--color-normal-txt-base); } &.success { - --color: var(--color-green-base); + --color: var(--color-success-txt-base); } } @@ -296,11 +296,11 @@ readability. --font-size: 1.6rem; &.info { - --color: var(--color-purple-l20); + --color: var(--color-normal-item-hover); } &.success { - --color: var(--color-green-l20); + --color: var(--color-success-item-hover); } } @@ -308,11 +308,11 @@ readability. --font-size: 2.4rem; &.info { - --color: var(--color-purple-l40); + --color: var(--color-normal-item-active); } &.success { - --color: var(--color-green-l40); + --color: var(--color-success-item-active); } } diff --git a/@xen-orchestra/web-core/lib/components/CardNumbers.vue b/@xen-orchestra/web-core/lib/components/CardNumbers.vue index a8a4747ef5f..90a454dc277 100644 --- a/@xen-orchestra/web-core/lib/components/CardNumbers.vue +++ b/@xen-orchestra/web-core/lib/components/CardNumbers.vue @@ -53,11 +53,11 @@ const percentValue = computed(() => { /* COLOR VARIANTS */ .card-numbers { &.small { - --label-color: var(--color-grey-100); + --label-color: var(--color-neutral-txt-primary); } &.medium { - --label-color: var(--color-grey-300); + --label-color: var(--color-neutral-txt-secondary); } } @@ -89,13 +89,13 @@ const percentValue = computed(() => { } .value { - color: var(--color-grey-100); + color: var(--color-neutral-txt-primary); display: flex; gap: 0.2rem; align-items: center; } .unit { - color: var(--color-grey-100); + color: var(--color-neutral-txt-primary); } diff --git a/@xen-orchestra/web-core/lib/components/LegendTitle.vue b/@xen-orchestra/web-core/lib/components/LegendTitle.vue index 9ed36b560df..b4cfbc0a2d6 100644 --- a/@xen-orchestra/web-core/lib/components/LegendTitle.vue +++ b/@xen-orchestra/web-core/lib/components/LegendTitle.vue @@ -25,7 +25,7 @@ defineSlots<{ diff --git a/@xen-orchestra/web-core/lib/components/UiCard.vue b/@xen-orchestra/web-core/lib/components/UiCard.vue index 745e87fa484..e8297d6d928 100644 --- a/@xen-orchestra/web-core/lib/components/UiCard.vue +++ b/@xen-orchestra/web-core/lib/components/UiCard.vue @@ -18,8 +18,8 @@ defineProps() 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; } diff --git a/@xen-orchestra/web-core/lib/components/UiCounter.vue b/@xen-orchestra/web-core/lib/components/UiCounter.vue index 22095812f4c..a7ed9f5d225 100644 --- a/@xen-orchestra/web-core/lib/components/UiCounter.vue +++ b/@xen-orchestra/web-core/lib/components/UiCounter.vue @@ -32,26 +32,26 @@ const classNames = computed(() => { diff --git a/@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue b/@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue index afb46d97623..dd05b75f22b 100644 --- a/@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue +++ b/@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue @@ -39,7 +39,7 @@ const { isSupported, copy, copied } = useClipboard() diff --git a/@xen-orchestra/web-core/lib/components/cell-text/CellText.vue b/@xen-orchestra/web-core/lib/components/cell-text/CellText.vue index 8ed9fd36bb5..0f32bd8419b 100644 --- a/@xen-orchestra/web-core/lib/components/cell-text/CellText.vue +++ b/@xen-orchestra/web-core/lib/components/cell-text/CellText.vue @@ -24,8 +24,8 @@ const slots = defineSlots<{ diff --git a/@xen-orchestra/web-core/lib/components/chip/ChipIcon.vue b/@xen-orchestra/web-core/lib/components/chip/ChipIcon.vue index e99a97f4e26..aa13f93de14 100644 --- a/@xen-orchestra/web-core/lib/components/chip/ChipIcon.vue +++ b/@xen-orchestra/web-core/lib/components/chip/ChipIcon.vue @@ -16,13 +16,13 @@ defineProps<{ diff --git a/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue b/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue index 0cc2c6cfdd2..5b6880a6b78 100644 --- a/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue +++ b/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue @@ -41,127 +41,127 @@ const checkbox = inject( /* COLOR VARIANTS */ .dropdown-item { & { - --color: var(--color-grey-100); - --background-color: var(--background-color-primary); + --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); + --color: var(--color-neutral-txt-secondary); + --background-color: var(--color-neutral-background-primary); } } &.info { - --color: var(--color-purple-base); - --background-color: var(--background-color-primary); + --color: var(--color-normal-txt-base); + --background-color: var(--color-neutral-background-primary); &: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); } &.disabled { - --color: var(--color-purple-l60); - --background-color: var(--background-color-primary); + --color: var(--color-normal-item-disabled); + --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-success-item-disabled); + --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-warning-item-disabled); + --background-color: var(--color-neutral-background-primary); } } &:is(.error, .danger) { - --color: var(--color-red-base); - --background-color: var(--background-color-primary); + --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-danger-item-disabled); + --background-color: var(--color-neutral-background-primary); } } } @@ -184,6 +184,6 @@ const checkbox = inject( } .info-text { - color: var(--color-grey-300); + color: var(--color-neutral-txt-secondary); } diff --git a/@xen-orchestra/web-core/lib/components/dropdown/DropdownList.vue b/@xen-orchestra/web-core/lib/components/dropdown/DropdownList.vue index 592e79d74b1..7262c0cff75 100644 --- a/@xen-orchestra/web-core/lib/components/dropdown/DropdownList.vue +++ b/@xen-orchestra/web-core/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); } diff --git a/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue b/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue index 853a941f68c..7494d6143fb 100644 --- a/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue +++ b/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue @@ -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); } } } diff --git a/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue b/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue index 18ac88883d2..195838808fa 100644 --- a/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue +++ b/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue @@ -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; diff --git a/@xen-orchestra/web-core/lib/components/icon/ComplexIcon.vue b/@xen-orchestra/web-core/lib/components/icon/ComplexIcon.vue index 0cde942dfd5..51dfa05e76f 100644 --- a/@xen-orchestra/web-core/lib/components/icon/ComplexIcon.vue +++ b/@xen-orchestra/web-core/lib/components/icon/ComplexIcon.vue @@ -41,7 +41,7 @@ withDefaults( transform: translate(100%, 80%); :deep(path) { - stroke: var(--color-grey-600); + stroke: var(--color-normal-txt-item); stroke-width: 100px; stroke-linejoin: round; paint-order: stroke; diff --git a/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue b/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue index 037a1428563..43659afc075 100644 --- a/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue +++ b/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue @@ -46,7 +46,7 @@ const config: ObjectIconConfig = { states: { running: { icon: faPlay, - color: '--color-green-base', + color: '--color-success-txt-base', translate: { x: [100, 132, 148], y: [65, 75, 90], @@ -54,7 +54,7 @@ const config: ObjectIconConfig = { }, halted: { icon: faStop, - color: '--color-red-base', + color: '--color-danger-txt-base', translate: { x: [100, 136, 144], y: [65, 75, 90], @@ -62,7 +62,7 @@ const config: ObjectIconConfig = { }, suspended: { icon: faMoon, - color: '--color-purple-d60', + color: '--color-normal-txt-item', translate: { x: [88, 130, 140], y: [65, 75, 90], @@ -70,7 +70,7 @@ const config: ObjectIconConfig = { }, paused: { icon: faPause, - color: '--color-purple-l40', + color: '--color-normal-item-active', translate: { x: [110, 154, 170], y: [65, 75, 90], @@ -83,7 +83,7 @@ const config: ObjectIconConfig = { states: { running: { icon: faPlay, - color: '--color-green-base', + color: '--color-success-txt-base', translate: { x: [82, 122, 136], y: [66, 70, 90], @@ -91,7 +91,7 @@ const config: ObjectIconConfig = { }, halted: { icon: faStop, - color: '--color-red-base', + color: '--color-danger-txt-base', translate: { x: [90, 122, 134], y: [65, 72, 85], @@ -99,7 +99,7 @@ const config: ObjectIconConfig = { }, maintenance: { icon: faTriangleExclamation, - color: '--color-orange-base', + color: '--color-warning-txt-base', translate: { x: [60, 88, 100], y: [68, 72, 82], @@ -112,7 +112,7 @@ const config: ObjectIconConfig = { states: { connected: { icon: faCheckCircle, - color: '--color-green-base', + color: '--color-success-txt-base', translate: { x: [60, 90, 100], y: [65, 75, 90], @@ -120,7 +120,7 @@ const config: ObjectIconConfig = { }, 'partially-connected': { icon: faCircleMinus, - color: '--color-orange-base', + color: '--color-warning-txt-base', translate: { x: [60, 90, 100], y: [65, 75, 90], @@ -128,7 +128,7 @@ const config: ObjectIconConfig = { }, disconnected: { icon: faCircleXmark, - color: '--color-red-base', + color: '--color-danger-txt-base', translate: { x: [60, 90, 100], y: [65, 75, 90], @@ -141,7 +141,7 @@ const config: ObjectIconConfig = { states: { connected: { icon: faCheckCircle, - color: '--color-green-base', + color: '--color-success-txt-base', translate: { x: [112, 130, 162], y: [74, 78, 102], @@ -149,7 +149,7 @@ const config: ObjectIconConfig = { }, disconnected: { icon: faCircleXmark, - color: '--color-red-base', + color: '--color-danger-txt-base', translate: { x: [112, 130, 162], y: [74, 78, 102], @@ -162,7 +162,7 @@ const config: ObjectIconConfig = { states: { connected: { icon: faCheckCircle, - color: '--color-green-base', + color: '--color-success-txt-base', translate: { x: [84, 110, 128], y: [66, 72, 88], @@ -170,7 +170,7 @@ const config: ObjectIconConfig = { }, disconnected: { icon: faCircleXmark, - color: '--color-red-base', + color: '--color-danger-txt-base', translate: { x: [84, 110, 128], y: [66, 72, 88], @@ -232,7 +232,7 @@ const stateIconStyle = computed(() => { font-size: var(--font-size); &.disabled { - color: var(--color-grey-400); + color: var(--color-neutral-txt-secondary); } } diff --git a/@xen-orchestra/web-core/lib/components/icon/UiIcon.vue b/@xen-orchestra/web-core/lib/components/icon/UiIcon.vue index 1b4edc181ac..6d8c62d5ffd 100644 --- a/@xen-orchestra/web-core/lib/components/icon/UiIcon.vue +++ b/@xen-orchestra/web-core/lib/components/icon/UiIcon.vue @@ -24,19 +24,19 @@ defineProps<{ --color: currentColor; &.info { - --color: var(--color-purple-base); + --color: var(--color-normal-txt-base); } &.success { - --color: var(--color-green-base); + --color: var(--color-success-txt-base); } &.warning { - --color: var(--color-orange-base); + --color: var(--color-warning-txt-base); } &.error { - --color: var(--color-red-base); + --color: var(--color-danger-txt-base); } } diff --git a/@xen-orchestra/web-core/lib/components/input/UiInput.vue b/@xen-orchestra/web-core/lib/components/input/UiInput.vue index 0d7339e552e..f0aaf54e52c 100644 --- a/@xen-orchestra/web-core/lib/components/input/UiInput.vue +++ b/@xen-orchestra/web-core/lib/components/input/UiInput.vue @@ -31,28 +31,28 @@ const id = computed(() => uniqueId('input-')) /* COLOR VARIANTS */ .input { & { - --border-color: var(--color-grey-500); - --background-color: var(--background-color-primary); + --border-color: var(--color-neutral-border); + --background-color: var(--color-neutral-background-primary); } &:is(:hover, :focus-visible) { - --border-color: var(--color-purple-d20); - --background-color: var(--background-color-primary); + --border-color: var(--color-normal-txt-hover); + --background-color: var(--color-neutral-background-primary); } &:focus { - --border-color: var(--color-purple-base); - --background-color: var(--background-color-primary); + --border-color: var(--color-normal-txt-base); + --background-color: var(--color-neutral-background-primary); } &:active { - --border-color: var(--color-purple-d40); - --background-color: var(--background-color-primary); + --border-color: var(--color-normal-txt-active); + --background-color: var(--color-neutral-background-primary); } &:disabled { - --border-color: var(--color-grey-500); - --background-color: var(--background-color-secondary); + --border-color: var(--color-neutral-border); + --background-color: var(--color-neutral-background-secondary); } } @@ -93,7 +93,7 @@ const id = computed(() => uniqueId('input-')) width: 100%; height: 4rem; padding: 0.8rem 1.6rem; - color: var(--color-grey-000); + color: var(--color-neutral-txt-primary); background-color: var(--background-color); &:has(+ .after) { @@ -105,7 +105,7 @@ const id = computed(() => uniqueId('input-')) } &::placeholder { - color: var(--color-grey-300); + color: var(--color-neutral-txt-secondary); } &[type='search']::-webkit-search-cancel-button { @@ -120,7 +120,7 @@ const id = computed(() => uniqueId('input-')) } .before { - color: var(--color-grey-400); + color: var(--color-neutral-txt-secondary); inset-inline-start: 1.6rem; pointer-events: none; z-index: 1; diff --git a/@xen-orchestra/web-core/lib/components/layout/LayoutSidebar.vue b/@xen-orchestra/web-core/lib/components/layout/LayoutSidebar.vue index 3a063598e55..f015642ffbf 100644 --- a/@xen-orchestra/web-core/lib/components/layout/LayoutSidebar.vue +++ b/@xen-orchestra/web-core/lib/components/layout/LayoutSidebar.vue @@ -54,8 +54,8 @@ const ui = useUiStore() display: flex; flex-direction: column; height: 100%; - background-color: var(--background-color-secondary); - border-right: 0.1rem solid var(--color-grey-500); + background-color: var(--color-neutral-background-secondary); + border-right: 0.1rem solid var(--color-neutral-border); width: v-bind('sidebar.cssWidth'); z-index: 1001; transition: @@ -93,7 +93,7 @@ const ui = useUiStore() &:hover, &.active { - background-color: var(--color-grey-500); + background-color: var(--color-neutral-border); transition: background-color 0.05s; } } diff --git a/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue b/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue index fd83e9570bd..51b1f4c5c94 100644 --- a/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue +++ b/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue @@ -36,27 +36,27 @@ const valueLabel = computed(() => [props.value, props.unit].join(' ').trim()) /* COLOR VARIANTS */ .legend-item { &.primary { - --circle-color: var(--color-purple-base); + --circle-color: var(--color-normal-txt-base); } &.secondary { - --circle-color: var(--color-grey-100); + --circle-color: var(--color-neutral-txt-primary); } &.success { - --circle-color: var(--color-green-base); + --circle-color: var(--color-success-txt-base); } &.warning { - --circle-color: var(--color-orange-base); + --circle-color: var(--color-warning-txt-base); } &.danger { - --circle-color: var(--color-red-base); + --circle-color: var(--color-danger-txt-base); } &.disabled { - --circle-color: var(--color-grey-300); + --circle-color: var(--color-neutral-txt-secondary); } } @@ -77,10 +77,10 @@ const valueLabel = computed(() => [props.value, props.unit].join(' ').trim()) } .label { - color: var(--color-grey-000); + color: var(--color-neutral-txt-primary); } .value-and-unit { - color: var(--color-grey-300); + color: var(--color-neutral-txt-secondary); } diff --git a/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue b/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue index 894a9b72022..03e2df5d508 100644 --- a/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue +++ b/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue @@ -73,7 +73,7 @@ const handleClick = async () => { diff --git a/@xen-orchestra/web-core/lib/components/menu/MenuTrigger.vue b/@xen-orchestra/web-core/lib/components/menu/MenuTrigger.vue index 2a756136094..ddd768661e2 100644 --- a/@xen-orchestra/web-core/lib/components/menu/MenuTrigger.vue +++ b/@xen-orchestra/web-core/lib/components/menu/MenuTrigger.vue @@ -30,22 +30,22 @@ defineProps<{ white-space: nowrap; border-radius: 0.8rem; gap: 1rem; - background-color: var(--color-grey-600); + background-color: var(--color-normal-txt-item); &.disabled { - color: var(--color-grey-500); + color: var(--color-neutral-border); } &:not(.disabled) { cursor: pointer; &:hover { - background-color: var(--background-color-purple-10); + background-color: var(--color-normal-background-selected); } &:active, &.active { - background-color: var(--background-color-purple-20); + background-color: var(--color-normal-background-hover); } } } diff --git a/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue b/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue index 0750f2cddbf..74f4430dae3 100644 --- a/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue +++ b/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue @@ -41,24 +41,24 @@ defineSlots<{ diff --git a/@xen-orchestra/web-core/lib/components/query-search-bar/QuerySearchBar.vue b/@xen-orchestra/web-core/lib/components/query-search-bar/QuerySearchBar.vue index 5c299de17e8..2a1dff3b8ca 100644 --- a/@xen-orchestra/web-core/lib/components/query-search-bar/QuerySearchBar.vue +++ b/@xen-orchestra/web-core/lib/components/query-search-bar/QuerySearchBar.vue @@ -55,6 +55,6 @@ const value = ref('') } .label { - color: var(--color-grey-200); + color: var(--color-neutral-txt-secondary); } diff --git a/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBar.vue b/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBar.vue index 4efe13a0cd7..e8dbb26a94b 100644 --- a/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBar.vue +++ b/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBar.vue @@ -38,6 +38,6 @@ const max = computed(() => Math.max(props.maxValue ?? 0, totalValue.value)) height: 4rem; border-radius: 0.8rem; overflow: hidden; - background-color: var(--background-color-purple-10); + background-color: var(--color-normal-background-selected); } diff --git a/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBarSegment.vue b/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBarSegment.vue index 593e634aba1..161f8bb6516 100644 --- a/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBarSegment.vue +++ b/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBarSegment.vue @@ -38,19 +38,19 @@ useResizeObserver(ellipsisElement, ([entry]) => { /* COLOR VARIANT */ .stacked-bar-segment { &.primary { - --background-color: var(--color-purple-base); + --background-color: var(--color-normal-txt-base); } &.success { - --background-color: var(--color-green-base); + --background-color: var(--color-success-txt-base); } &.warning { - --background-color: var(--color-orange-base); + --background-color: var(--color-warning-txt-base); } &.danger { - --background-color: var(--color-red-base); + --background-color: var(--color-danger-txt-base); } } @@ -60,7 +60,7 @@ useResizeObserver(ellipsisElement, ([entry]) => { justify-content: center; align-items: center; white-space: nowrap; - color: var(--color-grey-600); + color: var(--color-normal-txt-item); background-color: var(--background-color); } diff --git a/@xen-orchestra/web-core/lib/components/state-hero/StateHero.vue b/@xen-orchestra/web-core/lib/components/state-hero/StateHero.vue index a6f545c098a..93d7c70df97 100644 --- a/@xen-orchestra/web-core/lib/components/state-hero/StateHero.vue +++ b/@xen-orchestra/web-core/lib/components/state-hero/StateHero.vue @@ -64,11 +64,11 @@ const imageSrc = computed(() => { } .spinner { - color: var(--color-purple-base); + color: var(--color-normal-txt-base); font-size: var(--spinner-size); } .text { - color: var(--color-purple-base); + color: var(--color-normal-txt-base); } diff --git a/@xen-orchestra/web-core/lib/components/tab/TabItem.vue b/@xen-orchestra/web-core/lib/components/tab/TabItem.vue index 56680d60efb..d50bcb711b6 100644 --- a/@xen-orchestra/web-core/lib/components/tab/TabItem.vue +++ b/@xen-orchestra/web-core/lib/components/tab/TabItem.vue @@ -40,31 +40,31 @@ const classNames = computed(() => { /* COLOR VARIANTS */ .tab-item { & { - --color: var(--color-grey-100); + --color: var(--color-neutral-txt-primary); --border-color: transparent; --background-color: transparent; } &:is(:hover, .hover, :focus-visible) { - --color: var(--color-grey-100); - --border-color: var(--color-purple-d20); - --background-color: var(--background-color-purple-20); + --color: var(--color-neutral-txt-primary); + --border-color: var(--color-normal-txt-hover); + --background-color: var(--color-normal-background-hover); } &:is(:active, .pressed) { - --color: var(--color-grey-100); - --border-color: var(--color-purple-d40); - --background-color: var(--background-color-purple-30); + --color: var(--color-neutral-txt-primary); + --border-color: var(--color-normal-txt-active); + --background-color: var(--color-normal-background-active); } &:is(.active, .selected) { - --color: var(--color-grey-100); - --border-color: var(--color-purple-base); - --background-color: var(--background-color-purple-10); + --color: var(--color-neutral-txt-primary); + --border-color: var(--color-normal-txt-base); + --background-color: var(--color-normal-background-selected); } &:is(:disabled, .disabled) { - --color: var(--color-grey-400); + --color: var(--color-neutral-txt-secondary); --border-color: transparent; --background-color: transparent; } diff --git a/@xen-orchestra/web-core/lib/components/tab/TabList.vue b/@xen-orchestra/web-core/lib/components/tab/TabList.vue index 3d2718ce62f..c515828d658 100644 --- a/@xen-orchestra/web-core/lib/components/tab/TabList.vue +++ b/@xen-orchestra/web-core/lib/components/tab/TabList.vue @@ -24,8 +24,8 @@ useContext(DisabledContext, () => props.disabled) display: flex; align-items: stretch; height: 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); max-width: 100%; overflow: auto; flex-shrink: 0; diff --git a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue b/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue index a96a17e532b..bedb6589706 100644 --- a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue +++ b/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue @@ -94,27 +94,27 @@ const updateInteraction = (interaction: Interaction) => { diff --git a/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue b/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue index 67d32a11206..0528ca89542 100644 --- a/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue +++ b/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue @@ -72,22 +72,22 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0) diff --git a/@xen-orchestra/web-core/lib/components/tree/TreeLine.vue b/@xen-orchestra/web-core/lib/components/tree/TreeLine.vue index 85902a8c1d5..8ba5b1eb338 100644 --- a/@xen-orchestra/web-core/lib/components/tree/TreeLine.vue +++ b/@xen-orchestra/web-core/lib/components/tree/TreeLine.vue @@ -24,7 +24,7 @@ defineProps<{ .tree-line-vertical { width: 0.1rem; - background: var(--color-purple-base); + background: var(--color-normal-txt-base); height: calc(100% + var(--offset)); transform: translateY(calc(var(--offset) * -1)); } @@ -35,7 +35,7 @@ defineProps<{ background: transparent; &.right { - background: var(--color-purple-base); + background: var(--color-normal-txt-base); } } } diff --git a/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue b/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue index 69ce02845e2..c37156a472b 100644 --- a/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue +++ b/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue @@ -31,11 +31,11 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0) .tree-loading-item-label-placeholder { display: flex; height: 4rem; - background-color: var(--background-color-primary); + background-color: var(--color-neutral-background-primary); } .icon { - color: var(--color-grey-100); + color: var(--color-neutral-txt-primary); } .link-placeholder { @@ -49,7 +49,7 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0) .loader { flex: 1; animation: pulse alternate 1s infinite; - background-color: var(--background-color-purple-10); + background-color: var(--color-normal-background-selected); } @keyframes pulse { diff --git a/@xen-orchestra/web-core/lib/components/user/UserLink.vue b/@xen-orchestra/web-core/lib/components/user/UserLink.vue index e746c43cdcb..64f1d2bb344 100644 --- a/@xen-orchestra/web-core/lib/components/user/UserLink.vue +++ b/@xen-orchestra/web-core/lib/components/user/UserLink.vue @@ -24,24 +24,24 @@ defineProps<{ diff --git a/@xen-orchestra/web/src/components/LogoTextOnly.vue b/@xen-orchestra/web/src/components/LogoTextOnly.vue index 8f2c5b93ddd..22718f8e7f5 100644 --- a/@xen-orchestra/web/src/components/LogoTextOnly.vue +++ b/@xen-orchestra/web/src/components/LogoTextOnly.vue @@ -63,7 +63,7 @@ defineProps<{ short?: boolean }>() diff --git a/@xen-orchestra/web/src/components/account-menu/AccountMenu.vue b/@xen-orchestra/web/src/components/account-menu/AccountMenu.vue index 3776d83f311..dd918ec8637 100644 --- a/@xen-orchestra/web/src/components/account-menu/AccountMenu.vue +++ b/@xen-orchestra/web/src/components/account-menu/AccountMenu.vue @@ -46,7 +46,7 @@ const logout = () => window.location.assign('/signout') diff --git a/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue b/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue index 0a63bc97b57..5f52eaa6a2e 100644 --- a/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue +++ b/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue @@ -29,26 +29,26 @@ const isDisabled = useContext(DisabledContext) /* COLOR VARIANTS */ .account-menu-trigger { --background-color: transparent; - --accent-color: var(--color-purple-base); + --accent-color: var(--color-normal-txt-base); &:is(:hover, .hover, :focus-visible) { - --background-color: var(--background-color-purple-20); - --accent-color: var(--color-purple-d20); + --background-color: var(--color-normal-background-hover); + --accent-color: var(--color-normal-txt-hover); } &:is(:active, .pressed) { - --background-color: var(--background-color-purple-30); - --accent-color: var(--color-purple-d40); + --background-color: var(--color-normal-background-active); + --accent-color: var(--color-normal-txt-active); } &.active { - --background-color: var(--background-color-purple-10); - --accent-color: var(--color-purple-base); + --background-color: var(--color-normal-background-selected); + --accent-color: var(--color-normal-txt-base); } &.disabled { --background-color: transparent; - --accent-color: var(--color-grey-400); + --accent-color: var(--color-neutral-txt-secondary); } } diff --git a/@xen-orchestra/web/src/components/tree/PoolTreeList.vue b/@xen-orchestra/web/src/components/tree/PoolTreeList.vue index 371fdc18efd..d20f88cff03 100644 --- a/@xen-orchestra/web/src/components/tree/PoolTreeList.vue +++ b/@xen-orchestra/web/src/components/tree/PoolTreeList.vue @@ -16,7 +16,7 @@ defineProps<{ diff --git a/@xen-orchestra/web/src/pages/pool/[id]/hosts.vue b/@xen-orchestra/web/src/pages/pool/[id]/hosts.vue index b51163e5090..db642c59117 100644 --- a/@xen-orchestra/web/src/pages/pool/[id]/hosts.vue +++ b/@xen-orchestra/web/src/pages/pool/[id]/hosts.vue @@ -66,7 +66,7 @@ const { nodes: hosts } = useTree(definitions) } .count { - color: var(--color-grey-200); + color: var(--color-neutral-txt-secondary); text-transform: lowercase; } diff --git a/@xen-orchestra/web/src/pages/pool/[id]/vms.vue b/@xen-orchestra/web/src/pages/pool/[id]/vms.vue index 17a8c60d54d..ce68c3a0793 100644 --- a/@xen-orchestra/web/src/pages/pool/[id]/vms.vue +++ b/@xen-orchestra/web/src/pages/pool/[id]/vms.vue @@ -68,6 +68,6 @@ const { nodes: vms } = useTree(definitions) } .count { - color: var(--color-grey-200); + color: var(--color-neutral-txt-secondary); }