Merge pull request #37028 from nextcloud/design/distraction-free-backgrounds

Add distraction free backgrounds for Nextcloud 26

11 files changed, 69 insertions, 31 deletions

diff --git a/apps/dashboard/README.md b/apps/dashboard/README.md
index b504f62b9ee..c6a6444aa76 100644
--- a/apps/dashboard/README.md
+++ b/apps/dashboard/README.md
@@ -1,33 +1,3 @@
 # Dashboard
 
-
-## Background picture credits
-
-- Default background: [Clouds (Kamil Porembiński, CC BY-SA)](https://www.flickr.com/photos/paszczak000/8715851521/) – original 4k, color modified and sky color changed to Nextcloud blue.
-- Default dark mode background: [Pedra azul milky way (Eduardo Neves, CC BY-SA)](https://commons.wikimedia.org/wiki/File:Pedra_Azul_Milky_Way.jpg) – original 5k.
-- [Butterfly wing scale (Anatoly Mikhaltsov, CC BY-SA)](https://commons.wikimedia.org/wiki/File:%D0%A7%D0%B5%D1%88%D1%83%D0%B9%D0%BA%D0%B8_%D0%BA%D1%80%D1%8B%D0%BB%D0%B0_%D0%B1%D0%B0%D0%B1%D0%BE%D1%87%D0%BA%D0%B8.jpg) – original 5k, cropped to use top right and retouched away a bright spot, now 4k.
-- [Cetonia aurata take off composition (Bernie, Public Domain)](https://commons.wikimedia.org/wiki/File:Cetonia_aurata_take_off_composition_05172009.jpg) – original 8k.
-- [Ribbed red metal (Dejan Krsmanovic, CC BY)](https://www.flickr.com/photos/dejankrsmanovic/42971456774/) – original 5k.
-- [Barents bloom (European Space Agency, CC BY-SA)](https://www.esa.int/ESA_Multimedia/Images/2016/08/Barents_bloom) – original 2k (it’s fine since the motive is blurry anyway), rotated 90° right.
-- [Flippity floppity (Hannes Fritz, CC BY-SA)](http://hannes.photos/flippity-floppity) – original 4k, cropped to top left (2k) so the sharp parts are not part of the photo, looks better.
-- [Roulette (Hannes Fritz, CC BY-SA)](http://hannes.photos/roulette) – original 4k.
-- [Sea spray (Hannes Fritz, CC BY-SA)](http://hannes.photos/sea-spray) – original 6k.
-- [New zealand fern (Bernard Spragg, CC0)](https://commons.wikimedia.org/wiki/File:NZ_Fern.(Blechnum_chambersii)_(11263534936).jpg) – original 2.5k.
-- [Pink tapioca bubbles (Rawpixel, CC BY)](https://www.flickr.com/photos/byrawpixel/27665140298/in/photostream/) – original 6k.
-- [Waxing crescent moon (NASA, Public Domain)](https://www.nasa.gov/image-feature/a-waxing-crescent-moon)
-- [Cityscape (Tommy Chau, CC BY)](https://www.flickr.com/photos/90975693@N05/16910999368) – original 6k.
-- [Lion rock hill (Tommy Chau, CC BY)](https://www.flickr.com/photos/90975693@N05/17136440246) – original 6k.
-- [Yellow bricks (Lali Masriera, CC BY)](https://www.flickr.com/photos/visualpanic/3982464447) – original 4k, color modified for visibility of icons, and slightly cropped on the left so motive is centered.
-
-
-## Background picture requirements
-
-A reference to why it was very difficult to actually find good background pictures – there are quite some requirements when it comes to picking:
-
-- It needs to be an exceptionally good photo of course – since when chosen, people will see it every day.
-- We need to have a good balance of different motives, e.g. not too many landscape pics.
-- Same for a good balance of different colors.
-- The photo needs to work as a background. Photos with objects focused in the middle don’t really work as they will be overlapped by the widgets anyway.
-- Especially the top part cannot have too much differing contrast, as then it’s not possible to see the navigation icons.
-- We serve the pictures at 4k resolution and most of the selected images are also available in 6k or higher so it is future-proof.
-- For the search of course we had to limit to CC0, CC By and CC By-Sa. Only CC0 would have been practically impossible cause there’s just not so many good ones which fit.
+Background image documentation moved to theming folder at `apps/theming/README.md`.
\ No newline at end of file
diff --git a/apps/theming/README.md b/apps/theming/README.md
new file mode 100644
index 00000000000..8d02b30571f
--- /dev/null
+++ b/apps/theming/README.md
@@ -0,0 +1,46 @@
+# Theming
+
+## Background picture requirements
+
+A reference to why it was very difficult to actually find good background pictures – there are quite some requirements when it comes to picking:
+
+- It needs to be an exceptionally good photo of course – since when chosen, people will see it every day.
+- We need to have a good balance of different motives, e.g. not too many landscape pics.
+- Same for a good balance of different colors.
+- The photo needs to work as a background. Photos with objects focused in the middle don’t really work as they will be overlapped by the widgets and content anyway.
+- Especially the top part cannot have too much differing contrast, as then it’s not possible to see the navigation icons.
+- Especially the top part should be either dark-ish or light-ish, but not a shade exactly inbetween because then contrast can neither be achieved with light nor dark icons.
+- We serve the pictures at 4k resolution and most of the selected images are also available in 6k or higher so it is future-proof.
+- For the search of course we had to limit to CC0, CC By and CC By-Sa. Only CC0 would have been practically impossible cause there’s just not so many good ones which fit.
+- Good pages to find photos are [StockSnap](https://stocksnap.io), [Wikimedia Commons](https://commons.wikimedia.org), [Openverse](https://wordpress.org/openverse/) and [Flickr (with license "commercial use & mods allowed")](https://flickr.com/search/?license=4%2C5%2C9%2C10&text=Nextcloud), sorting by interesting or downloads. Most others like Unsplash, Pexels, Pixabay, etc. meanwhile have a non-standard license.
+
+
+## Background picture technicals
+- All backgrounds are sized to maximum 3840px width (4K resolution).
+- To ensure quick loading times, the image needs to be compressed, ideally to around 1 MB or less. E.g. via 90–95% quality in GIMP export. We could also explore using newer formats.
+- Previews are sized to 352px width (min height 192px), which is double of the current picker grid size so it looks nice on high-res displays. Quality is also set to around 90% at export.
+
+
+## Background picture credits
+
+In `img/background/`:
+
+- Default background: [Clouds (Kamil Porembiński, CC BY-SA)](https://www.flickr.com/photos/paszczak000/8715851521/) – original 4k, color modified and sky color changed to Nextcloud blue.
+- Default dark mode background: [Pedra azul milky way (Eduardo Neves, CC BY-SA)](https://commons.wikimedia.org/wiki/File:Pedra_Azul_Milky_Way.jpg) – original 5k.
+- [Soft floral (Hannah MacLean, CC0)](https://stocksnap.io/photo/soft-floral-XOYWCCW5PA) – original 5.5k.
+- [Morning fog (Ted Moravec, Public Domain)](https://flickr.com/photos/tmoravec/52392410261) – original 3k.
+- [Underwater ocean (Stefanus Martanto Setyo Husodo, CC0)](https://stocksnap.io/photo/underwater-ocean-TJA9LBH4WS) – original 5k.
+- [Rhythm and blues (Zoltán Vörös, CC BY)](https://flickr.com/photos/v923z/51634409289/) – original 2k (it’s fine since the motive is blurry anyway).
+- [Butterfly wing scale (Anatoly Mikhaltsov, CC BY-SA)](https://commons.wikimedia.org/wiki/File:%D0%A7%D0%B5%D1%88%D1%83%D0%B9%D0%BA%D0%B8_%D0%BA%D1%80%D1%8B%D0%BB%D0%B0_%D0%B1%D0%B0%D0%B1%D0%BE%D1%87%D0%BA%D0%B8.jpg) – original 5k, cropped to use top right and retouched away a bright spot, now 4k.
+- [Cetonia aurata take off composition (Bernie, Public Domain)](https://commons.wikimedia.org/wiki/File:Cetonia_aurata_take_off_composition_05172009.jpg) – original 8k.
+- [Ribbed red metal (Dejan Krsmanovic, CC BY)](https://www.flickr.com/photos/dejankrsmanovic/42971456774/) – original 5k.
+- [Barents bloom (European Space Agency, CC BY-SA)](https://www.esa.int/ESA_Multimedia/Images/2016/08/Barents_bloom) – original 2k (it’s fine since the motive is blurry anyway), rotated 90° right.
+- [Flippity floppity (Hannes Fritz, CC BY-SA)](http://hannes.photos/flippity-floppity) – original 4k, cropped to top left (2k) so the sharp parts are not part of the photo, looks better.
+- [Roulette (Hannes Fritz, CC BY-SA)](http://hannes.photos/roulette) – original 4k.
+- [Sea spray (Hannes Fritz, CC BY-SA)](http://hannes.photos/sea-spray) – original 6k.
+- [New zealand fern (Bernard Spragg, CC0)](https://commons.wikimedia.org/wiki/File:NZ_Fern.(Blechnum_chambersii)_(11263534936).jpg) – original 2.5k.
+- [Pink tapioca bubbles (Rawpixel, CC BY)](https://www.flickr.com/photos/byrawpixel/27665140298/in/photostream/) – original 6k.
+- [Waxing crescent moon (NASA, Public Domain)](https://www.nasa.gov/image-feature/a-waxing-crescent-moon)
+- [Cityscape (Tommy Chau, CC BY)](https://www.flickr.com/photos/90975693@N05/16910999368) – original 6k.
+- [Lion rock hill (Tommy Chau, CC BY)](https://www.flickr.com/photos/90975693@N05/17136440246) – original 6k.
+- [Yellow bricks (Lali Masriera, CC BY)](https://www.flickr.com/photos/visualpanic/3982464447) – original 4k, color modified for visibility of icons, and slightly cropped on the left so motive is centered.
\ No newline at end of file
diff --git a/apps/theming/img/background/hannah-maclean-soft-floral.jpg b/apps/theming/img/background/hannah-maclean-soft-floral.jpg
new file mode 100644
index 00000000000..f9612e4f269
--- /dev/null
+++ b/apps/theming/img/background/hannah-maclean-soft-floral.jpg
diff --git a/apps/theming/img/background/preview/hannah-maclean-soft-floral.jpg b/apps/theming/img/background/preview/hannah-maclean-soft-floral.jpg
new file mode 100644
index 00000000000..86727bff8f0
--- /dev/null
+++ b/apps/theming/img/background/preview/hannah-maclean-soft-floral.jpg
diff --git a/apps/theming/img/background/preview/stefanus-martanto-setyo-husodo-underwater-ocean.jpg b/apps/theming/img/background/preview/stefanus-martanto-setyo-husodo-underwater-ocean.jpg
new file mode 100644
index 00000000000..2076e9cb105
--- /dev/null
+++ b/apps/theming/img/background/preview/stefanus-martanto-setyo-husodo-underwater-ocean.jpg
diff --git a/apps/theming/img/background/preview/ted-moravec-morning-fog.jpg b/apps/theming/img/background/preview/ted-moravec-morning-fog.jpg
new file mode 100644
index 00000000000..d9158cbf44f
--- /dev/null
+++ b/apps/theming/img/background/preview/ted-moravec-morning-fog.jpg
diff --git a/apps/theming/img/background/preview/zoltan-voros-rhythm-and-blues.jpg b/apps/theming/img/background/preview/zoltan-voros-rhythm-and-blues.jpg
new file mode 100644
index 00000000000..5c37cd4ccf5
--- /dev/null
+++ b/apps/theming/img/background/preview/zoltan-voros-rhythm-and-blues.jpg
diff --git a/apps/theming/img/background/stefanus-martanto-setyo-husodo-underwater-ocean.jpg b/apps/theming/img/background/stefanus-martanto-setyo-husodo-underwater-ocean.jpg
new file mode 100644
index 00000000000..6198a5472ad
--- /dev/null
+++ b/apps/theming/img/background/stefanus-martanto-setyo-husodo-underwater-ocean.jpg
diff --git a/apps/theming/img/background/ted-moravec-morning-fog.jpg b/apps/theming/img/background/ted-moravec-morning-fog.jpg
new file mode 100644
index 00000000000..e4bccdf64b0
--- /dev/null
+++ b/apps/theming/img/background/ted-moravec-morning-fog.jpg
diff --git a/apps/theming/img/background/zoltan-voros-rhythm-and-blues.jpg b/apps/theming/img/background/zoltan-voros-rhythm-and-blues.jpg
new file mode 100644
index 00000000000..ba7fe44e571
--- /dev/null
+++ b/apps/theming/img/background/zoltan-voros-rhythm-and-blues.jpg
diff --git a/apps/theming/lib/Service/BackgroundService.php b/apps/theming/lib/Service/BackgroundService.php
index 4879ad1cbad..d5bc4296b5b 100644
--- a/apps/theming/lib/Service/BackgroundService.php
+++ b/apps/theming/lib/Service/BackgroundService.php
@@ -55,6 +55,28 @@ class BackgroundService {
 
 	public const DEFAULT_BACKGROUND_IMAGE = 'kamil-porembinski-clouds.jpg';
 	public const SHIPPED_BACKGROUNDS = [
+		'hannah-maclean-soft-floral.jpg' => [
+			'attribution' => 'Soft floral (Hannah MacLean, CC0)',
+			'attribution_url' => 'https://stocksnap.io/photo/soft-floral-XOYWCCW5PA',
+			'theming' => self::THEMING_MODE_DARK,
+			'primary_color' => '#9f652f',
+		],
+		'ted-moravec-morning-fog.jpg' => [
+			'attribution' => 'Morning fog (Ted Moravec, Public Domain)',
+			'attribution_url' => 'https://flickr.com/photos/tmoravec/52392410261',
+			'theming' => self::THEMING_MODE_DARK,
+			'primary_color' => '#114c3b',
+		],
+		'stefanus-martanto-setyo-husodo-underwater-ocean.jpg' => [
+			'attribution' => 'Underwater ocean (Stefanus Martanto Setyo Husodo, CC0)',
+			'attribution_url' => 'https://stocksnap.io/photo/underwater-ocean-TJA9LBH4WS',
+			'primary_color' => '#04577e',
+		],
+		'zoltan-voros-rhythm-and-blues.jpg' => [
+			'attribution' => 'Rhythm and blues (Zoltán Vörös, CC BY)',
+			'attribution_url' => 'https://flickr.com/photos/v923z/51634409289/',
+			'primary_color' => '#1c243c',
+		],
 		'anatoly-mikhaltsov-butterfly-wing-scale.jpg' => [
 			'attribution' => 'Butterfly wing scale (Anatoly Mikhaltsov, CC BY-SA)',
 			'attribution_url' => 'https://commons.wikimedia.org/wiki/File:%D0%A7%D0%B5%D1%88%D1%83%D0%B9%D0%BA%D0%B8_%D0%BA%D1%80%D1%8B%D0%BB%D0%B0_%D0%B1%D0%B0%D0%B1%D0%BE%D1%87%D0%BA%D0%B8.jpg',