From 57ee00bf3e0a98fef84f0fb46fe2c5f46f9cfd1c Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Sun, 7 Dec 2025 18:05:30 +0100
Subject: [PATCH] feat: Add black / white color shades options for gradients,
 b=no-bug, c=common, workspaces

---
 .../content/zen-panels/gradient-generator.inc | 28 ++++++--
 src/browser/themes/shared/zen-icons/icons.css |  4 ++
 .../themes/shared/zen-icons/jar.inc.mn        |  3 +
 .../themes/shared/zen-icons/lin/algorithm.svg |  5 ++
 .../themes/shared/zen-icons/lin/face-sun.svg  |  2 +-
 .../shared/zen-icons/lin/moon-stars.svg       |  2 +-
 .../themes/shared/zen-icons/lin/sparkles.svg  |  2 +-
 src/zen/common/styles/zen-animations.css      |  6 +-
 src/zen/workspaces/ZenGradientGenerator.mjs   | 65 ++++++++++++++-----
 src/zen/workspaces/zen-gradient-generator.css | 37 ++++++-----
 10 files changed, 109 insertions(+), 45 deletions(-)
 create mode 100644 src/browser/themes/shared/zen-icons/lin/algorithm.svg

diff --git a/src/browser/base/content/zen-panels/gradient-generator.inc b/src/browser/base/content/zen-panels/gradient-generator.inc
index b5f87468b..6bc5830d2 100644
--- a/src/browser/base/content/zen-panels/gradient-generator.inc
+++ b/src/browser/base/content/zen-panels/gradient-generator.inc
@@ -12,10 +12,9 @@
           <button id="PanelUI-zen-gradient-generator-scheme-dark" class="subviewbutton"/> 
         </hbox>
         <hbox id="PanelUI-zen-gradient-generator-color-actions">
-          <button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton">
-          </button>
-          <button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton">
-          </button>
+          <button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton" />
+          <button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton" />
+          <button id="PanelUI-zen-gradient-generator-color-toggle-algo" class="subviewbutton" />
         </hbox>
         <label data-l10n-id="zen-panel-ui-gradient-click-to-add" id="PanelUI-zen-gradient-generator-color-click-to-add"></label>
       </hbox>
@@ -78,6 +77,27 @@
             <box data-lightness="20" data-algo="analogous" data-num-dots="3" data-position="118,215"
                 style="--c1: rgb(22, 80, 61); --c2: rgb(26, 60, 76); --c3: rgb(27, 87, 15);" />
           </hbox>
+          <hbox>
+# Start from black to white in a span on 8 steps and.
+# They must all go from the middle to the right side. They must always stay verically centered.
+# And reach to 180 on the right side, meaning we must divide the width in 16 segments.
+            <box data-type="explicit-black-white" data-algo="float" data-num-dots="1" 
+                data-position="180,180" style="background: rgb(0, 0, 0);"></box>
+            <box data-type="explicit-black-white" data-algo="float" data-num-dots="1" 
+                data-position="202.5,180" style="background: rgb(32, 32, 32);"></box>
+            <box data-type="explicit-black-white" data-algo="float" data-num-dots="1" 
+                data-position="225,180" style="background: rgb(64, 64, 64);"></box>
+            <box data-type="explicit-black-white" data-algo="float" data-num-dots="1" 
+                data-position="247.5,180" style="background: rgb(96, 96, 96);"></box>
+            <box data-type="explicit-black-white" data-algo="float" data-num-dots="1" 
+                data-position="270,180" style="background: rgb(128, 128, 128);"></box>
+            <box data-type="explicit-black-white" data-algo="float" data-num-dots="1" 
+                data-position="292.5,180" style="background: rgb(160, 160, 160);"></box>
+            <box data-type="explicit-black-white" data-algo="float" data-num-dots="1" 
+                data-position="315,180" style="background: rgb(192, 192, 192);"></box>
+            <box data-type="explicit-black-white" data-algo="float" data-num-dots="1" 
+                data-position="337.5,180" style="background: rgb(224, 224, 224);"></box>
+          </hbox>
         </hbox>
         <toolbarbutton id="PanelUI-zen-gradient-generator-color-page-right" class="toolbarbutton-1" />
       </hbox>
diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css
index 258f007f3..80db0d71d 100644
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -692,6 +692,10 @@
   list-style-image: url('container-tab.svg') !important;
 }
 
+#PanelUI-zen-gradient-generator-color-toggle-algo {
+  list-style-image: url('algorithm.svg');
+}
+
 #appMenuClearRecentHistory {
   list-style-image: url('edit-delete.svg') !important;
 }
diff --git a/src/browser/themes/shared/zen-icons/jar.inc.mn b/src/browser/themes/shared/zen-icons/jar.inc.mn
index 485933c80..2efa99098 100644
--- a/src/browser/themes/shared/zen-icons/jar.inc.mn
+++ b/src/browser/themes/shared/zen-icons/jar.inc.mn
@@ -3,6 +3,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 #ifdef XP_WIN
+*  skin/classic/browser/zen-icons/algorithm.svg                      (../shared/zen-icons/lin/algorithm.svg) 
 *  skin/classic/browser/zen-icons/arrow-down.svg                      (../shared/zen-icons/lin/arrow-down.svg) 
 *  skin/classic/browser/zen-icons/arrow-left.svg                      (../shared/zen-icons/lin/arrow-left.svg) 
 *  skin/classic/browser/zen-icons/arrow-right.svg                      (../shared/zen-icons/lin/arrow-right.svg) 
@@ -131,6 +132,7 @@
 *  skin/classic/browser/zen-icons/zoom-out.svg                      (../shared/zen-icons/lin/zoom-out.svg) 
 #endif
 #ifdef XP_MACOSX
+*  skin/classic/browser/zen-icons/algorithm.svg                      (../shared/zen-icons/lin/algorithm.svg) 
 *  skin/classic/browser/zen-icons/arrow-down.svg                      (../shared/zen-icons/lin/arrow-down.svg) 
 *  skin/classic/browser/zen-icons/arrow-left.svg                      (../shared/zen-icons/lin/arrow-left.svg) 
 *  skin/classic/browser/zen-icons/arrow-right.svg                      (../shared/zen-icons/lin/arrow-right.svg) 
@@ -259,6 +261,7 @@
 *  skin/classic/browser/zen-icons/zoom-out.svg                      (../shared/zen-icons/lin/zoom-out.svg) 
 #endif
 #ifdef XP_LINUX
+*  skin/classic/browser/zen-icons/algorithm.svg                      (../shared/zen-icons/lin/algorithm.svg) 
 *  skin/classic/browser/zen-icons/arrow-down.svg                      (../shared/zen-icons/lin/arrow-down.svg) 
 *  skin/classic/browser/zen-icons/arrow-left.svg                      (../shared/zen-icons/lin/arrow-left.svg) 
 *  skin/classic/browser/zen-icons/arrow-right.svg                      (../shared/zen-icons/lin/arrow-right.svg) 
