Merge pull request #32326 from nextcloud/fix/icons-cacher

4 files changed, 52 insertions, 401 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 8d753eb8d23..a9b20cfec2b 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -721,20 +721,16 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 
 
 #app-settings-header .settings-button {
-	display: block;
+	display: flex;
+	align-items: center;
 	height: 44px;
 	width: 100%;
 	padding: 0;
 	margin: 0;
-	background-color: var(--color-main-background);
-	@include icon-color('settings-dark', 'actions', $color-black, 1, true);
-	background-position: 14px center;
-	background-repeat: no-repeat;
 	box-shadow: none;
 	border: 0;
 	border-radius: 0;
 	text-align: left;
-	padding-left: 44px;
 	font-weight: normal;
 	font-size: 100%;
 	opacity: 0.8;
@@ -750,6 +746,19 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 	&:focus {
 		background-color: var(--color-background-hover);
 	}
+
+	&::before {	
+		background-image: var(--icon-settings-dark);
+		background-position: 14px center;
+		background-repeat: no-repeat;
+		content: '';
+		width: 44px;
+		height: 44px;
+		top: 0;
+		left: 0;
+		display: block;
+		filter: var(--background-invert-if-dark);
+	}
 }
 
 /* GENERAL SECTION ------------------------------------------------------------ */
diff --git a/core/css/functions.scss b/core/css/functions.scss
index 7489e574e97..35db19c3142 100644
--- a/core/css/functions.scss
+++ b/core/css/functions.scss
@@ -36,22 +36,31 @@
 }
 
 /**
- * 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.
+ * @see core/src/icons.js
  */
-@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=#{$color}&v=#{$version}';
-	} @else {
-		@return '#{$webroot}/svg/#{$dir}/#{$icon}?color=#{$color}&v=#{$version}';
+@function match-color-string($color) {
+	@if $color == #000 {
+		@return "dark";
+	}
+	@if $color == #fff {
+		@return 'white';
+	}
+	@if $color == #FC0 {
+		@return 'yellow';
+	}
+	@if $color == #e9322d {
+		@return 'red';
+	}
+	@if $color == #eca700 {
+		@return 'orange';
 	}
