Add color variables for text on blurred background

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

5 files changed, 12 insertions, 2 deletions

diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
index 19d02a53f9b..da4814d66ef 100644
--- a/apps/theming/css/default.css
+++ b/apps/theming/css/default.css
@@ -13,6 +13,8 @@
   --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-light: #222222;
   --color-text-lighter: #767676;
   --color-scrollbar: rgba(34,34,34, .15);
diff --git a/apps/theming/lib/Themes/DarkHighContrastTheme.php b/apps/theming/lib/Themes/DarkHighContrastTheme.php
index f219c3b3e87..57d49ff4231 100644
--- a/apps/theming/lib/Themes/DarkHighContrastTheme.php
+++ b/apps/theming/lib/Themes/DarkHighContrastTheme.php
@@ -75,6 +75,7 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme {
 				'--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 45),
 
 				'--color-text-maxcontrast' => $colorMainText,
+				'--color-text-maxcontrast-background-blur' => $colorMainText,
 				'--color-text-light' => $colorMainText,
 				'--color-text-lighter' => $colorMainText,
 
diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php
index b615cbcaa4b..ecd4c7d3fd6 100644
--- a/apps/theming/lib/Themes/DarkTheme.php
+++ b/apps/theming/lib/Themes/DarkTheme.php
@@ -54,6 +54,7 @@ class DarkTheme extends DefaultTheme implements ITheme {
 		$colorMainText = '#D8D8D8';
 		$colorMainBackground = '#171717';
 		$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
+		$colorTextMaxcontrast = $this->util->darken($colorMainText, 30);
 
 		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
 		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
@@ -75,7 +76,9 @@ class DarkTheme extends DefaultTheme implements ITheme {
 				'--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10),
 				'--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20),
 
-				'--color-text-maxcontrast' => $this->util->darken($colorMainText, 30),
+				'--color-text-maxcontrast' => $colorTextMaxcontrast,
+				'--color-text-maxcontrast-default' => $colorTextMaxcontrast,
+				'--color-text-maxcontrast-background-blur' => $this->util->lighten($colorTextMaxcontrast, 2),
 				'--color-text-light' => $this->util->darken($colorMainText, 10),
 				'--color-text-lighter' => $this->util->darken($colorMainText, 20),
 
diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
index 413902d7813..e295d5d880a 100644
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -97,6 +97,7 @@ class DefaultTheme implements ITheme {
 	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);
@@ -126,7 +127,9 @@ class DefaultTheme implements ITheme {
 
 			// max contrast for WCAG compliance
 			'--color-main-text' => $colorMainText,
-			'--color-text-maxcontrast' => $this->util->lighten($colorMainText, 33),
+			'--color-text-maxcontrast' => $colorTextMaxcontrast,
+			'--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),
 
diff --git a/apps/theming/lib/Themes/HighContrastTheme.php b/apps/theming/lib/Themes/HighContrastTheme.php
index fda02058446..d73fa4b7ea0 100644
--- a/apps/theming/lib/Themes/HighContrastTheme.php
+++ b/apps/theming/lib/Themes/HighContrastTheme.php
@@ -75,6 +75,7 @@ class HighContrastTheme extends DefaultTheme implements ITheme {
 				'--color-placeholder-dark' => $this->util->darken($colorMainBackground, 45),
 
 				'--color-text-maxcontrast' => $colorMainText,
+				'--color-text-maxcontrast-background-blur' => $colorMainText,
 				'--color-text-light' => $colorMainText,
 				'--color-text-lighter' => $colorMainText,