Merge pull request #9723 from nextcloud/css4-variables

Css4 variables migration

12 files changed, 70 insertions, 62 deletions

diff --git a/apps/comments/css/autocomplete.scss b/apps/comments/css/autocomplete.scss
index 41695e08301..0837b387814 100644
--- a/apps/comments/css/autocomplete.scss
+++ b/apps/comments/css/autocomplete.scss
@@ -9,11 +9,11 @@
 	left: 0;
 	display: none;
 	margin-top: 18px;
-	background: $color-main-background;
-	color: $color-main-text;
-	border: 1px solid $color-border;
-	border-radius: $border-radius;
-	box-shadow: 0 0 5px $color-box-shadow;
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	box-shadow: 0 0 5px var(--color-box-shadow);
 	min-width: 120px;
 	z-index: 11110 !important;
 }
@@ -22,14 +22,14 @@
 	padding: 5px;
 	margin: 5px;
 	cursor: pointer;
-	border-bottom: solid 1px $color-border;
-	color: $color-main-text;
+	border-bottom: solid 1px var(--color-border);
+	color: var(--color-main-text);
 	font-size: 11px;
 	font-weight: bold;
 }
 
 .atwho-view .atwho-header .small {
-	color: $color-main-text;
+	color: var(--color-main-text);
 	float: right;
 	padding-top: 2px;
 	margin-right: -5px;
@@ -42,18 +42,18 @@
 }
 
 .atwho-view .cur {
-	background: $color-primary;
-	color: $color-primary-text;
+	background: var(--color-primary);
+	color: var(--color-primary-text);
 }
 .atwho-view .cur small {
-	color: $color-primary-text;
+	color: var(--color-primary-text);
 }
 .atwho-view strong {
-	color: $color-main-text;
+	color: var(--color-main-text);
 	font-weight: normal;
 }
 .atwho-view .cur strong {
-	color: $color-primary-text;
+	color: var(--color-primary-text);
 	font-weight: normal;
 }
 .atwho-view ul {
@@ -67,11 +67,11 @@
 .atwho-view ul li {
 	display: block;
 	padding: 5px 10px;
-	border-bottom: 1px solid $color-border;
+	border-bottom: 1px solid var(--color-border);
 	cursor: pointer;
 }
 .atwho-view small {
 	font-size: smaller;
-	color: $color-main-text;
+	color: var(--color-main-text);
 	font-weight: normal;
 }
diff --git a/apps/comments/css/comments.scss b/apps/comments/css/comments.scss
index d2ed74adaeb..ae1f6d71720 100644
--- a/apps/comments/css/comments.scss
+++ b/apps/comments/css/comments.scss
@@ -70,7 +70,7 @@
 }
 
 #commentsTabView .comments .comment {
-	border-top: 1px solid $color-border;
+	border-top: 1px solid var(--color-border);
 }
 
 #commentsTabView .comment .avatar,
diff --git a/apps/files/css/detailsView.scss b/apps/files/css/detailsView.scss
index 334fc0c8fd8..4a3336cdbcf 100644
--- a/apps/files/css/detailsView.scss
+++ b/apps/files/css/detailsView.scss
@@ -100,7 +100,7 @@
 }
 
 #app-sidebar .file-details {
-	color: $color-text-details;
+	color: var(--color-text-maxcontrast);
 }
 
 #app-sidebar .action-favorite {
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index ca2915a9034..01703df5bf1 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -41,8 +41,8 @@
 .newFileMenu .error,
 .newFileMenu .error + .icon-confirm,
 #fileList .error {
-	color: $color-error;
-	border-color: $color-error;
+	color: var(--color-error);
+	border-color: var(--color-error);
 }
 
 /* FILE TABLE */
@@ -71,7 +71,7 @@
 }
 
 .app-files #app-content.dir-drop {
-	background-color: $color-main-background !important;
+	background-color: var(--color-main-background) !important;
 }
 
 .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover{
@@ -140,12 +140,12 @@
 #filestable tbody tr.searchresult,
 table tr.mouseOver td {
 	transition: background-color 0.3s ease;
-	background-color: nc-darken($color-main-background, 3%);
+	background-color: var(--color-background-dark);
 }
-tbody a { color: $color-main-text; }
+tbody a { color: var(--color-main-text); }
 
 span.conflict-path, span.extension, span.uploading, td.date {
-	color: $color-text-details;
+	color: var(--color-text-maxcontrast);
 }
 span.conflict-path, span.extension {
 	-webkit-transition: opacity 300ms;
@@ -159,11 +159,11 @@ tr:focus span.conflict-path,
 tr:hover span.extension,
 tr:focus span.extension {
 	opacity: 1;
-	color: $color-text-details;
+	color: var(--color-text-maxcontrast);
 }
 
 table th, table th a {
-	color: $color-text-details;
+	color: var(--color-text-maxcontrast);
 }
 table.multiselect th a {
 	color: #000;
@@ -208,7 +208,7 @@ table th:focus .sort-indicator.hidden {
 
 table th,
 table td {
-	border-bottom: 1px solid $color-border;
+	border-bottom: 1px solid var(--color-border);
 	text-align: left;
 	font-weight: normal;
 }
@@ -625,7 +625,7 @@ table.dragshadow td.size {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background-color: $color-main-background;
+	background-color: var(--color-main-background);
 	background-repeat: no-repeat no-repeat;
 	background-position: 50%;
 	opacity: 0.7;
@@ -703,11 +703,11 @@ table.dragshadow td.size {
 
 	.quota-container {
 		height: 5px;
-		border-radius: $border-radius;
+		border-radius: var(--border-radius);
 
 		div {
 			height: 100%;
-			background-color: $color-primary;
+			background-color: var(--color-primary);
 		}
 	}
 }
diff --git a/apps/files/css/upload.scss b/apps/files/css/upload.scss
index 5263a4b0e03..8d54c28eef9 100644
--- a/apps/files/css/upload.scss
+++ b/apps/files/css/upload.scss
@@ -51,7 +51,7 @@
 	left: 0px;
 	position: absolute;
 	overflow: hidden;
-	background-color: $color-primary;
+	background-color: var(--color-primary);
 }
 #uploadprogressbar .label {
 	top: 6px;
@@ -61,14 +61,14 @@
 	font-weight: normal;
 }
 #uploadprogressbar .label.inner {
-	color: $color-primary-text;
+	color: var(--color-primary-text);
 	position: absolute;
 	display: block;
 	width: 200px;
 }
 #uploadprogressbar .label.outer {
 	position: relative;
-	color: $color-main-text;
+	color: var(--color-main-text);
 }
 #uploadprogressbar .desktop {
 	display: block;
diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index 2a4225a7f12..2e788a06c40 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -161,7 +161,7 @@ thead {
 
 #header .header-shared-by  {
 	display: inline-block;
-	color: $color-primary-text;
+	color: var(--color-primary-text);
 	position: relative;
 	top: -10px;
 	font-weight: 300;
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',