From 076694187cc9fa13c7fefd6156c3e6dff041f374 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Fri, 12 Jul 2024 10:17:57 -0600
Subject: [PATCH] Kdots style work - Get CSS minify working - Further darkmode
 work

---
 Gruntfile.js                                  | 81 ++++++++++---------
 kdots/assets/styles/framework_dark.less       | 35 --------
 .../styles/framework.css => css/kdots.css}    | 62 +++++++++++---
 .../styles/framework.less => css/kdots.less}  | 13 +--
 kdots/css/less/dark.less                      | 47 +++++++++++
 kdots/css/less/light.less                     | 18 +++++
 kdots/head.tpl                                |  1 -
 kdots/inc/class.kdots_framework.inc.php       |  4 +-
 kdots/js/EgwDarkmodeToggle.ts                 |  1 -
 kdots/setup/setup.inc.php                     |  5 --
 pixelegg/head.tpl                             |  2 +
 updateGruntfile.php                           |  2 +-
 12 files changed, 170 insertions(+), 101 deletions(-)
 delete mode 100644 kdots/assets/styles/framework_dark.less
 rename kdots/{assets/styles/framework.css => css/kdots.css} (80%)
 rename kdots/{assets/styles/framework.less => css/kdots.less} (94%)
 create mode 100644 kdots/css/less/dark.less
 create mode 100644 kdots/css/less/light.less

diff --git a/Gruntfile.js b/Gruntfile.js
index b91a06770f..ce0e905909 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -40,28 +40,14 @@ module.exports = function (grunt) {
 			pixelegg: {
 				files: {
 					"pixelegg/css/pixelegg.min.css": [
-						"node_modules/flatpickr/dist/themes/light.css",
-						"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
-						"vendor/bower-asset/diff2html/dist/diff2html.css",
-						"vendor/bower-asset/cropper/dist/cropper.min.css",
-						"api/templates/default/css/flags.css",
-						"api/templates/default/css/htmlarea.css",
-						"api/templates/default/etemplate2.css",
-						"pixelegg/css/pixelegg.css",
-						"api/templates/default/print.css",
-						"pixelegg/print.css"
+						"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
+						"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
+						"pixelegg/css/pixelegg.min.css"
 					],
 					"pixelegg/css/mobile.min.css": [
-						"node_modules/flatpickr/dist/themes/light.css",
-						"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
-						"vendor/bower-asset/diff2html/dist/diff2html.css",
-						"vendor/bower-asset/cropper/dist/cropper.min.css",
-						"api/templates/default/css/flags.css",
-						"api/templates/default/css/htmlarea.css",
-						"api/templates/default/etemplate2.css",
-						"pixelegg/css/mobile.css",
-						"api/templates/default/print.css",
-						"pixelegg/print.css"
+						"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
+						"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
+						"pixelegg/css/mobile.min.css"
 					],
 					"pixelegg/mobile/fw_mobile.min.css": [
 						"node_modules/flatpickr/dist/themes/light.css",
@@ -76,28 +62,44 @@ module.exports = function (grunt) {
 						"pixelegg/print.css"
 					],
 					"pixelegg/css/monochrome.min.css": [
-						"node_modules/flatpickr/dist/themes/light.css",
-						"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
-						"vendor/bower-asset/diff2html/dist/diff2html.css",
-						"vendor/bower-asset/cropper/dist/cropper.min.css",
-						"api/templates/default/css/flags.css",
-						"api/templates/default/css/htmlarea.css",
-						"api/templates/default/etemplate2.css",
-						"pixelegg/css/monochrome.css",
-						"api/templates/default/print.css",
-						"pixelegg/print.css"
+						"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
+						"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
+						"pixelegg/css/monochrome.min.css"
 					],
 					"pixelegg/css/modern.min.css": [
+						"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
+						"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
+						"pixelegg/css/pixelegg.min.css"
+					],
+					"pixelegg/css/0.min.css": [
+						"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
+						"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
+						"pixelegg/css/pixelegg.min.css"
+					],
+					"pixelegg/css/1.min.css": [
+						"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
+						"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
+						"pixelegg/css/pixelegg.min.css"
+					],
+					"pixelegg/css/2.min.css": [
+						"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
+						"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
+						"pixelegg/css/pixelegg.min.css"
+					],
+					"pixelegg/css/3.min.css": [
+						"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
+						"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
+						"pixelegg/css/pixelegg.min.css"
+					]
+				}
+			},
+			kdots: {
+				files: {
+					"kdots/css/kdots.min.css": [
 						"node_modules/flatpickr/dist/themes/light.css",
-						"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
-						"vendor/bower-asset/diff2html/dist/diff2html.css",
-						"vendor/bower-asset/cropper/dist/cropper.min.css",
-						"api/templates/default/css/flags.css",
-						"api/templates/default/css/htmlarea.css",
 						"api/templates/default/etemplate2.css",
-						"pixelegg/css/pixelegg.css",
-						"api/templates/default/print.css",
-						"pixelegg/print.css"
+						"kdots/css/kdots.css",
+						"api/templates/default/print.css"
 					]
 				}
 			}
@@ -108,7 +110,8 @@ module.exports = function (grunt) {
 					"*/Gruntfile.js"
 				]
 			}
-		}
+		},
+		terser: null
 	});
 	// Load plugin for css minification
 	grunt.loadNpmTasks("grunt-contrib-cssmin");
