Merge pull request #10898 from nextcloud/feature/10684/default-logo-color-theme-colors

Switches the default logo color depending on the primary color

9 files changed, 42 insertions, 21 deletions

diff --git a/core/Controller/LoginController.php b/core/Controller/LoginController.php
index 14e3b4c40b3..ecb4e479206 100644
--- a/core/Controller/LoginController.php
+++ b/core/Controller/LoginController.php
@@ -194,7 +194,7 @@ class LoginController extends Controller {
 		Util::addHeader('meta', ['property' => 'og:site_name', 'content' => Util::sanitizeHTML($this->defaults->getName())]);
 		Util::addHeader('meta', ['property' => 'og:url', 'content' => $this->urlGenerator->getAbsoluteURL('/')]);
 		Util::addHeader('meta', ['property' => 'og:type', 'content' => 'website']);
-		Util::addHeader('meta', ['property' => 'og:image', 'content' => $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('core','favicon-touch.png'))]);
+		Util::addHeader('meta', ['property' => 'og:image', 'content' => $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('core', 'favicon-touch.png'))]);
 
 		return new TemplateResponse(
 			$this->appName, 'login', $parameters, 'guest'
diff --git a/core/Controller/SvgController.php b/core/Controller/SvgController.php
index 1fad9c39c3b..c6bf7b94da3 100644
--- a/core/Controller/SvgController.php
+++ b/core/Controller/SvgController.php
@@ -29,7 +29,6 @@ use OCP\AppFramework\Http;
 use OCP\AppFramework\Http\DataDisplayResponse;
 use OCP\AppFramework\Http\NotFoundResponse;
 use OCP\AppFramework\Utility\ITimeFactory;
-use OCP\Files\NotFoundException;
 use OCP\App\IAppManager;
 use OCP\IRequest;
 
@@ -91,7 +90,7 @@ class SvgController extends Controller {
 
 		$appRootPath = $this->appManager->getAppPath($app);
 		$appPath = substr($appRootPath, strlen($this->serverRoot));
-		
+
 		if (!$appPath) {
 			return new NotFoundResponse();
 		}
@@ -99,7 +98,6 @@ class SvgController extends Controller {
 		return $this->getSvg($path, $color, $fileName);
 	}
 
-
 	/**
 	 * Generate svg from filename with the requested color
 	 *
@@ -120,7 +118,6 @@ class SvgController extends Controller {
 
 		// add fill (fill is not present on black elements)
 		$fillRe = '/<((circle|rect|path)((?!fill)[a-z0-9 =".\-#():;])+)\/>/mi';
-
 		$svg = preg_replace($fillRe, '<$1 fill="#' . $color . '"/>', $svg);
 
 		// replace any fill or stroke colors
diff --git a/core/css/functions.scss b/core/css/functions.scss
index 0815ba29ab6..5007c3bbe79 100644
--- a/core/css/functions.scss
+++ b/core/css/functions.scss
@@ -19,31 +19,55 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
- 
+
+/**
+ * Removes the "#" from a color.
+ *
+ * @param string $color The color
+ * @return string The color without #
+ */
+@function remove-hash-from-color($color) {
+	$index: str-index(inspect($color), '#');
+	@if $index {
+		$color: str-slice(inspect($color), 2);
+	}
+	@return $color;
+}
+
+/**
+ * Calculates the URL to the svg under the SVG API.
+ *
+ * @param string $icon the icon filename
+ * @param string $dir the icon folder within /core/img if $core or app name
+ * @param string $color the desired color in hexadecimal
+ * @param int [$version] the version of the file
+ * @param bool [$core] search icon in core
+ * @return string The URL to the svg.
+ */
+@function icon-color-path($icon, $dir, $color, $version: 1, $core: false) {
+	$color: remove-hash-from-color($color);
+	@if $core {
+		@return '#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=#{$version}';
+	} @else {
+		@return '#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=#{$version}';
+	}
+}
+
 /**
  * SVG COLOR API
- * 
+ *
  * @param string $icon the icon filename
  * @param string $dir the icon folder within /core/img if $core or app name
  * @param string $color the desired color in hexadecimal
  * @param int $version the version of the file
  * @param bool [$core] search icon in core
  *
- * @returns string the url to the svg api endpoint
+ * @returns A background image with the url to the set to the requested icon.
  */
 @mixin icon-color($icon, $dir, $color, $version: 1, $core: false) {
-	// remove # from color
-	// inspect cast int to string
-	$index: str-index(inspect($color), '#');
-	@if $index {
-		$color: str-slice(inspect($color), 2);
-	}
+	$color: remove-hash-from-color($color);
 	$varName: "--icon-#{$icon}-#{$color}";
-	@if $core {
-		#{$varName}: url('#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=#{$version}');
-	} @else {
-		#{$varName}: url('#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=#{$version}');
-	}
+	#{$varName}: url(icon-color-path($icon, $dir, $color, $version, $core));
 	background-image: var(#{$varName});
 }
 
diff --git a/core/css/guest.css b/core/css/guest.css
index 200aeda3129..ca15fee1894 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -78,7 +78,7 @@ body {
 }
 
 #header .logo {
-	background-image: url('../img/logo.svg?v=1');
+	background-image: url('../img/logo/logo.svg?v=1');
 	background-repeat: no-repeat;
 	background-size: 175px;
 	background-position: center;
diff --git a/core/img/logo.svg b/core/img/logo.svg
deleted file mode 100644
index 1d52d93b0f2..00000000000
--- a/core/img/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="128" width="256" viewBox="0 0 256 128" ><g stroke="#fff" stroke-width="22" fill="none"><circle cy="64" cx="40" r="26"/><circle cy="64" cx="216" r="26"/><circle cy="64" cx="128" r="46"/></g></svg>
diff --git a/core/img/logo-icon-175px.png b/core/img/logo/logo-icon-175px.png
index 6397f61cd68..6397f61cd68 100644
--- a/core/img/logo-icon-175px.png
+++ b/core/img/logo/logo-icon-175px.png
diff --git a/core/img/logo-mail.png b/core/img/logo/logo-mail.png
index 80304ae7ec7..80304ae7ec7 100644
--- a/core/img/logo-mail.png
+++ b/core/img/logo/logo-mail.png
diff --git a/core/img/logo.png b/core/img/logo/logo.png
index df32e1c7eab..df32e1c7eab 100644
--- a/core/img/logo.png
+++ b/core/img/logo/logo.png
diff --git a/core/img/logo/logo.svg b/core/img/logo/logo.svg
new file mode 100644
index 00000000000..076f295e4d1
--- /dev/null
+++ b/core/img/logo/logo.svg
@@ -0,0 +1 @@
+<svg width="256" height="128" version="1.1" viewBox="0 0 256 128" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke-width="22"><circle cx="40" cy="64" r="26" stroke="#fff" fill="none"/><circle cx="216" cy="64" r="26" stroke="#fff" fill="none"/><circle cx="128" cy="64" r="46" stroke="#fff" fill="none"/></g></svg>