From 2264c5f67d009de1208521bc2ed87433a05589de Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Fri, 9 Aug 2024 00:00:27 +0200
Subject: [PATCH] chore: Add ZenThemeBuilder component for customizing browser
 theme

---
 src/browser/base/content/zen-components       |  2 +-
 .../base/content/zen-scripts.jar.inc.mn       |  1 +
 .../preferences/zenLooksAndFeel.inc.xhtml     |  3 ++
 .../shared/preferences/zen-preferences.css    | 52 +++++++++++++++++++
 4 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components
index 47c436108..0e9849bab 160000
--- a/src/browser/base/content/zen-components
+++ b/src/browser/base/content/zen-components
@@ -1 +1 @@
-Subproject commit 47c43610827bbd6ce54804c402637a15ed0340f7
+Subproject commit 0e9849bab892f0546bcd4b7eface3603fd0715f4
diff --git a/src/browser/base/content/zen-scripts.jar.inc.mn b/src/browser/base/content/zen-scripts.jar.inc.mn
index 2fe21674b..c3a56e835 100644
--- a/src/browser/base/content/zen-scripts.jar.inc.mn
+++ b/src/browser/base/content/zen-scripts.jar.inc.mn
@@ -5,4 +5,5 @@
         content/browser/zen-components/ZenSidebarManager.mjs    (content/zen-components/src/ZenSidebarManager.mjs)
         content/browser/zen-components/ZenProfileDialogUI.mjs   (content/zen-components/src/ZenProfileDialogUI.mjs)
         content/browser/zen-components/ZenKeyboardShortcuts.mjs (content/zen-components/src/ZenKeyboardShortcuts.mjs)
+        content/browser/zen-components/ZenThemeBuilder.mjs      (content/zen-components/src/ZenThemeBuilder.mjs)
         
\ No newline at end of file
diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
index 97455a903..8b1c54a67 100644
--- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
+++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
@@ -1,3 +1,4 @@
+<script src="chrome://browser/content/zen-components/ZenThemeBuilder.mjs" defer=""/>
 <script src="chrome://browser/content/preferences/zen-settings.js"/>
 <html:template id="template-paneZenLooks">
 <hbox id="zenLooksCategory"
@@ -14,6 +15,8 @@
       <hbox id="zenLooksAndFeelColorOptions" align="center">
       </hbox>
 
+      <html:div id="zen-theme-builder-wrapper"></html:div>
+
       <checkbox id="zenLooksAndFeelUseThemedToolbar"
             data-l10n-id="zen-look-and-feel-themed-toolbar"
             preference="zen.theme.toolbar-themed"/>
diff --git a/src/browser/themes/shared/preferences/zen-preferences.css b/src/browser/themes/shared/preferences/zen-preferences.css
index 176098ab5..280711686 100644
--- a/src/browser/themes/shared/preferences/zen-preferences.css
+++ b/src/browser/themes/shared/preferences/zen-preferences.css
@@ -196,3 +196,55 @@ groupbox h2 {
 #category-zen-workspaces > .category-icon {
   list-style-image: url("chrome://browser/skin/window.svg");
 }
+
+/* Theme builder */
+
+#zen-theme-builder {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 15px;
+  background: var(--zen-colors-tertiary);
+  border-radius: 10px;
+  margin-bottom: 10px;
+}
+
+#zen-theme-builder-color-picker {
+  width: 180px;
+  height: 180px;
+  border-radius: 10px;
+  margin-right: 10px;
+  position: relative;
+}
+
+#zen-theme-builder-color-picker-canvas {
+  border-radius: 10px;
+  width: 100%;
+  height: 100%;
+}
+
+#zen-theme-builder-color-picker-deck {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(100% - 20px);
+  height: calc(100% - 20px);
+  border-radius: 10px;
+  margin: 10px;
+  background: light-dark(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3));
+  backdrop-filter: blur(15px);
+  border: 2px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+}
+
+#zen-theme-builder-color-picker-thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 4px solid light-dark(white, black);
+  width: 20px;
+  height: 20px;
+  border-radius: 50px;
+  background: var(--zen-primary-color);
+  transform: translate(-50%, -50%);
+}
+