Merge pull request #34210 from nextcloud/fix/theming

Fixing missing theming variables

apps/theming/css/default.css

@@ -10,21 +10,6 @@
   --color-background-darker: #dbdbdb;
   --color-placeholder-light: #e6e6e6;
   --color-placeholder-dark: #cccccc;
-  --color-primary: #0082c9;
-  --color-primary-text: #ffffff;
-  --color-primary-hover: #329bd3;
-  --color-primary-light: #e5f2f9;
-  --color-primary-light-text: #0082c9;
-  --color-primary-light-hover: #dbe7ee;
-  --color-primary-text-dark: #ededed;
-  --color-primary-element: #0082c9;
-  --color-primary-element-text: #ffffff;
-  --color-primary-element-hover: #329bd3;
-  --color-primary-element-light: #e5f2f9;
-  --color-primary-element-light-text: #0082c9;
-  --color-primary-element-light-hover: #dbe7ee;
-  --color-primary-element-text-dark: #ededed;
-  --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
   --color-main-text: #222222;
   --color-text-maxcontrast: #767676;
   --color-text-light: #222222;
@@ -68,4 +53,19 @@
   --background-invert-if-dark: no;
   --background-invert-if-bright: invert(100%);
   --image-main-background: url('/core/img/app-background.jpg');
+  --color-primary: #0082c9;
+  --color-primary-text: #ffffff;
+  --color-primary-hover: #329bd3;
+  --color-primary-light: #e5f2f9;
+  --color-primary-light-text: #0082c9;
+  --color-primary-light-hover: #dbe7ee;
+  --color-primary-text-dark: #ededed;
+  --color-primary-element: #0082c9;
+  --color-primary-element-text: #ffffff;
+  --color-primary-element-hover: #329bd3;
+  --color-primary-element-light: #e5f2f9;
+  --color-primary-element-light-text: #0082c9;
+  --color-primary-element-light-hover: #dbe7ee;
+  --color-primary-element-text-dark: #ededed;
+  --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
 }

apps/theming/lib/Service/ThemesService.php

@@ -87,9 +87,9 @@ class ThemesService {
 		}
 
 		/** @var ITheme[] */
-		$themes = array_map(function($themeId) {
+		$themes = array_filter(array_map(function($themeId) {
 			return $this->getThemes()[$themeId];
-		}, $themesIds);
+		}, $themesIds));
 
 		// Filtering all themes with the same type
 		$filteredThemes = array_filter($themes, function(ITheme $t) use ($theme) {

apps/theming/lib/Themes/CommonThemeTrait.php

@@ -0,0 +1,65 @@
+<?php
+declare(strict_types=1);
+/**
+ * @copyright Copyright (c) 2022 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+namespace OCA\Theming\Themes;
+
+use OCA\Theming\Util;
+
+trait CommonThemeTrait {
+	public Util $util;
+
+	/**
+	 * Generate primary-related variables
+	 * This is shared between multiple themes because colorMainBackground and colorMainText
+	 * will change in between.
+	 */
+	protected function generatePrimaryVariables(string $colorMainBackground, string $colorMainText): array {
+		$colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80);
+		$colorPrimaryElement = $this->util->elementColor($this->primaryColor);
+		$colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
+
+		// primary related colours
+		return [
+			'--color-primary' => $this->primaryColor,
+			'--color-primary-text' => $this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff',
+			'--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60),
+			'--color-primary-light' => $colorPrimaryLight,
+			'--color-primary-light-text' => $this->primaryColor,
+			'--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),
+			'--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7),
+
+			// used for buttons, inputs...
+			'--color-primary-element' => $colorPrimaryElement,
+			'--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
+			'--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60),
+			'--color-primary-element-light' => $colorPrimaryElementLight,
+			'--color-primary-element-light-text' => $colorPrimaryElement,
+			'--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90),
+			'--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7),
+
+			// to use like this: background-image: var(--gradient-primary-background);
+			'--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)',
+		];
+	}
+}

apps/theming/lib/Themes/DarkHighContrastTheme.php

