Merge pull request #38063 from nextcloud/fix/theming

nextcloud · May 5, 2023 · 263a691 · 263a691
2 parents a1ed1db + 4c71d8f
commit 263a691
Show file tree

Hide file tree

Showing 21 changed files with 70 additions and 46 deletions.
diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
@@ -63,14 +63,12 @@
   --color-primary-light: #e5f0f5;
   --color-primary-light-text: #002a41;
   --color-primary-light-hover: #dbe5ea;
-  --color-primary-text-dark: #ededed;
   --color-primary-element: #006aa3;
-  --color-primary-element-default-hover: #329bd3;
-  --color-primary-element-text: #ffffff;
   --color-primary-element-hover: #3287b5;
+  --color-primary-element-text: #ffffff;
   --color-primary-element-light: #e5f0f5;
-  --color-primary-element-light-text: #002a41;
   --color-primary-element-light-hover: #dbe5ea;
+  --color-primary-element-light-text: #002a41;
   --color-primary-element-text-dark: #ededed;
   --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');

diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php
@@ -38,9 +38,9 @@ trait CommonThemeTrait {
 	 * will change in between.
 	 */
 	protected function generatePrimaryVariables(string $colorMainBackground, string $colorMainText): array {
-		$colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80);
-		$colorPrimaryElement = $this->util->elementColor($this->primaryColor);
-		$colorPrimaryElementDefault = $this->util->elementColor($this->defaultPrimaryColor);
+		$isBrightColor = $this->util->isBrightColor($colorMainBackground);
+		$colorPrimaryElement = $this->util->elementColor($this->primaryColor, $isBrightColor);
+		$colorPrimaryLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
 		$colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
 
 		// primary related colours
@@ -61,16 +61,17 @@ protected function generatePrimaryVariables(string $colorMainBackground, string
 			'--color-primary-light' => $colorPrimaryLight,
 			'--color-primary-light-text' => $this->util->mix($this->primaryColor, $this->util->invertTextColor($colorPrimaryLight) ? '#000000' : '#ffffff', -20),
 			'--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),
-			'--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7),
 
 			// used for buttons, inputs...
 			'--color-primary-element' => $colorPrimaryElement,
-			'--color-primary-element-default-hover' => $this->util->mix($colorPrimaryElementDefault, $colorMainBackground, 60),
-			'--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
 			'--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60),
+			'--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
+
+			// used for hover/focus states
 			'--color-primary-element-light' => $colorPrimaryElementLight,
-			'--color-primary-element-light-text' => $this->util->mix($colorPrimaryElement, $this->util->invertTextColor($colorPrimaryElementLight) ? '#000000' : '#ffffff', -20),
 			'--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90),
+			'--color-primary-element-light-text' => $this->util->mix($colorPrimaryElement, $this->util->invertTextColor($colorPrimaryElementLight) ? '#000000' : '#ffffff', -20),
+			// mostly used for disabled states
 			'--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7),
 
 			// to use like this: background-image: var(--gradient-primary-background);
@@ -92,15 +93,6 @@ protected function generateGlobalBackgroundVariables(): array {
 		$variables['--image-background-default'] = "url('" . $this->themingDefaults->getBackground() . "')";
 		$variables['--color-background-plain'] = $this->defaultPrimaryColor;
 
-		// 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['--image-background-plain'] = 'yes';
-			// 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';
-		}
-
 		// Register image variables only if custom-defined
 		foreach (ImageManager::SUPPORTED_IMAGE_KEYS as $image) {
 			if ($this->imageManager->hasImage($image)) {
@@ -110,8 +102,18 @@ protected function generateGlobalBackgroundVariables(): array {
 			}
 		}
 
+		// 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['--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';
+		}
+
 		if ($hasCustomLogoHeader) {
-			$variables["--image-logoheader-custom"] = 'true';
+			$variables['--image-logoheader-custom'] = 'true';
 		}
 
 		return $variables;

diff --git a/apps/theming/lib/Util.php b/apps/theming/lib/Util.php
@@ -52,10 +52,20 @@ public function __construct(IConfig $config, IAppManager $appManager, IAppData $
 	}
 
 	/**
+	 * Should we invert the text on this background color?
 	 * @param string $color rgb color value
 	 * @return bool
 	 */
-	public function invertTextColor($color) {
+	public function invertTextColor(string $color): bool {
+		return $this->isBrightColor($color);
+	}
+
+	/**
+	 * Is this color too bright ?
+	 * @param string $color rgb color value
+	 * @return bool
+	 */
+	public function isBrightColor(string $color): bool {
 		$l = $this->calculateLuma($color);
 		if ($l > 0.6) {
 			return true;
@@ -81,7 +91,7 @@ public function elementColor($color, bool $brightBackground = true) {
 
 		if (!$brightBackground && $luminance < 0.2) {
 			// If the color is too dark in dark mode, we fall back to a brighter gray
-			return '#555555';
+			return '#8c8c8c';
 		}
 
 		return $color;

diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue
@@ -329,7 +329,7 @@ export default {
 
 		&__default {
 			background-color: var(--color-primary-default);
-			background-image: var(--image-background-default);
+			background-image: var(--image-background-plain, var(--image-background-default));
 		}
 
 		&__filepicker, &__default, &__color {

diff --git a/apps/theming/src/components/admin/ColorPickerField.vue b/apps/theming/src/components/admin/ColorPickerField.vue
@@ -115,8 +115,22 @@ export default {
 		width: 230px !important;
 		border-radius: var(--border-radius-large) !important;
 		background-color: var(--color-primary-default) !important;
-		&:hover {
-			background-color: var(--color-primary-element-default-hover) !important;
+
+		// emulated hover state because it would not make sense
+		// to create a dedicated global variable for the color-primary-default
+		&:hover::after {
+			background-color: white;
+			content: "";
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			opacity: .2;
+			filter: var(--primary-invert-if-bright);
+		}
+
+		// Above the ::after
+		&::v-deep * {
+			z-index: 1;
 		}
 	}
 }

diff --git a/apps/theming/tests/CapabilitiesTest.php b/apps/theming/tests/CapabilitiesTest.php
@@ -111,7 +111,7 @@ public function dataGetCapabilities() {
 				'color-text' => '#ffffff',
 				'color-element' => '#000000',
 				'color-element-bright' => '#000000',
-				'color-element-dark' => '#555555',
+				'color-element-dark' => '#8c8c8c',
 				'logo' => 'http://localhost/logo5',
 				'background' => '#000000',
 				'background-plain' => true,
@@ -127,7 +127,7 @@ public function dataGetCapabilities() {
 				'color-text' => '#ffffff',
 				'color-element' => '#000000',
 				'color-element-bright' => '#000000',
-				'color-element-dark' => '#555555',
+				'color-element-dark' => '#8c8c8c',
 				'logo' => 'http://localhost/logo5',
 				'background' => '#000000',
 				'background-plain' => true,

diff --git a/apps/theming/tests/UtilTest.php b/apps/theming/tests/UtilTest.php
@@ -112,7 +112,7 @@ public function testElementColorDefault() {
 
 	public function testElementColorOnDarkBackground() {
 		$elementColor = $this->util->elementColor("#000000", false);
-		$this->assertEquals('#555555', $elementColor);
+		$this->assertEquals('#8c8c8c', $elementColor);
 	}
 
 	public function testElementColorOnBrightBackground() {

diff --git a/core/css/apps.scss b/core/css/apps.scss
@@ -46,7 +46,7 @@ html {
 body {
 	// color-background-plain should always be defined. It is the primary user colour
 	background-color: var(--color-background-plain, var(--color-main-background));
-	// color-background-plain should always be defined. It is the primary user colour
+	// image-background-plain means the admin has disabled the background image
 	background-image: var(--image-background, var(--image-background-default));
 	background-size: cover;
 	background-position: center;

diff --git a/core/css/inputs.css b/core/css/inputs.css
diff --git a/core/css/inputs.css.map b/core/css/inputs.css.map
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
@@ -128,13 +128,13 @@ button:not(
 				box-shadow: 0 0 0 2px var(--color-main-text);
 			}
 			&:active {
-				color: var(--color-primary-text-dark);
+				color: var(--color-primary-element-text-dark);
 			}
 		}
 		&:disabled {
 			// opacity is already defined to .5 if disabled
 			background-color: var(--color-primary-element);
-			color: var(--color-primary-text-dark);
+			color: var(--color-primary-element-text-dark);
 			cursor: default;
 		}
 	}

diff --git a/core/css/server.css b/core/css/server.css