Bump dark theme and added highcontrast + various fixes

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

apps/accessibility/css/dark.scss

@@ -1,20 +1,18 @@
-// Revert lighten/darken
-@function nc-darken($color, $value) {
-	@return lighten($color, $value);
-}
-
-@function nc-lighten($color, $value) {
-	@return darken($color, $value);
-}
-
 // SCSS variables
 $color-main-text: #d8d8d8;
 $color-main-background: #181818;
 
-$color-background-dark: nc-darken($color-main-background, 4%);
-$color-background-darker: nc-darken($color-main-background, 8%);
+$color-background-dark: lighten($color-main-background, 4%);
+$color-background-darker: lighten($color-main-background, 8%);
+
+$color-text-maxcontrast: darken($color-main-text, 30%);
+$color-text-light: darken($color-main-text, 10%);
+$color-text-lighter: darken($color-main-text, 20%);
 
 $color-loading-light: #777;
 $color-loading-dark: #ccc;
 
 $color-box-shadow: rgba(darken($color-main-background, 70%), .5);
+
+$color-border: lighten($color-main-background, 7%);
+$color-border-dark: lighten($color-main-background, 14%);

apps/accessibility/css/highcontrast.scss

@@ -0,0 +1,22 @@
+// SCSS variables
+$color-main-text: #000;
+$color-main-background: #fff;
+
+$color-background-dark: darken($color-main-background, 30%);
+$color-background-darker: darken($color-main-background, 30%);
+
+$color-text-maxcontrast: $color-main-text;
+$color-text-light: $color-main-text;
+$color-text-lighter: $color-main-text;
+
+$color-loading-light: #ddd;
+$color-loading-dark: #000;
+
+$color-box-shadow: $color-main-text;
+
+$color-border: darken($color-main-background, 50%);
+$color-border-dark: darken($color-main-background, 50%);
+
+* {
+	opacity: 1 !important;
+}

apps/accessibility/css/style.scss

@@ -28,9 +28,8 @@
 		opacity: 1;
 	}
 	.preview-image {
-		width: 100%;
-		height: 150px;
-		background-position: center;
+		height: 200px;
+		background-position: top left;
 		background-size: cover;
 		background-repeat: no-repeat;
 	}

apps/accessibility/lib/AppInfo/Application.php

@@ -43,8 +43,13 @@ public function __construct() {
 		$this->config      = \OC::$server->getConfig();
 		$this->userSession = \OC::$server->getUserSession();
 
-		// Inject the fake css on all pages
-		$cssMd5 = $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'generated', 0);
-		\OCP\Util::addStyle($this->appName, 'user-' . md5($cssMd5), true);
+		// Inject the fake css on all pages if enabled and user is logged
+		$loggedUser = $this->userSession->getUser();
+		if (!is_null($loggedUser)) {
+			$userValues = $this->config->getUserKeys($loggedUser->getUID(), $this->appName);
+			if(count($userValues) > 0) {
+				\OCP\Util::addStyle($this->appName, 'user-' . md5(implode('-', $userValues)), true);
+			}
+		}
 	}
 }

apps/accessibility/lib/Controller/AccessibilityController.php

@@ -99,15 +99,14 @@ public function __construct(string $appName,
 	 * @NoAdminRequired
 	 * @NoCSRFRequired
 	 *
-	 * @return DataResponse
+	 * @return DataDisplayResponse
 	 */
 	public function getCss(): DataDisplayResponse {
 
 		$css     = '';
 		$imports = '';
-		$scssFiles = $this->getUserValues();
 
-		foreach ($scssFiles as $scssFile) {
+		foreach ($this->getUserValues() as $key => $scssFile) {
 			if ($scssFile !== false) {
 				$imports .= '@import "' . $scssFile . '";';
 			}
@@ -124,7 +123,7 @@ public function getCss(): DataDisplayResponse {
 			$scss->setIgnoreErrors(true);
 			$scss->setFormatter(Crunched::class);
 
-			// Compile
+			// Import theme, variables and compile css4 variables
 			try {
 				$css .= $scss->compile(
 					$imports .
@@ -145,26 +144,19 @@ public function getCss(): DataDisplayResponse {
 		$ttl = 31536000;
 		$response->addHeader('Cache-Control', 'max-age=' . $ttl . ', immutable');
 		$expires = new \DateTime();
-		$now = $this->timeFactory->getTime();
-		$expires->setTimestamp($now);
+		$expires->setTimestamp($this->timeFactory->getTime());
 		$expires->add(new \DateInterval('PT' . $ttl . 'S'));
 		$response->addHeader('Expires', $expires->format(\DateTime::RFC1123));
 		$response->addHeader('Pragma', 'cache');
 
-		// Update last generation key
-		$this->config->setUserValue($this->userSession->getUser()->getUID(), $this->appName, 'generated', implode('-', $scssFiles));
-
 		return $response;
 	}
 
 	private function getUserValues() {
 		$userTheme = $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', false);
 		$userFont  = $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false);
 
-		return [
-			'theme' => $userTheme,
-			'font'  => $userFont
-		];
+		return [$userTheme, $userFont];
 	}
 
 	private function filterOutRule(string $rule, string $css) {

apps/accessibility/src/components/itemPreview.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="{preview: true, selected: preview.id === selected}"
 		 @click="selectItem">
-		 <div class="icon-checkmark"></div>
+		<div class="icon-checkmark"></div>
 		<div class="preview-image" :style="{backgroundImage: 'url(' + preview.img + ')'}"></div>
 		<h3>{{preview.title}}</h3>
 		<p>{{preview.text}}</p>

apps/accessibility/webpack.common.js

@@ -1,8 +1,8 @@
 const path = require('path');
-const { VueLoaderPlugin } = require(`vue-loader`);
+const { VueLoaderPlugin } = require('vue-loader');
 
 module.exports = {
-	entry: path.join(__dirname, `src`, `main.js`),
+	entry: path.join(__dirname, 'src', 'main.js'),
 	output: {
 		path: path.resolve(__dirname, './js'),
 		publicPath: '/js/',