Add border color variable for increased contrast instead of changing decorative border colors

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

Author: Pytal

apps/theming/css/default.css

@@ -30,8 +30,9 @@
   --color-loading-dark: #444444;
   --color-box-shadow-rgb: 77,77,77;
   --color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5);
-  --color-border: #949494;
-  --color-border-dark: #808080;
+  --color-border: #ededed;
+  --color-border-dark: #dbdbdb;
+  --color-border-maxcontrast: #949494;
   --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --default-font-size: 15px;
   --animation-quick: 100ms;

apps/theming/lib/Themes/DarkTheme.php

@@ -89,8 +89,9 @@ public function getCSSVariables(): array {
 				'--color-box-shadow' => $colorBoxShadow,
 				'--color-box-shadow-rgb' => $colorBoxShadowRGB,
 
-				'--color-border' => $this->util->lighten($colorMainBackground, 30),
-				'--color-border-dark' => $this->util->lighten($colorMainBackground, 38),
+				'--color-border' => $this->util->lighten($colorMainBackground, 7),
+				'--color-border-dark' => $this->util->lighten($colorMainBackground, 14),
+				'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 30),
 
 				'--background-invert-if-dark' => 'invert(100%)',
 				'--background-invert-if-bright' => 'no',

apps/theming/lib/Themes/DefaultTheme.php

@@ -155,8 +155,9 @@ public function getCSSVariables(): array {
 			'--color-box-shadow-rgb' => $colorBoxShadowRGB,
 			'--color-box-shadow' => "rgba(var(--color-box-shadow-rgb), 0.5)",
 
-			'--color-border' => $this->util->darken($colorMainBackground, 42),
-			'--color-border-dark' => $this->util->darken($colorMainBackground, 50),
+			'--color-border' => $this->util->darken($colorMainBackground, 7),
+			'--color-border-dark' => $this->util->darken($colorMainBackground, 14),
+			'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 42),
 
 			'--font-face' => "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
 			'--default-font-size' => '15px',