fix(theming): Ensure that maxcontrast text has always a contrast of 4…

….5:1 even on hover Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud · Oct 5, 2023 · 2b820eb · 2b820eb
1 parent 7641af5
commit 2b820eb
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/apps/theming/css/default.css b/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;

diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
@@ -103,7 +103,8 @@ public function getMediaQuery(): string {
 	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 @@ public function getCSSVariables(): array {
 			'--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)',
 

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