diff --git a/kdots/assets/styles/framework_dark.less b/kdots/assets/styles/framework_dark.less
deleted file mode 100644
index d4dc031707..0000000000
--- a/kdots/assets/styles/framework_dark.less
+++ /dev/null
@@ -1,35 +0,0 @@
-html[data-darkmode="1"] body {
-  background-color: black;
-  color: var(--sl-color-neutral-700);
-
-  /*** HEADER ***/
-  #egw_fw_topmenu_info_items {
-	#topmenu_info_timer:before {
-	  filter:initial;
-	}
-  }
-
-  /*** APPLICATION ***/
-
-  egw-app {
-	--application-header-text-color: var(--sl-color-neutral-700);
-  }
-
-  /*** End APPLICATION ***/
-
-  /*** WIDGETS ***/
-  /* This should mostly go away with webcomponents */
-
-  .et2_container {
-	background-color: initial;
-  }
-
-  .dialogFooterToolbar et2-button::part(base):not(:hover), et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
-	background-color: var(--sl-input-background-color);
-  }
-  .nextmatch_sortheader {
-	color: #96bcd9;
-  }
-
-  /** End WIDGETS **/
-}
\ No newline at end of file
diff --git a/kdots/assets/styles/framework.css b/kdots/css/kdots.css
similarity index 80%
rename from kdots/assets/styles/framework.css
rename to kdots/css/kdots.css
index 20bb933f11..862ab00d10 100644
--- a/kdots/assets/styles/framework.css
+++ b/kdots/css/kdots.css
@@ -1,12 +1,44 @@
 /**
  * kDots main styles
  *
- * Note that light / dark colors should go in framework_light.less & framework_dark.less
+ * Note that light / dark colors should go in kdots_light.less & kdots_dark.less
  */
 /** Theme customisations **/
