Merge pull request #7862 from owncloud/align-design-with-figma

[full-ci] Align design colors with Figma

changelog/unreleased/enhancement-dark-mode-colors

@@ -0,0 +1,8 @@
+Enhancement: Align dark mode colors with given design
+
+The colors in the dark mode have been aligned with the given design. This improves the overall look and readability.
+
+https://github.com/owncloud/web/issues/7373
+https://github.com/owncloud/web/issues/7353
+https://github.com/owncloud/web/issues/7738
+https://github.com/owncloud/web/pull/7862

changelog/unreleased/enhancement-update-ods

@@ -1,13 +1,14 @@
-Enhancement: Update ODS to v14.0.0-alpha.20
+Enhancement: Update ODS to v14.0.0-alpha.24
 
-We updated the ownCloud Design System to version 14.0.0-alpha.20. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+We updated the ownCloud Design System to version 14.0.0-alpha.24. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
 
 * Bugfix - Omit special characters in user avatar initials: [#2070](https://github.com/owncloud/owncloud-design-system/issues/2070)
 * Bugfix - Avatar link icon: [#2269](https://github.com/owncloud/owncloud-design-system/pull/2269)
 * Bugfix - Firefox drag & drop move of folders not possible: [#7495](https://github.com/owncloud/web/issues/7495)
 * Bugfix - Lazy loading render performance: [#2260](https://github.com/owncloud/owncloud-design-system/pull/2260)
 * Bugfix - Remove width shrinking of the ocAvatarItem: [#2241](https://github.com/owncloud/owncloud-design-system/issues/2241)
 * Bugfix - Remove click event on OcIcon: [#2216](https://github.com/owncloud/owncloud-design-system/pull/2216)
+* Bugfix - Modal input message overlays with buttons: [#2343](https://github.com/owncloud/owncloud-design-system/pull/2343)
 * Change - Redesign contextual helper: [#2271](https://github.com/owncloud/owncloud-design-system/pull/2271)
 * Change - Remove OcAlert component: [#2210](https://github.com/owncloud/owncloud-design-system/pull/2210)
 * Change - Remove transition animations: [#2210](https://github.com/owncloud/owncloud-design-system/pull/2210)
@@ -29,6 +30,8 @@ We updated the ownCloud Design System to version 14.0.0-alpha.20. Please refer t
 * Enhancement - Button text align left: [#2323](https://github.com/owncloud/owncloud-design-system/pull/2323)
 * Enhancement - "Cancel"-button and -handler in OcSearchBar: [#2328](https://github.com/owncloud/owncloud-design-system/pull/2328)
 * Enhancement - Adjust breadcrumb spacing: [#2329](https://github.com/owncloud/owncloud-design-system/pull/2329)
+* Enhancement - Remove border on buttons: [#2345](https://github.com/owncloud/owncloud-design-system/pull/2345)
+* Enhancement - Input background color: [#2352](https://github.com/owncloud/owncloud-design-system/pull/2352)
 
-https://github.com/owncloud/web/pull/7684
-https://github.com/owncloud/owncloud-design-system/releases/tag/v14.0.0-alpha.20
+https://github.com/owncloud/web/pull/7862
+https://github.com/owncloud/owncloud-design-system/releases/tag/v14.0.0-alpha.24

packages/web-app-files/src/components/FilesList/QuickActions.vue

@@ -43,7 +43,7 @@ export default {
 <style lang="scss">
 .quick-action-button {
   &:hover {
-    background-color: var(--oc-color-background-muted) !important;
+    background-color: var(--oc-color-background-secondary) !important;
   }
 }
 </style>

packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue

@@ -403,7 +403,7 @@ export default defineComponent({
 
 .files-collaborators-permission-checkbox::v-deep {
   .oc-checkbox {
-    border: 2px solid var(--oc-color-background-hover);
+    border: 2px solid var(--oc-color-border);
   }
 
   label {

packages/web-pkg/src/components/QuotaSelect.vue

@@ -15,15 +15,15 @@
     >
       <template #selected-option="{ displayValue, displayUnit }">
         <span>{{ displayValue }}</span>
-        <span v-if="displayUnit" class="oc-text-muted oc-ml-s">{{ displayUnit }}</span>
+        <span v-if="displayUnit" class="oc-ml-s">{{ displayUnit }}</span>
       </template>
       <template #search="{ attributes, events }">
         <input class="vs__search" v-bind="attributes" v-on="events" />
       </template>
       <template #option="{ displayValue, displayUnit, error }">
         <div class="oc-flex oc-flex-between">
-          <span>{{ displayValue }}</span>
-          <span v-if="displayUnit" class="oc-text-muted">{{ displayUnit }}</span>
+          <div>{{ displayValue }}</div>
+          <div v-if="displayUnit">{{ displayUnit }}</div>
         </div>
         <div v-if="error" class="oc-text-input-danger">{{ error }}</div>
       </template>

packages/web-runtime/package.json

@@ -25,7 +25,7 @@
     "luxon": "^2.4.0",
     "marked": "^4.0.12",
     "oidc-client-ts": "^2.1.0",
-    "owncloud-design-system": "14.0.0-alpha.22",
+    "owncloud-design-system": "14.0.0-alpha.24",
     "owncloud-sdk": "~3.0.0-alpha.17",
     "p-queue": "^6.6.2",
     "popper-max-size-modifier": "^0.2.0",

packages/web-runtime/src/components/SidebarNav/SidebarNav.vue

@@ -137,7 +137,6 @@ export default {
     min-height: 3rem;
     transition: all 0.2s ease-out;
     &:hover {
-      background-color: var(--oc-color-background-secondary) !important;
       overflow: hidden;
     }
   }

packages/web-runtime/themes/owncloud/theme.json

@@ -23,7 +23,7 @@
         "background-secondary": "#ffffff",
         "background-hover": "rgb(236, 236, 236)",
         "border": "#ecebee",
-        "input-bg": "#f0f4f8",
+        "input-bg": "#ffffff",
         "input-border": "#ceddee",
         "input-text-default": "#041e42",
         "input-text-muted": "#4c5f79",
@@ -92,39 +92,39 @@
       "colorPalette": {
         "background-accentuate": "#696969",
         "background-default": "#292929",
-        "background-highlight": "#9dc7fb12",
-        "background-muted": "#696969",
+        "background-highlight": "#383838",
+        "background-muted": "#383838",
         "background-secondary": "#4f4f4f",
         "background-hover": "#383838",
         "border": "#383838",
         "input-bg": "#4f4f4f",
         "input-border": "#4f4f4f",
         "input-text-default": "#dadcdf",
-        "input-text-muted": "#383838",
+        "input-text-muted": "#bdbfc3",
         "swatch-brand-default": "#212121",
         "swatch-brand-hover": "#ffffff",
-        "swatch-danger-default": "",
+        "swatch-danger-default": "#d11d1c",
         "swatch-danger-hover": "",
         "swatch-danger-muted": "",
         "swatch-inverse-default": "",
         "swatch-inverse-hover": "",
         "swatch-inverse-muted": "#696969",
         "swatch-passive-default": "#c2c2c2",
         "swatch-passive-hover": "",
-        "swatch-passive-muted": "",
-        "swatch-primary-default": "#0868DD",
+        "swatch-passive-muted": "#bdbfc3",
+        "swatch-primary-default": "#73b0f2",
         "swatch-primary-hover": "#7bafef",
         "swatch-primary-muted": "",
         "swatch-primary-gradient": "#4e85c8",
-        "swatch-success-default": "",
+        "swatch-success-default": "#04b253",
         "swatch-success-hover": "",
         "swatch-success-muted": "",
         "swatch-warning-default": "",
         "swatch-warning-hover": "",
         "swatch-warning-muted": "",
         "text-default": "#DADCDF",
         "text-inverse": "#000000",
-        "text-muted": "#696969",
+        "text-muted": "#c2c2c2",
         "icon-folder": "rgb(44, 101, 255)",
         "icon-archive": "rgb(255, 207, 1)",
         "icon-image": "rgb(255, 111, 0)",