Gradient hue revamp (#9093)

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -3,17 +3,60 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 {
-  class ZenThemePicker extends ZenMultiWindowFeature {
-    static GRADIENT_IMAGE_URL = 'chrome://browser/content/zen-images/gradient.png';
+  function parseSinePath(pathStr) {
+    const points = [];
+    const commands = pathStr.match(/[MCL]\s*[\d\s\.\-,]+/g);
+    if (!commands) return points;
+
+    commands.forEach((command) => {
+      const type = command.charAt(0);
+      const coordsStr = command.slice(1).trim();
+      const coords = coordsStr.split(/[\s,]+/).map(Number);
+
+      switch (type) {
+        case 'M':
+          points.push({ x: coords[0], y: coords[1], type: 'M' });
+          break;
+        case 'C':
+          if (coords.length >= 6 && coords.length % 6 === 0) {
+            for (let i = 0; i < coords.length; i += 6) {
+              points.push({
+                x1: coords[i],
+                y1: coords[i + 1],
+                x2: coords[i + 2],
+                y2: coords[i + 3],
+                x: coords[i + 4],
+                y: coords[i + 5],
+                type: 'C',
+              });
+            }
+          }
+          break;
+        case 'L':
+          points.push({ x: coords[0], y: coords[1], type: 'L' });
+          break;
+      }
+    });
+    return points;
+  }
+
+  class nsZenThemePicker extends ZenMultiWindowFeature {
     static MAX_DOTS = 3;
 
     currentOpacity = 0.5;
-    currentRotation = -45;
     dots = [];
     useAlgo = '';
+    #currentLightness = 50;
 
     #allowTransparencyOnSidebar = Services.prefs.getBoolPref('zen.theme.acrylic-elements', false);
 
+    #linePath = `M 51.373 27.395 L 367.037 27.395`;
+    #sinePath = `M 51.373 27.395 C 60.14 -8.503 68.906 -8.503 77.671 27.395 C 86.438 63.293 95.205 63.293 103.971 27.395 C 112.738 -8.503 121.504 -8.503 130.271 27.395 C 139.037 63.293 147.803 63.293 156.57 27.395 C 165.335 -8.503 174.101 -8.503 182.868 27.395 C 191.634 63.293 200.4 63.293 209.167 27.395 C 217.933 -8.503 226.7 -8.503 235.467 27.395 C 244.233 63.293 252.999 63.293 261.765 27.395 C 270.531 -8.503 279.297 -8.503 288.064 27.395 C 296.83 63.293 305.596 63.293 314.363 27.395 C 323.13 -8.503 331.896 -8.503 340.662 27.395 M 314.438 27.395 C 323.204 -8.503 331.97 -8.503 340.737 27.395 C 349.503 63.293 358.27 63.293 367.037 27.395`;
+
+    #sinePoints = parseSinePath(this.#sinePath);
+
+    #colorPage = 0;
+
     constructor() {
       super();
       if (
@@ -39,6 +82,10 @@
         document.getElementById('PanelUI-zen-gradient-generator-custom-list')
       );
 
+      ChromeUtils.defineLazyGetter(this, 'sliderWavePath', () =>
+        document.getElementById('PanelUI-zen-gradient-slider-wave').querySelector('path')
+      );
+
       this.panel.addEventListener('popupshowing', this.handlePanelOpen.bind(this));
       this.panel.addEventListener('popuphidden', this.handlePanelClose.bind(this));
       this.panel.addEventListener('command', this.handlePanelCommand.bind(this));
@@ -47,23 +94,53 @@
         .getElementById('PanelUI-zen-gradient-generator-opacity')
         .addEventListener('input', this.onOpacityChange.bind(this));
 
-      this.initCanvas();
+      // Call the rest of the initialization
+      this.initContextMenu();
+      this.initPredefinedColors();
+
+      this._resolveInitialized();
+      delete this._resolveInitialized;
+
       this.initCustomColorInput();
       this.initTextureInput();
-      this.initRotationInput();
+      this.initSchemeButtons();
+      this.initColorPages();
 
-      window
-        .matchMedia('(prefers-color-scheme: dark)')
-        .addListener(this.onDarkModeChange.bind(this));
+      const darkModeChange = this.handleDarkModeChange.bind(this);
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', darkModeChange);
+
+      XPCOMUtils.defineLazyPreferenceGetter(
+        this,
+        'windowSchemeType',
+        'zen.theme.window.scheme',
+        true,
+        darkModeChange
+      );
+    }
+
+    handleDarkModeChange(event) {
+      this.updateCurrentWorkspace();
     }
 
     get isDarkMode() {
+      switch (this.windowSchemeType) {
+        case 'dark':
+          return true;
+        case 'light':
+          return false;
+        default:
+      }
       return window.matchMedia('(prefers-color-scheme: dark)').matches;
     }
 
-    async onDarkModeChange(event, skipUpdate = false) {
-      const currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
-      this.onWorkspaceChange(currentWorkspace, skipUpdate);
+    get colorHarmonies() {
+      return [
+        { type: 'complementary', angles: [180] },
+        { type: 'splitComplementary', angles: [150, 210] },
+        { type: 'analogous', angles: [50, 310] },
+        { type: 'triadic', angles: [120, 240] },
+        { type: 'floating', angles: [] },
+      ];
     }
 
     initContextMenu() {
@@ -86,43 +163,9 @@
       });
     }
 
-    initCanvas() {
-      this.image = new Image();
-      this.image.src = ZenThemePicker.GRADIENT_IMAGE_URL;
-
-      this.canvas = document.createElement('canvas');
-      this.panel.appendChild(this.canvas);
-      this.canvasCtx = this.canvas.getContext('2d');
-
-      // wait for the image to load
-      this.image.onload = this.onImageLoad.bind(this);
-    }
-
-    onImageLoad() {
-      // resize the image to fit the panel
-      const imageSize = 350 - 20; // 20 is the padding (10px)
-      const scale = imageSize / Math.max(this.image.width, this.image.height);
-      this.image.width *= scale;
-      this.image.height *= scale;
-
-      this.canvas.width = this.image.width;
-      this.canvas.height = this.image.height;
-      this.canvasCtx.drawImage(this.image, 0, 0);
-
-      this.canvas.setAttribute('hidden', 'true');
-
-      // Call the rest of the initialization
-      this.initContextMenu();
-      this.initPredefinedColors();
-
-      this._resolveInitialized();
-      delete this._resolveInitialized;
-      this.onDarkModeChange(null);
-    }
-
     initPredefinedColors() {
       document
-        .getElementById('PanelUI-zen-gradient-generator-predefined')
+        .getElementById('PanelUI-zen-gradient-generator-color-pages')
         .addEventListener('click', async (event) => {
           const target = event.target;
           const rawPosition = target.getAttribute('data-position');
@@ -130,6 +173,7 @@
             return;
           }
           const algo = target.getAttribute('data-algo');
+          const lightness = target.getAttribute('data-lightness');
           const numDots = parseInt(target.getAttribute('data-num-dots'));
           if (algo == 'float') {
             for (const dot of this.dots) {
@@ -157,6 +201,7 @@
             });
           }
           this.useAlgo = algo;
+          this.#currentLightness = lightness;
           dots = this.calculateCompliments(dots, 'update', this.useAlgo);
           if (algo == 'float') {
             for (const dot of dots) {
@@ -173,49 +218,52 @@
       this.customColorInput.addEventListener('keydown', this.onCustomColorKeydown.bind(this));
     }
 
-    initRotationInput() {
-      const rotationInput = document.getElementById('PanelUI-zen-gradient-generator-rotation-dot');
-      this._onRotationMouseDown = this.onRotationMouseDown.bind(this);
-      this._onRotationMouseMove = this.onRotationMouseMove.bind(this);
-      this._onRotationMouseUp = this.onRotationMouseUp.bind(this);
-      rotationInput.addEventListener('mousedown', this._onRotationMouseDown);
-    }
-
-    onRotationMouseDown(event) {
-      event.preventDefault();
-      event.stopPropagation();
-      this._rotating = true;
-      document.addEventListener('mousemove', this._onRotationMouseMove);
-      document.addEventListener('mouseup', this._onRotationMouseUp);
-    }
-
-    onRotationMouseMove(event) {
-      event.preventDefault();
-      event.stopPropagation();
-      const rotationInput = document.getElementById('PanelUI-zen-gradient-generator-rotation-dot');
-      const containerRect = rotationInput.parentElement.getBoundingClientRect();
-      // We calculate the angle based on the mouse position and the center of the container
-      const rotation = Math.atan2(
-        event.clientY - containerRect.top - containerRect.height / 2,
-        event.clientX - containerRect.left - containerRect.width / 2
+    initColorPages() {
+      const leftButton = document.getElementById('PanelUI-zen-gradient-generator-color-page-left');
+      const rightButton = document.getElementById(
+        'PanelUI-zen-gradient-generator-color-page-right'
       );
-      const endRotation = (rotation * 180) / Math.PI;
-      // Between 150 and 50, we don't update the rotation
-      if (!(endRotation < 45 || endRotation > 130)) {
-        return;
-      }
-      this.currentRotation = endRotation;
-      this.updateCurrentWorkspace();
+      const pagesWrapper = document.getElementById('PanelUI-zen-gradient-generator-color-pages');
+      const pages = pagesWrapper.children;
+      pagesWrapper.addEventListener('wheel', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      });
+      leftButton.addEventListener('command', () => {
+        this.#colorPage = (this.#colorPage - 1 + pages.length) % pages.length;
+        // Scroll to the next page, by using scrollLeft
+        pagesWrapper.scrollLeft = (this.#colorPage * pagesWrapper.scrollWidth) / pages.length;
+        rightButton.disabled = false;
+        leftButton.disabled = this.#colorPage === 0;
+      });
+      rightButton.addEventListener('command', () => {
+        this.#colorPage = (this.#colorPage + 1) % pages.length;
+        // Scroll to the next page, by using scrollLeft
+        pagesWrapper.scrollLeft = (this.#colorPage * pagesWrapper.scrollWidth) / pages.length;
+        leftButton.disabled = false;
+        rightButton.disabled = this.#colorPage === pages.length - 1;
+      });
     }
 
-    onRotationMouseUp(event) {
-      event.preventDefault();
-      event.stopPropagation();
-      document.removeEventListener('mousemove', this._onRotationMouseMove);
-      document.removeEventListener('mouseup', this._onRotationMouseUp);
-      setTimeout(() => {
-        this._rotating = false;
-      }, 100);
+    initSchemeButtons() {
+      const buttons = document.getElementById('PanelUI-zen-gradient-generator-scheme');
+      buttons.addEventListener('click', (event) => {
+        const target = event.target.closest('.subviewbutton');
+        if (!target) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const scheme = target.id.replace('PanelUI-zen-gradient-generator-scheme-', '');
+        if (!scheme) {
+          return;
+        }
+        if (this.currentScheme === scheme) {
+          return;
+        }
+        this.currentScheme = scheme;
+        Services.prefs.setStringPref('zen.theme.window.scheme', scheme);
+      });
     }
 
     initTextureInput() {
@@ -312,39 +360,110 @@
       this._onThemePickerClick = null;
     }
 
-    calculateInitialPosition(color) {
-      const [r, g, b] = color.c;
-      const imageData = this.canvasCtx.getImageData(0, 0, this.canvas.width, this.canvas.height);
-      // Find all pixels that are at least 90% similar to the color
-      const similarPixels = [];
-      for (let i = 0; i < imageData.data.length; i += 4) {
-        const pixelR = imageData.data[i];
-        const pixelG = imageData.data[i + 1];
-        const pixelB = imageData.data[i + 2];
-        if (Math.abs(r - pixelR) < 25 && Math.abs(g - pixelG) < 25 && Math.abs(b - pixelB) < 25) {
-          similarPixels.push(i);
-        }
+    /**
+     * Converts an HSL color value to RGB. Conversion formula
+     * adapted from https://en.wikipedia.org/wiki/HSL_color_space.
+     * Assumes h, s, and l are contained in the set [0, 1] and
+     * returns r, g, and b in the set [0, 255].
+     *
+     * @param   {number}  h       The hue
+     * @param   {number}  s       The saturation
+     * @param   {number}  l       The lightness
+     * @return  {Array}           The RGB representation
+     */
+    hslToRgb(h, s, l) {
+      const { abs, min, max, round } = Math;
+      let r, g, b;
+
+      if (s === 0) {
+        r = g = b = l; // achromatic
+      } else {
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = this.hueToRgb(p, q, h + 1 / 3);
+        g = this.hueToRgb(p, q, h);
+        b = this.hueToRgb(p, q, h - 1 / 3);
       }
-      // Check if there's an exact match
-      for (const pixel of similarPixels) {
-        const x = (pixel / 4) % this.canvas.width;
-        const y = Math.floor(pixel / 4 / this.canvas.width);
-        const pixelColor = this.getColorFromPosition(x, y);
-        if (pixelColor[0] === r && pixelColor[1] === g && pixelColor[2] === b) {
-          return { x: x / this.canvas.width, y: y / this.canvas.height };
-        }
-      }
-      // If there's no exact match, return the first similar pixel
-      const pixel = similarPixels[0];
-      const x = (pixel / 4) % this.canvas.width;
-      const y = Math.floor(pixel / 4 / this.canvas.width);
-      return { x: x / this.canvas.width, y: y / this.canvas.height };
+
+      return [round(r * 255), round(g * 255), round(b * 255)];
+    }
+
+    rgbToHsl(r, g, b) {
+      r /= 255;
+      g /= 255;
+      b /= 255;
+      let max = Math.max(r, g, b);
+      let min = Math.min(r, g, b);
+      let d = max - min;
+      let h;
+      if (d === 0) h = 0;
+      else if (max === r) h = ((g - b) / d) % 6;
+      else if (max === g) h = (b - r) / d + 2;
+      else if (max === b) h = (r - g) / d + 4;
+      let l = (min + max) / 2;
+      let s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+      return [h * 60, s, l];
+    }
+
+    hueToRgb(p, q, t) {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    }
+
+    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 = 20;
+      const rect = {
+        width: 318,
+        height: 318,
+      };
+      const centerX = rect.width / 2;
+      const centerY = rect.height / 2;
+      const radius = (rect.width - padding) / 2;
+      const [hue, saturation] = this.rgbToHsl(r, g, b);
+      const angle = (hue / 360) * 2 * Math.PI; // Convert to radians
+      const normalizedSaturation = saturation / 100; // Convert to [0, 1]
+      const x = centerX + radius * normalizedSaturation * Math.cos(angle) - padding;
+      const y = centerY + radius * normalizedSaturation * Math.sin(angle) - padding;
+      return { x, y };
     }
 
     getColorFromPosition(x, y) {
-      // get the color from the x and y from the image
-      const imageData = this.canvasCtx.getImageData(x, y, 1, 1);
-      return imageData.data;
+      // Return a color as hsl based on the position in the gradient
+      const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
+      const rect = gradient.getBoundingClientRect();
+      const padding = 20; // each side
+      rect.width += padding * 2;
+      rect.height += padding * 2;
+      const centerX = rect.width / 2;
+      const centerY = rect.height / 2;
+      const radius = (rect.width - padding) / 2;
+      const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
+      let angle = Math.atan2(y - centerY, x - centerX);
+      angle = (angle * 180) / Math.PI; // Convert to degrees
+      if (angle < 0) {
+        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)
+      const saturation = normalizedDistance * 100; // Scale distance to [0, 100]
+      const lightness = this.#currentLightness; // Fixed lightness for simplicity
+      const [r, g, b] = this.hslToRgb(hue / 360, saturation / 100, lightness / 100);
+      return [
+        Math.min(255, Math.max(0, r)),
+        Math.min(255, Math.max(0, g)),
+        Math.min(255, Math.max(0, b)),
+      ];
+    }
+
+    getJSONPos(x, y) {
+      // Return a JSON string with the position
+      return JSON.stringify({ x: Math.round(x), y: Math.round(y) });
     }
 
     createDot(color, fromWorkspace = false) {
@@ -361,13 +480,13 @@
         dot.style.opacity = 0;
         dot.style.setProperty('--zen-theme-picker-dot-color', color.c);
       } else {
-        const { x, y } = this.calculateInitialPosition(color);
+        const { x, y } = color.position || this.calculateInitialPosition([r, g, b]);
         const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
 
         dot.classList.add('zen-theme-picker-dot');
 
-        dot.style.left = `${x * 100}%`;
-        dot.style.top = `${y * 100}%`;
+        dot.style.left = `${x}px`;
+        dot.style.top = `${y}px`;
 
         if (this.dots.length < 1) {
           dot.classList.add('primary');
@@ -377,6 +496,7 @@
         let id = this.dots.length;
 
         dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${r}, ${g}, ${b})`);
+        dot.setAttribute('data-position', this.getJSONPos(x, y));
 
         this.dots.push({
           ID: id,
@@ -474,6 +594,7 @@
         '--zen-theme-picker-dot-color',
         `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
       );
+      dot.setAttribute('data-position', this.getJSONPos(relativePosition.x, relativePosition.y));
 
       this.dots.push({
         ID: id,
@@ -483,13 +604,7 @@
     }
 
     calculateCompliments(dots, action = 'update', useHarmony = '') {
-      const colorHarmonies = [
-        { type: 'complementary', angles: [180] },
-        { type: 'splitComplementary', angles: [150, 210] },
-        { type: 'analogous', angles: [30, 330] },
-        { type: 'triadic', angles: [120, 240] },
-        { type: 'floating', angles: [] },
-      ];
+      const colorHarmonies = this.colorHarmonies;
 
       if (dots.length === 0) {
         return [];
@@ -614,6 +729,8 @@
             '--zen-theme-picker-dot-color',
             `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
           );
+
+          dot.element.setAttribute('data-position', this.getJSONPos(pixelX, pixelY));
         });
 
         return;
@@ -630,6 +747,10 @@
           '--zen-theme-picker-dot-color',
           `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
         );
+        existingPrimaryDot.element.setAttribute(
+          'data-position',
+          this.getJSONPos(existingPrimaryDot.position.x, existingPrimaryDot.position.y)
+        );
       }
 
       colorPositions.forEach((dotPosition) => {
@@ -645,6 +766,10 @@
             '--zen-theme-picker-dot-color',
             `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
           );
+          existingDot.element.setAttribute(
+            'data-position',
+            this.getJSONPos(dotPosition.position.x, dotPosition.position.y)
+          );
 
           if (!this.dragging) {
             gZenUIManager.motion.animate(
@@ -673,10 +798,13 @@
       if (this._rotating) {
         return;
       }
+      if (event.target.closest('#PanelUI-zen-gradient-generator-scheme')) {
+        return;
+      }
       event.preventDefault();
       const target = event.target;
       if (target.id === 'PanelUI-zen-gradient-generator-color-add') {
-        if (this.dots.length >= ZenThemePicker.MAX_DOTS) return;
+        if (this.dots.length >= nsZenThemePicker.MAX_DOTS) return;
         let colorPositions = this.calculateCompliments(this.dots, 'add', this.useAlgo);
 
         this.handleColorPositions(colorPositions);
@@ -702,30 +830,6 @@
         this.handleColorPositions(colorPositions);
         this.updateCurrentWorkspace();
         return;
-      } else if (target.id === 'PanelUI-zen-gradient-generator-color-toggle-algo') {
-        const colorHarmonies = [
-          { type: 'complementary', angles: [180] },
-          { type: 'splitComplementary', angles: [150, 210] },
-          { type: 'analogous', angles: [30, 330] },
-          { type: 'triadic', angles: [120, 240] },
-          { type: 'floating', angles: [] },
-        ];
-
-        const applicableHarmonies = colorHarmonies.filter(
-          (harmony) => harmony.angles.length + 1 === this.dots.length || harmony.type === 'floating'
-        );
-
-        let currentIndex = applicableHarmonies.findIndex(
-          (harmony) => harmony.type === this.useAlgo
-        );
-
-        let 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;
@@ -905,76 +1009,164 @@
     }
 
     themedColors(colors) {
-      const isDarkMode = this.isDarkMode;
-      const factor = isDarkMode ? 0.5 : 1.1;
-
       return colors.map((color) => ({
         c: color.isCustom
           ? color.c
-          : [
-              Math.min(255, color.c[0] * factor),
-              Math.min(255, color.c[1] * factor),
-              Math.min(255, color.c[2] * factor),
-            ],
+          : [Math.min(255, color.c[0]), Math.min(255, color.c[1]), Math.min(255, color.c[2])],
         isCustom: color.isCustom,
         algorithm: color.algorithm,
+        lightness: color.lightness,
+        position: color.position,
       }));
     }
 
     onOpacityChange(event) {
-      this.currentOpacity = event.target.value;
+      this.currentOpacity = parseFloat(event.target.value);
+      // If we reached a whole number (e.g., 0.1, 0.2, etc.), send a haptic feedback
+      if ((this.currentOpacity * 10) % 1 === 0) {
+        Services.zen.playHapticFeedback();
+      }
       this.updateCurrentWorkspace();
     }
 
-    getToolbarModifiedBase() {
+    getToolbarModifiedBaseRaw() {
       const opacity = this.#allowTransparencyOnSidebar ? 0.6 : 1;
-      return this.isDarkMode
-        ? `color-mix(in srgb, var(--zen-themed-toolbar-bg) 96%, rgba(255,255,255,${opacity}) 4%)`
-        : `color-mix(in srgb, var(--zen-themed-toolbar-bg) 96%, rgba(0,0,0,${opacity}) 4%)`;
+      return this.isDarkMode ? [23, 23, 26, opacity] : [240, 240, 244, opacity];
+    }
+
+    getToolbarModifiedBase() {
+      const baseColor = this.getToolbarModifiedBaseRaw();
+      return `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${baseColor[3]})`;
+    }
+
+    get canBeTransparent() {
+      return window.matchMedia(
+        '(-moz-windows-mica) or (-moz-platform: macos) or ((-moz-platform: linux) and -moz-pref("zen.widget.linux.transparency"))'
+      ).matches;
     }
 
     getSingleRGBColor(color, forToolbar = false) {
       if (color.isCustom) {
         return color.c;
       }
+      const opacity = this.currentOpacity;
       if (forToolbar) {
         const toolbarBg = this.getToolbarModifiedBase();
-        return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, ${toolbarBg} ${(1 - this.currentOpacity) * 100}%)`;
+        return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${opacity * 100}%, ${toolbarBg} ${(1 - opacity) * 100}%)`;
       }
-      return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${this.currentOpacity})`;
+      return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${opacity})`;
+    }
+
+    luminance([r, g, b]) {
+      const a = [r, g, b].map((v) => {
+        v /= 255;
+        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+      });
+      return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+    }
+
+    contrastRatio(rgb1, rgb2) {
+      const lum1 = this.luminance(rgb1);
+      const lum2 = this.luminance(rgb2);
+      const brightest = Math.max(lum1, lum2);
+      const darkest = Math.min(lum1, lum2);
+      return (brightest + 0.05) / (darkest + 0.05);
+    }
+
+    blendColorsRaw(rgb1, rgb2, percentage) {
+      const p = percentage / 100;
+      return [
+        Math.round(rgb1[0] * p + rgb2[0] * (1 - p)),
+        Math.round(rgb1[1] * p + rgb2[1] * (1 - p)),
+        Math.round(rgb1[2] * p + rgb2[2] * (1 - p)),
+      ];
+    }
+
+    findOptimalBlend(dominantColor, blendTarget, minContrast = 4.5) {
+      let low = 0;
+      let high = 100;
+      let bestMatch = null;
+
+      for (let i = 0; i < 10; i++) {
+        const mid = (low + high) / 2;
+        const blended = this.blendColorsRaw(dominantColor, blendTarget, mid);
+        const contrast = this.contrastRatio(blended, blendTarget);
+
+        if (contrast >= minContrast) {
+          bestMatch = blended;
+          high = mid;
+        } else {
+          low = mid;
+        }
+      }
+
+      return bestMatch || this.blendColorsRaw(dominantColor, blendTarget, 10); // fallback
     }
 
     getGradient(colors, forToolbar = false) {
       const themedColors = this.themedColors(colors);
       this.useAlgo = themedColors[0]?.algorithm ?? '';
+      this.#currentLightness = themedColors[0]?.lightness ?? 70;
 
+      const rotation = -45; // TODO: Detect rotation based on the accent color
       if (themedColors.length === 0) {
         return forToolbar
-          ? 'var(--zen-themed-toolbar-bg)'
+          ? this.getToolbarModifiedBase()
           : 'var(--zen-themed-toolbar-bg-transparent)';
       } else if (themedColors.length === 1) {
         return this.getSingleRGBColor(themedColors[0], forToolbar);
-      } else if (themedColors.length !== 3) {
-        return `linear-gradient(${this.currentRotation}deg, ${themedColors.map((color) => this.getSingleRGBColor(color, forToolbar)).join(', ')})`;
-      } else {
+      } else if (themedColors.length === 2) {
+        return [
+          `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} -25%, transparent 100%)`,
+          `linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} -25%, transparent 100%)`,
+        ].join(', ');
+      } else if (themedColors.length === 3) {
         let color1 = this.getSingleRGBColor(themedColors[2], forToolbar);
         let color2 = this.getSingleRGBColor(themedColors[0], forToolbar);
         let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
-        return `linear-gradient(${this.currentRotation}deg, ${color1}, ${color2}, ${color3})`;
+        if (!forToolbar) {
+          return [
+            `radial-gradient(circle at -30% -30%, ${color1}, transparent 100%)`,
+            `radial-gradient(circle at 130% -30%, ${color2}, transparent 100%)`,
+            `linear-gradient(to top, ${color3} -30%, transparent 60%)`,
+          ].join(', ');
+        }
+        return [`linear-gradient(${rotation}deg, ${color1} -30%, ${color3} 100%)`].join(', ');
+      } else {
+        // Just return a linear gradient with all colors
+        const gradientColors = themedColors.map((color) =>
+          this.getSingleRGBColor(color, forToolbar)
+        );
+        return `linear-gradient(${rotation}deg, ${gradientColors.join(', ')})`;
       }
     }
 
-    static getTheme(colors = [], opacity = 0.5, rotation = -45, texture = 0) {
+    shouldBeDarkMode(accentColor) {
+      let minimalLum = this.isDarkMode ? 0.6 : 0.5;
+      if (!this.canBeTransparent) {
+        // Blend the color with the toolbar background
+        const toolbarBg = this.getToolbarModifiedBaseRaw();
+        accentColor = this.blendColorsRaw(
+          toolbarBg.slice(0, 3),
+          accentColor,
+          (1 - this.currentOpacity) * 100
+        );
+        minimalLum = this.isDarkMode ? 0.3 : 0.2;
+      }
+      const lum = this.luminance(accentColor);
+      // Return true if background is dark enough that white text is preferred
+      return lum < minimalLum;
+    }
+
+    static getTheme(colors = [], opacity = 0.5, texture = 0) {
       return {
         type: 'gradient',
         gradientColors: colors ? colors.filter((color) => color) : [], // remove undefined
         opacity,
-        rotation,
         texture,
       };
     }
 
-    //TODO: add a better noise system that adds noise not just changes transparency
     updateNoise(texture) {
       document.documentElement.style.setProperty('--zen-grainy-background-opacity', texture);
       document.documentElement.setAttribute(
@@ -1101,6 +1293,11 @@
       return color;
     }
 
+    blendColors(rgb1, rgb2, percentage) {
+      const blended = this.blendColorsRaw(rgb1, rgb2, percentage);
+      return `rgb(${blended[0]}, ${blended[1]}, ${blended[2]})`;
+    }
+
     async onWorkspaceChange(workspace, skipUpdate = false, theme = null) {
       const uuid = workspace.uuid;
       // Use theme from workspace object or passed theme
@@ -1132,7 +1329,18 @@
           }
         }
 
-        const appBackground = browser.document.getElementById('zen-browser-background');
+        if (this.isDarkMode) {
+          browser.document.documentElement.style.setProperty(
+            '--zen-themed-browser-overlay-bg',
+            'rgba(255, 255, 255, 0.3)'
+          );
+        } else {
+          browser.document.documentElement.style.setProperty(
+            '--zen-themed-browser-overlay-bg',
+            'rgba(0, 0, 0, 0.2)'
+          );
+        }
+
         if (!skipUpdate) {
           browser.document.documentElement.style.setProperty(
             '--zen-main-browser-background-old',
@@ -1140,7 +1348,7 @@
           );
           browser.document.documentElement.style.setProperty(
             '--zen-background-opacity',
-            browser.gZenThemePicker.previousBackgroundOpacity
+            browser.gZenThemePicker.previousBackgroundOpacity ?? 1
           );
           if (browser.gZenThemePicker.previousBackgroundResolve) {
             browser.gZenThemePicker.previousBackgroundResolve();
@@ -1148,18 +1356,6 @@
           delete browser.gZenThemePicker.previousBackgroundOpacity;
         }
 
-        const button = browser.document.getElementById(
-          'PanelUI-zen-gradient-generator-color-toggle-algo'
-        );
-        if (browser.gZenThemePicker.useAlgo) {
-          document.l10n.setAttributes(
-            button,
-            `zen-panel-ui-gradient-generator-algo-${browser.gZenThemePicker.useAlgo}`
-          );
-        } else {
-          button.removeAttribute('data-l10n-id');
-        }
-
         browser.gZenThemePicker.resetCustomColorList();
         if (!workspaceTheme || workspaceTheme.type !== 'gradient') {
           const gradient = browser.gZenThemePicker.getGradient([]);
@@ -1177,13 +1373,48 @@
             '--zen-primary-color',
             this.getNativeAccentColor()
           );
+          browser.document.documentElement.removeAttribute('zen-should-be-dark-mode');
           return;
         }
 
         browser.gZenThemePicker.currentOpacity = workspaceTheme.opacity ?? 0.5;
-        browser.gZenThemePicker.currentRotation = workspaceTheme.rotation ?? -45;
         browser.gZenThemePicker.currentTexture = workspaceTheme.texture ?? 0;
 
+        const opacitySlider = browser.document.getElementById(
+          'PanelUI-zen-gradient-generator-opacity'
+        );
+
+        {
+          let opacity = browser.gZenThemePicker.currentOpacity;
+          const svg = browser.gZenThemePicker.sliderWavePath;
+          const [_, secondStop, thirdStop] = document.querySelectorAll(
+            '#PanelUI-zen-gradient-generator-slider-wave-gradient stop'
+          );
+          // Opacity can only be between 0.15 to 0.85. Make opacity relative to that range
+          // So 0.15 becomes 0, and 0.85 becomes 1.
+          if (opacity < 0.15) {
+            opacity = 0;
+          } else if (opacity > 0.85) {
+            opacity = 1;
+          } else {
+            opacity = (opacity - 0.15) / (0.85 - 0.15);
+          }
+          // Since it's sine waves, we can't just set the offset to the opacity, we need to calculate it
+          // The offset is the percentage of the wave that is visible, so we need to multiply
+          // the opacity by 100 to get the percentage.
+          // Set the offset of the stops
+          secondStop.setAttribute('offset', `${opacity * 100}%`);
+          thirdStop.setAttribute('offset', `${opacity * 100}%`);
+          const interpolatedPath = this.#interpolateWavePath(opacity);
+          svg.setAttribute('d', interpolatedPath);
+          opacitySlider.style.setProperty('--zen-thumb-height', `${40 + opacity * 12}px`);
+          opacitySlider.style.setProperty('--zen-thumb-width', `${10 + opacity * 10}px`);
+          svg.style.stroke =
+            interpolatedPath === this.#linePath
+              ? thirdStop.getAttribute('stop-color')
+              : 'url(#PanelUI-zen-gradient-generator-slider-wave-gradient)';
+        }
+
         for (const button of browser.document.querySelectorAll(
           '#PanelUI-zen-gradient-generator-color-actions button'
         )) {
@@ -1191,15 +1422,14 @@
           button.disabled =
             workspaceTheme.gradientColors.length === 0 ||
             (button.id === 'PanelUI-zen-gradient-generator-color-add'
-              ? workspaceTheme.gradientColors.length >= ZenThemePicker.MAX_DOTS
+              ? workspaceTheme.gradientColors.length >= nsZenThemePicker.MAX_DOTS
               : false);
         }
         document
           .getElementById('PanelUI-zen-gradient-generator-color-click-to-add')
           .toggleAttribute('hidden', workspaceTheme.gradientColors.length > 0);
 
-        browser.document.getElementById('PanelUI-zen-gradient-generator-opacity').value =
-          browser.gZenThemePicker.currentOpacity;
+        opacitySlider.value = browser.gZenThemePicker.currentOpacity;
         const textureSelectWrapper = browser.document.getElementById(
           'PanelUI-zen-gradient-generator-texture-wrapper'
         );
@@ -1228,35 +1458,6 @@
               i = 0;
             }
           }
-
-          const numberOfColors = workspaceTheme.gradientColors?.length;
-          const rotationDot = browser.document.getElementById(
-            'PanelUI-zen-gradient-generator-rotation-dot'
-          );
-          const rotationLine = browser.document.getElementById(
-            'PanelUI-zen-gradient-generator-rotation-line'
-          );
-          if (numberOfColors > 1) {
-            rotationDot.style.opacity = 1;
-            rotationLine.style.opacity = 1;
-            rotationDot.style.removeProperty('pointer-events');
-            const rotationPadding = 20;
-            const rotationParentWidth = rotationDot.parentElement.getBoundingClientRect().width;
-            const rotationDotPosition = this.currentRotation;
-            const rotationDotWidth = 30;
-            const rotationDotX =
-              Math.cos((rotationDotPosition * Math.PI) / 180) *
-              (rotationParentWidth / 2 - rotationDotWidth / 2);
-            const rotationDotY =
-              Math.sin((rotationDotPosition * Math.PI) / 180) *
-              (rotationParentWidth / 2 - rotationDotWidth / 2);
-            rotationDot.style.left = `${rotationParentWidth / 2 + rotationDotX - rotationPadding + rotationDotWidth / 4}px`;
-            rotationDot.style.top = `${rotationParentWidth / 2 + rotationDotY - rotationPadding + rotationDotWidth / 4}px`;
-          } else {
-            rotationDot.style.opacity = 0;
-            rotationLine.style.opacity = 0;
-            rotationDot.style.pointerEvents = 'none';
-          }
         }
 
         const gradient = browser.gZenThemePicker.getGradient(workspaceTheme.gradientColors);
@@ -1290,6 +1491,25 @@
               ? dominantColor
               : `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
           );
+          let isDarkMode = this.isDarkMode;
+          if (dominantColor !== this.getNativeAccentColor()) {
+            isDarkMode = browser.gZenThemePicker.shouldBeDarkMode(dominantColor);
+            browser.document.documentElement.setAttribute('zen-should-be-dark-mode', isDarkMode);
+          } else {
+            browser.document.documentElement.removeAttribute('zen-should-be-dark-mode');
+          }
+          // Set `--toolbox-textcolor` to have a contrast with the primary color
+          const blendTarget = isDarkMode ? [255, 255, 255] : [0, 0, 0];
+          const blendedColor = this.blendColors(dominantColor, blendTarget, 15); // 15% dominantColor, 85% target
+          await gZenUIManager.motion.animate(
+            browser.document.documentElement,
+            {
+              '--toolbox-textcolor': blendedColor,
+            },
+            {
+              duration: 0.05,
+            }
+          );
         }
 
         if (!skipUpdate) {
@@ -1364,19 +1584,18 @@
           }
           const isCustom = dot.classList.contains('custom');
           const algorithm = this.useAlgo;
+          const position =
+            dot.getAttribute('data-position') && JSON.parse(dot.getAttribute('data-position'));
           return {
             c: isCustom ? color : color.match(/\d+/g).map(Number),
             isCustom,
             algorithm,
             isPrimary,
+            lightness: this.#currentLightness,
+            position,
           };
         });
-      const gradient = ZenThemePicker.getTheme(
-        colors,
-        this.currentOpacity,
-        this.currentRotation,
-        this.currentTexture
-      );
+      const gradient = nsZenThemePicker.getTheme(colors, this.currentOpacity, this.currentTexture);
       let currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
 
       if (!skipSave) {
@@ -1402,7 +1621,38 @@
         this.updateCurrentWorkspace();
       }, 200);
     }