-html[data-darkmode="1"] body {
+:root,
+:host,
+html,
+.sl-theme-light {
+  /*
+  color token generator using #0053c9
+  https://codepen.io/claviska/full/QWveRgL
+   */
+  --sl-color-primary-50: #f7fafd;
+  --sl-color-primary-100: #e4edf9;
+  --sl-color-primary-200: #d0dff5;
+  --sl-color-primary-300: #bad0f0;
+  --sl-color-primary-400: #9cbcea;
+  --sl-color-primary-500: #75a2e2;
+  --sl-color-primary-600: #4984d8;
+  --sl-color-primary-700: #2169d0;
+  --sl-color-primary-800: #0051c5;
+  --sl-color-primary-900: #003a8d;
+  --sl-color-primary-950: #002458;
+}
+html[data-darkmode="1"],
+.sl-theme-dark {
   background-color: black;
   color: var(--sl-color-neutral-700);
+  --sl-color-primary-950: hsl(from var(--primary-color) h s calc(l + 18));
+  --sl-color-primary-900: hsl(from var(--primary-color) h s calc(l + 16));
+  --sl-color-primary-800: hsl(from var(--primary-color) h s calc(l + 12));
+  --sl-color-primary-700: hsl(from var(--primary-color) h s calc(l + 8));
+  --sl-color-primary-600: hsl(from var(--primary-color) h s calc(l + 4));
+  --sl-color-primary-500: var(--primary-color);
+  --sl-color-primary-400: hsl(from var(--primary-color) h s calc(l - 4));
+  --sl-color-primary-300: hsl(from var(--primary-color) h s calc(l - 8));
+  --sl-color-primary-200: hsl(from var(--primary-color) h s calc(l - 12));
+  --sl-color-primary-100: hsl(from var(--primary-color) h s calc(l - 16));
+  --sl-color-primary-50: hsl(from var(--primary-color) h s calc(l - 18));
   /*** HEADER ***/
   /*** APPLICATION ***/
   /*** End APPLICATION ***/
@@ -14,20 +46,26 @@ html[data-darkmode="1"] body {
   /* This should mostly go away with webcomponents */
   /** End WIDGETS **/
 }
-html[data-darkmode="1"] body #egw_fw_topmenu_info_items #topmenu_info_timer:before {
+html[data-darkmode="1"] #egw_fw_topmenu_info_items #topmenu_info_timer:before,
+.sl-theme-dark #egw_fw_topmenu_info_items #topmenu_info_timer:before {
   filter: initial;
 }
-html[data-darkmode="1"] body egw-app {
+html[data-darkmode="1"] egw-app,
+.sl-theme-dark egw-app {
   --application-header-text-color: var(--sl-color-neutral-700);
 }
-html[data-darkmode="1"] body .et2_container {
+html[data-darkmode="1"] .et2_container,
+.sl-theme-dark .et2_container {
   background-color: initial;
 }
-html[data-darkmode="1"] body .dialogFooterToolbar et2-button::part(base):not(:hover),
-html[data-darkmode="1"] body et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
+html[data-darkmode="1"] .dialogFooterToolbar et2-button::part(base):not(:hover),
+.sl-theme-dark .dialogFooterToolbar et2-button::part(base):not(:hover),
+html[data-darkmode="1"] et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover),
+.sl-theme-dark et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
   background-color: var(--sl-input-background-color);
 }
-html[data-darkmode="1"] body .nextmatch_sortheader {
+html[data-darkmode="1"] .nextmatch_sortheader,
+.sl-theme-dark .nextmatch_sortheader {
   color: #96bcd9;
 }
 /** End theme customisations **/
@@ -163,7 +201,7 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
   left: 0;
   width: 100%;
   height: 100%;
-  background-image: url(../../../timesheet/templates/default/images/navbar.svg);
+  background-image: url(../../timesheet/templates/default/images/navbar.svg);
   background-repeat: no-repeat;
   background-size: 32px;
   background-position: center center;
@@ -174,7 +212,7 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
 }
 #egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add {
   display: block;
-  background-image: url(../../../api/templates/default/images/add.svg);
+  background-image: url(../../api/templates/default/images/add.svg);
   background-repeat: no-repeat;
   background-size: 24px;
   background-position: center;
@@ -223,7 +261,7 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
   width: 1em;
 }
 #egw_fw_topmenu_info_items button#topmenu_info_search {
-  background-image: url(../../../api/templates/default/images/topmenu_items/search.svg);
+  background-image: url(../../api/templates/default/images/topmenu_items/search.svg);
 }
 #topmenu_info_print_title {
   background-image: url(../../../api/templates/default/images/print.svg);
@@ -354,7 +392,7 @@ div.et2_nextmatch .egwGridView_outer thead > tr th.optcol span.selectcols {
   height: 9px;
   padding: 4px 14px 0 2px;
   margin-top: 4px;
-  background-image: url(../../../api/templates/default/images/selectcols.svg);
+  background-image: url(../../api/templates/default/images/selectcols.svg);
   background-repeat: no-repeat;
   background-size: 10px 10px;
   display: inline-block;
diff --git a/kdots/assets/styles/framework.less b/kdots/css/kdots.less
similarity index 94%
rename from kdots/assets/styles/framework.less
rename to kdots/css/kdots.less
index c7307f85ff..58fbf3ccb7 100644
--- a/kdots/assets/styles/framework.less
+++ b/kdots/css/kdots.less
@@ -1,12 +1,13 @@
 /**
  * kDots main styles
  *
- * Note that light / dark colors should go in framework_light.less & framework_dark.less
+ * Note that light / dark colors should go in kdots_light.less & kdots_dark.less
  */
 
 
 /** Theme customisations **/
-@import "./framework_dark.less";
+@import "./less/light.less";
+@import "./less/dark.less";
 /** End theme customisations **/
 
 html, body {
@@ -164,7 +165,7 @@ egw-framework#egw_fw_basecontainer {
 	  left: 0;
 	  width: 100%;
 	  height: 100%;
-	  background-image: url(../../../timesheet/templates/default/images/navbar.svg);
+	  background-image: url(../../timesheet/templates/default/images/navbar.svg);
 	  background-repeat: no-repeat;
 	  background-size: 32px;
 	  background-position: center center;
@@ -177,7 +178,7 @@ egw-framework#egw_fw_basecontainer {
 
 	span#quick_add {
 	  display: block;
-	  background-image: url(../../../api/templates/default/images/add.svg);
+	  background-image: url(../../api/templates/default/images/add.svg);
 	  background-repeat: no-repeat;
 	  background-size: 24px;
 	  background-position: center;
@@ -236,7 +237,7 @@ egw-framework#egw_fw_basecontainer {
 	}
   }
   button#topmenu_info_search {