+	@if $color == #46ba61 {
+		@return 'green';
+	}
+	@if $color == #969696 {
+		@return 'grey';
+	}
+	@return $color;
 }
 
 /**
@@ -66,30 +75,12 @@
  * @returns A background image with the url to the set to the requested icon.
  */
 @mixin icon-color($icon, $dir, $color, $version: 1, $core: false) {
-	$color: remove-hash-from-color($color);
+	$color: match-color-string($color);
 	/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
-	$varName: "--icon-#{$dir}-#{$icon}-#{$color}";
-	@if $core {
-		$varName: "--icon-#{$icon}-#{$color}";
-	}
-	#{$varName}: url(icon-color-path($icon, $dir, $color, $version, $core));
+	$varName: "--icon-#{$icon}-#{$color}";
 	background-image: var(#{$varName});
 }
 
-/**
- * Create black and white icons
- * This will add a default black version of and an additional white version when .icon-white is applied
- */
-@mixin icon-black-white($icon, $dir, $version, $core: false) {
-	.icon-#{$icon} {
-		@include icon-color($icon, $dir, $color-black, $version, $core);
-	}
-	.icon-#{$icon}-white,
-	.icon-#{$icon}.icon-white {
-		@include icon-color($icon, $dir, $color-white, $version, $core);
-	}
-}
-
 @mixin position($value) {
 	@if $value == 'sticky' {
 		position: -webkit-sticky; // Safari support
diff --git a/core/css/icons.scss b/core/css/icons.scss
index 78522895cf5..9acec4895be 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -123,393 +123,42 @@ audio, canvas, embed, iframe, img, input, object, video {
 	}
 }
 
-/* ICONS -------------------------------------------------------------------
- * These icon classes are generated automatically with the following pattern
- * for icon-black-white('close', ...)
- * .icon-close (black icon)
- * .icon-close-white (white icon)
- * .icon-close.icon-white (white icon)
- *
- * Some class definitions are kept as before, since they don't follow the pattern
- * or have some additional styling like drop shadows
- */
-
-@include icon-black-white('add', 'actions', 1, true);
-@include icon-black-white('address', 'actions', 1, true);
-
-@include icon-black-white('audio', 'actions', 2, true);
 .icon-audio-white {
 	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 }
 
-@include icon-black-white('audio-off', 'actions', 1, true);
 .icon-audio-off-white {
 	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 }
 
-.icon-caret-white,
-.icon-caret {
-	@include icon-color('caret', 'actions', $color-white, 1, true);
-}
-
-.icon-caret-dark {
-	@include icon-color('caret', 'actions', $color-black, 1, true);
-}
-
-@include icon-black-white('checkmark', 'actions', 1, true);
-.icon-checkmark-color {
-	@include icon-color('checkmark', 'actions', $color-success, 1, true);
-}
-
-@include icon-black-white('clippy', 'actions', 2, true);
-@include icon-black-white('close', 'actions', 1, true);
-@include icon-black-white('comment', 'actions', 1, true);
-@include icon-black-white('confirm', 'actions', 2, true);
-@include icon-black-white('download', 'actions', 1, true);
-
-.icon-confirm-fade {
-	@include icon-color('confirm-fade', 'actions', $color-black, 2, true);
-}
-
-.icon-delete {
-	@include icon-color('delete', 'actions', $color-black, 1, true);
-	&.no-permission,
-	&.no-hover {
-		&:hover,
-		&:focus {
-			@include icon-color('delete', 'actions', $color-black, 1, true);
-		}
-	}
-	&:hover,
-	&:focus {
-		@include icon-color('delete', 'actions', $color-error, 1, true);
-		filter: initial;
-	}
-
-	&.icon-white {
-		@include icon-color('delete', 'actions', $color-white, 1, true);
-	}
-}
-
-.icon-delete-white {
-	@include icon-color('delete', 'actions', $color-white, 1, true);
-	&.no-permission {
-		&:hover,
-		&:focus {
-			@include icon-color('delete', 'actions', $color-white, 1, true);
-		}
-	}
-	&:hover,
-	&:focus {
-		@include icon-color('delete', 'actions', $color-error, 1, true);
-	}
-}
-
-@include icon-black-white('details', 'actions', 1, true);
-@include icon-black-white('edit', 'actions', 1, true);
-@include icon-black-white('error', 'actions', 1, true);
-
-.icon-error-color {
-	@include icon-color('error', 'actions', $color-error, 1, true);
-}
-@include icon-black-white('external', 'actions', 1, true);
-@include icon-black-white('fullscreen', 'actions', 1, true);
-
 .icon-fullscreen-white {
 	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 }
 
-@include icon-black-white('history', 'actions', 2, true);
-@include icon-black-white('info', 'actions', 1, true);
-@include icon-black-white('logout', 'actions', 1, true);
-@include icon-black-white('mail', 'actions', 1, true);
-@include icon-black-white('menu', 'actions', 1, true);
-@include icon-black-white('menu-sidebar', 'actions', 1, true);
-@include icon-black-white('more', 'actions', 1, true);
-@include icon-black-white('password', 'actions', 1, true);
-@include icon-black-white('pause', 'actions', 1, true);
-@include icon-black-white('play', 'actions', 1, true);
-@include icon-black-white('play-add', 'actions', 1, true);
-@include icon-black-white('play-next', 'actions', 1, true);
-@include icon-black-white('play-previous', 'actions', 1, true);
-@include icon-black-white('projects', 'actions', 1, true);
-@include icon-black-white('public', 'actions', 1, true);
-@include icon-black-white('quota', 'actions', 1, true);
-@include icon-black-white('rename', 'actions', 1, true);
-@include icon-black-white('screen', 'actions', 1, true);
-@include icon-black-white('template-add', 'actions', 1, true);
-
 .icon-screen-white {
 	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 }
 
-@include icon-black-white('screen-off', 'actions', 1, true);
 .icon-screen-off-white {
 	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 }
 
-@include icon-black-white('search', 'actions', 1, true);
-
-/* default icon have a .5 opacity */
-.icon-settings {
-	@include icon-color('settings', 'actions', $color-black, 1, true);
-}
-
-.icon-settings-dark {
-	@include icon-color('settings-dark', 'actions', $color-black, 1, true);
-}
-
-.icon-settings-white {
-	@include icon-color('settings-dark', 'actions', $color-white, 1, true);
-}
-
-/* always use icon-shared, AdBlock blocks icon-share */
-.icon-shared,
-.icon-share {
-	@include icon-color('share', 'actions', $color-black, 1, true);
-	&.icon-white {
-		@include icon-color('share', 'actions', $color-white, 1, true);
-	}
-}
-.icon-shared-white,
-.icon-share-white {
-	@include icon-color('share', 'actions', $color-white, 1, true);
-}
-
-@include icon-black-white('sound', 'actions', 1, true);
-@include icon-black-white('sound-off', 'actions', 1, true);
-
-.icon-favorite {
-	@include icon-color('star-dark', 'actions', $color-black, 1, true);
-}
-
-@include icon-black-white('star', 'actions', 1, true);
-
-.icon-star-dark {
-	@include icon-color('star', 'actions', $color-black, 1, true);
-}
-
-.icon-starred {
-	&:hover,
-	&:focus {
-		@include icon-color('star', 'actions', $color-black, 1, true);
-	}
-	@include icon-color('star-dark', 'actions', $color-yellow, 1, true);
-}
-
-.icon-star {
-	&:hover,
-	&:focus {
-		@include icon-color('star-dark', 'actions', $color-yellow, 1, true);
-	}
-}
-
-@include icon-black-white('tag', 'actions', 2, true);
-@include icon-black-white('timezone', 'actions', 1, true);
-@include icon-black-white('toggle', 'actions', 1, true);
-@include icon-black-white('toggle-background', 'actions', 1, true);
-@include icon-black-white('toggle-pictures', 'actions', 1, true);
-@include icon-black-white('toggle-filelist', 'actions', 1, true);
-@include icon-black-white('triangle-e', 'actions', 1, true);
-@include icon-black-white('triangle-n', 'actions', 1, true);
-@include icon-black-white('triangle-s', 'actions', 1, true);
-@include icon-black-white('upload', 'actions', 1, true);
-@include icon-black-white('user', 'actions', 1, true);
-@include icon-black-white('group', 'actions', 1, true);
-@include icon-black-white('filter', 'actions', 1, true);
-
-@include icon-black-white('video', 'actions', 2, true);
 .icon-video-white {
 	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 }
 
-@include icon-black-white('video-off', 'actions', 1, true);
 .icon-video-off-white {
 	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 }
-@include icon-black-white('video-switch', 'actions', 1, true);
-
-/* SHADOW WHITE ICONS: white version only ----------------------------------- */
-.icon-view-close,
-.icon-view-close-white {
-	@include icon-color('view-close', 'actions', $color-white, 1, true);
-}
-.icon-view-download,
-.icon-view-download-white {
-	@include icon-color('view-download', 'actions', $color-white, 1, true);
-}
-.icon-view-pause,
-.icon-view-pause-white {
-	@include icon-color('view-pause', 'actions', $color-white, 1, true);
-}
-.icon-view-play,
-.icon-view-play-white {
-	@include icon-color('view-play', 'actions', $color-white, 1, true);
-}
 
-.icon-view-next {
-	@include icon-color('arrow-right', 'actions', $color-black, 1, true);
-	&.icon-white {
-		@include icon-color('arrow-right', 'actions', $color-white, 1, true);
-	}
-}
-
-
-.icon-view-previous {
-	@include icon-color('arrow-left', 'actions', $color-black, 1, true);
-	&.icon-white {
-		@include icon-color('arrow-left', 'actions', $color-white, 1, true);
-	}
-}
-
-
-@include icon-black-white('disabled-user', 'actions', 1, true);
-@include icon-black-white('disabled-users', 'actions', 1, true);
-@include icon-black-white('user-admin', 'actions', 1, true);
-
-@include icon-black-white('alert-outline', 'actions', 1, true);
-
-/* PLACES ------------------------------------------------------------------- */
-.icon-calendar {
-	@include icon-color('calendar', 'places', $color-white, 1, true);
-}
-
-.icon-calendar-dark {
-	@include icon-color('calendar', 'places', $color-black, 1, true);
-}
-
-.icon-contacts {
-	@include icon-color('contacts', 'places', $color-white, 1, true);
-}
-
-.icon-contacts-dark {
-	@include icon-color('contacts', 'places', $color-black, 1, true);
-}
-
-.icon-files {
-	@include icon-color('files', 'places', $color-white, 1, true);
-}
-
-.icon-files-dark {
-	@include icon-color('files', 'places', $color-black, 1, true);
-}
-
-.icon-file,
-.icon-filetype-text {
-	@include icon-color('text', 'filetypes', #969696, 1, true);
-}
-
-.icon-filetype-file {
-	@include icon-color('file', 'filetypes', #969696, 1, true);
-}
-
-@include icon-black-white('folder', 'filetypes', 1, true);
-.icon-filetype-folder {
-	@include icon-color('folder', 'filetypes', $color-primary, 1, true);
-}
-
-.icon-filetype-folder-drag-accept {
-	@include icon-color('folder-drag-accept', 'filetypes', $color-primary, 1, true);
-}
-
-
-@include icon-black-white('home', 'places', 1, true);
-@include icon-black-white('link', 'places', 1, true);
-@include icon-black-white('music', 'places', 1, true);
-@include icon-black-white('picture', 'places', 1, true);
-
-
-/* CLIENTS ------------------------------------------------------------------- */
-
-@include icon-black-white('desktop', 'clients', 1, true);
-@include icon-black-white('phone', 'clients', 1, true);
-@include icon-black-white('tablet', 'clients', 1, true);
-
-/* APP CATEGORIES ------------------------------------------------------------------- */
-.icon-category-installed {
-	@include icon-color('user', 'actions', $color-black, 1, true);
-}
-
-.icon-category-enabled {
-	@include icon-color('checkmark', 'actions', $color-black, 1, true);
-}
-
-.icon-category-disabled {
-	@include icon-color('close', 'actions', $color-black, 1, true);
-}
-
-.icon-category-app-bundles {
-	@include icon-color('bundles', 'categories', $color-black, 1, true);
-}
-
-.icon-category-updates {
-	@include icon-color('download', 'actions', $color-black, 1, true);
-}
-
-.icon-category-files {
-	@include icon-color('files', 'categories', $color-black, 1, true);
-}
-
-.icon-category-social {
-	@include icon-color('social', 'categories', $color-black, 1, true);
-}
-
-.icon-category-office {
-	@include icon-color('office', 'categories', $color-black, 1, true);
-}
-
-.icon-category-auth {
-	@include icon-color('auth', 'categories', $color-black, 1, true);
-}
-
-.icon-category-monitoring {
-	@include icon-color('monitoring', 'categories', $color-black, 1, true);
-}
-
-.icon-category-multimedia {
-	@include icon-color('multimedia', 'categories', $color-black, 1, true);
-}
-
-.icon-category-organization {
-	@include icon-color('organization', 'categories', $color-black, 1, true);
-}
-
-.icon-category-customization {
-	@include icon-color('customization', 'categories', $color-black, 1, true);
-}
-
-.icon-category-integration {
-	@include icon-color('integration', 'categories', $color-black, 1, true);
-}
-
-.icon-category-tools {
-	@include icon-color('settings-dark', 'actions', $color-black, 1, true);
-}
-
-.icon-category-games {
-	@include icon-color('games', 'categories', $color-black, 1, true);
-}
-
-.icon-category-security {
-	@include icon-color('password', 'actions', $color-black, 1, true);
-}
-
-.icon-category-search {
-	@include icon-color('search', 'actions', $color-black, 1, true);
-}
-
-.icon-category-workflow {
-	@include icon-color('workflow', 'categories', $color-black, 1, true);
-}
-
-.icon-category-dashboard {
-	@include icon-color('dashboard', 'categories', $color-black, 1, true);
-}
-
-.icon-talk {
-	@include icon-color('app-dark', 'spreed', $color-black, 1);
-}
+/* ICONS -------------------------------------------------------------------
+ * These icon classes are generated automatically with the following pattern
+ * .icon-close (black icon)
+ * .icon-close-white (white icon)
+ * .icon-close.icon-white (white icon)
+ *
+ * Some class definitions are kept as before, since they don't follow the pattern
+ * or have some additional styling like drop shadows
+ */
 
-.nav-icon-systemtagsfilter {
-	@include icon-color('tag', 'actions', $color-black, 1, true);
-}
+@import url('../../dist/icons.css');
diff --git a/core/css/styles.scss b/core/css/styles.scss
index f0c33a2037d..bd7e747169b 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -975,6 +975,8 @@ span.ui-icon {
 		background-size: 20px 20px;
 		padding: 14px;
 		cursor: pointer;
+		// Force white
+		background-image: var(--original-icon-contacts-white);
 		filter: var(--primary-invert-if-bright);
 
 		&:hover,