Font fixes and design update for theme picker

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

7 files changed, 120 insertions, 23 deletions

diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php
index 1cd269f9bff..ff30e27f721 100644
--- a/apps/theming/lib/Controller/ThemingController.php
+++ b/apps/theming/lib/Controller/ThemingController.php
@@ -55,6 +55,7 @@ use OCP\IL10N;
 use OCP\IRequest;
 use OCP\ITempManager;
 use OCP\IURLGenerator;
+use ScssPhp\ScssPhp\Compiler;
 
 /**
  * Class ThemingController
@@ -309,13 +310,14 @@ class ThemingController extends Controller {
 	 *
 	 * @return FileDisplayResponse|NotFoundResponse
 	 */
-	public function getThemeVariables(string $themeId, bool $plain = false) {
+	public function getThemeStylesheet(string $themeId, bool $plain = false, bool $withCustomCss = false) {
 		$themes = $this->themesService->getThemes();
 		if (!in_array($themeId, array_keys($themes))) {
 			return new NotFoundResponse();
 		}
 
 		$theme = $themes[$themeId];
+		$customCss  = $theme->getCustomCss();
 
 		// Generate variables
 		$variables = '';
@@ -325,10 +327,12 @@ class ThemingController extends Controller {
 
 		// If plain is set, the browser decides of the css priority
 		if ($plain) {
-			$css = ":root { $variables }";
+			$css = ":root { $variables } " . $customCss;
 		} else { 
 			// If not set, we'll rely on the body class
-			$css = "body[data-theme-$themeId] { $variables }";
+			$compiler = new Compiler();
+			$compiledCss = $compiler->compileString("body[data-theme-$themeId] { $variables $customCss }");
+			$css = $compiledCss->getCss();;
 		}
 
 		try {
diff --git a/apps/theming/lib/ITheme.php b/apps/theming/lib/ITheme.php
index 20508fac4e8..a5c9cdf26a6 100644
--- a/apps/theming/lib/ITheme.php
+++ b/apps/theming/lib/ITheme.php
@@ -86,4 +86,14 @@ interface ITheme {
 	 * @since 25.0.0
 	 */
 	public function getCSSVariables(): array;
+
+	/**
+	 * Return the custom css necessary for that app
+	 * ⚠️ Warning, should be used slightly.
+	 * Theoretically, editing the variables should be enough.
+	 *
+	 * @return string
+	 * @since 25.0.0
+	 */
+	public function getCustomCss(): string;
 }
diff --git a/apps/theming/lib/Service/ThemeInjectionService.php b/apps/theming/lib/Service/ThemeInjectionService.php
index e00839c21c5..81edc19bc4b 100644
--- a/apps/theming/lib/Service/ThemeInjectionService.php
+++ b/apps/theming/lib/Service/ThemeInjectionService.php
@@ -75,7 +75,7 @@ class ThemeInjectionService {
 	 * @param string $media media query to use in the <link> element
 	 */
 	private function addThemeHeader(string $themeId, bool $plain = true, string $media = null) {
-		$linkToCSS = $this->urlGenerator->linkToRoute('theming.Theming.getThemeVariables', [
+		$linkToCSS = $this->urlGenerator->linkToRoute('theming.Theming.getThemeStylesheet', [
 			'themeId' => $themeId,
 			'plain' => $plain,
 		]);
diff --git a/apps/theming/lib/Themes/DarkHighContrastTheme.php b/apps/theming/lib/Themes/DarkHighContrastTheme.php
index 8d0b134c75f..62b7d4f6358 100644
--- a/apps/theming/lib/Themes/DarkHighContrastTheme.php
+++ b/apps/theming/lib/Themes/DarkHighContrastTheme.php
@@ -26,7 +26,7 @@ namespace OCA\Theming\Themes;
 
 use OCA\Theming\ITheme;
 
-class DarkHighContrastTheme extends HighContrastTheme implements ITheme {
+class DarkHighContrastTheme extends DarkTheme implements ITheme {
 
 	public function getId(): string {
 		return 'dark-highcontrast';
@@ -48,12 +48,51 @@ class DarkHighContrastTheme extends HighContrastTheme implements ITheme {
 		return $this->l->t('Similar to the high contrast mode, but with dark colours.');
 	}
 
+	/**
+	 * Try to keep this consistent with HighContrastTheme
+	 */
 	public function getCSSVariables(): array {
 		$variables = parent::getCSSVariables();
+		$colorMainText = '#ffffff';
+		$colorMainBackground = '#000000';
+		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorMainText));
 
-		// FIXME …
-		$variables = $variables;
+		$variables['--color-main-background'] = $colorMainBackground;
+		$variables['--color-main-text'] = $colorMainText;
+
+		$variables['--color-background-dark'] = $this->util->lighten($colorMainBackground, 30);
+		$variables['--color-background-darker'] = $this->util->lighten($colorMainBackground, 30);
+
+		$variables['--color-placeholder-light'] = $this->util->lighten($colorMainBackground, 30);
+		$variables['--color-placeholder-dark'] = $this->util->lighten($colorMainBackground, 45);
+
+		$variables['--color-text-maxcontrast'] = $colorMainText;
+		$variables['--color-text-light'] = $colorMainText;
+		$variables['--color-text-lighter'] = $colorMainText;
+
+		// used for the icon loading animation
+		$variables['--color-loading-light'] = '#000000';
+		$variables['--color-loading-dark'] = '#dddddd';
+
+
+		$variables['--color-box-shadow-rgb'] = $colorBoxShadowRGB;
+		$variables['--color-box-shadow'] = $colorBoxShadowRGB;
+
+
+		$variables['--color-border'] = $this->util->lighten($colorMainBackground, 50);
+		$variables['--color-border-dark'] = $this->util->lighten($colorMainBackground, 50);
 
 		return $variables;
 	}
+
+	public function getCustomCss(): string {
+		return "
+		[class^='icon-'], [class*=' icon-'],
+			.action,
+			#appmenu li a,
+			.menutoggle {
+				opacity: 1 !important;
+			}
+		";
+	}
 }
diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
index 3b194a36546..7561bb16ecd 100644
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -35,7 +35,6 @@ use OCP\IURLGenerator;
 class DefaultTheme implements ITheme {
 	public Util $util;
 	public ThemingDefaults $themingDefaults;
-	public IURLGenerator $urlGenerator;
 	public ImageManager $imageManager;
 	public IConfig $config;
 	public IL10N $l;
@@ -196,4 +195,8 @@ class DefaultTheme implements ITheme {
 
 		return $variables;
 	}
+
+	public function getCustomCss(): string {
+		return '';
+	}
 }
diff --git a/apps/theming/lib/Themes/DyslexiaFont.php b/apps/theming/lib/Themes/DyslexiaFont.php
index 460147b9fa3..50284d33b9d 100644
--- a/apps/theming/lib/Themes/DyslexiaFont.php
+++ b/apps/theming/lib/Themes/DyslexiaFont.php
@@ -58,18 +58,27 @@ class DyslexiaFont extends DefaultTheme implements ITheme {
 
 		return $variables;
 	}
-}
 
-// @font-face {
-// 	font-family: 'OpenDyslexic';
-// 	font-style: normal;
-// 	font-weight: 400;
-// 	src: url('../fonts/OpenDyslexic-Regular.woff') format('woff');
-// }
+	public function getCustomCss(): string {
+		return "
+			@font-face {
+				font-family: 'OpenDyslexic';
+				font-style: normal;
+				font-weight: 400;
+				src: url('../fonts/OpenDyslexic-Regular.woff') format('woff'),
+					 url('../fonts/OpenDyslexic-Regular.otf') format('opentype'),
+					 url('../fonts/OpenDyslexic-Regular.ttf') format('truetype');
+			}
+			
+			@font-face {
+				font-family: 'OpenDyslexic';
+				font-style: normal;
+				font-weight: 700;
+				src: url('../fonts/OpenDyslexic-Bold.woff') format('woff'),
+					 url('../fonts/OpenDyslexic-Bold.otf') format('opentype'),
+					 url('../fonts/OpenDyslexic-Bold.ttf') format('truetype');
+			}
+		";
+	}
+}
 
-// @font-face {
-// 	font-family: 'OpenDyslexic';
-// 	font-style: normal;
-// 	font-weight: 700;
-// 	src: url('../fonts/OpenDyslexic-Bold.woff') format('woff');
-// }
diff --git a/apps/theming/lib/Themes/HighContrastTheme.php b/apps/theming/lib/Themes/HighContrastTheme.php
index 67276e4ef00..77239f2076c 100644
--- a/apps/theming/lib/Themes/HighContrastTheme.php
+++ b/apps/theming/lib/Themes/HighContrastTheme.php
@@ -50,10 +50,42 @@ class HighContrastTheme extends DefaultTheme implements ITheme {
 
 	public function getCSSVariables(): array {
 		$variables = parent::getCSSVariables();
+		$colorMainText = '#000000';
+		$colorMainBackground = '#ffffff';
 
-		// FIXME …
-		$variables = $variables;
+		$variables['--color-main-background'] = $colorMainBackground;
+		$variables['--color-main-text'] = $colorMainText;
+
+		$variables['--color-background-dark'] = $this->util->darken($colorMainBackground, 30);
+		$variables['--color-background-darker'] = $this->util->darken($colorMainBackground, 30);
+
+		$variables['--color-placeholder-light'] = $this->util->darken($colorMainBackground, 30);
+		$variables['--color-placeholder-dark'] = $this->util->darken($colorMainBackground, 45);
+
+		$variables['--color-text-maxcontrast'] = 'var(--color-main-text)';
+		$variables['--color-text-light'] = 'var(--color-main-text)';
+		$variables['--color-text-lighter'] = 'var(--color-main-text)';
+
+		// used for the icon loading animation
+		$variables['--color-loading-light'] = '#dddddd';
+		$variables['--color-loading-dark'] = '#000000';
+
+		$variables['--color-box-shadow'] = 'var(--color-main-text)';
+
+		$variables['--color-border'] = $this->util->darken($colorMainBackground, 50);
+		$variables['--color-border-dark'] = $this->util->darken($colorMainBackground, 50);
 
 		return $variables;
 	}
+
+	public function getCustomCss(): string {
+		return "
+			[class^='icon-'], [class*=' icon-'],
+			.action,
+			#appmenu li a,
+			.menutoggle {
+				opacity: 1 !important;
+			}
+		";
+	}
 }