-	background-image: url(../../../api/templates/default/images/topmenu_items/search.svg);
+	background-image: url(../../api/templates/default/images/topmenu_items/search.svg);
   }
 }
 
@@ -383,7 +384,7 @@ div.et2_nextmatch {
 		height: 9px;
 		padding: 4px 14px 0 2px;
 		margin-top: 4px;
-		background-image: url(../../../api/templates/default/images/selectcols.svg);
+		background-image: url(../../api/templates/default/images/selectcols.svg);
 		background-repeat: no-repeat;
 		background-size: 10px 10px;
 		display: inline-block;
diff --git a/kdots/css/less/dark.less b/kdots/css/less/dark.less
new file mode 100644
index 0000000000..3bbcc2945a
--- /dev/null
+++ b/kdots/css/less/dark.less
@@ -0,0 +1,47 @@
+html[data-darkmode="1"], .sl-theme-dark {
+  background-color: black;
+  color: var(--sl-color-neutral-700);
+
+  --sl-color-primary-950: hsl(from var(--primary-color) h s calc(l + 18));
+  --sl-color-primary-900: hsl(from var(--primary-color) h s calc(l + 16));
+  --sl-color-primary-800: hsl(from var(--primary-color) h s calc(l + 12));
+  --sl-color-primary-700: hsl(from var(--primary-color) h s calc(l + 8));
+  --sl-color-primary-600: hsl(from var(--primary-color) h s calc(l + 4));
+  --sl-color-primary-500: var(--primary-color);
+  --sl-color-primary-400: hsl(from var(--primary-color) h s calc(l - 4));
+  --sl-color-primary-300: hsl(from var(--primary-color) h s calc(l - 8));
+  --sl-color-primary-200: hsl(from var(--primary-color) h s calc(l - 12));
+  --sl-color-primary-100: hsl(from var(--primary-color) h s calc(l - 16));
+  --sl-color-primary-50: hsl(from var(--primary-color) h s calc(l - 18));
+
+  /*** HEADER ***/
+  #egw_fw_topmenu_info_items {
+	#topmenu_info_timer:before {
+	  filter:initial;
+	}
+  }
+
+  /*** APPLICATION ***/
+
+  egw-app {
+	--application-header-text-color: var(--sl-color-neutral-700);
+  }
+
+  /*** End APPLICATION ***/
+
+  /*** WIDGETS ***/
+  /* This should mostly go away with webcomponents */
+
+  .et2_container {
+	background-color: initial;
+  }
+
+  .dialogFooterToolbar et2-button::part(base):not(:hover), et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
+	background-color: var(--sl-input-background-color);
+  }
+  .nextmatch_sortheader {
+	color: #96bcd9;
+  }
+
+  /** End WIDGETS **/
+}
\ No newline at end of file
diff --git a/kdots/css/less/light.less b/kdots/css/less/light.less
new file mode 100644
index 0000000000..7aa3c30d27
--- /dev/null
+++ b/kdots/css/less/light.less
@@ -0,0 +1,18 @@
+:root, :host, html, .sl-theme-light {
+  /*
+  color token generator using #0053c9
+  https://codepen.io/claviska/full/QWveRgL
+   */
+  --sl-color-primary-50: rgb(247 250 253);
+  --sl-color-primary-100: rgb(228 237 249);
+  --sl-color-primary-200: rgb(208 223 245);
+  --sl-color-primary-300: rgb(186 208 240);
+  --sl-color-primary-400: rgb(156 188 234);
+  --sl-color-primary-500: rgb(117 162 226);
+  --sl-color-primary-600: rgb(73 132 216);
+  --sl-color-primary-700: rgb(33 105 208);
+  --sl-color-primary-800: rgb(0 81 197);
+  --sl-color-primary-900: rgb(0 58 141);
+  --sl-color-primary-950: rgb(0 36 88);
+
+}
\ No newline at end of file
diff --git a/kdots/head.tpl b/kdots/head.tpl
index 7037e7dc55..1f8518cc53 100644
--- a/kdots/head.tpl
+++ b/kdots/head.tpl
@@ -17,7 +17,6 @@
 	<link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-theme-slide.css">
 	<link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-language-{lang_code}.css">
 	<script src="{webserver_url}/api/js/offline/offline.min.js"></script>
-	<link rel="stylesheet" href="{webserver_url}/kdots/assets/styles/framework.css">
     {css_file}
 	<style type="text/css">
 		{app_css}