diff --git a/src/browser/themes/shared/zen-icons/lin/algorithm.svg b/src/browser/themes/shared/zen-icons/lin/algorithm.svg
new file mode 100644
index 000000000..f35991ccc
--- /dev/null
+++ b/src/browser/themes/shared/zen-icons/lin/algorithm.svg
@@ -0,0 +1,5 @@
+#filter dumbComments emptyLines substitution
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M4.75 15.25C5.99264 15.25 7 14.2426 7 13C7 11.7574 5.99264 10.75 4.75 10.75C3.50736 10.75 2.5 11.7574 2.5 13C2.5 14.2426 3.50736 15.25 4.75 15.25Z"/><path d="M13.25 15.25C14.4926 15.25 15.5 14.2426 15.5 13C15.5 11.7574 14.4926 10.75 13.25 10.75C12.0074 10.75 11 11.7574 11 13C11 14.2426 12.0074 15.25 13.25 15.25Z"/><path d="M9 7.25C10.2426 7.25 11.25 6.24264 11.25 5C11.25 3.75736 10.2426 2.75 9 2.75C7.75736 2.75 6.75 3.75736 6.75 5C6.75 6.24264 7.75736 7.25 9 7.25Z"/></g></svg>
\ No newline at end of file
diff --git a/src/browser/themes/shared/zen-icons/lin/face-sun.svg b/src/browser/themes/shared/zen-icons/lin/face-sun.svg
index 432970d42..543e131a0 100644
--- a/src/browser/themes/shared/zen-icons/lin/face-sun.svg
+++ b/src/browser/themes/shared/zen-icons/lin/face-sun.svg
@@ -2,4 +2,4 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M17.25,8.25h-1.292c-.146-1.369-.69-2.619-1.512-3.637l1.583-1.583c.293-.293,.293-.768,0-1.061s-.767-.294-1.061,0l-1.583,1.583c-1.018-.821-2.268-1.365-3.636-1.511V.75c0-.414-.336-.75-.75-.75s-.75,.336-.75,.75v1.292c-1.368,.146-2.618,.69-3.636,1.511l-1.583-1.583c-.293-.293-.768-.293-1.061,0s-.293,.768,0,1.061l1.583,1.583c-.821,1.018-1.365,2.268-1.511,3.637H.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h1.292c.146,1.369,.69,2.619,1.511,3.637l-1.583,1.583c-.293,.293-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22,.191,0,.384-.073,.53-.22l1.583-1.583c1.018,.821,2.268,1.365,3.636,1.511v1.292c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-1.292c1.368-.146,2.618-.69,3.636-1.511l1.583,1.583c.146,.146,.338,.22,.53,.22s.384-.073,.53-.22c.293-.293,.293-.768,0-1.061l-1.583-1.583c.821-1.018,1.365-2.268,1.512-3.637h1.292c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-11.25,1.75c-.552,0-1-.448-1-1s.448-1,1-1,1,.448,1,1-.448,1-1,1Zm3,2c-.828,0-1.5-.672-1.5-1.5,0-.276,.224-.5,.5-.5h2c.276,0,.5,.224,.5,.5,0,.828-.672,1.5-1.5,1.5Zm2-3c0-.552,.448-1,1-1s1,.448,1,1-.448,1-1,1-1-.448-1-1Z" fill="currentColor"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M17.25,8.25h-1.292c-.146-1.369-.69-2.619-1.512-3.637l1.583-1.583c.293-.293,.293-.768,0-1.061s-.767-.294-1.061,0l-1.583,1.583c-1.018-.821-2.268-1.365-3.636-1.511V.75c0-.414-.336-.75-.75-.75s-.75,.336-.75,.75v1.292c-1.368,.146-2.618,.69-3.636,1.511l-1.583-1.583c-.293-.293-.768-.293-1.061,0s-.293,.768,0,1.061l1.583,1.583c-.821,1.018-1.365,2.268-1.511,3.637H.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h1.292c.146,1.369,.69,2.619,1.511,3.637l-1.583,1.583c-.293,.293-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22,.191,0,.384-.073,.53-.22l1.583-1.583c1.018,.821,2.268,1.365,3.636,1.511v1.292c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-1.292c1.368-.146,2.618-.69,3.636-1.511l1.583,1.583c.146,.146,.338,.22,.53,.22s.384-.073,.53-.22c.293-.293,.293-.768,0-1.061l-1.583-1.583c.821-1.018,1.365-2.268,1.512-3.637h1.292c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-11.25,1.75c-.552,0-1-.448-1-1s.448-1,1-1,1,.448,1,1-.448,1-1,1Zm3,2c-.828,0-1.5-.672-1.5-1.5,0-.276,.224-.5,.5-.5h2c.276,0,.5,.224,.5,.5,0,.828-.672,1.5-1.5,1.5Zm2-3c0-.552,.448-1,1-1s1,.448,1,1-.448,1-1,1-1-.448-1-1Z" fill="context-fill"></path></svg>
\ No newline at end of file
diff --git a/src/browser/themes/shared/zen-icons/lin/moon-stars.svg b/src/browser/themes/shared/zen-icons/lin/moon-stars.svg
index 031c60f8e..f4739fbae 100644
--- a/src/browser/themes/shared/zen-icons/lin/moon-stars.svg
+++ b/src/browser/themes/shared/zen-icons/lin/moon-stars.svg
@@ -2,4 +2,4 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M16.705,10.223c-.246-.183-.578-.197-.838-.037-.868,.532-1.859,.813-2.867,.813-3.033,0-5.5-2.467-5.5-5.5,0-1.146,.354-2.247,1.023-3.186,.177-.249,.186-.581,.021-.839-.164-.258-.467-.386-.77-.334C3.994,1.847,1.25,5.152,1.25,9c0,4.411,3.589,8,8,8,3.638,0,6.819-2.461,7.735-5.986,.077-.296-.034-.609-.28-.791Z" fill="currentColor"></path><path d="M12.743,4.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-color="color-2"></path><circle cx="14.25" cy="7.75" r=".75" fill="currentColor" data-color="color-2"></circle></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M16.705,10.223c-.246-.183-.578-.197-.838-.037-.868,.532-1.859,.813-2.867,.813-3.033,0-5.5-2.467-5.5-5.5,0-1.146,.354-2.247,1.023-3.186,.177-.249,.186-.581,.021-.839-.164-.258-.467-.386-.77-.334C3.994,1.847,1.25,5.152,1.25,9c0,4.411,3.589,8,8,8,3.638,0,6.819-2.461,7.735-5.986,.077-.296-.034-.609-.28-.791Z" fill="context-fill"></path><path d="M12.743,4.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-color="color-2"></path><circle cx="14.25" cy="7.75" r=".75" fill="currentColor" data-color="color-2"></circle></svg>
\ No newline at end of file
diff --git a/src/browser/themes/shared/zen-icons/lin/sparkles.svg b/src/browser/themes/shared/zen-icons/lin/sparkles.svg
index 77cc7d3ff..63f0bf063 100644
--- a/src/browser/themes/shared/zen-icons/lin/sparkles.svg
+++ b/src/browser/themes/shared/zen-icons/lin/sparkles.svg
@@ -2,4 +2,4 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M3.025,5.623c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263Z" fill="currentColor" data-color="color-2"></path><path d="M16.525,8.803l-4.535-1.793-1.793-4.535c-.227-.572-1.168-.572-1.395,0l-1.793,4.535-4.535,1.793c-.286,.113-.475,.39-.475,.697s.188,.584,.475,.697l4.535,1.793,1.793,4.535c.113,.286,.39,.474,.697,.474s.584-.188,.697-.474l1.793-4.535,4.535-1.793c.286-.113,.475-.39,.475-.697s-.188-.584-.475-.697Z" fill="currentColor"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M3.025,5.623c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263Z" fill="context-fill" data-color="color-2"></path><path d="M16.525,8.803l-4.535-1.793-1.793-4.535c-.227-.572-1.168-.572-1.395,0l-1.793,4.535-4.535,1.793c-.286,.113-.475,.39-.475,.697s.188,.584,.475,.697l4.535,1.793,1.793,4.535c.113,.286,.39,.474,.697,.474s.584-.188,.697-.474l1.793-4.535,4.535-1.793c.286-.113,.475-.39,.475-.697s-.188-.584-.475-.697Z" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/src/zen/common/styles/zen-animations.css b/src/zen/common/styles/zen-animations.css
index ae77e9502..1c2bd3c69 100644
--- a/src/zen/common/styles/zen-animations.css
+++ b/src/zen/common/styles/zen-animations.css
@@ -18,13 +18,13 @@
 
 @keyframes zen-theme-picker-dot-animation {
   from {
-    transform: scale(0.8) translate(-50%, -50%);
+    transform: scale(0.8) translate(-25%, -25%);
   }
   50% {
-    transform: scale(1.2) translate(-50%, -50%);
+    transform: scale(1.2) translate(-25%, -25%);
   }
   to {
-    transform: scale(1) translate(-50%, -50%);
+    transform: scale(1) translate(-25%, -25%);
   }
 }
 
diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs
index ba3f1edbe..377765efb 100644
--- a/src/zen/workspaces/ZenGradientGenerator.mjs
+++ b/src/zen/workspaces/ZenGradientGenerator.mjs
@@ -45,6 +45,7 @@ const MAX_OPACITY = 0.9;
 const MIN_OPACITY = AppConstants.platform === 'macosx' ? 0.25 : 0.35;
 
 const EXPLICIT_LIGHTNESS_TYPE = 'explicit-lightness';
+const EXPLICIT_BLACKWHITE_TYPE = 'explicit-black-white';
 
 export class nsZenThemePicker extends nsZenMultiWindowFeature {
   static MAX_DOTS = 3;
@@ -146,6 +147,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
   get colorHarmonies() {
     return [
       { type: 'complementary', angles: [180] },
+      { type: 'singleAnalogous', angles: [310] },
       { type: 'splitComplementary', angles: [150, 210] },
       { type: 'analogous', angles: [50, 310] },
       { type: 'triadic', angles: [120, 240] },
@@ -198,6 +200,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
           }
           this.dots = this.dots.slice(0, numDots);
         }
+        const type = target.getAttribute('data-type') || EXPLICIT_LIGHTNESS_TYPE;
         // Generate new gradient from the single color given
         const [x, y] = rawPosition.split(',').map((pos) => parseInt(pos));
         let dots = [
@@ -205,18 +208,18 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
             ID: 0,
             position: { x, y },
             isPrimary: true,
-            type: EXPLICIT_LIGHTNESS_TYPE,
+            type,
           },
         ];
         for (let i = 1; i < numDots; i++) {
           dots.push({
             ID: i,
             position: { x: 0, y: 0 },
-            type: EXPLICIT_LIGHTNESS_TYPE,
+            type,
           });
         }
         this.useAlgo = algo;
