fix(theming): Ensure that maxcontrast text has always a contrast of 4.5:1 even on hover

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/theming/css/default.css

@@ -11,11 +11,11 @@
   --color-placeholder-light: #e6e6e6;
   --color-placeholder-dark: #cccccc;
   --color-main-text: #222222;
-  --color-text-maxcontrast: #767676;
-  --color-text-maxcontrast-default: #767676;
-  --color-text-maxcontrast-background-blur: #646464;
+  --color-text-maxcontrast: #707070;
+  --color-text-maxcontrast-default: #707070;
+  --color-text-maxcontrast-background-blur: #5e5e5e;
   --color-text-light: #222222;
-  --color-text-lighter: #767676;
+  --color-text-lighter: #6f6f6f;
   --color-scrollbar: rgba(34,34,34, .15);
   --color-error: #d91812;
   --color-error-rgb: 217,24,18;

apps/theming/lib/Themes/DefaultTheme.php

@@ -103,7 +103,8 @@ class DefaultTheme implements ITheme {
 	public function getCSSVariables(): array {
 		$colorMainText = '#222222';
 		$colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText));
-		$colorTextMaxcontrast = $this->util->lighten($colorMainText, 33);
+		// Color that still provides enough contrast for text, so we need a ratio of 4.5:1 on main background AND hover
+		$colorTextMaxcontrast = '#707070'; // 4.54 : 1 for hover background
 		$colorMainBackground = '#ffffff';
 		$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
 		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
@@ -138,7 +139,7 @@ class DefaultTheme implements ITheme {
 			'--color-text-maxcontrast-default' => $colorTextMaxcontrast,
 			'--color-text-maxcontrast-background-blur' => $this->util->darken($colorTextMaxcontrast, 7),
 			'--color-text-light' => $colorMainText,
-			'--color-text-lighter' => $this->util->lighten($colorMainText, 33),
+			'--color-text-lighter' => $this->util->lighten($colorMainText, 30),
 
 			'--color-scrollbar' => 'rgba(' . $colorMainTextRgb . ', .15)',