Merge pull request #9723 from nextcloud/css4-variables

Css4 variables migration

6 files changed, 37 insertions, 29 deletions

diff --git a/apps/theming/css/settings-admin.scss b/apps/theming/css/settings-admin.scss
index 7753540ccd2..c67d48d46fe 100644
--- a/apps/theming/css/settings-admin.scss
+++ b/apps/theming/css/settings-admin.scss
@@ -122,3 +122,11 @@
         background-size: contain;
     }
 }
+
+/* transition effects for theming value changes */
+#header {
+    transition: background-color 500ms linear;
+    svg, img {
+        transition: 500ms filter linear;
+    }
+}
\ No newline at end of file
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 6b0566039d2..4a32458d8a8 100644
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -94,7 +94,7 @@
 @if variable_exists('theming-logo-mime') and $theming-logo-mime != '' {
 	#theming-preview-logo,
 	#header .logo {
-		background-image: url(#{$image-logo});
+		background-image: $image-logo;
 		background-size: contain;
 	}
 	#body-login #header .logo {
@@ -102,7 +102,7 @@
 	}
 } @else {
 	#theming-preview-logo {
-		background-image: url(#{$image-logo});
+		background-image: $image-logo;
 	}
 }
 
@@ -110,12 +110,12 @@
 	#body-login,
 	#firstrunwizard .firstrunwizard-header,
 	#theming-preview {
-		background-image: url(#{$image-login-background});
+		background-image: $image-login-background;
 		background-color: $color-primary;
 	}
 } @else {
 	  #theming-preview {
-		  background-image: url(#{$image-login-background});
+		  background-image: $image-login-background;
 		  background-color: $color-primary;
 	  }
 }
diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php
index 96f8dfde9fd..44f1ea51c06 100644
--- a/apps/theming/lib/Controller/ThemingController.php
+++ b/apps/theming/lib/Controller/ThemingController.php
@@ -201,14 +201,14 @@ class ThemingController extends Controller {
 		$this->themingDefaults->set($setting, $value);
 
 		// reprocess server scss for preview
-		$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/server.scss', 'core');
+		$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/css-variables.scss', 'core');
 
 		return new DataResponse(
 			[
 				'data' =>
 					[
 						'message' => $this->l10n->t('Saved'),
-						'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/server.scss'))
+						'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/css-variables.scss'))
 					],
 				'status' => 'success'
 			]
@@ -302,7 +302,7 @@ class ThemingController extends Controller {
 
 		$this->themingDefaults->set($key.'Mime', $image['type']);
 
-		$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/server.scss', 'core');
+		$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/css-variables.scss', 'core');
 
 		return new DataResponse(
 			[
@@ -311,7 +311,7 @@ class ThemingController extends Controller {
 						'name' => $name,
 						'url' => $this->imageManager->getImageUrl($key),
 						'message' => $this->l10n->t('Saved'),
-						'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/server.scss'))
+						'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/css-variables.scss'))
 					],
 				'status' => 'success'
 			]
@@ -328,7 +328,7 @@ class ThemingController extends Controller {
 	public function undo(string $setting): DataResponse {
 		$value = $this->themingDefaults->undo($setting);
 		// reprocess server scss for preview
-		$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/server.scss', 'core');
+		$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/css-variables.scss', 'core');
 
 		if (strpos($setting, 'Mime') !== -1) {
 			$imageKey = str_replace('Mime', '', $setting);
@@ -341,7 +341,7 @@ class ThemingController extends Controller {
 					[
 						'value' => $value,
 						'message' => $this->l10n->t('Saved'),
-						'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/server.scss'))
+						'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/css-variables.scss'))
 					],
 				'status' => 'success'
 			]
diff --git a/apps/theming/lib/ThemingDefaults.php b/apps/theming/lib/ThemingDefaults.php
index d29eb69873f..72286ece4b8 100644
--- a/apps/theming/lib/ThemingDefaults.php
+++ b/apps/theming/lib/ThemingDefaults.php
@@ -272,10 +272,10 @@ class ThemingDefaults extends \OC_Defaults {
 			'theming-favicon-mime' => "'" . $this->config->getAppValue('theming', 'faviconMime') . "'"
 		];
 
-		$variables['image-logo'] = "'".$this->imageManager->getImageUrl('logo')."'";
+		$variables['image-logo'] = "url('".$this->imageManager->getImageUrl('logo')."')";
 		$variables['image-logoheader'] = "'".$this->imageManager->getImageUrl('logoheader')."'";
 		$variables['image-favicon'] = "'".$this->imageManager->getImageUrl('favicon')."'";