-        this.#currentLightness = lightness;
+        if (lightness !== null) this.#currentLightness = lightness;
         dots = this.calculateCompliments(dots, 'update', this.useAlgo);
         this.handleColorPositions(dots, true);
         this.updateCurrentWorkspace();
@@ -416,10 +419,10 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
   calculateInitialPosition([r, g, b]) {
     // This function is called before the picker is even rendered, so we hard code the dimensions
     // important: If any sort of sizing is changed, make sure changes are reflected here
-    const padding = 30;
+    const padding = 0;
     const rect = {
-      width: 338,
-      height: 338,
+      width: 380 + padding * 2,
+      height: 380 + padding * 2,
     };
     const centerX = rect.width / 2;
     const centerY = rect.height / 2;
@@ -437,7 +440,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
     const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
     const rect = gradient.getBoundingClientRect();
     const padding = 30; // each side
-    const dotHalfSize = 36 / 2; // half the size of the dot
+    const dotHalfSize = 38 / 2; // half the size of the dot
     x += dotHalfSize;
     y += dotHalfSize;
     rect.width += padding * 2; // Adjust width and height for padding
@@ -452,7 +455,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
       angle += 360; // Normalize to [0, 360)
     }
     const normalizedDistance = 1 - Math.min(distance / radius, 1); // Normalize distance to [0, 1]
