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 4, 2023 · 17a051a · 17a051a
1 parent 7641af5
commit 17a051a
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 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: #707070;
+  --color-text-maxcontrast-default: #707070;
   --color-text-maxcontrast-background-blur: #646464;
   --color-text-light: #222222;
-  --color-text-lighter: #767676;
+  --color-text-lighter: #707070;
   --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/apps/theming/lib/Util.php b/apps/theming/lib/Util.php
@@ -128,6 +128,19 @@ public function toHSL(int $red, int $green, int $blue): array {
 		return array_values($color->getHsl());
 	}
 
+	/**
+	 * Convert HSL to RGB Hex
+	 *
+	 * @param float $hue
+	 * @param float $saturation
+	 * @param float $lightness
+	 *
+	 * @return string
+	 */
+	public function toHex(float $hue, float $saturation, float $lightness): string {
+		return Color::hslToHex(['H' => $hue, 'S' => $saturation, 'L' => $lightness]);
+	}
+
 	/**
 	 * @param string $color rgb color value
 	 * @return float

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