Fix mix factor

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

apps/theming/css/default.css

@@ -1,4 +1,4 @@
-:root { 
+:root {
   --color-main-background: #ffffff;
   --color-main-background-rgb: 255,255,255;
   --color-main-background-translucent: rgba(var(--color-main-background-rgb), .97);
@@ -10,25 +10,25 @@
   --color-placeholder-dark: #cccccc;
   --color-primary: #0082c9;
   --color-primary-text: #ffffff;
-  --color-primary-hover: #198ece;
-  --color-primary-light: #72bae1;
+  --color-primary-hover: #329bd3;
+  --color-primary-light: #e5f2f9;
   --color-primary-light-text: #0082c9;
-  --color-primary-light-hover: #0f567d;
+  --color-primary-light-hover: #1e2b32;
   --color-primary-text-dark: #ededed;
   --color-primary-element: #0082c9;
   --color-primary-element-hover: #198ece;
   --color-primary-element-light: #17adff;
-  --color-primary-element-lighter: #6cb7df;
+  --color-primary-element-lighter: #d8ecf6;
   --color-main-text: #222222;
   --color-text-maxcontrast: #767676;
   --color-text-light: #222222;
   --color-text-lighter: #767676;
   --color-error: #e9322d;
-  --color-error-hover: #eb4642;
+  --color-error-hover: #ed5a56;
   --color-warning: #eca700;
-  --color-warning-hover: #edaf19;
+  --color-warning-hover: #efb832;
   --color-success: #46ba61;
-  --color-success-hover: #58c070;
+  --color-success-hover: #6ac780;
   --color-loading-light: #cccccc;
   --color-loading-dark: #444444;
   --color-box-shadow-rgb: 77,77,77;

apps/theming/lib/Themes/DarkTheme.php

@@ -69,10 +69,10 @@ class DarkTheme extends DefaultTheme implements ITheme {
 			'--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10),
 			'--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20),
 
-			'--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 80),
-			'--color-primary-light' => $this->util->mix($this->primaryColor, $colorMainBackground, 10),
+			'--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60),
+			'--color-primary-light' => $this->util->mix($this->primaryColor, $colorMainBackground, -80),
 			'--color-primary-element-hover' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, 80),
-			'--color-primary-element-lighter' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, 15),
+			'--color-primary-element-lighter' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, -70),
 
 			'--color-text-maxcontrast' => $this->util->darken($colorMainText, 30),
 			'--color-text-light' => $this->util->darken($colorMainText, 10),

apps/theming/lib/Themes/DefaultTheme.php

@@ -108,16 +108,16 @@ class DefaultTheme implements ITheme {
 			// primary related colours
 			'--color-primary' => $this->primaryColor,
 			'--color-primary-text' => $this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff',
-			'--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 80),
-			'--color-primary-light' => $this->util->mix($this->primaryColor, $colorMainBackground, 10),
+			'--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60),
+			'--color-primary-light' => $this->util->mix($this->primaryColor, $colorMainBackground, -80),
 			'--color-primary-light-text' => $this->primaryColor,
-			'--color-primary-light-hover' => $this->util->mix($this->primaryColor, $colorMainText, 10),
+			'--color-primary-light-hover' => $this->util->mix($this->primaryColor, $colorMainText, -80),
 			'--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7),
 			// used for buttons, inputs...
 			'--color-primary-element' => $this->util->elementColor($this->primaryColor),
 			'--color-primary-element-hover' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, 80),
 			'--color-primary-element-light' => $this->util->lighten($this->util->elementColor($this->primaryColor), 15),
-			'--color-primary-element-lighter' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, 15),
+			'--color-primary-element-lighter' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, -70),
 
 			// max contrast for WCAG compliance
 			'--color-main-text' => $colorMainText,
@@ -127,11 +127,11 @@ class DefaultTheme implements ITheme {
 
 			// info/warning/success feedback colours
 			'--color-error' => '#e9322d',
-			'--color-error-hover' => $this->util->mix('#e9322d', $colorMainBackground, 80),
+			'--color-error-hover' => $this->util->mix('#e9322d', $colorMainBackground, 60),
 			'--color-warning' => '#eca700',
-			'--color-warning-hover' => $this->util->mix('#eca700', $colorMainBackground, 80),
+			'--color-warning-hover' => $this->util->mix('#eca700', $colorMainBackground, 60),
 			'--color-success' => '#46ba61',
-			'--color-success-hover' => $this->util->mix('#46ba61', $colorMainBackground, 80),
+			'--color-success-hover' => $this->util->mix('#46ba61', $colorMainBackground, 60),
 
 			// used for the icon loading animation
 			'--color-loading-light' => '#cccccc',

apps/theming/tests/Themes/DefaultThemeTest.php

@@ -127,7 +127,7 @@ class DefaultThemeTest extends TestCase {
 			$variables .= "  $variable: $value;" . PHP_EOL;
 		};
 
-		$css = ":root { " . PHP_EOL . "$variables}" . PHP_EOL;
+		$css = ":root {" . PHP_EOL . "$variables}" . PHP_EOL;
 		$fallbackCss = file_get_contents(__DIR__ . '/../../css/default.css');
 
 		$this->assertEquals($css, $fallbackCss);