Merge pull request #43392 from nextcloud/backport/43319/stable28

[stable28] Fix color of app menu entries and background color

apps/theming/css/default.css

@@ -85,5 +85,5 @@
   --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('/apps/theming/img/background/kamil-porembinski-clouds.jpg');
-  --color-background-plain: #0082c9;
+  --color-background-plain: #00679e;
 }

apps/theming/lib/Service/BackgroundService.php

@@ -60,14 +60,14 @@ class BackgroundService {
 			'description' => 'Abstract background picture in yellow and white color whith a flower on it',
 			'attribution_url' => 'https://stocksnap.io/photo/soft-floral-XOYWCCW5PA',
 			'theming' => self::THEMING_MODE_DARK,
-			'primary_color' => '#9f652f',
+			'primary_color' => '#D8A06C',
 		],
 		'ted-moravec-morning-fog.jpg' => [
 			'attribution' => 'Morning fog (Ted Moravec, Public Domain)',
 			'description' => 'Background picture of a forest shrouded in fog',
 			'attribution_url' => 'https://flickr.com/photos/tmoravec/52392410261',
 			'theming' => self::THEMING_MODE_DARK,
-			'primary_color' => '#114c3b',
+			'primary_color' => '#38A084',
 		],
 		'stefanus-martanto-setyo-husodo-underwater-ocean.jpg' => [
 			'attribution' => 'Underwater ocean (Stefanus Martanto Setyo Husodo, CC0)',
@@ -92,7 +92,7 @@ class BackgroundService {
 			'description' => 'Montage of a cetonia aurata bug that takes off with white background',
 			'attribution_url' => 'https://commons.wikimedia.org/wiki/File:Cetonia_aurata_take_off_composition_05172009.jpg',
 			'theming' => self::THEMING_MODE_DARK,
-			'primary_color' => '#56633d',
+			'primary_color' => '#869171',
 		],
 		'dejan-krsmanovic-ribbed-red-metal.jpg' => [
 			'attribution' => 'Ribbed red metal (Dejan Krsmanovic, CC BY)',
@@ -147,7 +147,7 @@ class BackgroundService {
 			'description' => 'Abstract background picture of pink tapioca bubbles',
 			'attribution_url' => 'https://www.flickr.com/photos/byrawpixel/27665140298/in/photostream/',
 			'theming' => self::THEMING_MODE_DARK,
-			'primary_color' => '#7b4e7e',
+			'primary_color' => '#b17ab4',
 		],
 		'nasa-waxing-crescent-moon.jpg' => [
 			'attribution' => 'Waxing crescent moon (NASA, Public Domain)',
@@ -166,14 +166,14 @@ class BackgroundService {
 			'description' => 'Background picture of mountains during sunset or sunrise',
 			'attribution_url' => 'https://www.flickr.com/photos/90975693@N05/17136440246',
 			'theming' => self::THEMING_MODE_DARK,
-			'primary_color' => '#7f4f70',
+			'primary_color' => '#c074a9',
 		],
 		'lali-masriera-yellow-bricks.jpg' => [
 			'attribution' => 'Yellow bricks (Lali Masriera, CC BY)',
 			'description' => 'Background picture of yellow bricks with some yellow tubes',
 			'attribution_url' => 'https://www.flickr.com/photos/visualpanic/3982464447',
 			'theming' => self::THEMING_MODE_DARK,
-			'primary_color' => '#7f5700',
+			'primary_color' => '#bc8210',
 		],
 	];
 

apps/theming/lib/Themes/CommonThemeTrait.php

@@ -88,13 +88,13 @@ trait CommonThemeTrait {
 	protected function generateGlobalBackgroundVariables(): array {
 		$backgroundDeleted = $this->config->getAppValue(Application::APP_ID, 'backgroundMime', '') === 'backgroundColor';
 		$hasCustomLogoHeader = $this->util->isLogoThemed();
-		$isDefaultPrimaryBright = $this->util->invertTextColor($this->defaultPrimaryColor);
+		$isPrimaryBright = $this->util->invertTextColor($this->primaryColor);
 
 		$variables = [];
 
 		// Default last fallback values
 		$variables['--image-background-default'] = "url('" . $this->themingDefaults->getBackground() . "')";
-		$variables['--color-background-plain'] = $this->defaultPrimaryColor;
+		$variables['--color-background-plain'] = $this->primaryColor;
 
 		// Register image variables only if custom-defined
 		foreach (ImageManager::SUPPORTED_IMAGE_KEYS as $image) {
@@ -108,11 +108,11 @@ trait CommonThemeTrait {
 		// If primary as background has been request or if we have a custom primary colour
 		// let's not define the background image
 		if ($backgroundDeleted) {
-			$variables['--color-background-plain'] = $this->defaultPrimaryColor;
+			$variables['--color-background-plain'] = $this->primaryColor;
 			$variables['--image-background-plain'] = 'yes';
 			$variables['--image-background'] = 'no';
 			// If no background image is set, we need to check against the shown primary colour
-			$variables['--background-image-invert-if-bright'] = $isDefaultPrimaryBright ? 'invert(100%)' : 'no';
+			$variables['--background-image-invert-if-bright'] = $isPrimaryBright ? 'invert(100%)' : 'no';
 		}
 
 		if ($hasCustomLogoHeader) {
@@ -133,14 +133,14 @@ trait CommonThemeTrait {
 			$adminBackgroundDeleted = $this->config->getAppValue(Application::APP_ID, 'backgroundMime', '') === 'backgroundColor';
 			$backgroundImage = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background_image', BackgroundService::BACKGROUND_DEFAULT);
 			$currentVersion = (int)$this->config->getUserValue($user->getUID(), Application::APP_ID, 'userCacheBuster', '0');
-			$isPrimaryBright = $this->util->invertTextColor($this->themingDefaults->getColorPrimary());
+			$isPrimaryBright = $this->util->invertTextColor($this->primaryColor);
 
 			// The user removed the background
 			if ($backgroundImage === BackgroundService::BACKGROUND_DISABLED) {
 				return [
 					// Might be defined already by admin theming, needs to be overridden
 					'--image-background' => 'none',
-					'--color-background-plain' => $this->themingDefaults->getColorPrimary(),
+					'--color-background-plain' => $this->primaryColor,
 					// If no background image is set, we need to check against the shown primary colour
 					'--background-image-invert-if-bright' => $isPrimaryBright ? 'invert(100%)' : 'no',
 				];
@@ -151,7 +151,7 @@ trait CommonThemeTrait {
 				$cacheBuster = substr(sha1($user->getUID() . '_' . $currentVersion), 0, 8);
 				return [
 					'--image-background' => "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "?v=$cacheBuster')",
-					'--color-background-plain' => $this->themingDefaults->getColorPrimary(),
+					'--color-background-plain' => $this->primaryColor,
 				];
 			}
 
@@ -159,7 +159,7 @@ trait CommonThemeTrait {
 			if ($backgroundImage === BackgroundService::BACKGROUND_DEFAULT && $adminBackgroundDeleted) {
 				return [
 					// --image-background is not defined in this case
-					'--color-background-plain' => $this->themingDefaults->getColorPrimary(),
+					'--color-background-plain' => $this->primaryColor,
 					'--background-image-invert-if-bright' => $isPrimaryBright ? 'invert(100%)' : 'no',
 				];
 			}
@@ -168,7 +168,7 @@ trait CommonThemeTrait {
 			if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage])) {
 				return [
 					'--image-background' => "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "img/background/$backgroundImage") . "')",
-					'--color-background-plain' => $this->themingDefaults->getColorPrimary(),
+					'--color-background-plain' => $this->primaryColor,
 					'--background-image-invert-if-bright' => BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage]['theming'] ?? null === BackgroundService::THEMING_MODE_DARK ? 'invert(100%)' : 'no',
 				];
 			}

core/css/header.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["header.scss","variables.scss"],"names":[],"mappings":"AAiBA,mBAEC,yBACA,sBACA,qBACA,6PACC,aAGD,+QACC,YACA,kBACA,2BACA,WACA,WACA,kBACA,2CACA,SACA,UAGD,gLACC,WAIA,kPACC,WAGD,+HACC,SAOH,+DAGC,oBACA,kBACA,MACA,WACA,aACA,OC2Ce,KD1Cf,sBACA,8BAID,WACC,cACA,kBACA,kBACA,wBACA,sBACA,UACA,mBACA,aACA,eACA,gBACA,WAEA,mCACC,UAaD,gCACC,8CACA,sDACA,yCACA,sBACA,aACA,kBACA,gBAfD,gBACA,oCAgBC,UACA,SACA,SACA,gBAEA,kDACC,aAID,sCACC,gCACA,iDACA,YACA,YACA,SACA,QACA,kBACA,oBACA,WAGD,uEAEC,iCAzCF,gBACA,oCA4CA,cACC,oBACA,yFACA,4BACA,wBACA,2BACA,WACA,kBACA,UACA,QACA,WAEA,gFAGD,kCACC,aACA,mBACA,cAGD,sFAEC,oBACA,mBAGD,0CACC,SACA,mBACA,YAGD,4CACC,yBACA,cAOC,yEACC,2DAID,4DACC,2DAID,4EACC,2DAGF,qDAEC,YACA,kBACA,6EACC,aACA,uBACA,mBACA,MC3FY,KD4FZ,YACA,eACA,YACA,UACA,aAEA,yFACC,UAGD,yGACC,aASL,0CACC,YAKD,gBACC,wCACA,eACA,iBACA,SACA,UACA,kBACA,gBACA,uBAEA,cAGD,kBACC,wCACA,kBACA,gBACA,eACA,iBACA,gBACA,uBAID,cACC,kBACA,gBACA,aACA,WACA,SACA,aACA,aACA,eACA,SAEA,2BACC,IC1Jc,KDiKf,gDACC,mBACA,eAED,gJAEC,qBACA,YACA","file":"header.css"}
+{"version":3,"sourceRoot":"","sources":["header.scss","variables.scss"],"names":[],"mappings":"AAiBA,mBAEC,yBACA,sBACA,qBACA,6PACC,aAGD,+QACC,YACA,kBACA,2BACA,WACA,WACA,kBACA,2CACA,SACA,UAGD,gLACC,WAIA,kPACC,WAGD,+HACC,SAOH,+DAGC,oBACA,kBACA,MACA,WACA,aACA,OC2Ce,KD1Cf,sBACA,8BAID,WACC,cACA,kBACA,kBACA,wBACA,sBACA,UACA,mBACA,aACA,eACA,gBACA,WAEA,mCACC,UAaD,gCACC,8CACA,sDACA,yCACA,sBACA,aACA,kBACA,gBAfD,gBACA,oCAgBC,UACA,SACA,SACA,gBAEA,kDACC,aAID,sCACC,gCACA,iDACA,YACA,YACA,SACA,QACA,kBACA,oBACA,WAGD,uEAEC,iCAzCF,gBACA,oCA4CA,cACC,oBACA,yFACA,4BACA,wBACA,2BACA,WACA,kBACA,UACA,QACA,WAEA,gFAGD,kCACC,aACA,mBACA,cAGD,sFAEC,oBACA,mBAGD,0CACC,SACA,mBACA,YAGD,4CACC,yBACA,cAOC,yEACC,gDAID,4DACC,gDAID,4EACC,2DAGF,qDAEC,YACA,kBACA,6EACC,aACA,uBACA,mBACA,MC3FY,KD4FZ,YACA,eACA,YACA,UACA,aAEA,yFACC,UAGD,yGACC,aASL,0CACC,YAKD,gBACC,wCACA,eACA,iBACA,SACA,UACA,kBACA,gBACA,uBAEA,cAGD,kBACC,wCACA,kBACA,gBACA,eACA,iBACA,gBACA,uBAID,cACC,kBACA,gBACA,aACA,WACA,SACA,aACA,aACA,eACA,SAEA,2BACC,IC1Jc,KDiKf,gDACC,mBACA,eAED,gJAEC,qBACA,YACA","file":"header.css"}

core/css/header.scss

@@ -174,12 +174,12 @@
 		> .header-menu:not(.user-menu) {
 			// For general
 			> .header-menu__trigger {
-				filter: var(--background-image-invert-if-bright) !important;
+				filter: var(--background-image-invert-if-bright);
 			}
 
 			// For assistant button
 			> .trigger {
-				filter: var(--background-image-invert-if-bright) !important;
+				filter: var(--background-image-invert-if-bright);
 			}
 
 			// For unified search button

core/src/components/AppMenu.vue

@@ -208,7 +208,6 @@ $header-icon-size: 20px;
 			text-overflow: ellipsis;
 			overflow: hidden;
 			letter-spacing: -0.5px;
-			filter: var(--background-image-invert-if-bright);
 		}
 
 		&:hover,

cypress/e2e/theming/themingUtils.ts

@@ -21,8 +21,8 @@
  */
 import { colord } from 'colord'
 
-export const defaultPrimary = '#0082c9'
-export const defaultAccessiblePrimary = '#00679e'
+const defaultNextcloudBlue = '#0082c9'
+export const defaultPrimary = '#00679e'
 export const defaultBackground = 'kamil-porembinski-clouds.jpg'
 
 /**
@@ -60,14 +60,19 @@ export const validateUserThemingDefaultCss = function(expectedColor = defaultPri
 
 	const defaultOptionBackground = defaultSelectButton.css('background-image')
 	const colorPickerOptionColor = defaultSelectButton.css('background-color')
+	const isNextcloudBlue = colord(colorPickerOptionColor).isEqual('#0082c9')
 
 	const isValidBackgroundImage = !expectedBackground
 		? defaultOptionBackground === 'none'
 		: defaultOptionBackground.includes(expectedBackground)
 
-	console.debug({ colorPickerOptionColor: colord(colorPickerOptionColor).toHex(), expectedColor, isValidBackgroundImage })
+	console.debug({ colorPickerOptionColor: colord(colorPickerOptionColor).toHex(), expectedColor, isValidBackgroundImage, isNextcloudBlue })
 
-	return isValidBackgroundImage && colord(colorPickerOptionColor).isEqual(expectedColor)
+	return isValidBackgroundImage && (
+		colord(colorPickerOptionColor).isEqual(expectedColor)
+		// we replace nextcloud blue with the the default rpimary (apps/theming/lib/Themes/DefaultTheme.php line 76)
+		|| (isNextcloudBlue && colord(expectedColor).isEqual(defaultPrimary))
+	)
 }
 
 export const pickRandomColor = function(): Cypress.Chainable<string> {

cypress/e2e/theming/user-background.cy.ts

@@ -95,7 +95,7 @@ describe('User select shipped backgrounds and remove background', function() {
 
 		// Validate changed background and primary
 		cy.wait('@setBackground')
-		cy.waitUntil(() => validateBodyThemingCss('#56633d', background))
+		cy.waitUntil(() => validateBodyThemingCss('#869171', background))
 	})
 
 	it('Remove background', function() {
@@ -109,7 +109,7 @@ describe('User select shipped backgrounds and remove background', function() {
 
 		// Validate clear background
 		cy.wait('@clearBackground')
-		cy.waitUntil(() => validateBodyThemingCss('#56633d', null))
+		cy.waitUntil(() => validateBodyThemingCss('#869171', null))
 	})
 })