Merge pull request #10924 from nextcloud/bugfix/10901/theming-bugfix-primary

Fix SCSS variable management with the theming app

Author: juliusknorr

apps/accessibility/lib/Controller/AccessibilityController.php

@@ -149,8 +149,8 @@ public function getCss(): DataDisplayResponse {
 			try {
 				$css .= $scss->compile(
 					$imports .
-					'@import "variables.scss";' .
 					$this->getInjectedVariables() .
+					'@import "variables.scss";' .
 					'@import "css-variables.scss";'
 				);
 			} catch (ParserException $e) {

apps/theming/css/theming.scss

@@ -71,6 +71,11 @@
 			@include icon-color('checkbox-mark', 'actions', $color-white, 1, true);
 		}
 	}
+	#body-user {
+		.primary {
+			border: 1px solid transparent;
+		}
+	}
 } @else {
 	#appmenu:not(.inverted) svg {
 		filter: none;

apps/theming/lib/Util.php

@@ -79,7 +79,7 @@ public function invertTextColor($color) {
 	public function elementColor($color) {
 		$l = $this->calculateLuminance($color);
 		if($l>0.8) {
-			return '#555555';
+			return '#dddddd';
 		}
 		return $color;
 	}

apps/theming/tests/CapabilitiesTest.php

@@ -74,7 +74,7 @@ public function dataGetCapabilities() {
 				'slogan' => 'slogan',
 				'color' => '#FFFFFF',
 				'color-text' => '#000000',
-				'color-element' => '#555555',
+				'color-element' => '#dddddd',
 				'logo' => 'http://absolute/logo',
 				'background' => 'http://absolute/background',
 				'background-plain' => false,

apps/theming/tests/UtilTest.php

@@ -105,7 +105,7 @@ public function testElementColorDefault() {
 
 	public function testElementColorOnBrightBackground() {
 		$elementColor = $this->util->elementColor('#ffffff');
-		$this->assertEquals('#555555', $elementColor);
+		$this->assertEquals('#dddddd', $elementColor);
 	}
 
 	public function testGenerateRadioButtonWhite() {

core/css/variables.scss

@@ -38,8 +38,8 @@ $color-main-background: #fff !default;
 $color-background-dark: nc-darken($color-main-background, 7%) !default;
 $color-background-darker: nc-darken($color-main-background, 14%) !default;
 
-$color-primary: #0082c9;
-$color-primary-text: #ffffff;
+$color-primary: #0082c9 !default;
+$color-primary-text: #ffffff !default;
 // do not use nc-darken/lighten in case of overriding because
 // primary-text is independent of color-main-text
 $color-primary-text-dark: darken($color-primary-text, 7%) !default;

lib/private/Template/SCSSCacher.php

@@ -284,9 +284,9 @@ private function cache(string $path, string $fileNameCSS, string $fileNameSCSS,
 		try {
 			$compiledScss = $scss->compile(
 				'$webroot: \'' . $this->getRoutePrefix() . '\';' .
+				$this->getInjectedVariables() .
 				'@import "variables.scss";' .
 				'@import "functions.scss";' .
-				$this->getInjectedVariables() .
 				'@import "' . $fileNameSCSS . '";');
 		} catch (ParserException $e) {
 			$this->logger->error($e, ['app' => 'core']);
@@ -349,7 +349,7 @@ private function getInjectedVariables(): string {
 		}
 		$variables = '';
 		foreach ($this->defaults->getScssVariables() as $key => $value) {
-			$variables .= '$' . $key . ': ' . $value . ';';
+			$variables .= '$' . $key . ': ' . $value . ' !default;';
 		}
 
 		// check for valid variables / otherwise fall back to defaults