Mk/review/kh/dev/base theme

apps/theming/lib/Service/ThemesService.php

@@ -32,8 +32,8 @@ public function __construct(
 		private DarkTheme $darkTheme,
 		HighContrastTheme $highContrastTheme,
 		DarkHighContrastTheme $darkHighContrastTheme,
-		IonosTheme $ionosTheme,
 		DyslexiaFont $dyslexiaFont,
+		IonosTheme $ionosTheme,
 	) {
 
 		// Register themes

apps/theming/lib/Themes/IonosTheme.php

@@ -16,15 +16,15 @@ public function getId(): string {
 	}
 
 	public function getTitle(): string {
-		return $this->l->t('Ionos theme');
+		return $this->l->t('IONOS theme');
 	}
 
 	public function getEnableLabel(): string {
-		return $this->l->t('Enable the default ionos theme');
+		return $this->l->t('Enable the default IONOS theme');
 	}
 
 	public function getDescription(): string {
-		return $this->l->t('The default ionos appearance.');
+		return $this->l->t('The default IONOS appearance.');
 	}
 
 	public function getMediaQuery(): string {
@@ -34,6 +34,7 @@ public function getMediaQuery(): string {
 	public function getCustomCss(): string {
 	return "
 			#header {
+				box-shadow: var(--ion-shadow-header);
 				#nextcloud {
 				padding-inline-start: 220px;
 					.logo {
@@ -121,11 +122,8 @@ public function getCustomCss(): string {
 
 				/* Sub Navigation Toggle Icon Button */
 				.button-vue--icon-only:not(.app-navigation-toggle) {
-					margin: 6px;
 					background-color: transparent;
 					span[role=img]>svg {
-						height: 16px;
-						width: 16px;
 						color: var(--ion-button-sidebar-text);
 					}
 					&:hover {
@@ -235,14 +233,10 @@ public function getCSSVariables(): array {
 		];
 
 
-		$colorPrimary = $ionColorPrimary;
+		$colorPrimary = $ionColorBlueB4;
 		$this->primaryColor = $colorPrimary;
-		$colorShadowHeader = 'light-dark(' . 'rgba(113, 128, 149, 0.5)' . ', ' . 'rgba(113, 128, 149, 0.2)' . ')';
 
 		$colorMainText = $ionColorTypoMild;
-		$colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText));
-		// Color that still provides enough contrast for text, so we need a ratio of 4.5:1 on main background AND hover
-		$colorTextMaxcontrast = '#6b6b6b'; // 4.5 : 1 for hover background and background dark
 		$colorMainBackground = '#ffffff';
 		$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
 		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
@@ -253,24 +247,8 @@ public function getCSSVariables(): array {
 		$colorSuccess = $ionColorGreenG3;
 		$colorInfo = $ionColorSkyS3;
 
-		$user = $this->userSession->getUser();
-		// Chromium based browsers currently (2024) have huge performance issues with blur filters
-		$isChromium = $this->request !== null && $this->request->isUserAgent([Request::USER_AGENT_CHROME, Request::USER_AGENT_MS_EDGE]);
-		// Ignore MacOS because they always have hardware accelartion
-		$isChromium = $isChromium && !$this->request->isUserAgent(['/Macintosh/']);
-		// Allow to force the blur filter
-		$forceEnableBlur = $user === null ? false : $this->config->getUserValue(
-			$user->getUID(),
-			'theming',
-			'force_enable_blur_filter',
-		);
-		$workingBlur = match($forceEnableBlur) {
-			'yes' => true,
-			'no' => false,
-			default => !$isChromium
-		};
-
 		$variables = [
+			'--ion-shadow-header' => '0 4px 8px rgba(0, 0, 0, 0.12)',
 			'--color-main-background' => $ionColorMainBackground,
 			'--color-main-background-rgb' => $colorMainBackgroundRGB,
 			'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)',
@@ -327,59 +305,6 @@ public function getCSSVariables(): array {
 			'--color-border' => $this->util->darken($colorMainBackground, 7),
 			'--color-border-dark' => $this->util->darken($colorMainBackground, 14),
 			'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 51),
-
-			'--font-face' => "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
-			'--default-font-size' => '15px',
-			'--font-size-small' => '13px',
-			// 1.5 * font-size for accessibility
-			'--default-line-height' => '1.5',
-
-			// TODO: support "(prefers-reduced-motion)"
-			'--animation-quick' => '100ms',
-			'--animation-slow' => '300ms',
-
-			// Default variables --------------------------------------------
-			// Border width for input elements such as text fields and selects
-			'--border-width-input' => '1px',
-			'--border-width-input-focused' => '2px',
-
-			// Border radii (new values)
-			'--border-radius-small' => '4px', // For smaller elements
-			'--border-radius-element' => '8px', // For interactive elements such as buttons, input, navigation and list items
-			'--border-radius-container' => '12px', // For smaller containers like action menus
-			'--border-radius-container-large' => '16px', // For bigger containers like body or modals
-
-			// Border radii (deprecated)
-			'--border-radius' => 'var(--border-radius-small)',
-			'--border-radius-large' => 'var(--border-radius-element)',
-			'--border-radius-rounded' => '28px',
-			'--border-radius-pill' => '100px',
-
-			'--default-clickable-area' => '34px',
-			'--clickable-area-large' => '48px',
-			'--clickable-area-small' => '24px',
-
-			'--default-grid-baseline' => '4px',
-
-			// various structure data
-			'--header-height' => '50px',
-			'--header-menu-item-height' => '44px',
-			'--navigation-width' => '300px',
-			'--sidebar-min-width' => '300px',
-			'--sidebar-max-width' => '500px',
-
-			// Border radius of the body container
-			'--body-container-radius' => 'var(--border-radius-container-large)',
-			// Margin of the body container
-			'--body-container-margin' => 'calc(var(--default-grid-baseline) * 2)',
-			// Height of the body container to fully fill the view port
-			'--body-height' => 'calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin))',
-
-			// mobile. Keep in sync with core/src/init.js
-			'--breakpoint-mobile' => '1024px',
-			'--background-invert-if-dark' => 'no',
-			'--background-invert-if-bright' => 'invert(100%)',
-			'--background-image-invert-if-bright' => 'no',
 		];
 
 		return array_merge(

apps/theming/tests/Service/ThemesServiceTest.php

@@ -15,6 +15,7 @@
 use OCA\Theming\Themes\DyslexiaFont;
 use OCA\Theming\Themes\HighContrastTheme;
 use OCA\Theming\Themes\LightTheme;
+use OCA\Theming\Themes\IonosTheme;
 use OCA\Theming\ThemingDefaults;
 use OCA\Theming\Util;
 use OCP\App\IAppManager;
@@ -77,6 +78,7 @@ public function testGetThemes(): void {
 			'dark',
 			'light-highcontrast',
 			'dark-highcontrast',
+			'ionos',
 			'opendyslexic',
 		];
 		$this->assertEquals($expected, array_keys($this->themesService->getThemes()));
@@ -113,19 +115,40 @@ public function testGetThemesEnforcedInvalid(): void {
 			'dark',
 			'light-highcontrast',
 			'dark-highcontrast',
+			'ionos',
 			'opendyslexic',
 		];
 
 		$this->assertEquals($expected, array_keys($this->themesService->getThemes()));
 	}
 
+	public function testGetThemesEnforcedIonos(): void {
+		$this->config->expects($this->once())
+			->method('getSystemValueString')
+			->with('enforce_theme', '')
+			->willReturn('ionos');
+		$this->logger->expects($this->never())
+			->method('error');
+
+		$expected = [
+			'default',
+			'dark',
+			'ionos',
+		];
+
+		$this->assertEquals($expected, array_keys($this->themesService->getThemes()));
+	}
+
 	public function dataTestEnableTheme() {
 		return [
 			['default', ['default'], ['default']],
 			['dark', ['default'], ['dark']],
 			['dark', ['dark'], ['dark']],
 			['opendyslexic', ['dark'], ['dark', 'opendyslexic']],
 			['dark', ['light-highcontrast', 'opendyslexic'], ['opendyslexic', 'dark']],
+			['ionos', ['default'], ['ionos']],
+			['ionos', ['ionos'], ['ionos']],
+			['ionos', ['dark', 'opendyslexic'], ['opendyslexic', 'ionos']],
 		];
 	}
 
@@ -160,6 +183,8 @@ public function dataTestDisableTheme() {
 			['dark', ['dark'], []],
 			['opendyslexic', ['dark', 'opendyslexic'], ['dark'], ],
 			['light-highcontrast', ['opendyslexic'], ['opendyslexic']],
+			['ionos', ['ionos'], []],
+			['ionos', ['dark', 'ionos'], ['dark']],
 		];
 	}
 
@@ -195,6 +220,10 @@ public function dataTestIsEnabled() {
 			['dark', ['dark'], true],
 			['opendyslexic', ['dark', 'opendyslexic'], true],
 			['light-highcontrast', ['opendyslexic'], false],
+			['ionos', [], false],
+			['ionos', ['ionos'], true],
+			['ionos', ['dark', 'ionos'], true],
+			['ionos', ['opendyslexic'], false],
 		];
 	}
 
@@ -372,6 +401,17 @@ private function initThemes() {
 				$appManager,
 				null,
 			),
+			'ionos' => new IonosTheme(
+				$util,
+				$this->themingDefaults,
+				$this->userSession,
+				$urlGenerator,
+				$imageManager,
+				$this->config,
+				$l10n,
+				$appManager,
+				null,
+			),
 		];
 	}
 }