Merge pull request #703 from nextcloud/style/noid/server-styles

fix(DesktopHeader): make text and icons contrast
nextcloud · Jul 9, 2024 · f4bc768 · f4bc768
2 parents cf3674e + 497dcd4
commit f4bc768
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 15 deletions.
diff --git a/src/shared/assets/default/default.css b/src/shared/assets/default/default.css
@@ -26,29 +26,30 @@
   /** @deprecated use `--color-text-maxcontrast` instead */
   --color-text-lighter: var(--color-text-maxcontrast);
   --color-scrollbar: rgba(34,34,34, .15);
-  --color-error: #d91812;
-  --color-error-rgb: 217,24,18;
-  --color-error-hover: #dd342f;
-  --color-error-text: #c61610;
-  --color-warning: #c28900;
-  --color-warning-rgb: 194,137,0;
-  --color-warning-hover: #cea032;
-  --color-warning-text: #8f6500;
+  --color-error: #DB0606;
+  --color-error-rgb: 219,6,6;
+  --color-error-hover: #df2525;
+  --color-error-text: #c20505;
+  --color-warning: #A37200;
+  --color-warning-rgb: 163,114,0;
+  --color-warning-hover: #8a6000;
+  --color-warning-text: #7f5900;
   --color-success: #2d7b41;
   --color-success-rgb: 45,123,65;
-  --color-success-hover: #448955;
+  --color-success-hover: #428854;
   --color-success-text: #286c39;
   --color-info: #0071ad;
   --color-info-rgb: 0,113,173;
   --color-info-hover: #197fb5;
   --color-info-text: #006499;
+  --color-favorite: #A37200;
   --color-loading-light: #cccccc;
   --color-loading-dark: #444444;
   --color-box-shadow-rgb: 77,77,77;
   --color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5);
   --color-border: #ededed;
   --color-border-dark: #dbdbdb;
-  --color-border-maxcontrast: #949494;
+  --color-border-maxcontrast: #7d7d7d;
   --font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --default-font-size: 15px;
   --animation-quick: 100ms;
@@ -72,7 +73,9 @@
   --background-invert-if-dark: no;
   --background-invert-if-bright: invert(100%);
   --background-image-invert-if-bright: no;
+  --background-image-color-text: #ffffff;
   --primary-invert-if-bright: no;
+  --primary-invert-if-dark: invert(100%);
   --color-primary: #00679e;
   --color-primary-default: #0082c9;
   --color-primary-text: #ffffff;
@@ -81,13 +84,13 @@
   --color-primary-light-text: #00293f;
   --color-primary-light-hover: #dbe4ea;
   --color-primary-element: #00679e;
-  --color-primary-element-hover: #1674a6;
+  --color-primary-element-hover: #005a8a;
   --color-primary-element-text: #ffffff;
-  --color-primary-element-text-dark: #f0f0f0;
+  --color-primary-element-text-dark: #f5f5f5;
   --color-primary-element-light: #e5eff5;
   --color-primary-element-light-hover: #dbe4ea;
   --color-primary-element-light-text: #00293f;
   --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
   --image-background-default: url('./img/background/kamil-porembinski-clouds.jpg');
-  --color-background-plain: #0082c9;
+  --color-background-plain: #00679e;
 }
diff --git a/src/talk/renderer/DesktopHeader.vue b/src/talk/renderer/DesktopHeader.vue
@@ -83,7 +83,7 @@ export default {
 	height: 50px;
 	box-sizing: border-box;
 	margin-bottom: -50px;
-	color: #FFF;
+	color: var(--color-header-contrast);
 	user-select: none;
 }
 

diff --git a/src/talk/renderer/assets/styles.css b/src/talk/renderer/assets/styles.css
@@ -15,3 +15,12 @@
 :focus-visible {
 	outline-color: var(--color-main-text);
 }
+
+#header {
+	/*
+		Adjusting of text and icons appearing on Nextcloud header to contrast with.
+		Nextcloud (28-29) server has a workaround with '--background-image-color-text' variable.
+		Starting from Nextcloud 30 server has '--color-background-plain-text' variable.
+	*/
+	--color-header-contrast: var(--color-background-plain-text, var(--background-image-color-text, #ffffff))
+}
diff --git a/src/talk/renderer/components/MainMenu.vue b/src/talk/renderer/components/MainMenu.vue
@@ -32,7 +32,7 @@ const reload = () => window.location.reload()
 		type="tertiary-no-background"
 		container="body">
 		<template #icon>
-			<MdiMenu :size="20" />
+			<MdiMenu :size="20" fill-color="var(--color-header-contrast)" />
 		</template>
 
 		<NcActionLink :href="talkWebLink" target="_blank">