@@ -49,42 +49,48 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme {
 	}
 
 	/**
-	 * Try to keep this consistent with HighContrastTheme
+	 * Keep this consistent with other HighContrast Themes
 	 */
 	public function getCSSVariables(): array {
-		$variables = parent::getCSSVariables();
+		$defaultVariables = parent::getCSSVariables();
+
 		$colorMainText = '#ffffff';
 		$colorMainBackground = '#000000';
 
-		$variables['--color-main-background'] = $colorMainBackground;
-		$variables['--color-main-background-translucent'] = 'rgba(var(--color-main-background-rgb), .1)';
-		$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);
+		return array_merge(
+			$defaultVariables,
+			$this->generatePrimaryVariables($colorMainBackground, $colorMainText),
+			[
+				'--color-main-background' => $colorMainBackground,
+				'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .1)',
+				'--color-main-text' => $colorMainText,
 
-		$variables['--color-text-maxcontrast'] = $colorMainText;
-		$variables['--color-text-light'] = $colorMainText;
-		$variables['--color-text-lighter'] = $colorMainText;
+				'--color-background-dark' => $this->util->lighten($colorMainBackground, 30),
+				'--color-background-darker' => $this->util->lighten($colorMainBackground, 30),
 
-		$variables['--color-scrollbar'] = $this->util->lighten($colorMainBackground, 35);
+				'--color-main-background-blur' => $colorMainBackground,
+				'--filter-background-blur' => 'none',
 
-		// used for the icon loading animation
-		$variables['--color-loading-light'] = '#000000';
-		$variables['--color-loading-dark'] = '#dddddd';
+				'--color-placeholder-light' => $this->util->lighten($colorMainBackground, 30),
+				'--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 45),
 
+				'--color-text-maxcontrast' => $colorMainText,
+				'--color-text-light' => $colorMainText,
+				'--color-text-lighter' => $colorMainText,
 
-		$variables['--color-box-shadow-rgb'] = 'var(--color-main-text)';
-		$variables['--color-box-shadow'] = 'var(--color-main-text)';
+				'--color-scrollbar' => $this->util->lighten($colorMainBackground, 35),
 
+				// used for the icon loading animation
+				'--color-loading-light' => '#000000',
+				'--color-loading-dark' => '#dddddd',
 
-		$variables['--color-border'] = $this->util->lighten($colorMainBackground, 50);
-		$variables['--color-border-dark'] = $this->util->lighten($colorMainBackground, 50);
+				'--color-box-shadow-rgb' => $colorMainText,
+				'--color-box-shadow' => $colorMainText,
 
-		return $variables;
+				'--color-border' => $this->util->lighten($colorMainBackground, 50),
+				'--color-border-dark' => $this->util->lighten($colorMainBackground, 50),
+			]
+		);
 	}
 
 	public function getCustomCss(): string {

apps/theming/lib/Themes/DarkTheme.php

@@ -54,45 +54,44 @@ class DarkTheme extends DefaultTheme implements ITheme {
 		$colorMainText = '#D8D8D8';
 		$colorMainBackground = '#171717';
 		$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
+
 		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
 		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
-		$colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80);
-
-		return array_merge($defaultVariables, [
-			'--color-main-text' => $colorMainText,
-			'--color-main-background' => $colorMainBackground,
-			'--color-main-background-rgb' => $colorMainBackgroundRGB,
 
-			'--color-scrollbar' => $this->util->lighten($colorMainBackground, 15),
+		return array_merge(
+			$defaultVariables,
+			$this->generatePrimaryVariables($colorMainBackground, $colorMainText),
+			[
+				'--color-main-text' => $colorMainText,
+				'--color-main-background' => $colorMainBackground,
+				'--color-main-background-rgb' => $colorMainBackgroundRGB,
 
-			'--color-background-hover' => $this->util->lighten($colorMainBackground, 4),
-			'--color-background-dark' => $this->util->lighten($colorMainBackground, 7),
-			'--color-background-darker' => $this->util->lighten($colorMainBackground, 14),
+				'--color-scrollbar' => $this->util->lighten($colorMainBackground, 15),
 
-			'--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10),
-			'--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20),
+				'--color-background-hover' => $this->util->lighten($colorMainBackground, 4),
+				'--color-background-dark' => $this->util->lighten($colorMainBackground, 7),
+				'--color-background-darker' => $this->util->lighten($colorMainBackground, 14),
 
-			'--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60),
-			'--color-primary-light' => $colorPrimaryLight,
-			'--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),
-			'--color-primary-element' => $this->util->elementColor($this->primaryColor, false),
-			'--color-primary-element-hover' => $this->util->mix($this->util->elementColor($this->primaryColor, false), $colorMainBackground, 80),
-			'--color-primary-element-light' => $this->util->lighten($this->util->elementColor($this->primaryColor, false), 15),
+				'--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10),
+				'--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20),
 
-			'--color-text-maxcontrast' => $this->util->darken($colorMainText, 30),
-			'--color-text-light' => $this->util->darken($colorMainText, 10),
-			'--color-text-lighter' => $this->util->darken($colorMainText, 20),
+				'--color-text-maxcontrast' => $this->util->darken($colorMainText, 30),
+				'--color-text-light' => $this->util->darken($colorMainText, 10),
+				'--color-text-lighter' => $this->util->darken($colorMainText, 20),
 
-			'--color-loading-light' => '#777',
-			'--color-loading-dark' => '#CCC',
+				// used for the icon loading animation
+				'--color-loading-light' => '#777',
+				'--color-loading-dark' => '#CCC',
 
-			'--color-box-shadow-rgb' => $colorBoxShadowRGB,
+				'--color-box-shadow' => $colorBoxShadow,
+				'--color-box-shadow-rgb' => $colorBoxShadowRGB,
 
-			'--color-border' => $this->util->lighten($colorMainBackground, 7),
-			'--color-border-dark' => $this->util->lighten($colorMainBackground, 14),
+				'--color-border' => $this->util->lighten($colorMainBackground, 7),
+				'--color-border-dark' => $this->util->lighten($colorMainBackground, 14),
 
-			'--background-invert-if-dark' => 'invert(100%)',
-			'--background-invert-if-bright' => 'no',
-		]);
+				'--background-invert-if-dark' => 'invert(100%)',
+				'--background-invert-if-bright' => 'no',
+			]
+		);
 	}
 }