+
+    #interpolateWavePath(progress) {
+      const linePath = this.#linePath;
+      const sinePath = this.#sinePath;
+      const referenceY = 27.3;
+      if (this.#sinePoints.length === 0) {
+        return progress < 0.5 ? linePath : sinePath;
+      }
+      if (progress <= 0.001) return linePath;
+      if (progress >= 0.999) return sinePath;
+      const t = progress;
+      let newPathData = '';
+      this.#sinePoints.forEach((p) => {
+        switch (p.type) {
+          case 'M':
+            const interpolatedY = referenceY + (p.y - referenceY) * t;
+            newPathData += `M ${p.x} ${interpolatedY} `;
+            break;
+          case 'C':
+            const y1 = referenceY + (p.y1 - referenceY) * t;
+            const y2 = referenceY + (p.y2 - referenceY) * t;
+            const y = referenceY + (p.y - referenceY) * t;
+            newPathData += `C ${p.x1} ${y1} ${p.x2} ${y2} ${p.x} ${y} `;
+            break;
+          case 'L':
+            newPathData += `L ${p.x} ${p.y} `;
+            break;
+        }
+      });
+      return newPathData.trim();
+    }
   }
 
-  window.ZenThemePicker = ZenThemePicker;
+  window.nsZenThemePicker = nsZenThemePicker;
 }

