fix(theming): Make sure `color-border-maxcontrast` fulfills 3:1 contrast

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

6 files changed, 17 insertions, 3 deletions

diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
index 157e28982c0..7434710555b 100644
--- a/apps/theming/css/default.css
+++ b/apps/theming/css/default.css
@@ -43,7 +43,7 @@
   --color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5);
   --color-border: #ededed;
   --color-border-dark: #dbdbdb;
-  --color-border-maxcontrast: #949494;
+  --color-border-maxcontrast: #7d7d7d;
   --font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --default-font-size: 15px;
   --animation-quick: 100ms;
diff --git a/apps/theming/lib/Themes/DarkHighContrastTheme.php b/apps/theming/lib/Themes/DarkHighContrastTheme.php
index de6fe2d4835..965dac2922c 100644
--- a/apps/theming/lib/Themes/DarkHighContrastTheme.php
+++ b/apps/theming/lib/Themes/DarkHighContrastTheme.php
@@ -118,6 +118,7 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme {
 
 				'--color-border' => $this->util->lighten($colorMainBackground, 50),
 				'--color-border-dark' => $this->util->lighten($colorMainBackground, 50),
+				'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 55),
 			]
 		);
 	}
diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php
index 4b038a8812c..f63854289ad 100644
--- a/apps/theming/lib/Themes/DarkTheme.php
+++ b/apps/theming/lib/Themes/DarkTheme.php
@@ -115,7 +115,7 @@ class DarkTheme extends DefaultTheme implements ITheme {
 
 				'--color-border' => $this->util->lighten($colorMainBackground, 7),
 				'--color-border-dark' => $this->util->lighten($colorMainBackground, 14),
-				'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 30),
+				'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 40),
 
 				'--background-invert-if-dark' => 'invert(100%)',
 				'--background-invert-if-bright' => 'no',
diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
index d36feb000ae..3dfa89f8d3a 100644
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -171,7 +171,7 @@ class DefaultTheme implements ITheme {
 
 			'--color-border' => $this->util->darken($colorMainBackground, 7),
 			'--color-border-dark' => $this->util->darken($colorMainBackground, 14),
-			'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 42),
+			'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 51),
 
 			'--font-face' => "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
 			'--default-font-size' => '15px',
diff --git a/apps/theming/lib/Themes/HighContrastTheme.php b/apps/theming/lib/Themes/HighContrastTheme.php
index f02a30a7cb8..92511b59c81 100644
--- a/apps/theming/lib/Themes/HighContrastTheme.php
+++ b/apps/theming/lib/Themes/HighContrastTheme.php
@@ -121,6 +121,7 @@ class HighContrastTheme extends DefaultTheme implements ITheme {
 
 				'--color-border' => $this->util->darken($colorMainBackground, 50),
 				'--color-border-dark' => $this->util->darken($colorMainBackground, 50),
+				'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 56),
 			]
 		);
 	}
diff --git a/apps/theming/tests/Themes/AccessibleThemeTestCase.php b/apps/theming/tests/Themes/AccessibleThemeTestCase.php
index 84121dd41b0..f5bbcf44c64 100644
--- a/apps/theming/tests/Themes/AccessibleThemeTestCase.php
+++ b/apps/theming/tests/Themes/AccessibleThemeTestCase.php
@@ -74,6 +74,18 @@ class AccessibleThemeTestCase extends TestCase {
 				],
 				$elementContrast,
 			],
+			'border-colors' => [
+				[
+					'--color-border-maxcontrast',
+				],
+				[
+					'--color-main-background',
+					'--color-background-hover',
+					'--color-background-dark',
+					'--color-main-background-blur',
+				],
+				$elementContrast,
+			],
 			// Those two colors are used for borders which will be `color-main-text` on focussed state, thus need 3:1 contrast to it
 			'success-error-border-colors' => [
 				[