-    const hue = (angle / 360) * 360; // Normalize angle to [0, 360)
+    let hue = (angle / 360) * 360; // Normalize angle to [0, 360)
     let saturation = normalizedDistance * 100; // stays high even in center
     if (type !== EXPLICIT_LIGHTNESS_TYPE) {
       saturation = 80 + (1 - normalizedDistance) * 20;
@@ -460,7 +463,12 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
       // For example, moving the dot outside will have higher lightness, while moving it inside will have lower lightness
       this.#currentLightness = Math.round((1 - normalizedDistance) * 100);
     }
-    const lightness = this.#currentLightness; // Fixed lightness for simplicity
+    let lightness = this.#currentLightness; // Fixed lightness for simplicity
+    if (type === EXPLICIT_BLACKWHITE_TYPE) {
+      // We can only get grayscales from white to black
+      saturation = 0;
+      lightness = Math.round((1 - normalizedDistance) * 100);
+    }
     const [r, g, b] = this.hslToRgb(hue / 360, saturation / 100, lightness / 100);
     return [
       Math.min(255, Math.max(0, r)),
@@ -675,7 +683,13 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
       }
 
       if (action === 'remove') {
-        return colorHarmonies.find((harmony) => harmony.angles.length === numDots);
+        let harmony = colorHarmonies.find((harmony) => harmony.angles.length === numDots);
+        // If we are coming from 3 analogous dots, we should now go to singleAnalogous if
+        // there are 2 dots left
+        if (harmony.type === 'analogous' && numDots === 1) {
+          harmony = colorHarmonies.find((harmony) => harmony.type === 'singleAnalogous');
+        }
+        return harmony;
       }
       if (action === 'add') {
         return colorHarmonies.find((harmony) => harmony.angles.length + 1 === numDots);
@@ -700,7 +714,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
 
     const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
     const rect = dotPad.getBoundingClientRect();
-    const padding = 30;
+    const padding = 0;
 
     let updatedDots = [...dots];
     const centerPosition = { x: rect.width / 2, y: rect.height / 2 };
@@ -843,16 +857,30 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
       this.handleColorPositions(colorPositions);
       this.updateCurrentWorkspace();
       return;
+    } else if (target.id === 'PanelUI-zen-gradient-generator-color-toggle-algo') {
+      const applicableHarmonies = this.colorHarmonies.filter(
+        (harmony) => harmony.angles.length + 1 === this.dots.length
+      );
+
+      let currentIndex = applicableHarmonies.findIndex((harmony) => harmony.type === this.useAlgo);
+
+      const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % applicableHarmonies.length;
+      this.useAlgo = applicableHarmonies[nextIndex].type;
+
+      let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo);
+      this.handleColorPositions(colorPositions);
+      this.updateCurrentWorkspace();
+      return;
     }
 
     if (event.button !== 0 || this.dragging || this.recentlyDragged) return;
 
     const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
     const rect = gradient.getBoundingClientRect();
-    const padding = 30;
+    const padding = 0;
 
-    const centerX = rect.left + rect.width / 2;
-    const centerY = rect.top + rect.height / 2;
+    const centerX = rect.left + rect.width / 2 - padding;
+    const centerY = rect.top + rect.height / 2 - padding;
     const radius = (rect.width - padding) / 2;
     let pixelX = event.clientX;
     let pixelY = event.clientY;
