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 df36fcfb72..0000000000 Binary files a/@xen-orchestra/lite/public/favicon.ico and /dev/null differ 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"