src/zen/workspaces/ZenWorkspaceIcons.mjs

@@ -145,6 +145,7 @@
         i++;
       }
       buttons[selected].setAttribute('active', true);
+      this.scrollLeft = buttons[selected].offsetLeft - 10;
       this.setAttribute('selected', selected);
     }
 

src/zen/workspaces/ZenWorkspaces.mjs

@@ -885,7 +885,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     this.activeWorkspace = activeWorkspace?.uuid;
     try {
       if (activeWorkspace) {
-        window.gZenThemePicker = new ZenThemePicker();
+        window.gZenThemePicker = new nsZenThemePicker();
         await gZenThemePicker.onWorkspaceChange(activeWorkspace);
       }
     } catch (e) {
@@ -2179,7 +2179,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
       uuid: gZenUIManager.generateUuidv4(),
       icon: icon,
       name: name,
-      theme: ZenThemePicker.getTheme([]),
+      theme: nsZenThemePicker.getTheme([]),
       containerTabId,
     };
     if (moveTabs) {

src/zen/workspaces/overflow-icons.inc.css

@@ -6,6 +6,8 @@
 
 &:not(:hover) {
   width: min(var(--zen-overflowed-workspace-button-width), 25px);
+  min-width: 10px;
+
   &::after {
     content: '';
     position: absolute;

src/zen/workspaces/zen-gradient-generator.css

@@ -5,7 +5,7 @@
  */
 
 #PanelUI-zen-gradient-generator {
-  --panel-width: 320px;
+  --panel-width: 340px;
   --panel-padding: 10px;
   min-width: var(--panel-width);
 }
@@ -20,6 +20,7 @@
 #PanelUI-zen-gradient-generator-controls {
   align-items: center;
   gap: var(--panel-padding);
+  padding-top: 10px;
 }
 
 #zen-theme-picker-color {
@@ -62,7 +63,11 @@
   padding: 0 var(--panel-padding);
 
   @media (-moz-platform: macos) {
-    gap: 3rem;
+    gap: 2rem;
+  }
+
+  #PanelUI-zen-gradient-opacity-wrapper {
+    position: relative;
   }
 
   & label {
@@ -76,46 +81,58 @@
   }
 }
 
