fix(theming): Adjust primary text color calculation to also work with…

… high contrast themes Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud · Dec 15, 2023 · 3441852 · 3441852
1 parent 96b10b4
commit 3441852
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
@@ -77,9 +77,9 @@
   --color-primary-light-text: #00293f;
   --color-primary-light-hover: #dbe4ea;
   --color-primary-element: #00679e;
-  --color-primary-element-hover: #1070a4;
+  --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;

diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php
@@ -43,6 +43,7 @@ protected function generatePrimaryVariables(string $colorMainBackground, string
 		$colorPrimaryElement = $this->util->elementColor($this->primaryColor, $isBrightColor, $colorMainBackground);
 		$colorPrimaryLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
 		$colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
+		$invertPrimaryTextColor = $this->util->invertTextColor($colorPrimaryElement);
 
 		// primary related colours
 		return [
@@ -66,10 +67,10 @@ protected function generatePrimaryVariables(string $colorMainBackground, string
 
 			// used for buttons, inputs...
 			'--color-primary-element' => $colorPrimaryElement,
-			'--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 87),
-			'--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
+			'--color-primary-element-hover' => $invertPrimaryTextColor ? $this->util->lighten($colorPrimaryElement, 4) : $this->util->darken($colorPrimaryElement, 4),
+			'--color-primary-element-text' => $invertPrimaryTextColor ? '#000000' : '#ffffff',
 			// mostly used for disabled states
-			'--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 6),
+			'--color-primary-element-text-dark' => $invertPrimaryTextColor ? $this->util->lighten('#000000', 4) : $this->util->darken('#ffffff', 4),
 
 			// used for hover/focus states
 			'--color-primary-element-light' => $colorPrimaryElementLight,

diff --git a/apps/theming/tests/Themes/AccessibleThemeTestCase.php b/apps/theming/tests/Themes/AccessibleThemeTestCase.php
@@ -47,7 +47,10 @@ public function dataAccessibilityPairs() {
 				3.0,
 			],
 			'primary-element-text' => [
-				['--color-primary-element-text'],
+				[
+					'--color-primary-element-text',
+					'--color-primary-element-text-dark',
+				],
 				[
 					'--color-primary-element',
 					'--color-primary-element-hover',