-		$variables['image-login-background'] = "'".$this->imageManager->getImageUrl('background')."'";
+		$variables['image-login-background'] = "url('".$this->imageManager->getImageUrl('background')."')";
 		$variables['image-login-plain'] = 'false';
 
 		if ($this->config->getAppValue('theming', 'color', null) !== null) {
diff --git a/apps/theming/tests/Controller/ThemingControllerTest.php b/apps/theming/tests/Controller/ThemingControllerTest.php
index 360eb7083a4..a2105264f10 100644
--- a/apps/theming/tests/Controller/ThemingControllerTest.php
+++ b/apps/theming/tests/Controller/ThemingControllerTest.php
@@ -151,20 +151,20 @@ class ThemingControllerTest extends TestCase {
 		$this->scssCacher
 			->expects($this->once())
 			->method('getCachedSCSS')
-			->with('core', '/core/css/server.scss')
-			->willReturn('/core/css/someHash-server.scss');
+			->with('core', '/core/css/css-variables.scss')
+			->willReturn('/core/css/someHash-css-variables.scss');
 		$this->urlGenerator
 			->expects($this->once())
 			->method('linkTo')
-			->with('', '/core/css/someHash-server.scss')
-			->willReturn('/nextcloudWebroot/core/css/someHash-server.scss');
+			->with('', '/core/css/someHash-css-variables.scss')
+			->willReturn('/nextcloudWebroot/core/css/someHash-css-variables.scss');
 
 		$expected = new DataResponse(
 			[
 				'data' =>
 					[
 						'message' => $message,
-						'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss',
+						'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-css-variables.scss',
 					],
 				'status' => 'success',
 			]
@@ -604,13 +604,13 @@ class ThemingControllerTest extends TestCase {
 		$this->scssCacher
 			->expects($this->once())
 			->method('getCachedSCSS')
-			->with('core', '/core/css/server.scss')
-			->willReturn('/core/css/someHash-server.scss');
+			->with('core', '/core/css/css-variables.scss')
+			->willReturn('/core/css/someHash-css-variables.scss');
 		$this->urlGenerator
 			->expects($this->once())
 			->method('linkTo')
-			->with('', '/core/css/someHash-server.scss')
-			->willReturn('/nextcloudWebroot/core/css/someHash-server.scss');
+			->with('', '/core/css/someHash-css-variables.scss')
+			->willReturn('/nextcloudWebroot/core/css/someHash-css-variables.scss');
 
 		$expected = new DataResponse(
 			[
@@ -618,7 +618,7 @@ class ThemingControllerTest extends TestCase {
 					[
 						'value' => 'MyValue',
 						'message' => 'Saved',
-						'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss',
+						'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-css-variables.scss',
 					],
 				'status' => 'success'
 			]
@@ -648,13 +648,13 @@ class ThemingControllerTest extends TestCase {
 		$this->scssCacher
 			->expects($this->once())
 			->method('getCachedSCSS')
-			->with('core', '/core/css/server.scss')
-			->willReturn('/core/css/someHash-server.scss');
+			->with('core', '/core/css/css-variables.scss')
+			->willReturn('/core/css/someHash-css-variables.scss');
 		$this->urlGenerator
 			->expects($this->once())
 			->method('linkTo')
-			->with('', '/core/css/someHash-server.scss')
-			->willReturn('/nextcloudWebroot/core/css/someHash-server.scss');
+			->with('', '/core/css/someHash-css-variables.scss')
+			->willReturn('/nextcloudWebroot/core/css/someHash-css-variables.scss');
 		$this->imageManager->expects($this->once())
 			->method('delete')
 			->with($filename);
@@ -665,7 +665,7 @@ class ThemingControllerTest extends TestCase {
 					[
 						'value' => $value,
 						'message' => 'Saved',
-						'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss',
+						'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-css-variables.scss',
 					],
 				'status' => 'success'
 			]
diff --git a/apps/theming/tests/ThemingDefaultsTest.php b/apps/theming/tests/ThemingDefaultsTest.php
index ceaf2cc19d5..87b2003ded2 100644
--- a/apps/theming/tests/ThemingDefaultsTest.php
+++ b/apps/theming/tests/ThemingDefaultsTest.php
@@ -645,8 +645,8 @@ class ThemingDefaultsTest extends TestCase {
 			'theming-cachebuster' => '\'0\'',
 			'theming-logo-mime' => '\'jpeg\'',
 			'theming-background-mime' => '\'jpeg\'',
-			'image-logo' => "'custom-logo?v=0'",
-			'image-login-background' => "'custom-background?v=0'",
+			'image-logo' => "url('custom-logo?v=0')",
+			'image-login-background' => "url('custom-background?v=0')",
 			'color-primary' => $this->defaults->getColorPrimary(),
 			'color-primary-text' => '#ffffff',
 			'image-login-plain' => 'false',