@@ -982,7 +1010,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
     if (this.dragging) {
       event.preventDefault();
       const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect();
-      const padding = 30; // each side
+      const padding = 0; // each side
       // do NOT let the ball be draged outside of an imaginary circle. You can drag it anywhere inside the circle
       // if the distance between the center of the circle and the dragged ball is bigger than the radius, then the ball
       // should be placed on the edge of the circle. If it's inside the circle, then the ball just follows the mouse
@@ -1164,7 +1192,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
         if (!forToolbar) {
           return [
             `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} 0%, transparent 100%)`,
-            `linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} 0%, transparent 80%)`,
+            `linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} 0%, transparent 100%)`,
           ]
             .reverse()
             .join(', ');
@@ -1175,8 +1203,8 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
         let color2 = this.getSingleRGBColor(themedColors[0], forToolbar);
         let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
         return [
+          `radial-gradient(circle at 0% 0%, ${color2} -10%, transparent 100%)`,
           `linear-gradient(to top, ${color1} -50%, transparent 125%)`,
-          `radial-gradient(circle at 0% 0%, ${color2} 10%, transparent 80%)`,
           `radial-gradient(circle at 100% -100%, ${color3} -100%, transparent 400%)`,
         ].join(', ');
       }
@@ -1389,6 +1417,9 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
           workspaceTheme.gradientColors.length === 0 ||
           (button.id === 'PanelUI-zen-gradient-generator-color-add'
             ? workspaceTheme.gradientColors.length >= nsZenThemePicker.MAX_DOTS
+            : false) ||
+          (button.id === 'PanelUI-zen-gradient-generator-color-toggle-algo'
+            ? workspaceTheme.gradientColors.length < 2
             : false);
       }
       const clickToAdd = browser.document.getElementById(
diff --git a/src/zen/workspaces/zen-gradient-generator.css b/src/zen/workspaces/zen-gradient-generator.css
index 24004a1d5..3e4ca8911 100644
--- a/src/zen/workspaces/zen-gradient-generator.css
+++ b/src/zen/workspaces/zen-gradient-generator.css
@@ -5,7 +5,7 @@
  */
 
 #PanelUI-zen-gradient-generator {
-  --panel-width: 360px;
+  --panel-width: 380px;
   --panel-padding: 10px;
   min-width: var(--panel-width);
 }
@@ -102,15 +102,16 @@
   overflow: auto;
   scrollbar-width: none;
   scroll-behavior: smooth;
-  mask-image: linear-gradient(to right, transparent 0%, black 2.5%, black 97.5%, transparent 100%);
 
   & > hbox {
-    justify-content: space-around;
+    justify-content: space-between;
     min-width: 100%;
+    padding: 0 1px;
 
     & > box {
-      width: 22px;
-      height: 22px;
+      width: 26px;
+      height: 26px;
+      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
       border-radius: 50%;
       cursor: pointer;
       position: relative;
@@ -251,17 +252,17 @@
   min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px);
   background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.03));
   background-image: radial-gradient(
-    light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)) 1px,
+    light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)) 0.5px,
     transparent 0
   );
   background-position: -23px -23px;
   background-size: 6px 6px;
 
   & .zen-theme-picker-dot {
-    position: absolute;
+    position: fixed;
     z-index: 2;
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
     border-radius: 50%;
     background: var(--zen-theme-picker-dot-color);
     @media (-prefers-color-scheme: dark) {
@@ -270,25 +271,25 @@
     cursor: pointer;
     border: 3px solid #ffffff;
     animation: zen-theme-picker-dot-animation 0.5s;
-    transform: translate(-50%, -50%);
+    transform: translate(-25%, -25%);
     pointer-events: none;
     transform-origin: center center;
 
     &:first-of-type {
-      width: 36px;
-      height: 36px;
+      width: 38px;
+      height: 38px;
       border-width: 4px;
       z-index: 2;
       pointer-events: all;
       transition: transform 0.2s;
       z-index: 999;
       &:hover {
-        transform: scale(1.05) translate(-50%, -50%);
+        transform: scale(1.05) translate(-25%, -25%);
       }
     }
 
     &[dragging='true'] {
-      transform: scale(1.2) translate(-50%, -50%) !important;
+      transform: scale(1.2) translate(-25%, -25%) !important;
     }
   }
 }
@@ -329,10 +330,10 @@
     min-width: fit-content !important;
     transition: background 0.2s;
     appearance: none;
-    max-height: 26px;
-    max-width: 26px;
-    min-height: 26px;
-    min-width: 26px !important;
+    max-height: 30px;
+    max-width: 30px;
+    min-height: 30px;
+    min-width: 30px !important;
     color: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.9));
 
     & .button-box {