From 5242affdc18e3bcca79328eaa264e4a0cc8040b2 Mon Sep 17 00:00:00 2001 From: Thierry Goettelmann Date: Thu, 18 Jan 2024 10:04:25 +0100 Subject: [PATCH] feat(lite): introducing `@xen-orchestra/web-core` (#7302) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR introduces `@xen-orchestra/web-core`, which will be the common base for XO Lite and XO 6. This package is not meant to be distributed and will be used as-is in other packages thanks to Yarn Workspace. This mean that the files of XO Web Core will not be built by themselves but by either the package which use it. Styles have been moved from XO Lite to XO Web Core. Colors variable have been renamed and updated according to the new Design System. XO Lite has been updated accordingly. - `extra-blue` → `purple` - `green-infra` → `green` - `orange-world` → `orange` - `red-vates` → `red` - `blue-scale` → `grey` ⚠️ A new intermediate shade has been introduced (`--color-grey-400`). So `--color-blue-scale-400` is now `--color-grey-500` and `--color-blue-scale-500` is now `--color-grey-600`. PostCSS color function plugin is used to generate the shades of color like it is done on the Figma mockup (with blending the base color with black or white at different degrees). PostCSS custom media are now loaded globally thanks to a plugin and no longer require to import `_responsive.pcss` file manually in each file where a custom media was needed. --- .eslintrc.js | 2 +- @xen-orchestra/lite/index.html | 2 +- @xen-orchestra/lite/package.json | 4 +- @xen-orchestra/lite/postcss.config.mjs | 4 + @xen-orchestra/lite/public/favicon.ico | Bin 4286 -> 0 bytes @xen-orchestra/lite/src/App.vue | 13 -- .../lite/src/assets/_responsive.pcss | 2 - @xen-orchestra/lite/src/assets/base.css | 100 -------------- @xen-orchestra/lite/src/assets/favicon.svg | 1 - @xen-orchestra/lite/src/assets/theme.css | 87 ------------- .../lite/src/components/AccountButton.vue | 8 +- .../lite/src/components/AppHeader.vue | 2 +- .../lite/src/components/AppLogin.vue | 4 +- .../lite/src/components/AppMarkdown.vue | 10 +- .../lite/src/components/AppNavigation.vue | 2 +- .../lite/src/components/AppTooltip.vue | 6 +- .../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 | 6 +- .../lite/src/components/UsageBar.vue | 14 +- .../component-story/StoryParamsTable.vue | 4 +- .../component-story/StoryPropParams.vue | 10 +- .../lite/src/components/form/FormCheckbox.vue | 24 ++-- .../lite/src/components/form/FormInput.vue | 38 +++--- .../src/components/form/FormInputWrapper.vue | 12 +- .../lite/src/components/form/FormSection.vue | 10 +- .../src/components/infra/InfraHostItem.vue | 6 +- .../src/components/infra/InfraHostList.vue | 2 +- .../src/components/infra/InfraItemLabel.vue | 12 +- .../src/components/infra/InfraLoadingItem.vue | 4 +- .../src/components/infra/InfraPoolList.vue | 2 +- .../lite/src/components/infra/InfraVmItem.vue | 8 +- .../lite/src/components/infra/InfraVmList.vue | 2 +- .../lite/src/components/menu/AppMenu.vue | 4 +- .../lite/src/components/menu/MenuItem.vue | 2 +- .../src/components/menu/MenuSeparator.vue | 4 +- .../lite/src/components/menu/MenuTrigger.vue | 8 +- .../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 | 8 +- .../lite/src/components/ui/UiBadge.vue | 4 +- .../lite/src/components/ui/UiButton.vue | 28 ++-- .../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/UiCounter.vue | 12 +- .../lite/src/components/ui/UiFilter.vue | 10 +- .../lite/src/components/ui/UiKeyValueRow.vue | 4 +- .../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/UiTab.vue | 14 +- .../lite/src/components/ui/UiTabBar.vue | 2 +- .../lite/src/components/ui/UiTable.vue | 10 +- .../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 | 2 +- .../src/composables/chart-theme.composable.ts | 8 +- @xen-orchestra/lite/src/main.ts | 1 + .../lite/src/views/ObjectNotFoundView.vue | 2 +- .../lite/src/views/PageNotFoundView.vue | 4 +- .../lite/src/views/settings/SettingsView.vue | 6 +- .../lite/src/views/story/HomeView.vue | 2 +- .../lite/src/views/vm/VmConsoleView.vue | 8 +- .../src/views/xoa-deploy/XoaDeployView.vue | 10 +- .../web-core/lib/assets/css/.globals.pcss | 5 + .../web-core/lib/assets/css/_colors.pcss | 121 +++++++++++++++++ .../web-core/lib/assets/css/_context.pcss | 47 +++++++ .../web-core/lib/assets/css/_fonts.pcss | 6 + .../lib/assets/css/_reset.pcss} | 4 + .../web-core/lib/assets/css/_shadows.pcss | 36 +++++ .../web-core/lib/assets/css/_typography.pcss | 123 ++++++++++++++++++ .../web-core/lib/assets/css/base.pcss | 53 ++++++++ @xen-orchestra/web-core/package.json | 18 +++ yarn.lock | 75 +++++++++-- 93 files changed, 719 insertions(+), 447 deletions(-) delete mode 100644 @xen-orchestra/lite/public/favicon.ico delete mode 100644 @xen-orchestra/lite/src/assets/_responsive.pcss delete mode 100644 @xen-orchestra/lite/src/assets/base.css delete mode 100644 @xen-orchestra/lite/src/assets/favicon.svg delete mode 100644 @xen-orchestra/lite/src/assets/theme.css create mode 100644 @xen-orchestra/web-core/lib/assets/css/.globals.pcss create mode 100644 @xen-orchestra/web-core/lib/assets/css/_colors.pcss create mode 100644 @xen-orchestra/web-core/lib/assets/css/_context.pcss create mode 100644 @xen-orchestra/web-core/lib/assets/css/_fonts.pcss rename @xen-orchestra/{lite/src/assets/reset.css => web-core/lib/assets/css/_reset.pcss} (91%) create mode 100644 @xen-orchestra/web-core/lib/assets/css/_shadows.pcss create mode 100644 @xen-orchestra/web-core/lib/assets/css/_typography.pcss create mode 100644 @xen-orchestra/web-core/lib/assets/css/base.pcss create mode 100644 @xen-orchestra/web-core/package.json diff --git a/.eslintrc.js b/.eslintrc.js index 76e4110bd6..63ffc968ad 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -48,7 +48,7 @@ module.exports = { }, }, { - files: ['@xen-orchestra/lite/**/*.{vue,ts}'], + files: ['@xen-orchestra/{web-core,lite,web}/**/*.{vue,ts}'], parserOptions: { sourceType: 'module', }, diff --git a/@xen-orchestra/lite/index.html b/@xen-orchestra/lite/index.html index fb751caed4..6b2004bc44 100644 --- a/@xen-orchestra/lite/index.html +++ b/@xen-orchestra/lite/index.html @@ -2,7 +2,7 @@ - + XO Lite diff --git a/@xen-orchestra/lite/package.json b/@xen-orchestra/lite/package.json index 05f273b67f..cf13c11abe 100644 --- a/@xen-orchestra/lite/package.json +++ b/@xen-orchestra/lite/package.json @@ -14,6 +14,7 @@ "type-check": "vue-tsc --build --force tsconfig.type-check.json" }, "devDependencies": { + "@csstools/postcss-global-data": "^2.1.1", "@fontsource/poppins": "^5.0.8", "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-regular-svg-icons": "^6.5.1", @@ -22,7 +23,6 @@ "@intlify/unplugin-vue-i18n": "^2.0.0", "@novnc/novnc": "^1.4.0", "@tsconfig/node18": "^18.2.2", - "strip-json-comments": "^5.0.1", "@types/d3-time-format": "^4.0.3", "@types/file-saver": "^2.0.7", "@types/lodash-es": "^4.17.12", @@ -32,6 +32,7 @@ "@vueuse/core": "^10.7.1", "@vueuse/math": "^10.7.1", "@vueuse/shared": "^10.7.1", + "@xen-orchestra/web-core": "*", "complex-matcher": "^0.7.1", "d3-time-format": "^4.1.0", "decorator-synchronized": "^0.6.0", @@ -51,6 +52,7 @@ "pinia": "^2.1.7", "placement.js": "^1.0.0-beta.5", "postcss": "^8.4.33", + "postcss-color-function": "^4.1.0", "postcss-custom-media": "^10.0.2", "postcss-nested": "^6.0.1", "typescript": "^5.3.3", diff --git a/@xen-orchestra/lite/postcss.config.mjs b/@xen-orchestra/lite/postcss.config.mjs index 33c01d4e6a..1587a2fe72 100644 --- a/@xen-orchestra/lite/postcss.config.mjs +++ b/@xen-orchestra/lite/postcss.config.mjs @@ -1,6 +1,10 @@ export default { plugins: { + '@csstools/postcss-global-data': { + files: ['../web-core/lib/assets/css/.globals.pcss'], + }, 'postcss-nested': {}, 'postcss-custom-media': {}, + 'postcss-color-function': {}, }, } diff --git a/@xen-orchestra/lite/public/favicon.ico b/@xen-orchestra/lite/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/@xen-orchestra/lite/src/App.vue b/@xen-orchestra/lite/src/App.vue index c81f1f6033..3b4fae681d 100644 --- a/@xen-orchestra/lite/src/App.vue +++ b/@xen-orchestra/lite/src/App.vue @@ -16,7 +16,6 @@ - - diff --git a/@xen-orchestra/lite/src/assets/theme.css b/@xen-orchestra/lite/src/assets/theme.css deleted file mode 100644 index e128a2c558..0000000000 --- a/@xen-orchestra/lite/src/assets/theme.css +++ /dev/null @@ -1,87 +0,0 @@ -:root { - --color-logo: #282467; - - --color-blue-scale-000: #000000; - --color-blue-scale-100: #1a1b38; - --color-blue-scale-200: #595a6f; - --color-blue-scale-300: #9899a5; - --color-blue-scale-400: #e5e5e7; - --color-blue-scale-500: #ffffff; - - --color-extra-blue-l60: #d1cefb; - --color-extra-blue-l40: #bbb5f9; - --color-extra-blue-l20: #a39df8; - --color-extra-blue-base: #8f84ff; - --color-extra-blue-d20: #716ac6; - --color-extra-blue-d40: #554f94; - --color-extra-blue-d60: #383563; - - --color-green-infra-l60: #b5dbca; - --color-green-infra-l40: #91c9b0; - --color-green-infra-l20: #70b795; - --color-green-infra-base: #55a57b; - --color-green-infra-d20: #438463; - --color-green-infra-d40: #32634a; - --color-green-infra-d60: #214231; - - --color-orange-world-l60: #f2cda8; - --color-orange-world-l40: #ebb57d; - --color-orange-world-l20: #e59d56; - --color-orange-world-base: #ef7f18; - --color-orange-world-d20: #bf6612; - --color-orange-world-d40: #864f1f; - --color-orange-world-d60: #5a3514; - - --color-red-vates-l60: #dda5a7; - --color-red-vates-l40: #ce787c; - --color-red-vates-l20: #bf4f51; - --color-red-vates-base: #be1621; - --color-red-vates-d20: #8e2221; - --color-red-vates-d40: #6a1919; - --color-red-vates-d60: #471010; - - --color-grayscale-200: #585757; - - --background-color-primary: #ffffff; - --background-color-secondary: #f6f6f7; - --background-color-extra-blue: #f4f3fe; - --background-color-green-infra: #ecf5f2; - --background-color-orange-world: #fbf2e9; - --background-color-red-vates: #f5e8e9; - - --shadow-100: 0 0.1rem 0.1rem rgba(20, 20, 30, 0.06); - --shadow-200: 0 0.1rem 0.3rem rgba(20, 20, 30, 0.1), 0 0.2rem 0.1rem rgba(20, 20, 30, 0.06), - 0 0.1rem 0.1rem rgba(20, 20, 30, 0.08); - --shadow-300: 0 0.3rem 0.5rem rgba(20, 20, 30, 0.1), 0 0.1rem 1.8rem rgba(20, 20, 30, 0.06), - 0 0.6rem 1rem rgba(20, 20, 30, 0.08); - --shadow-400: 0 1.1rem 1.5rem rgba(20, 20, 30, 0.1), 0 0.9rem 4.6rem rgba(20, 20, 30, 0.06), - 0 2.4rem 3.8rem rgba(20, 20, 30, 0.04); -} - -:root.dark { - color-scheme: dark; - - --color-logo: #e5e5e7; - - --color-blue-scale-000: #ffffff; - --color-blue-scale-100: #e5e5e7; - --color-blue-scale-200: #9899a5; - --color-blue-scale-300: #595a6f; - --color-blue-scale-400: #1a1b38; - --color-blue-scale-500: #000000; - - --background-color-primary: #14141d; - --background-color-secondary: #17182a; - --background-color-extra-blue: #35335d; - --background-color-green-infra: #243b3d; - --background-color-orange-world: #493328; - --background-color-red-vates: #3c1a28; - - --shadow-100: 0 0.1rem 0.1rem rgba(20, 20, 30, 0.12); - --shadow-200: 0 0.1rem 0.3rem rgba(20, 20, 30, 0.2), 0 0.2rem 0.1rem rgba(20, 20, 30, 0.12), - 0 0.1rem 0.1rem rgba(20, 20, 30, 0.16); - --shadow-300: 0 0.3rem 0.5rem rgba(20, 20, 30, 0.2), 0 0.1rem 1.8rem rgba(20, 20, 30, 0.12), - 0 0.6rem 1rem rgba(20, 20, 30, 0.16); - --shadow-400: 0 1.1rem 1.5rem rgba(20, 20, 30, 0.2), 0 0.9rem 4.6rem rgba(20, 20, 30, 0.12), - 0 2.4rem 3.8rem rgba(20, 20, 30, 0.08); -} diff --git a/@xen-orchestra/lite/src/components/AccountButton.vue b/@xen-orchestra/lite/src/components/AccountButton.vue index 4b7587d0cb..d857e202b7 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-blue-scale-100); + color: var(--color-grey-100); border: none; border-radius: 0.8rem; background-color: var(--background-color-secondary); gap: 0.8rem; &:disabled { - color: var(--color-blue-scale-400); + color: var(--color-grey-500); } &:not(:disabled) { @@ -72,7 +72,7 @@ const openSettings = () => router.push({ name: 'settings' }) &:active, &.active { - color: var(--color-extra-blue-base); + color: var(--color-purple-base); } } } @@ -86,6 +86,6 @@ const openSettings = () => router.push({ name: 'settings' }) } .menu-item-logout { - color: var(--color-red-vates-base); + color: var(--color-red-base); } diff --git a/@xen-orchestra/lite/src/components/AppHeader.vue b/@xen-orchestra/lite/src/components/AppHeader.vue index f053ce1639..acca054671 100644 --- a/@xen-orchestra/lite/src/components/AppHeader.vue +++ b/@xen-orchestra/lite/src/components/AppHeader.vue @@ -46,7 +46,7 @@ const { trigger: navigationTrigger } = storeToRefs(navigationStore) justify-content: space-between; height: 5.5rem; padding: 1rem; - border-bottom: 0.1rem solid var(--color-blue-scale-400); + border-bottom: 0.1rem solid var(--color-grey-500); background-color: var(--background-color-secondary); img { diff --git a/@xen-orchestra/lite/src/components/AppLogin.vue b/@xen-orchestra/lite/src/components/AppLogin.vue index d30a41b32a..16e32b2beb 100644 --- a/@xen-orchestra/lite/src/components/AppLogin.vue +++ b/@xen-orchestra/lite/src/components/AppLogin.vue @@ -135,7 +135,7 @@ form { background-color: var(--background-color-secondary); .error { - color: var(--color-red-vates-base); + color: var(--color-red-base); } } @@ -156,7 +156,7 @@ input { max-width: 100%; margin-bottom: 1rem; padding: 1rem 1.5rem; - border: 1px solid var(--color-blue-scale-400); + border: 1px solid var(--color-grey-500); 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 3dd4a7e210..4722685b14 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-extra-blue); + background-color: var(--background-color-purple-10); padding: 0.3rem 0.6rem; border-radius: 0.6rem; } @@ -81,12 +81,12 @@ useEventListener( } thead th { - border-bottom: 2px solid var(--color-blue-scale-400); + border-bottom: 2px solid var(--color-grey-500); background-color: var(--background-color-secondary); } tbody td { - border-bottom: 1px solid var(--color-blue-scale-400); + border-bottom: 1px solid var(--color-grey-500); } } @@ -103,11 +103,11 @@ useEventListener( background-color: transparent; &:hover { - color: var(--color-extra-blue-base); + color: var(--color-purple-base); } &:active { - color: var(--color-extra-blue-d20); + color: var(--color-purple-d20); } } } diff --git a/@xen-orchestra/lite/src/components/AppNavigation.vue b/@xen-orchestra/lite/src/components/AppNavigation.vue index f1e355b81e..7f57965be8 100644 --- a/@xen-orchestra/lite/src/components/AppNavigation.vue +++ b/@xen-orchestra/lite/src/components/AppNavigation.vue @@ -45,7 +45,7 @@ whenever(isOpen, () => { max-width: 37rem; height: calc(100vh - 5.5rem); padding: 0.5rem; - border-right: 1px solid var(--color-blue-scale-400); + border-right: 1px solid var(--color-grey-500); background-color: var(--background-color-primary); &.collapsible { diff --git a/@xen-orchestra/lite/src/components/AppTooltip.vue b/@xen-orchestra/lite/src/components/AppTooltip.vue index f4bb556057..ca5705d550 100644 --- a/@xen-orchestra/lite/src/components/AppTooltip.vue +++ b/@xen-orchestra/lite/src/components/AppTooltip.vue @@ -41,9 +41,9 @@ watchEffect(() => { display: inline-flex; padding: 0.3125em 0.5em; pointer-events: none; - color: var(--color-blue-scale-500); + color: var(--color-grey-600); border-radius: 0.5em; - background-color: var(--color-blue-scale-100); + background-color: var(--color-grey-100); z-index: 2; } @@ -145,6 +145,6 @@ watchEffect(() => { content: ''; transform: rotate(45deg) skew(20deg, 20deg); border-radius: 0.3125em; - background-color: var(--color-blue-scale-100); + background-color: var(--color-grey-100); } diff --git a/@xen-orchestra/lite/src/components/FormWidget.vue b/@xen-orchestra/lite/src/components/FormWidget.vue index ee79a3324f..9853c31e4e 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-blue-scale-400); + border: 1px solid var(--color-grey-500); border-radius: 0.8rem; - background-color: var(--color-blue-scale-500); + background-color: var(--color-grey-600); box-shadow: var(--shadow-100); gap: 0.1rem; &:focus-within { - outline: 1px solid var(--color-extra-blue-l40); + outline: 1px solid var(--color-purple-l40); } } @@ -71,7 +71,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon } .form-widget:hover .widget { - border-color: var(--color-extra-blue-l60); + border-color: var(--color-purple-l60); } .element { @@ -93,8 +93,8 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon font-size: inherit; border: none; outline: none; - color: var(--color-blue-scale-100); - background-color: var(--color-blue-scale-500); + color: var(--color-grey-100); + background-color: var(--color-grey-600); flex: 1; &:disabled { @@ -134,7 +134,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon &:disabled { cursor: not-allowed; - color: var(--color-blue-scale-200); + color: var(--color-grey-200); } } diff --git a/@xen-orchestra/lite/src/components/LoginError.vue b/@xen-orchestra/lite/src/components/LoginError.vue index a12c617b99..114cb3a283 100644 --- a/@xen-orchestra/lite/src/components/LoginError.vue +++ b/@xen-orchestra/lite/src/components/LoginError.vue @@ -25,7 +25,7 @@ defineProps<{ font-size: 1.3rem; line-height: 150%; margin: 0.5rem 0; - color: var(--color-red-vates-base); + color: var(--color-red-base); & svg { margin-right: 0.5rem; diff --git a/@xen-orchestra/lite/src/components/NoDataError.vue b/@xen-orchestra/lite/src/components/NoDataError.vue index 5a00cf8a07..aff452c170 100644 --- a/@xen-orchestra/lite/src/components/NoDataError.vue +++ b/@xen-orchestra/lite/src/components/NoDataError.vue @@ -25,6 +25,6 @@ font-weight: 500; font-size: 1.25em; line-height: 150%; - color: var(--color-red-vates-base); + color: var(--color-red-base); } diff --git a/@xen-orchestra/lite/src/components/NoResult.vue b/@xen-orchestra/lite/src/components/NoResult.vue index 6b1741b7c4..7b6c417c29 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-extra-blue-base); + color: var(--color-purple-base); } diff --git a/@xen-orchestra/lite/src/components/ObjectLink.vue b/@xen-orchestra/lite/src/components/ObjectLink.vue index c52bf4d290..7d003bccc8 100644 --- a/@xen-orchestra/lite/src/components/ObjectLink.vue +++ b/@xen-orchestra/lite/src/components/ObjectLink.vue @@ -85,7 +85,7 @@ const objectRoute = computed(() => { diff --git a/@xen-orchestra/lite/src/components/ObjectNotFoundWrapper.vue b/@xen-orchestra/lite/src/components/ObjectNotFoundWrapper.vue index 944947f1b7..63cb7cfdc4 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-extra-blue-base); + color: var(--color-purple-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 e26a5298b8..3ea43ca9e7 100644 --- a/@xen-orchestra/lite/src/components/PageUnderConstruction.vue +++ b/@xen-orchestra/lite/src/components/PageUnderConstruction.vue @@ -26,7 +26,7 @@ import UiStatusPanel from '@/components/ui/UiStatusPanel.vue' .contact { font-weight: 400; font-size: 20px; - color: var(--color-blue-scale-100); + color: var(--color-grey-100); & a { text-transform: lowercase; diff --git a/@xen-orchestra/lite/src/components/PoolOverrideWarning.vue b/@xen-orchestra/lite/src/components/PoolOverrideWarning.vue index 989eb895dc..10378465db 100644 --- a/@xen-orchestra/lite/src/components/PoolOverrideWarning.vue +++ b/@xen-orchestra/lite/src/components/PoolOverrideWarning.vue @@ -44,7 +44,7 @@ const masterSessionStorage = useSessionStorage('master', null) diff --git a/@xen-orchestra/lite/src/components/ProgressCircle.vue b/@xen-orchestra/lite/src/components/ProgressCircle.vue index 496172c57e..0e81c3e845 100644 --- a/@xen-orchestra/lite/src/components/ProgressCircle.vue +++ b/@xen-orchestra/lite/src/components/ProgressCircle.vue @@ -37,7 +37,7 @@ const progress = computed(() => { .progress-circle-fill { animation: progress 1s ease-out forwards; fill: none; - stroke: var(--color-green-infra-base); + stroke: var(--color-green-base); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: v-bind(progress), 100; @@ -46,13 +46,13 @@ const progress = computed(() => { .progress-circle-background { fill: none; stroke-width: 1.2; - stroke: var(--color-blue-scale-400); + stroke: var(--color-grey-500); } .progress-circle-text { font-size: 0.7rem; font-weight: bold; - fill: var(--color-green-infra-base); + fill: var(--color-green-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 2477ef1133..e825d634fc 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-blue-scale-400); + border-bottom: 1px solid var(--color-grey-500); background-color: var(--background-color-primary); gap: 0.8rem; } .icon { font-size: 2.5rem; - color: var(--color-extra-blue-base); + color: var(--color-purple-base); } .title { font-size: 2.5rem; - color: var(--color-blue-scale-100); + color: var(--color-grey-100); } diff --git a/@xen-orchestra/lite/src/components/UsageBar.vue b/@xen-orchestra/lite/src/components/UsageBar.vue index 11d75d210c..ee3d0f2790 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-extra-blue-d60); + --progress-bar-color: var(--color-purple-d60); } .progress-item:nth-child(2) { - --progress-bar-color: var(--color-extra-blue-d40); + --progress-bar-color: var(--color-purple-d40); } .progress-item:nth-child(3) { - --progress-bar-color: var(--color-extra-blue-d20); + --progress-bar-color: var(--color-purple-d20); } .progress-item { --progress-bar-height: 1.2rem; - --progress-bar-color: var(--color-extra-blue-l20); - --progress-bar-background-color: var(--color-blue-scale-400); + --progress-bar-color: var(--color-purple-l20); + --progress-bar-background-color: var(--color-grey-500); &.warning { - --progress-bar-color: var(--color-orange-world-base); + --progress-bar-color: var(--color-orange-base); } &.error { - --progress-bar-color: var(--color-red-vates-base); + --progress-bar-color: var(--color-red-base); } } diff --git a/@xen-orchestra/lite/src/components/component-story/StoryParamsTable.vue b/@xen-orchestra/lite/src/components/component-story/StoryParamsTable.vue index b29c03ef48..c2ad961d41 100644 --- a/@xen-orchestra/lite/src/components/component-story/StoryParamsTable.vue +++ b/@xen-orchestra/lite/src/components/component-story/StoryParamsTable.vue @@ -25,12 +25,12 @@ th, td { padding: 0.3rem 0.6rem; - border-bottom: 0.1rem solid var(--color-blue-scale-400); + border-bottom: 0.1rem solid var(--color-grey-500); vertical-align: center; } &:nth-child(odd) { - background-color: var(--background-color-extra-blue); + background-color: var(--background-color-purple-10); } } diff --git a/@xen-orchestra/lite/src/components/component-story/StoryPropParams.vue b/@xen-orchestra/lite/src/components/component-story/StoryPropParams.vue index 0d0ba19d37..ba58829f70 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-blue-scale-300); + color: var(--color-grey-300); border-radius: 0.4rem; gap: 0.6rem; &.active { font-weight: 600; cursor: default; - color: var(--color-green-infra-l20); + color: var(--color-green-l20); } } } @@ -157,7 +157,7 @@ const openRawValueModal = (code: string) => .help { font-style: italic; - color: var(--color-blue-scale-200); + color: var(--color-grey-200); } .default-value { @@ -168,12 +168,12 @@ const openRawValueModal = (code: string) => font-weight: 600; font-style: normal; opacity: 1; - color: var(--color-green-infra-base); + color: var(--color-green-base); } } .v-model-indicator, .context-indicator { - color: var(--color-green-infra-base); + color: var(--color-green-base); } diff --git a/@xen-orchestra/lite/src/components/form/FormCheckbox.vue b/@xen-orchestra/lite/src/components/form/FormCheckbox.vue index bb926cff9d..a11c7f09eb 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-blue-scale-300); + color: var(--color-grey-300); } } @@ -114,7 +114,7 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle' .fake-checkbox { width: 2.5em; - --background-color: var(--color-blue-scale-400); + --background-color: var(--color-grey-500); } .icon { @@ -128,7 +128,7 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle' .input.indeterminate + .fake-checkbox > .icon { opacity: 1; - color: var(--color-blue-scale-300); + color: var(--color-grey-300); 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-blue-scale-500); + color: var(--color-grey-600); 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-blue-scale-400); + --border-color: var(--color-grey-500); } .input:disabled { & + .fake-checkbox { cursor: not-allowed; --background-color: var(--background-color-secondary); - --border-color: var(--color-blue-scale-400); + --border-color: var(--color-grey-500); } &:checked + .fake-checkbox { --border-color: transparent; - --background-color: var(--color-extra-blue-l60); + --background-color: var(--color-purple-l60); } } .input:not(:disabled) { &:hover + .fake-checkbox, &:focus + .fake-checkbox { - --border-color: var(--color-extra-blue-l40); + --border-color: var(--color-purple-l40); } &:active + .fake-checkbox { - --border-color: var(--color-extra-blue-l20); + --border-color: var(--color-purple-l20); } &:checked + .fake-checkbox { --border-color: transparent; - --background-color: var(--color-extra-blue-base); + --background-color: var(--color-purple-base); } &:checked:hover + .fake-checkbox, &:checked:focus + .fake-checkbox { - --background-color: var(--color-extra-blue-d20); + --background-color: var(--color-purple-d20); } &:checked:active + .fake-checkbox { - --background-color: var(--color-extra-blue-d40); + --background-color: var(--color-purple-d40); } } diff --git a/@xen-orchestra/lite/src/components/form/FormInput.vue b/@xen-orchestra/lite/src/components/form/FormInput.vue index 10d0663cf3..cbcf6026d4 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-blue-scale-100); + --text-color: var(--color-grey-100); &.empty { - --text-color: var(--color-blue-scale-300); + --text-color: var(--color-grey-300); } &.disabled { - --text-color: var(--color-blue-scale-400); + --text-color: var(--color-grey-500); } } @@ -189,7 +189,7 @@ defineExpose({ } --background-color: var(--background-color-primary); - --border-color: var(--color-blue-scale-400); + --border-color: var(--color-grey-500); &:disabled { cursor: not-allowed; @@ -199,63 +199,63 @@ defineExpose({ &:not(:disabled) { &.info { &:hover { - --border-color: var(--color-extra-blue-l60); + --border-color: var(--color-purple-l60); } &:active { - --border-color: var(--color-extra-blue-l40); + --border-color: var(--color-purple-l40); } &:focus { - --border-color: var(--color-extra-blue-base); + --border-color: var(--color-purple-base); } } &.success { - --border-color: var(--color-green-infra-base); + --border-color: var(--color-green-base); &:hover { - --border-color: var(--color-green-infra-l60); + --border-color: var(--color-green-l60); } &:active { - --border-color: var(--color-green-infra-l40); + --border-color: var(--color-green-l40); } &:focus { - --border-color: var(--color-green-infra-base); + --border-color: var(--color-green-base); } } &.warning { - --border-color: var(--color-orange-world-base); + --border-color: var(--color-orange-base); &:hover { - --border-color: var(--color-orange-world-l60); + --border-color: var(--color-orange-l60); } &:active { - --border-color: var(--color-orange-world-l40); + --border-color: var(--color-orange-l40); } &:focus { - --border-color: var(--color-orange-world-base); + --border-color: var(--color-orange-base); } } &.error { - --border-color: var(--color-red-vates-base); + --border-color: var(--color-red-base); &:hover { - --border-color: var(--color-red-vates-l60); + --border-color: var(--color-red-l60); } &:active { - --border-color: var(--color-red-vates-l40); + --border-color: var(--color-red-l40); } &:focus-within { - --border-color: var(--color-red-vates-base); + --border-color: var(--color-red-base); } } } diff --git a/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue b/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue index eb45351276..1672dd5be4 100644 --- a/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue +++ b/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue @@ -96,7 +96,7 @@ useContext(DisabledContext, () => props.disabled) &.light { font-size: 1.6rem; - color: var(--color-blue-scale-300); + color: var(--color-grey-300); font-weight: 400; } @@ -104,7 +104,7 @@ useContext(DisabledContext, () => props.disabled) font-size: 1.4rem; text-transform: uppercase; font-weight: 700; - color: var(--color-blue-scale-100); + color: var(--color-grey-100); } } @@ -126,7 +126,7 @@ useContext(DisabledContext, () => props.disabled) align-items: center; gap: 0.5rem; text-decoration: none; - color: var(--color-extra-blue-base); + color: var(--color-purple-base); & > span { text-decoration: underline; @@ -134,14 +134,14 @@ useContext(DisabledContext, () => props.disabled) } .warning { - color: var(--color-orange-world-base); + color: var(--color-orange-base); } .error { - color: var(--color-red-vates-base); + color: var(--color-red-base); } .help { - color: var(--color-blue-scale-300); + color: var(--color-grey-300); } diff --git a/@xen-orchestra/lite/src/components/form/FormSection.vue b/@xen-orchestra/lite/src/components/form/FormSection.vue index ca4a641a2f..b70587644d 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/InfraHostItem.vue b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue index 1cf9e2d38e..4ffb1e9c14 100644 --- a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue +++ b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue @@ -65,7 +65,7 @@ const vmCount = computed(() => recordsByHostRef.value.get(props.hostOpaqueRef)?. } .master-icon { - color: var(--color-orange-world-base); + color: var(--color-orange-base); } .vm-count { @@ -76,9 +76,9 @@ const vmCount = computed(() => recordsByHostRef.value.get(props.hostOpaqueRef)?. justify-content: center; width: var(--size); height: var(--size); - color: var(--color-blue-scale-500); + color: var(--color-grey-600); border-radius: calc(var(--size) / 2); - background-color: var(--color-extra-blue-base); + background-color: var(--color-purple-base); --size: 2.3rem; } diff --git a/@xen-orchestra/lite/src/components/infra/InfraHostList.vue b/@xen-orchestra/lite/src/components/infra/InfraHostList.vue index 02693acfa6..c30b51cf7b 100644 --- a/@xen-orchestra/lite/src/components/infra/InfraHostList.vue +++ b/@xen-orchestra/lite/src/components/infra/InfraHostList.vue @@ -23,6 +23,6 @@ const { records: hosts, isReady, hasError } = useHostCollection() font-weight: 700; font-size: 16px; line-height: 150%; - color: var(--color-red-vates-base); + color: var(--color-red-base); } diff --git a/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue b/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue index 051a618ce5..6da86638d4 100644 --- a/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue +++ b/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue @@ -40,27 +40,27 @@ const hasTooltip = computed(() => hasEllipsis(textElement.value)) .infra-item-label { display: flex; align-items: stretch; - color: var(--color-blue-scale-100); + color: var(--color-grey-100); border-radius: 0.8rem; background-color: var(--background-color-primary); &:hover { - color: var(--color-blue-scale-100); + color: var(--color-grey-100); background-color: var(--background-color-secondary); } &:active, &.active { - color: var(--color-extra-blue-base); + color: var(--color-purple-base); background-color: var(--background-color-primary); } &.exact-active { - color: var(--color-blue-scale-100); - background-color: var(--background-color-extra-blue); + color: var(--color-grey-100); + background-color: var(--background-color-purple-10); .icon { - color: var(--color-extra-blue-base); + color: var(--color-purple-base); } } } diff --git a/@xen-orchestra/lite/src/components/infra/InfraLoadingItem.vue b/@xen-orchestra/lite/src/components/infra/InfraLoadingItem.vue index 394a848e85..6dd489d52d 100644 --- a/@xen-orchestra/lite/src/components/infra/InfraLoadingItem.vue +++ b/@xen-orchestra/lite/src/components/infra/InfraLoadingItem.vue @@ -27,7 +27,7 @@ defineProps<{ } .icon { - color: var(--color-blue-scale-100); + color: var(--color-grey-100); } .link-placeholder { @@ -41,7 +41,7 @@ defineProps<{ .loader { flex: 1; animation: pulse alternate 1s infinite; - background-color: var(--background-color-extra-blue); + background-color: var(--background-color-purple-10); } @keyframes pulse { diff --git a/@xen-orchestra/lite/src/components/infra/InfraPoolList.vue b/@xen-orchestra/lite/src/components/infra/InfraPoolList.vue index cea1a0426d..3c91aea4bd 100644 --- a/@xen-orchestra/lite/src/components/infra/InfraPoolList.vue +++ b/@xen-orchestra/lite/src/components/infra/InfraPoolList.vue @@ -43,6 +43,6 @@ const { isReady, hasError, pool } = usePoolCollection() font-weight: 700; font-size: 16px; line-height: 150%; - color: var(--color-red-vates-base); + color: var(--color-red-base); } diff --git a/@xen-orchestra/lite/src/components/infra/InfraVmItem.vue b/@xen-orchestra/lite/src/components/infra/InfraVmItem.vue index 3a37280a4c..f55e903e47 100644 --- a/@xen-orchestra/lite/src/components/infra/InfraVmItem.vue +++ b/@xen-orchestra/lite/src/components/infra/InfraVmItem.vue @@ -40,18 +40,18 @@ const { stop } = useIntersectionObserver(rootElement, ([entry]) => { diff --git a/@xen-orchestra/lite/src/components/infra/InfraVmList.vue b/@xen-orchestra/lite/src/components/infra/InfraVmList.vue index 809d24e29a..4f41dde12b 100644 --- a/@xen-orchestra/lite/src/components/infra/InfraVmList.vue +++ b/@xen-orchestra/lite/src/components/infra/InfraVmList.vue @@ -31,6 +31,6 @@ const vms = computed(() => recordsByHostRef.value.get(props.hostOpaqueRef ?? ('O font-weight: 700; font-size: 16px; line-height: 150%; - color: var(--color-red-vates-base); + color: var(--color-red-base); } diff --git a/@xen-orchestra/lite/src/components/menu/AppMenu.vue b/@xen-orchestra/lite/src/components/menu/AppMenu.vue index 0c99557cb7..d22d13829e 100644 --- a/@xen-orchestra/lite/src/components/menu/AppMenu.vue +++ b/@xen-orchestra/lite/src/components/menu/AppMenu.vue @@ -87,9 +87,9 @@ const open = (event: MouseEvent) => { flex-direction: column; padding: 0.5rem; cursor: default; - color: var(--color-blue-scale-200); + color: var(--color-grey-200); border-radius: 0.8rem; - background-color: var(--color-blue-scale-500); + background-color: var(--color-grey-600); gap: 0.5rem; &.horizontal { diff --git a/@xen-orchestra/lite/src/components/menu/MenuItem.vue b/@xen-orchestra/lite/src/components/menu/MenuItem.vue index 2e7aebef5c..8af6ec2367 100644 --- a/@xen-orchestra/lite/src/components/menu/MenuItem.vue +++ b/@xen-orchestra/lite/src/components/menu/MenuItem.vue @@ -72,7 +72,7 @@ const handleClick = async () => { diff --git a/@xen-orchestra/lite/src/components/menu/MenuTrigger.vue b/@xen-orchestra/lite/src/components/menu/MenuTrigger.vue index dcf7e1c781..21c3672929 100644 --- a/@xen-orchestra/lite/src/components/menu/MenuTrigger.vue +++ b/@xen-orchestra/lite/src/components/menu/MenuTrigger.vue @@ -29,10 +29,10 @@ defineProps<{ white-space: nowrap; border-radius: 0.8rem; gap: 1rem; - background-color: var(--color-blue-scale-500); + background-color: var(--color-grey-600); &.disabled { - color: var(--color-blue-scale-400); + color: var(--color-grey-500); } &:not(.disabled) { @@ -44,8 +44,8 @@ defineProps<{ &:active, &.active { - color: var(--color-extra-blue-base); - background-color: var(--background-color-extra-blue); + color: var(--color-purple-base); + background-color: var(--background-color-purple-10); } } } diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue index 2de94fb922..e9f94e0089 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 } = useAlarmCollect margin-bottom: 2rem; } .no-alarm & { - color: var(--color-green-infra-base); + color: var(--color-green-base); } } .table-container { diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisioning.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisioning.vue index 2eaf63b468..e6ab8b1294 100644 --- a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisioning.vue +++ b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisioning.vue @@ -83,12 +83,12 @@ const hasError = computed(() => hostStoreHasError.value || vmStoreHasError.value .progress-item { margin-top: 2.6rem; --progress-bar-height: 1.2rem; - --progress-bar-color: var(--color-extra-blue-base); - --progress-bar-background-color: var(--color-blue-scale-400); + --progress-bar-color: var(--color-purple-base); + --progress-bar-background-color: var(--color-grey-500); &.warning { - --progress-bar-color: var(--color-orange-world-base); - --footer-value-color: var(--color-orange-world-base); + --progress-bar-color: var(--color-orange-base); + --footer-value-color: var(--color-orange-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 a7817560b4..428b8ac00a 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/UiButton.vue b/@xen-orchestra/lite/src/components/ui/UiButton.vue index c684ef0f48..c1da7f7be5 100644 --- a/@xen-orchestra/lite/src/components/ui/UiButton.vue +++ b/@xen-orchestra/lite/src/components/ui/UiButton.vue @@ -86,27 +86,27 @@ const className = computed(() => { } &.color-info { - --button-accent-color: var(--color-extra-blue-base); - --button-accent-color-hover: var(--color-extra-blue-d20); - --button-accent-color-active: var(--color-extra-blue-d40); + --button-accent-color: var(--color-purple-base); + --button-accent-color-hover: var(--color-purple-d20); + --button-accent-color-active: var(--color-purple-d40); } &.color-success { - --button-accent-color: var(--color-green-infra-base); - --button-accent-color-hover: var(--color-green-infra-d20); - --button-accent-color-active: var(--color-green-infra-d40); + --button-accent-color: var(--color-green-base); + --button-accent-color-hover: var(--color-green-d20); + --button-accent-color-active: var(--color-green-d40); } &.color-warning { - --button-accent-color: var(--color-orange-world-base); - --button-accent-color-hover: var(--color-orange-world-d20); - --button-accent-color-active: var(--color-orange-world-d40); + --button-accent-color: var(--color-orange-base); + --button-accent-color-hover: var(--color-orange-d20); + --button-accent-color-active: var(--color-orange-d40); } &.color-error { - --button-accent-color: var(--color-red-vates-base); - --button-accent-color-hover: var(--color-red-vates-d20); - --button-accent-color-active: var(--color-red-vates-d40); + --button-accent-color: var(--color-red-base); + --button-accent-color-hover: var(--color-red-d20); + --button-accent-color-active: var(--color-red-d40); } &:hover { @@ -119,7 +119,7 @@ const className = computed(() => { --button-accent-color: var(--button-accent-color-active); } - --button-color: var(--color-blue-scale-500); + --button-color: var(--color-grey-600); --button-border-color: transparent; --button-background-color: var(--button-accent-color); @@ -141,7 +141,7 @@ const className = computed(() => { &.disabled { cursor: not-allowed; - --button-color: var(--color-blue-scale-400); + --button-color: var(--color-grey-500); --button-border-color: transparent; --button-background-color: var(--background-color-secondary); } diff --git a/@xen-orchestra/lite/src/components/ui/UiCardFooter.vue b/@xen-orchestra/lite/src/components/ui/UiCardFooter.vue index ee8462fa44..54f800a055 100644 --- a/@xen-orchestra/lite/src/components/ui/UiCardFooter.vue +++ b/@xen-orchestra/lite/src/components/ui/UiCardFooter.vue @@ -13,7 +13,7 @@ diff --git a/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue b/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue index 62b4d27782..1a2c990c02 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-blue-scale-100); + --section-title-left-color: var(--color-grey-100); --section-title-left-weight: 500; --section-title-right-size: 1.6rem; - --section-title-right-color: var(--color-extra-blue-base); + --section-title-right-color: var(--color-purple-base); --section-title-right-weight: 700; &.h6 { margin-bottom: 1rem; --section-title-left-size: 1.5rem; - --section-title-left-color: var(--color-blue-scale-300); + --section-title-left-color: var(--color-grey-300); --section-title-left-weight: 400; } &.h5 { margin-top: 2rem; margin-bottom: 1rem; - border-bottom: 1px solid var(--color-extra-blue-base); + border-bottom: 1px solid var(--color-purple-base); --section-title-left-size: 1.6rem; - --section-title-left-color: var(--color-extra-blue-base); + --section-title-left-color: var(--color-purple-base); --section-title-left-weight: 700; --section-title-right-size: 1.4rem; - --section-title-right-color: var(--color-extra-blue-base); + --section-title-right-color: var(--color-purple-base); --section-title-right-weight: 400; } } diff --git a/@xen-orchestra/lite/src/components/ui/UiCounter.vue b/@xen-orchestra/lite/src/components/ui/UiCounter.vue index 5235ab9bfa..18bd5645b3 100644 --- a/@xen-orchestra/lite/src/components/ui/UiCounter.vue +++ b/@xen-orchestra/lite/src/components/ui/UiCounter.vue @@ -23,9 +23,9 @@ defineProps<{ justify-content: center; width: var(--size); height: var(--size); - color: var(--color-blue-scale-500); + color: var(--color-grey-600); border-radius: calc(var(--size) / 2); - background-color: var(--color-blue-scale-300); + background-color: var(--color-grey-300); --size: 1.75em; .overflow { @@ -33,19 +33,19 @@ defineProps<{ } &.info { - background-color: var(--color-extra-blue-base); + background-color: var(--color-purple-base); } &.success { - background-color: var(--color-green-infra-base); + background-color: var(--color-green-base); } &.warning { - background-color: var(--color-orange-world-base); + background-color: var(--color-orange-base); } &.error { - background-color: var(--color-red-vates-base); + background-color: var(--color-red-base); } } diff --git a/@xen-orchestra/lite/src/components/ui/UiFilter.vue b/@xen-orchestra/lite/src/components/ui/UiFilter.vue index 524fa1c6fb..4bcaf73d34 100644 --- a/@xen-orchestra/lite/src/components/ui/UiFilter.vue +++ b/@xen-orchestra/lite/src/components/ui/UiFilter.vue @@ -27,11 +27,11 @@ const emit = defineEmits<{ align-items: stretch; justify-content: center; height: 3.4rem; - color: var(--color-extra-blue-base); + color: var(--color-purple-base); border-radius: 1.7rem; - background-color: var(--background-color-extra-blue); + background-color: var(--background-color-purple-10); gap: 1rem; - border: 1px solid var(--color-extra-blue-base); + border: 1px solid var(--color-purple-base); } .label, @@ -55,10 +55,10 @@ const emit = defineEmits<{ border-radius: 1.4rem; width: 2.8rem; margin: 0.2rem; - background-color: var(--color-extra-blue-l40); + background-color: var(--color-purple-l40); &:hover { - background-color: var(--color-red-vates-l20); + background-color: var(--color-red-l20); } } diff --git a/@xen-orchestra/lite/src/components/ui/UiKeyValueRow.vue b/@xen-orchestra/lite/src/components/ui/UiKeyValueRow.vue index ee7b64bb8f..be8c5e8dc6 100644 --- a/@xen-orchestra/lite/src/components/ui/UiKeyValueRow.vue +++ b/@xen-orchestra/lite/src/components/ui/UiKeyValueRow.vue @@ -12,8 +12,6 @@ diff --git a/@xen-orchestra/lite/src/components/ui/UiStatusPanel.vue b/@xen-orchestra/lite/src/components/ui/UiStatusPanel.vue index a7aa62695b..0aebf67e2e 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-extra-blue-base); + color: var(--color-purple-base); } .title { diff --git a/@xen-orchestra/lite/src/components/ui/UiTab.vue b/@xen-orchestra/lite/src/components/ui/UiTab.vue index a72792d058..48a9e96e8c 100644 --- a/@xen-orchestra/lite/src/components/ui/UiTab.vue +++ b/@xen-orchestra/lite/src/components/ui/UiTab.vue @@ -29,12 +29,12 @@ const isTabBarDisabled = useContext(DisabledContext, () => props.disabled) padding: 0 1.5rem; text-decoration: none; text-transform: uppercase; - color: var(--color-blue-scale-100); + color: var(--color-grey-100); border-bottom: 2px solid transparent; &.disabled { pointer-events: none; - color: var(--color-blue-scale-400); + color: var(--color-grey-500); } &:not(.disabled) { @@ -42,19 +42,19 @@ const isTabBarDisabled = useContext(DisabledContext, () => props.disabled) &:hover { cursor: pointer; - border-bottom-color: var(--color-extra-blue-base); + border-bottom-color: var(--color-purple-base); background-color: var(--background-color-secondary); } &:active { - color: var(--color-extra-blue-base); - border-bottom-color: var(--color-extra-blue-base); + color: var(--color-purple-base); + border-bottom-color: var(--color-purple-base); background-color: var(--background-color-secondary); } &.active { - color: var(--color-extra-blue-base); - border-bottom-color: var(--color-extra-blue-base); + color: var(--color-purple-base); + border-bottom-color: var(--color-purple-base); background-color: var(--background-color-primary); } } diff --git a/@xen-orchestra/lite/src/components/ui/UiTabBar.vue b/@xen-orchestra/lite/src/components/ui/UiTabBar.vue index 45f9ac8f13..e7257b6588 100644 --- a/@xen-orchestra/lite/src/components/ui/UiTabBar.vue +++ b/@xen-orchestra/lite/src/components/ui/UiTabBar.vue @@ -23,7 +23,7 @@ useContext(DisabledContext, () => props.disabled) display: flex; align-items: stretch; height: 5rem; - border-bottom: 1px solid var(--color-blue-scale-400); + border-bottom: 1px solid var(--color-grey-500); background-color: var(--background-color-primary); max-width: 100%; overflow: auto; diff --git a/@xen-orchestra/lite/src/components/ui/UiTable.vue b/@xen-orchestra/lite/src/components/ui/UiTable.vue index 02b7bf19b3..c167226329 100644 --- a/@xen-orchestra/lite/src/components/ui/UiTable.vue +++ b/@xen-orchestra/lite/src/components/ui/UiTable.vue @@ -19,12 +19,12 @@ defineProps<{ font-weight: 400; font-size: 1.4rem; line-height: 2.4rem; - color: var(--color-blue-scale-200); + color: var(--color-grey-200); :deep(th), :deep(td) { padding: 1rem; - border-top: 1px solid var(--color-blue-scale-400); + border-top: 1px solid var(--color-grey-500); text-align: left; } @@ -35,7 +35,7 @@ defineProps<{ :deep(thead) { th, td { - color: var(--color-extra-blue-base); + color: var(--color-purple-base); font-size: 1.4rem; font-weight: 400; text-transform: uppercase; @@ -45,7 +45,7 @@ defineProps<{ &.vertical-border { :deep(th), :deep(td) { - border-right: 1px solid var(--color-blue-scale-400); + border-right: 1px solid var(--color-grey-500); &:last-child { border-right: none; @@ -55,6 +55,6 @@ defineProps<{ } .error { - background-color: var(--background-color-red-vates); + background-color: var(--background-color-red-10); } diff --git a/@xen-orchestra/lite/src/components/ui/UiTitle.vue b/@xen-orchestra/lite/src/components/ui/UiTitle.vue index d21bce8967..7f0c505b66 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-blue-scale-100); + color: var(--color-grey-100); &.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 0b8aa4fb63..2ba171516f 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-vates-base); + --icon-color: var(--color-red-base); } &.warning { - --icon-color: var(--color-orange-world-base); + --icon-color: var(--color-orange-base); } &.info { - --icon-color: var(--color-extra-blue-base); + --icon-color: var(--color-purple-base); } &.success { - --icon-color: var(--color-green-infra-base); + --icon-color: var(--color-green-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 d8e810db7c..a4a58cc245 100644 --- a/@xen-orchestra/lite/src/components/ui/modals/layouts/ConfirmModalLayout.vue +++ b/@xen-orchestra/lite/src/components/ui/modals/layouts/ConfirmModalLayout.vue @@ -72,6 +72,6 @@ defineSlots<{ .subtitle { font-size: 1.6rem; font-weight: 400; - color: var(--color-blue-scale-200); + color: var(--color-grey-200); } diff --git a/@xen-orchestra/lite/src/components/ui/progress/UiProgressBar.vue b/@xen-orchestra/lite/src/components/ui/progress/UiProgressBar.vue index 2bd73ae6cd..97bd7678f9 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 progressWithUnit = 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-extra-blue)); + background-color: var(--progress-bar-background-color, var(--background-color-purple-10)); &.color-info { - --progress-bar-color: var(--color-extra-blue-base); + --progress-bar-color: var(--color-purple-base); } &.color-success { - --progress-bar-color: var(--color-green-infra-base); + --progress-bar-color: var(--color-green-base); } &.color-warning { - --progress-bar-color: var(--color-orange-world-base); + --progress-bar-color: var(--color-orange-base); } &.color-error { - --progress-bar-color: var(--color-red-vates-base); + --progress-bar-color: var(--color-red-base); } } diff --git a/@xen-orchestra/lite/src/components/ui/progress/UiProgressScale.vue b/@xen-orchestra/lite/src/components/ui/progress/UiProgressScale.vue index 05aa124dd6..3883d7e4e2 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 ea82ab21f7..78186caa82 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 38bc2b8e0e..b70954a14b 100644 --- a/@xen-orchestra/lite/src/composables/chart-theme.composable.ts +++ b/@xen-orchestra/lite/src/composables/chart-theme.composable.ts @@ -10,10 +10,10 @@ export const useChartTheme = () => { const getColors = () => ({ background: style.getPropertyValue('--background-color-primary'), - text: style.getPropertyValue('--color-blue-scale-300'), - splitLine: style.getPropertyValue('--color-blue-scale-400'), - primary: style.getPropertyValue('--color-extra-blue-base'), - secondary: style.getPropertyValue('--color-orange-world-base'), + text: style.getPropertyValue('--color-grey-300'), + splitLine: style.getPropertyValue('--color-grey-500'), + primary: style.getPropertyValue('--color-purple-base'), + secondary: style.getPropertyValue('--color-orange-base'), }) const colors = ref(getColors()) diff --git a/@xen-orchestra/lite/src/main.ts b/@xen-orchestra/lite/src/main.ts index 777105d19e..578a171ac4 100644 --- a/@xen-orchestra/lite/src/main.ts +++ b/@xen-orchestra/lite/src/main.ts @@ -3,6 +3,7 @@ import { createApp } from 'vue' import App from '@/App.vue' import i18n from '@/i18n' import router from '@/router' +import '@xen-orchestra/web-core/assets/css/base.pcss' const app = createApp(App) diff --git a/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue b/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue index 8246642d61..ac90a4a8ba 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-extra-blue-base); + color: var(--color-purple-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 807961d725..8617228295 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-extra-blue-base); + color: var(--color-purple-base); font-size: 96px; font-weight: 900; letter-spacing: 1em; @@ -40,7 +40,7 @@ img { } .text { - color: var(--color-extra-blue-base); + color: var(--color-purple-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 004185a5d4..b6ea52e82e 100644 --- a/@xen-orchestra/lite/src/views/settings/SettingsView.vue +++ b/@xen-orchestra/lite/src/views/settings/SettingsView.vue @@ -145,8 +145,6 @@ const { colorMode } = storeToRefs(useUiStore()) diff --git a/@xen-orchestra/web-core/lib/assets/css/.globals.pcss b/@xen-orchestra/web-core/lib/assets/css/.globals.pcss new file mode 100644 index 0000000000..f2e4bfe04b --- /dev/null +++ b/@xen-orchestra/web-core/lib/assets/css/.globals.pcss @@ -0,0 +1,5 @@ +/* This file is meant to provide PostCSS utilities that will be globally available */ +/* https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-global-data */ + +@custom-media --mobile (max-width: 1023px); +@custom-media --desktop (min-width: 1024px); diff --git a/@xen-orchestra/web-core/lib/assets/css/_colors.pcss b/@xen-orchestra/web-core/lib/assets/css/_colors.pcss new file mode 100644 index 0000000000..ca8e8fa852 --- /dev/null +++ b/@xen-orchestra/web-core/lib/assets/css/_colors.pcss @@ -0,0 +1,121 @@ +:root { + --color-grey-000: #000000; + --color-grey-100: #1a1b38; + --color-grey-200: #595a6f; + --color-grey-300: #9899a5; + --color-grey-400: #bfbfc6; + --color-grey-500: #e5e5e7; + --color-grey-600: #ffffff; + + --background-color-primary: #ffffff; + --background-color-secondary: #f6f6f7; + + --color-purple-base: #8f84ff; + --color-purple-d20: color(#8f84ff blend(black 20%)); + --color-purple-d40: color(#8f84ff blend(black 40%)); + --color-purple-d60: color(#8f84ff blend(black 60%)); + --color-purple-l20: color(#8f84ff blend(white 20%)); + --color-purple-l40: color(#8f84ff blend(white 40%)); + --color-purple-l60: color(#8f84ff blend(white 60%)); + --background-color-purple-10: color(white blend(#8f84ff 10%)); + --background-color-purple-20: color(white blend(#8f84ff 20%)); + --background-color-purple-30: color(white blend(#8f84ff 30%)); + --background-color-purple-60: color(white blend(#8f84ff 60%)); + + --color-green-base: #2ca878; + --color-green-d20: color(#2ca878 blend(black 20%)); + --color-green-d40: color(#2ca878 blend(black 40%)); + --color-green-d60: color(#2ca878 blend(black 60%)); + --color-green-l20: color(#2ca878 blend(white 20%)); + --color-green-l40: color(#2ca878 blend(white 40%)); + --color-green-l60: color(#2ca878 blend(white 60%)); + --background-color-green-10: color(white blend(#2ca878 10%)); + --background-color-green-20: color(white blend(#2ca878 20%)); + --background-color-green-30: color(white blend(#2ca878 30%)); + --background-color-green-60: color(white blend(#2ca878 60%)); + + --color-orange-base: #ef7f18; + --color-orange-d20: color(#ef7f18 blend(black 20%)); + --color-orange-d40: color(#ef7f18 blend(black 40%)); + --color-orange-d60: color(#ef7f18 blend(black 60%)); + --color-orange-l20: color(#ef7f18 blend(white 20%)); + --color-orange-l40: color(#ef7f18 blend(white 40%)); + --color-orange-l60: color(#ef7f18 blend(white 60%)); + --background-color-orange-10: color(white blend(#ef7f18 10%)); + --background-color-orange-20: color(white blend(#ef7f18 20%)); + --background-color-orange-30: color(white blend(#ef7f18 30%)); + --background-color-orange-60: color(white blend(#ef7f18 60%)); + + --color-red-base: #be1621; + --color-red-d20: color(#be1621 blend(black 20%)); + --color-red-d40: color(#be1621 blend(black 40%)); + --color-red-d60: color(#be1621 blend(black 60%)); + --color-red-l20: color(#be1621 blend(white 20%)); + --color-red-l40: color(#be1621 blend(white 40%)); + --color-red-l60: color(#be1621 blend(white 60%)); + --background-color-red-10: color(white blend(#be1621 10%)); + --background-color-red-20: color(white blend(#be1621 20%)); + --background-color-red-30: color(white blend(#be1621 30%)); + --background-color-red-60: color(white blend(#be1621 60%)); +} + +:root.dark { + --color-grey-000: #ffffff; + --color-grey-100: #e5e5e7; + --color-grey-200: #bfbfc6; + --color-grey-300: #9899a5; + --color-grey-400: #595a6f; + --color-grey-500: #3a3b54; + --color-grey-600: #000000; + + --background-color-primary: #14141e; + --background-color-secondary: #17182b; + + --color-purple-base: #8f84ff; + --color-purple-d20: color(#8f84ff blend(white 20%)); + --color-purple-d40: color(#8f84ff blend(white 40%)); + --color-purple-d60: color(#8f84ff blend(white 60%)); + --color-purple-l20: color(#8f84ff blend(black 20%)); + --color-purple-l40: color(#8f84ff blend(black 40%)); + --color-purple-l60: color(#8f84ff blend(black 60%)); + --background-color-purple-10: color(#17182b blend(#8f84ff 25%)); + --background-color-purple-20: color(#17182b blend(#8f84ff 35%)); + --background-color-purple-30: color(#17182b blend(#8f84ff 45%)); + --background-color-purple-60: color(#17182b blend(#8f84ff 85%)); + + --color-green-base: #2ca878; + --color-green-d20: color(#2ca878 blend(white 20%)); + --color-green-d40: color(#2ca878 blend(white 40%)); + --color-green-d60: color(#2ca878 blend(white 60%)); + --color-green-l20: color(#2ca878 blend(black 20%)); + --color-green-l40: color(#2ca878 blend(black 40%)); + --color-green-l60: color(#2ca878 blend(black 60%)); + --background-color-green-10: color(#17182b blend(#2ca878 25%)); + --background-color-green-20: color(#17182b blend(#2ca878 35%)); + --background-color-green-30: color(#17182b blend(#2ca878 45%)); + --background-color-green-60: color(#17182b blend(#2ca878 85%)); + + --color-orange-base: #ef7f18; + --color-orange-d20: color(#ef7f18 blend(white 20%)); + --color-orange-d40: color(#ef7f18 blend(white 40%)); + --color-orange-d60: color(#ef7f18 blend(white 60%)); + --color-orange-l20: color(#ef7f18 blend(black 20%)); + --color-orange-l40: color(#ef7f18 blend(black 40%)); + --color-orange-l60: color(#ef7f18 blend(black 60%)); + --background-color-orange-10: color(#17182b blend(#ef7f18 25%)); + --background-color-orange-20: color(#17182b blend(#ef7f18 35%)); + --background-color-orange-30: color(#17182b blend(#ef7f18 45%)); + --background-color-orange-60: color(#17182b blend(#ef7f18 85%)); + + --color-red-base: #be1621; + --color-red-d20: color(#be1621 blend(white 20%)); + --color-red-d40: color(#be1621 blend(white 40%)); + --color-red-d60: color(#be1621 blend(white 60%)); + --color-red-l20: color(#be1621 blend(black 20%)); + --color-red-l40: color(#be1621 blend(black 40%)); + --color-red-l60: color(#be1621 blend(black 60%)); + --background-color-red-10: color(#17182b blend(#be1621 25%)); + --background-color-red-20: color(#17182b blend(#be1621 35%)); + --background-color-red-30: color(#17182b blend(#be1621 45%)); + --background-color-red-60: color(#17182b blend(#be1621 85%)); +} diff --git a/@xen-orchestra/web-core/lib/assets/css/_context.pcss b/@xen-orchestra/web-core/lib/assets/css/_context.pcss new file mode 100644 index 0000000000..cb6810dd88 --- /dev/null +++ b/@xen-orchestra/web-core/lib/assets/css/_context.pcss @@ -0,0 +1,47 @@ +.context-color-success { + color: var(--color-green-base); +} + +.context-color-error { + color: var(--color-red-base); +} + +.context-color-warning { + color: var(--color-orange-base); +} + +.context-color-info { + color: var(--color-purple-base); +} + +.context-background-color-success { + background-color: var(--background-color-green-10); +} + +.context-background-color-error { + background-color: var(--background-color-red-10); +} + +.context-background-color-warning { + background-color: var(--background-color-orange-10); +} + +.context-background-color-info { + background-color: var(--background-color-purple-10); +} + +.context-border-color-success { + border-color: var(--color-green-base); +} + +.context-border-color-error { + border-color: var(--color-red-base); +} + +.context-border-color-warning { + border-color: var(--color-orange-base); +} + +.context-border-color-info { + border-color: var(--color-purple-base); +} diff --git a/@xen-orchestra/web-core/lib/assets/css/_fonts.pcss b/@xen-orchestra/web-core/lib/assets/css/_fonts.pcss new file mode 100644 index 0000000000..3b43db10f9 --- /dev/null +++ b/@xen-orchestra/web-core/lib/assets/css/_fonts.pcss @@ -0,0 +1,6 @@ +@import '@fontsource/poppins/400.css'; +@import '@fontsource/poppins/500.css'; +@import '@fontsource/poppins/600.css'; +@import '@fontsource/poppins/700.css'; +@import '@fontsource/poppins/900.css'; +@import '@fontsource/poppins/400-italic.css'; diff --git a/@xen-orchestra/lite/src/assets/reset.css b/@xen-orchestra/web-core/lib/assets/css/_reset.pcss similarity index 91% rename from @xen-orchestra/lite/src/assets/reset.css rename to @xen-orchestra/web-core/lib/assets/css/_reset.pcss index 2d706f7814..2370eb78aa 100644 --- a/@xen-orchestra/lite/src/assets/reset.css +++ b/@xen-orchestra/web-core/lib/assets/css/_reset.pcss @@ -3,6 +3,10 @@ html { font-size: 10px; } +body { + font-size: 1.6rem; +} + *, *::before, *::after { diff --git a/@xen-orchestra/web-core/lib/assets/css/_shadows.pcss b/@xen-orchestra/web-core/lib/assets/css/_shadows.pcss new file mode 100644 index 0000000000..08ee9c392b --- /dev/null +++ b/@xen-orchestra/web-core/lib/assets/css/_shadows.pcss @@ -0,0 +1,36 @@ +:root { + --shadow-100: 0 0.1rem 0.1rem 0 rgba(26, 27, 56, 0.06); + + --shadow-200: 0 0.1rem 0.1rem 0 rgba(26, 27, 56, 0.08), 0 0.2rem 0.1rem 0 rgba(26, 27, 56, 0.06), + 0 0.1rem 0.3rem 0 rgba(26, 27, 56, 0.1); + + --shadow-300: 0 0.6rem 1rem 0 rgba(26, 27, 56, 0.08), 0 0.1rem 1.8rem 0 rgba(26, 27, 56, 0.06), + 0 0.3rem 0.5rem 0 rgba(26, 27, 56, 0.1); + + --shadow-400: 0 2.4rem 3.8rem 0 rgba(26, 27, 56, 0.04), 0 0.9rem 4.6rem 0 rgba(26, 27, 56, 0.06), + 0 1.1rem 1.5rem 0 rgba(26, 27, 56, 0.1); + + --shadow-500: 0 0.4rem 5rem 0 rgba(26, 27, 56, 0.25); + + --shadow-left: 0 0 0 0 rgba(26, 27, 56, 0.1), -0.9rem 0 2rem 0 rgba(26, 27, 56, 0.1), + -3.7rem 0 3.7rem 0 rgba(26, 27, 56, 0.09), -8.3rem 0 5rem 0 rgba(26, 27, 56, 0.05), + -14.8rem 0 5.9rem 0 rgba(26, 27, 56, 0.01), -23.1rem 0 6.5rem 0 rgba(26, 27, 56, 0); +} + +:root.dark { + --shadow-100: 0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.12); + + --shadow-200: 0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.16), 0 0.2rem 0.1rem 0 rgba(0, 0, 0, 0.12), + 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2); + + --shadow-300: 0 0.6rem 1rem 0 rgba(0, 0, 0, 0.16), 0 0.1rem 1.8rem 0 rgba(0, 0, 0, 0.12), + 0 0.3rem 0.5rem 0 rgba(0, 0, 0, 0.2); + + --shadow-400: 0 2.4rem 3.8rem 0 rgba(0, 0, 0, 0.08), 0 0.9rem 4.6rem 0 rgba(0, 0, 0, 0.12), + 0 1.1rem 1.5rem 0 rgba(0, 0, 0, 0.2); + + --shadow-500: 0 0.4rem 5rem 0 rgba(0, 0, 0, 0.8); + + --shadow-left: 0 0 0 0 rgba(0, 0, 0, 0.5), -0.9rem 0 2rem 0 rgba(0, 0, 0, 0.45), -3.7rem 0 3.7rem 0 rgba(0, 0, 0, 0.4), + -8.3rem 0 5rem 0 rgba(0, 0, 0, 0.35), -14.8rem 0 5.9rem 0 rgba(0, 0, 0, 0.3), -23.1rem 0 6.5rem 0 rgba(0, 0, 0, 0); +} diff --git a/@xen-orchestra/web-core/lib/assets/css/_typography.pcss b/@xen-orchestra/web-core/lib/assets/css/_typography.pcss new file mode 100644 index 0000000000..81304f4621 --- /dev/null +++ b/@xen-orchestra/web-core/lib/assets/css/_typography.pcss @@ -0,0 +1,123 @@ +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +.h7, +.p1, +.p2, +.p3, +.p4, +.c1, +.c2, +.c3, +.c4, +.c5 { + font-weight: 400; + + &.black { + font-weight: 900; + } + + &.semi-bold { + font-weight: 600; + } + + &.medium { + font-weight: 500; + } + + &.underline { + text-decoration: underline; + } + + &.italic { + font-style: italic; + } +} + +.h4, +.h5, +.h6, +.h7, +.p1, +.p2, +.p3, +.p4, +.c1, +.c2, +.c3, +.c4, +.c5 { + line-height: 1.5em; +} + +.p1, +.p2, +.p3, +.p4, +.c1, +.c2, +.c3, +.c4, +.c5 { + letter-spacing: 0.04em; +} + +.h1 { + font-size: 4.8rem; + line-height: 6rem; +} + +.h2 { + font-size: 3.6rem; + line-height: 6rem; +} + +.h3 { + font-size: 2.4rem; + line-height: 3.2rem; +} + +.h4 { + font-size: 2rem; +} + +.h5 { + font-size: 1.8rem; +} + +.h6, +.p1, +.c1 { + font-size: 1.6rem; +} + +.h7, +.p2, +.c2 { + font-size: 1.4rem; +} + +.p3, +.c3 { + font-size: 1.2rem; +} + +.p4, +.c4 { + font-size: 1rem; +} + +.c5 { + font-size: 0.8rem; +} + +.c1, +.c2, +.c3, +.c4, +.c5 { + text-transform: uppercase; +} diff --git a/@xen-orchestra/web-core/lib/assets/css/base.pcss b/@xen-orchestra/web-core/lib/assets/css/base.pcss new file mode 100644 index 0000000000..097688ab05 --- /dev/null +++ b/@xen-orchestra/web-core/lib/assets/css/base.pcss @@ -0,0 +1,53 @@ +@import '_colors.pcss'; +@import '_reset.pcss'; +@import '_fonts.pcss'; +@import '_context.pcss'; +@import '_shadows.pcss'; +@import '_typography.pcss'; + +:root { + color: var(--color-grey-100); + background-color: var(--background-color-primary); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + &.dark { + color-scheme: dark; + } +} + +a { + color: var(--color-purple-base); +} + +code, +code *, +pre { + font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; +} + +.card-view { + padding: 1.2rem; + display: flex; + gap: 2rem; +} + +.link { + text-decoration: underline; + color: var(--color-purple-base); + cursor: pointer; +} + +.link:hover { + color: var(--color-purple-d20); +} + +.link:active, +.link.router-link-active { + color: var(--color-purple-d40); +} + +.link.router-link-active { + text-decoration: underline; +} diff --git a/@xen-orchestra/web-core/package.json b/@xen-orchestra/web-core/package.json new file mode 100644 index 0000000000..3b2f36f89b --- /dev/null +++ b/@xen-orchestra/web-core/package.json @@ -0,0 +1,18 @@ +{ + "name": "@xen-orchestra/web-core", + "type": "module", + "version": "0.0.1", + "private": true, + "exports": { + "./*": { + "types": "./lib/*", + "import": "./lib/*" + } + }, + "files": [ + "lib" + ], + "devDependencies": { + "vue": "^3.4.7" + } +} diff --git a/yarn.lock b/yarn.lock index 19a32cbaa4..0d15664152 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1963,6 +1963,11 @@ resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.7.tgz#a4836e3dbd693081a30b32ce9c2a781e1be16788" integrity sha512-lHPKJDkPUECsyAvD60joYfDmp8UERYxHGkFfyLJFTVK/ERJe0sVlIFLXU5XFxdjNDTerp5L4KeaKG+Z5S94qxQ== +"@csstools/postcss-global-data@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@csstools/postcss-global-data/-/postcss-global-data-2.1.1.tgz#b7250b5387f529cd3aa1a8dd966c1123f58c718b" + integrity sha512-tihdBLogY2G5jgUSu2jKSEVeOcnWqsz6k7UmPM7+ezhuV9FP5MIyX35Hc/YvqipQLRNsfBj9wRkBvsE7k1GM8A== + "@esbuild/aix-ppc64@0.19.11": version "0.19.11" resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz#2acd20be6d4f0458bc8c784103495ff24f13b1d3" @@ -5807,6 +5812,11 @@ bach@^1.0.0: async-settle "^1.0.0" now-and-later "^2.0.0" +balanced-match@0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.1.0.tgz#b504bd05869b39259dd0c5efc35d843176dccc4a" + integrity sha512-4xb6XqAEo3Z+5pEDJz33R8BZXI8FRJU+cDNLdKgDpmnz+pKKRVYLpdv+VvUAC7yUhBMj4izmyt19eCGv1QGV7A== + balanced-match@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" @@ -7089,7 +7099,7 @@ collection-visit@^1.0.0: map-visit "^1.0.0" object-visit "^1.0.0" -color-convert@^1.9.0, color-convert@^1.9.3: +color-convert@^1.3.0, color-convert@^1.9.0, color-convert@^1.9.3: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== @@ -7113,6 +7123,13 @@ color-name@^1.0.0, color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +color-string@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991" + integrity sha512-sz29j1bmSDfoAxKIEU6zwoIZXN6BrFbAMIhfYCNyiZXBDuU/aiHlN84lp/xDzL2ubyFhLDobHIlU1X70XRrMDA== + dependencies: + color-name "^1.0.0" + color-string@^1.6.0: version "1.9.1" resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4" @@ -7126,6 +7143,15 @@ color-support@^1.1.0, color-support@^1.1.2, color-support@^1.1.3: resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2" integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg== +color@^0.11.0: + version "0.11.4" + resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764" + integrity sha512-Ajpjd8asqZ6EdxQeqGzU5WBhhTfJ/0cA4Wlbre7e5vXfmDSmda7Ov6jeKoru+b0vHcb1CqvuroTHp5zIWzhVMA== + dependencies: + clone "^1.0.2" + color-convert "^1.3.0" + color-string "^0.3.0" + color@^3.0.0: version "3.2.1" resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164" @@ -7645,6 +7671,16 @@ cson-parser@^4.0.7: dependencies: coffeescript "1.12.7" +css-color-function@~1.3.3: + version "1.3.3" + resolved "https://registry.yarnpkg.com/css-color-function/-/css-color-function-1.3.3.tgz#8ed24c2c0205073339fafa004bc8c141fccb282e" + integrity sha512-YD/WhiRZIYgadwFJ48X5QmlOQ/w8Me4yQI6/eSUoiE8spIFp+S/rGpsAH48iyq/0ZWkCDWqVQKUlQmUzn7BQ9w== + dependencies: + balanced-match "0.1.0" + color "^0.11.0" + debug "^3.1.0" + rgb "~0.1.0" + css-color-keywords@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" @@ -8254,7 +8290,7 @@ debug@2.6.9, debug@^2.1.0, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9: dependencies: ms "2.0.0" -debug@3.X, debug@^3.2.7: +debug@3.X, debug@^3.1.0, debug@^3.2.7: version "3.2.7" resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a" integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ== @@ -16690,6 +16726,16 @@ postcss-calc@^7.0.1: postcss-selector-parser "^6.0.2" postcss-value-parser "^4.0.2" +postcss-color-function@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/postcss-color-function/-/postcss-color-function-4.1.0.tgz#b6f9355e07b12fcc5c34dab957834769b03d8f57" + integrity sha512-2/fuv6mP5Lt03XbRpVfMdGC8lRP1sykme+H1bR4ARyOmSMB8LPSjcL6EAI1iX6dqUF+jNEvKIVVXhan1w/oFDQ== + dependencies: + css-color-function "~1.3.3" + postcss "^6.0.23" + postcss-message-helpers "^2.0.0" + postcss-value-parser "^3.3.1" + postcss-colormin@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381" @@ -16787,6 +16833,11 @@ postcss-merge-rules@^4.0.3: postcss-selector-parser "^3.0.0" vendors "^1.0.0" +postcss-message-helpers@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e" + integrity sha512-tPLZzVAiIJp46TBbpXtrUAKqedXSyW5xDEo1sikrfEfnTs+49SBZR/xDdqCiJvSSbtr615xDsaMF3RrxS2jZlA== + postcss-minify-font-values@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6" @@ -17000,6 +17051,14 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.11, postcss-selecto cssesc "^3.0.0" util-deprecate "^1.0.2" +postcss-selector-parser@^6.0.13: + version "6.0.15" + resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535" + integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw== + dependencies: + cssesc "^3.0.0" + util-deprecate "^1.0.2" + postcss-svgo@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.3.tgz#343a2cdbac9505d416243d496f724f38894c941e" @@ -17039,7 +17098,7 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^6.0.1, postcss@^6.0.11: +postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.23: version "6.0.23" resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324" integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag== @@ -18663,6 +18722,11 @@ rgb-regex@^1.0.1: resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1" integrity sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w== +rgb@~0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/rgb/-/rgb-0.1.0.tgz#be27b291e8feffeac1bd99729721bfa40fc037b5" + integrity sha512-F49dXX73a92N09uQkfCp2QjwXpmJcn9/i9PvjmwsSIXUGqRLCf/yx5Q9gRxuLQTq248kakqQuc8GX/U/CxSqlA== + rgba-regex@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3" @@ -19920,11 +19984,6 @@ strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== -strip-json-comments@^5.0.1: - version "5.0.1" - resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-5.0.1.tgz#0d8b7d01b23848ed7dbdf4baaaa31a8250d8cfa0" - integrity sha512-0fk9zBqO67Nq5M/m45qHCJxylV/DhBlIOVExqgOMiCCrzrhU6tCibRXNqE3jwJLftzE9SNuZtYbpzcO+i9FiKw== - strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"