-#PanelUI-zen-gradient-generator-predefined {
+#PanelUI-zen-gradient-generator-color-pages-wrapper {
+  align-items: center;
+}
+
+#PanelUI-zen-gradient-generator-color-pages {
   display: flex;
   justify-content: space-around;
+  margin: 0 10px;
   align-items: center;
-  margin: 5px auto 10px auto;
   width: 100%;
+  overflow: auto;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
 
-  & > box {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    cursor: pointer;
-    position: relative;
-    transition: transform 0.1s;
-    &::after {
-      content: '';
-      position: absolute;
+  & > hbox {
+    justify-content: space-around;
+    min-width: 100%;
+
+    & > box {
       width: 18px;
       height: 18px;
-      top: 0;
-      left: 0;
-      outline: 2px solid var(--zen-toolbar-element-bg);
       border-radius: 50%;
-      pointer-events: none;
+      cursor: pointer;
+      position: relative;
       transition: transform 0.1s;
-    }
-
-    &:hover {
-      transform: scale(1.05);
-
       &::after {
-        transform: scale(1.05);
+        content: '';
+        position: absolute;
+        width: 18px;
+        height: 18px;
+        top: 0;
+        left: 0;
+        outline: 2px solid var(--zen-toolbar-element-bg);
+        border-radius: 50%;
+        pointer-events: none;
+        transition: transform 0.1s;
       }
-    }
 
-    &:hover:active {
-      transform: scale(0.95);
+      &:hover {
+        transform: scale(1.05);
 
-      &::after {
+        &::after {
+          transform: scale(1.05);
+        }
+      }
+
+      &:hover:active {
         transform: scale(0.95);
+
+        &::after {
+          transform: scale(0.95);
+        }
       }
     }
   }
@@ -164,46 +181,72 @@
   }
 }
 
-#PanelUI-zen-gradient-generator-opacity,
-#PanelUI-zen-gradient-generator-texture {
+#PanelUI-zen-gradient-slider-wave {
+  position: absolute;
+  top: 3px;
+  left: -3px;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  scale: 1.2;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 16px;
+    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+    border-radius: 999px;
+    pointer-events: none;
+    z-index: -1;
+    top: -1px;
+    left: 4px;
+    scale: 0.85;
+  }
+
+  & svg {
+    overflow: visible;
+    min-width: calc(100% + 2.5rem);
+  }
+}
+
+#PanelUI-zen-gradient-generator-opacity {
   margin: 0 !important;