diff --git a/kdots/inc/class.kdots_framework.inc.php b/kdots/inc/class.kdots_framework.inc.php
index 7896c0ed37..ac15fe2ca4 100644
--- a/kdots/inc/class.kdots_framework.inc.php
+++ b/kdots/inc/class.kdots_framework.inc.php
@@ -28,6 +28,8 @@ class kdots_framework extends Api\Framework\Ajax
 	 */
 	protected function _get_header(array $extra = array())
 	{
+		self::includeCSS('/kdots/assets/styles/kdots.css');
+
 		// Skip making a mess for iframe apps, they're on their own
 		if($extra['check-framework'] == true)
 		{
@@ -36,7 +38,7 @@ class kdots_framework extends Api\Framework\Ajax
 		}
 		$data = parent::_get_header($extra);
 
-		$data['theme'] .= $data['darkmode'] ? 'data-darkmode="1" class="sl-theme-dark"' : '';
+		$data['theme'] .= $GLOBALS['egw_info']['user']['preferences']['common']['darkmode'] ? 'data-darkmode="1" class="sl-theme-dark"' : '';
 		unset($data['darkmode']);
 
 		if($extra['navbar-apps'])
diff --git a/kdots/js/EgwDarkmodeToggle.ts b/kdots/js/EgwDarkmodeToggle.ts
index ebfba9aaaa..c6192c66d3 100644
--- a/kdots/js/EgwDarkmodeToggle.ts
+++ b/kdots/js/EgwDarkmodeToggle.ts
@@ -69,7 +69,6 @@ export class EgwDarkmodeToggle extends LitElement
 			document.documentElement.setAttribute("data-darkmode", "0");
 		}
 		// Set class for Shoelace
-		document.documentElement.classList.toggle("sl-theme-dark", this.darkmode);
 		this.requestUpdate("darkmode")
 		this.updateComplete.then(() =>
 		{
diff --git a/kdots/setup/setup.inc.php b/kdots/setup/setup.inc.php
index bbbde19e8d..3ef26d5011 100644
--- a/kdots/setup/setup.inc.php
+++ b/kdots/setup/setup.inc.php
@@ -20,11 +20,6 @@ $GLOBALS['egw_info']['template']['kdots']['maintainer'] = array(
 $GLOBALS['egw_info']['template']['kdots']['description'] = "WIP framework of EGroupware.";
 $GLOBALS['egw_info']['template']['kdots']['windowed'] = true;
 
-// specify (different) labels for default themes
-$GLOBALS['egw_info']['template']['kdots']['themes'] = array(
-	'default' => 'Standard'
-);
-
 // Dependencies for this template to work
 $GLOBALS['egw_info']['template']['kdots']['depends'][] = array(
 	'appname'  => 'api',
diff --git a/pixelegg/head.tpl b/pixelegg/head.tpl
index 766b36b807..3119583d7d 100644
--- a/pixelegg/head.tpl
+++ b/pixelegg/head.tpl
@@ -14,6 +14,8 @@
 		<link rel="manifest" href="{webserver_url}/manifest.json"/>
 		<link rel="icon" href="{img_icon}" type="image/x-ico" />
 		<link rel="shortcut icon" href="{img_shortcut}" />
+		<link rel="stylesheet" href="{webserver_url}/node_modules/@shoelace-style/shoelace/dist/themes/light.css"/>
+		<link rel="stylesheet" href="{webserver_url}/node_modules/@shoelace-style/shoelace/dist/themes/dark.css"/>
 		<link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-theme-slide.css">
 		<link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-language-{lang_code}.css">
 		<script src="{webserver_url}/api/js/offline/offline.min.js"></script>
diff --git a/updateGruntfile.php b/updateGruntfile.php
index fb8c32dfa6..3a11446f6d 100755
--- a/updateGruntfile.php
+++ b/updateGruntfile.php
@@ -78,7 +78,7 @@ foreach(Bundle::all() as $name => $files)
 $cssmin =& $config['cssmin'];
 $GLOBALS['egw_info']['flags']['currentapp'] = '*grunt*';	// to not find any app.css files
 $GLOBALS['egw_info']['server']['debug_minify'] = 'True';	// otherwise we would only get minified file
-foreach(array('pixelegg','jdots')/*array_keys(Framework::list_templates())*/ as $template)
+foreach(array('pixelegg', 'jdots', 'kdots')/*array_keys(Framework::list_templates())*/ as $template)
 {
 	$GLOBALS['egw_info']['server']['template_set'] = $template;
 	$tpl = Framework::factory();