feat(theming): Provide body-container- variables through theming

* Provide the body container height, radius and margin as theming variables.
* Remove unused old variables (`header-menu-profile-item-height` and `list-max-width`)
* Fix comment about breakpoint JS location

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

apps/theming/css/default.css

@@ -49,6 +49,8 @@
   --color-border-maxcontrast: #7d7d7d;
   --font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --default-font-size: 15px;
+  /* 1.5 x font-size for accessibility */
+  --default-line-height: 24px;
   --animation-quick: 100ms;
   --animation-slow: 300ms;
   /** Border width for input elements such as text fields and selects */
@@ -63,16 +65,18 @@
   --default-clickable-area: 34px;
   --clickable-area-large: 48px;
   --clickable-area-small: 24px;
-  --default-line-height: 24px;
   --default-grid-baseline: 4px;
   --header-height: 50px;
+  --header-menu-item-height: 44px;
   --navigation-width: 300px;
   --sidebar-min-width: 300px;
   --sidebar-max-width: 500px;
-  --list-min-width: 200px;
-  --list-max-width: 300px;
-  --header-menu-item-height: 44px;
-  --header-menu-profile-item-height: 66px;
+  /* Border radius of the body container */
+  --body-container-radius: calc(var(--default-grid-baseline) * 3);
+  /* Margin of the body container */
+  --body-container-margin: calc(var(--default-grid-baseline) * 2);
+  /* Height of the body container to fully fill the view port */
+  --body-height: calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin));
   --breakpoint-mobile: 1024px;
   --background-invert-if-dark: no;
   --background-invert-if-bright: invert(100%);

apps/theming/lib/Themes/DefaultTheme.php

@@ -160,6 +160,8 @@ public function getCSSVariables(): array {
 
 			'--font-face' => "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
 			'--default-font-size' => '15px',
+			// 1.5 * font-size for accessibility
+			'--default-line-height' => '24px',
 
 			// TODO: support "(prefers-reduced-motion)"
 			'--animation-quick' => '100ms',
@@ -179,20 +181,24 @@ public function getCSSVariables(): array {
 			'--default-clickable-area' => '34px',
 			'--clickable-area-large' => '48px',
 			'--clickable-area-small' => '24px',
-			'--default-line-height' => '24px',
+
 			'--default-grid-baseline' => '4px',
 
 			// various structure data
 			'--header-height' => '50px',
+			'--header-menu-item-height' => '44px',
 			'--navigation-width' => '300px',
 			'--sidebar-min-width' => '300px',
 			'--sidebar-max-width' => '500px',
-			'--list-min-width' => '200px',
-			'--list-max-width' => '300px',
-			'--header-menu-item-height' => '44px',
-			'--header-menu-profile-item-height' => '66px',
 
-			// mobile. Keep in sync with core/js/js.js
+			// Border radius of the body container
+			'--body-container-radius' => 'calc(var(--default-grid-baseline) * 3)',
+			// Margin of the body container
+			'--body-container-margin' => 'calc(var(--default-grid-baseline) * 2)',
+			// Height of the body container to fully fill the view port
+			'--body-height' => 'calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin))',
+
+			// mobile. Keep in sync with core/src/init.js
 			'--breakpoint-mobile' => '1024px',
 			'--background-invert-if-dark' => 'no',
 			'--background-invert-if-bright' => 'invert(100%)',

core/css/apps.scss

@@ -7,17 +7,8 @@
 @use 'sass:math';
 @import 'functions';
 
-
-:root {
-	/* - 2px is required for making it look nice */
-	--border-radius-rounded: calc(var(--default-clickable-area) / 2 + var(--default-grid-baseline) * 2 - 2px);
-
-	--body-container-radius: calc(var(--default-grid-baseline) * 3);
-	--body-container-margin: calc(var(--default-grid-baseline) * 2);
-	--body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin));
-}
-
-@media screen and (max-width: variables.$breakpoint-mobile) {
+@media screen and (max-width: var(--breakpoint-mobile)) {
+	// Make the body full width on mobile
 	:root {
 		--body-container-margin: 0px;
 		--body-container-radius: 0px;