-  margin-top: 5px !important;
   background: transparent;
+  z-index: 2;
 
   &::-moz-range-thumb {
-    background: var(--zen-colors-tertiary);
-    border: 2px solid var(--zen-colors-border);
-    border-radius: 12px;
-    height: 25px;
-    width: 13px;
+    background: light-dark(black, white);
+    border-radius: 999px;
+    height: var(--zen-thumb-height);
+    width: var(--zen-thumb-width);
     cursor: pointer;
+    border: none;
   }
 
   &::-moz-range-track {
-    background: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
     border-radius: 999px;
-    height: 6px;
+    height: 18px;
   }
 
   &::-moz-range-progress {
-    background: var(--zen-primary-color);
-    border-radius: 999px;
-    height: 8px;
+    background: transparent;
   }
 }
 
 .zen-theme-picker-gradient {
   position: relative;
-  border-radius: calc(var(--zen-border-radius) - 2px);
   overflow: hidden;
   border-radius: var(--zen-border-radius);
 
-  min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
-  margin-bottom: 20px;
-
-  background: var(--zen-toolbar-element-bg);
+  min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px);
+  background: color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent 40%);
   background-image: radial-gradient(
-    light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.4)) 1px,
+    light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)) 1px,
     transparent 0
   );
   background-position: -19px -19px;
