Add color variable for text on blurred background

Signed-off-by: Christopher Ng <chrng8@gmail.com>

Author: Pytal

apps/theming/lib/Themes/DefaultTheme.php

@@ -91,6 +91,7 @@ public function getMediaQuery(): string {
 	public function getCSSVariables(): array {
 		$colorMainText = '#222222';
 		$colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText));
+		$colorTextMaxcontrast = $this->util->lighten($colorMainText, 33);
 		$colorMainBackground = '#ffffff';
 		$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
 		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
@@ -119,7 +120,8 @@ public function getCSSVariables(): array {
 
 			// max contrast for WCAG compliance
 			'--color-main-text' => $colorMainText,
-			'--color-text-maxcontrast' => $this->util->lighten($colorMainText, 33),
+			'--color-text-maxcontrast' => $colorTextMaxcontrast,
+			'--color-text-maxcontrast-background-blur' => $this->util->darken($colorTextMaxcontrast, 7),
 			'--color-text-light' => $colorMainText,
 			'--color-text-lighter' => $this->util->lighten($colorMainText, 33),