Merge pull request #11331 from owncloud/fix/color-contrasts

feat: color contrasts in default theme
owncloud · Aug 14, 2024 · 6fcee17 · 6fcee17
2 parents 26f8403 + db584b3
commit 6fcee17
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 11 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -17,7 +17,7 @@ x-ocis-server: &ocis-service
     # WEB
     WEB_ASSET_CORE_PATH: ${WEB_ASSET_CORE_PATH:-/web/dist}
     WEB_ASSET_APPS_PATH: ${WEB_ASSET_APPS_PATH:-/web/apps}
-    WEB_UI_THEME_PATH: ${WEB_UI_THEME_PATH:-/themes/owncloud/theme.json}
+    WEB_ASSET_THEMES_PATH: ${WEB_ASSET_THEMES_PATH:-/themes}
     WEB_UI_CONFIG_FILE: ${WEB_UI_CONFIG_FILE:-/web/config.json}
 
     #FRONTEND

diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -463,6 +463,13 @@ export default defineComponent({
       var(--oc-color-swatch-danger-muted),
       var(--oc-color-swatch-danger-contrast)
     );
+
+    &-filled:hover {
+      color: var(--oc-color-swatch-danger-default) !important;
+      span > svg {
+        fill: var(--oc-color-swatch-danger-default) !important;
+      }
+    }
   }
 
   &:disabled {

diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -273,8 +273,8 @@ export default defineComponent({
       box-sizing: border-box;
       padding: var(--oc-space-small);
       color: var(--oc-color-swatch-passive-default);
-      &:focus,
-      &:hover {
+      &:focus:not([disabled]),
+      &:hover:not([disabled]) {
         background-color: var(--oc-color-background-hover);
 
         text-decoration: none !important;

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -520,7 +520,6 @@ export default defineComponent({
       flex: 1;
       font-weight: normal !important;
       font-size: var(--oc-font-size-small);
-      opacity: 0.7;
     }
   }
 }

diff --git a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
@@ -177,7 +177,5 @@ export default defineComponent({
 .oc-files-context-action-shortcut {
   justify-content: right !important;
   font-size: var(--oc-font-size-small);
-  font-weight: bold !important;
-  opacity: 0.7;
 }
 </style>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -1206,7 +1206,7 @@ export default defineComponent({
 
 .resource-table {
   &-resource-cut {
-    opacity: 0.6;
+    opacity: 0.7;
   }
 
   &-resource-wrapper {

diff --git a/packages/web-runtime/themes/owncloud/theme.json b/packages/web-runtime/themes/owncloud/theme.json
@@ -169,7 +169,7 @@
               "background-default": "#292929",
               "background-highlight": "#383838",
               "background-muted": "#383838",
-              "background-secondary": "#4f4f4f",
+              "background-secondary": "#404040",
               "background-hover": "#383838",
               "color-components-apptopbar-background": "transparent",
               "color-components-apptopbar-border": "#ceddee",
@@ -197,18 +197,18 @@
               "swatch-primary-gradient-hover": "#76a1d5",
               "swatch-primary-contrast": "#dadcdf",
               "swatch-success-background": "rgba(0, 188, 140, 0)",
-              "swatch-success-default": "rgb(0, 188, 140)",
+              "swatch-success-default": "rgb(0, 200, 152)",
               "swatch-success-hover": "#00f0b4",
               "swatch-success-muted": "rgba(0, 188, 140, .5)",
               "swatch-success-contrast": "#000000",
               "swatch-warning-background": "rgba(0,0,0,0)",
               "swatch-warning-default": "rgb(232, 191, 73)",
               "swatch-warning-hover": "#eed077",
               "swatch-warning-muted": "rgba(232, 178, 19, .5)",
-              "swatch-danger-default": "rgb(255, 72, 53)",
+              "swatch-danger-default": "rgb(255, 137, 126)",
               "swatch-danger-hover": "#ff7566",
               "swatch-danger-muted": "rgba(255, 72, 53, .5)",
-              "swatch-danger-contrast": "#dadcdf",
+              "swatch-danger-contrast": "#000000",
               "swatch-warning-contrast": "#000000",
               "text-default": "#dadcdf",
               "text-inverse": "#000000",