@@ -220,7 +263,7 @@
       box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
     }
     cursor: pointer;
-    border: 2px solid #ffffff;
+    border: 3px solid #ffffff;
     animation: zen-theme-picker-dot-animation 0.5s;
     transform: translate(-50%, -50%);
 
@@ -229,7 +272,7 @@
       height: 36px;
       border-width: 4px;
       z-index: 2;
-      transition: transform 0.1s;
+      transition: transform 0.2s;
       &:hover {
         transform: scale(1.05) translate(-50%, -50%);
       }
@@ -241,6 +284,10 @@
   }
 }
 
+#PanelUI-zen-gradient-generator-view {
+  gap: 10px;
+}
+
 #PanelUI-zen-gradient-generator-color-click-to-add {
   position: absolute;
   font-weight: 600;
@@ -255,17 +302,15 @@
   }
 }
 
-#PanelUI-zen-gradient-generator-color-actions {
+#PanelUI-zen-gradient-generator-color-actions,
+#PanelUI-zen-gradient-generator-scheme {
   display: flex;
   position: absolute;
-  bottom: 8px;
+  bottom: 12px;
   left: 50%;
   z-index: 1;
   transform: translateX(-50%);
-  & .separator,
-  & #PanelUI-zen-gradient-generator-color-toggle-algo {
-    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15));
-  }
+  gap: 5px;
 
   & button {
     border: none !important;
@@ -273,17 +318,20 @@
     min-width: fit-content !important;
     transition: background 0.2s;
     appearance: none;
+    max-height: 26px;
+    max-width: 26px;
+    color: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.9));
 
     & .button-box {
       gap: 0.1rem;
     }
 