apps/theming/lib/Themes/DefaultTheme.php

@@ -37,6 +37,8 @@ use OCP\IUserSession;
 use OCP\Server;
 
 class DefaultTheme implements ITheme {
+	use CommonThemeTrait;
+
 	public Util $util;
 	public ThemingDefaults $themingDefaults;
 	public IURLGenerator $urlGenerator;
@@ -93,10 +95,6 @@ class DefaultTheme implements ITheme {
 		$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
 		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
 		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
-		$colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80);
-
-		$colorPrimaryElement = $this->util->elementColor($this->primaryColor);
-		$colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
 
 		$hasCustomLogoHeader = $this->imageManager->hasImage('logo') || $this->imageManager->hasImage('logoheader');
 		$hasCustomPrimaryColour = !empty($this->config->getAppValue(Application::APP_ID, 'color'));
@@ -119,25 +117,6 @@ class DefaultTheme implements ITheme {
 			'--color-placeholder-light' => $this->util->darken($colorMainBackground, 10),
 			'--color-placeholder-dark' => $this->util->darken($colorMainBackground, 20),
 
-			// 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, 60),
-			'--color-primary-light' => $colorPrimaryLight,
-			'--color-primary-light-text' => $this->primaryColor,
-			'--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),
-			'--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7),
-			// used for buttons, inputs...
-			'--color-primary-element' => $colorPrimaryElement,
-			'--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
-			'--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60),
-			'--color-primary-element-light' => $colorPrimaryElementLight,
-			'--color-primary-element-light-text' => $colorPrimaryElement,
-			'--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90),
-			'--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7),
-			// to use like this: background-image: var(--gradient-primary-background);
-			'--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)',
-
 			// max contrast for WCAG compliance
 			'--color-main-text' => $colorMainText,
 			'--color-text-maxcontrast' => $this->util->lighten($colorMainText, 33),
@@ -211,6 +190,9 @@ class DefaultTheme implements ITheme {
 			'--image-main-background' => "url('" . $this->urlGenerator->imagePath('core', 'app-background.jpg') . "')",
 		];
 
+		// Primary variables
+		$variables = array_merge($variables, $this->generatePrimaryVariables($colorMainBackground, $colorMainText));
+
 		$backgroundDeleted = $this->config->getAppValue(Application::APP_ID, 'backgroundMime', '') === 'backgroundColor';
 		// If primary as background has been request or if we have a custom primary colour
 		// let's not define the background image

apps/theming/lib/Themes/HighContrastTheme.php

@@ -48,41 +48,49 @@ class HighContrastTheme extends DefaultTheme implements ITheme {
 		return $this->l->t('A high contrast mode to ease your navigation. Visual quality will be reduced but clarity will be increased.');
 	}
 
+	/**
+	 * Keep this consistent with other HighContrast Themes
+	 */
 	public function getCSSVariables(): array {
-		$variables = parent::getCSSVariables();
+		$defaultVariables = parent::getCSSVariables();
+
 		$colorMainText = '#000000';
 		$colorMainBackground = '#ffffff';
 
-		$variables['--color-main-background'] = $colorMainBackground;
-		$variables['--color-main-background-translucent'] = 'rgba(var(--color-main-background-rgb), .1)';
-		$variables['--color-main-text'] = $colorMainText;
-
-		$variables['--color-background-dark'] = $this->util->darken($colorMainBackground, 30);
-		$variables['--color-background-darker'] = $this->util->darken($colorMainBackground, 30);
+		return array_merge(
+			$defaultVariables,
+			$this->generatePrimaryVariables($colorMainBackground, $colorMainText),
+			[
+				'--color-main-background' => $colorMainBackground,
+				'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .1)',
+				'--color-main-text' => $colorMainText,
 
-		$variables['--color-main-background-blur'] = $colorMainBackground;
-		$variables['--filter-background-blur'] = 'none';
+				'--color-background-dark' => $this->util->darken($colorMainBackground, 30),
+				'--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);
+				'--color-main-background-blur' => $colorMainBackground,
+				'--filter-background-blur' => 'none',
 
-		$variables['--color-text-maxcontrast'] = 'var(--color-main-text)';
-		$variables['--color-text-light'] = 'var(--color-main-text)';
-		$variables['--color-text-lighter'] = 'var(--color-main-text)';
+				'--color-placeholder-light' => $this->util->darken($colorMainBackground, 30),
+				'--color-placeholder-dark' => $this->util->darken($colorMainBackground, 45),
 
-		$variables['--color-scrollbar'] = $this->util->darken($colorMainBackground, 25);
+				'--color-text-maxcontrast' => $colorMainText,
+				'--color-text-light' => $colorMainText,
+				'--color-text-lighter' => $colorMainText,
 
-		// used for the icon loading animation
-		$variables['--color-loading-light'] = '#dddddd';
-		$variables['--color-loading-dark'] = '#000000';
+				'--color-scrollbar' => $this->util->darken($colorMainBackground, 25),
 
-		$variables['--color-box-shadow-rgb'] = 'var(--color-main-text)';
-		$variables['--color-box-shadow'] = 'var(--color-main-text)';
+				// used for the icon loading animation
+				'--color-loading-light' => '#dddddd',
+				'--color-loading-dark' => '#000000',
 
-		$variables['--color-border'] = $this->util->darken($colorMainBackground, 50);
-		$variables['--color-border-dark'] = $this->util->darken($colorMainBackground, 50);
+				'--color-box-shadow-rgb' => $colorMainText,
+				'--color-box-shadow' => $colorMainText,
 
-		return $variables;
+				'--color-border' => $this->util->darken($colorMainBackground, 50),
+				'--color-border-dark' => $this->util->darken($colorMainBackground, 50),
+			]
+		);
 	}
 
 	public function getCustomCss(): string {