-    &:not(#PanelUI-zen-gradient-generator-color-toggle-algo) .button-text {
+    & .button-text {
       display: none;
     }
 
     &:hover {
-      background: light-dark(#cfcfcf, #313131);
+      background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
     }
 
     &[disabled] {
@@ -291,12 +339,11 @@
       cursor: not-allowed;
     }
   }
+}
 
-  & .separator {
-    width: 1px;
-    margin: 0 0.5rem;
-    height: 30px;
-  }
+#PanelUI-zen-gradient-generator-scheme {
+  top: 15px;
+  max-height: 32px;
 }
 
 @media not -moz-pref('zen.theme.gradient.show-custom-colors') {
@@ -311,9 +358,8 @@
   position: relative;
 
   @media (-moz-platform: macos) {
-    width: 25%;
-    aspect-ratio: 1;
-    height: unset;
+    width: 5rem;
+    height: 5rem;
   }
 
   &::after {
@@ -381,32 +427,9 @@
   }
 }
 
-#PanelUI-zen-gradient-generator-rotation-line {
-  border: 1px solid var(--zen-colors-border);
-  position: absolute;
-  --rotation-padding: 15px;
-  width: calc(100% - var(--rotation-padding) * 2);
-  border-bottom-color: transparent;
-  height: calc(100% - var(--rotation-padding) * 2);
-  top: var(--rotation-padding);
-  left: var(--rotation-padding);
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-}
-
-#PanelUI-zen-gradient-generator-rotation-dot {
-  position: absolute;
-  width: 25px;
-  height: 25px;
-  border-radius: 50%;
-  border: 1px solid var(--zen-colors-border);
-  background: var(--zen-colors-tertiary);
-  opacity: 0;
-  cursor: pointer;
-  z-index: 2;
-  transition: transform 0.1s;
-  &:hover {
-    transform: scale(1.1);
-  }
+#PanelUI-zen-gradient-generator-color-page-left,
+#PanelUI-zen-gradient-generator-color-page-right {
+  max-width: 28px;
+  max-height: 28px;
+  margin: 0 !important;
 }