Gradient hue revamp (#9093)

2025-07-07 16:05:31 +02:00 · 2025-06-24 14:08:40 +02:00 · 2025-06-24 14:08:40 +02:00 · b735567504
commit b735567504
parent ba7eff60ef
24 changed files with 799 additions and 440 deletions
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 706b33337345e4231e18313463259703b3fbc50d
+Subproject commit 7435b28bdf962406f7e0ec54ed1774ede5b490a9
--- a/src/browser/app/profile/features/theme.inc
+++ b/src/browser/app/profile/features/theme.inc
@ -7,6 +7,7 @@ pref('zen.theme.content-element-separation', 8); // In pixels
 pref('zen.theme.gradient', true);
 pref('zen.theme.gradient.show-custom-colors', false);
 pref('zen.theme.essentials-favicon-bg', true);
 pref('zen.theme.window.scheme', 'auto'); // auto, light, dark
 #ifdef XP_MACOSX
  pref('zen.theme.border-radius', 10); // In pixels
--- a/src/browser/app/profile/macos.inc
+++ b/src/browser/app/profile/macos.inc
@ -11,4 +11,4 @@ pref('widget.macos.sidebar-blend-mode.behind-window', true);
 // 5. toolTip
 // 6. headerView
 // 7. underlay
-pref('zen.widget.macos.window-material', 3);
+pref('zen.widget.macos.window-material', 1);
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@ -76,7 +76,6 @@
        # Images
        content/browser/zen-images/gradient.png                                 (../../zen/images/gradient.png)
        content/browser/zen-images/brand-header.svg                             (../../zen/images/brand-header.svg)
        content/browser/zen-images/layouts/collapsed.png                        (../../zen/images/layouts/collapsed.png)
        content/browser/zen-images/layouts/multiple-toolbar.png                 (../../zen/images/layouts/multiple-toolbar.png)
--- a/src/browser/base/content/zen-panels/gradient-generator.inc
+++ b/src/browser/base/content/zen-panels/gradient-generator.inc
@ -5,39 +5,66 @@
 <panel flip="side" type="arrow" popupalign="center" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left">
  <panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
    <panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
      <hbox>
        <hbox id="PanelUI-zen-gradient-generator-predefined">
          <box data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
          <box data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
          <box data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
          <box data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
          <box data-algo="analogous" data-num-dots="3" data-position="186,186" style="background: linear-gradient(135deg, #a07a48, #ab80e4);"></box>
          <box data-algo="float" data-num-dots="1" data-position="196,176" style="background: #7bcbda;"></box>
          <box data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
          <box data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
          <box data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
          <box data-algo="complementary" data-num-dots="2" data-position="82,112" style="background: linear-gradient(135deg, #1e90ff, #cfb179);"></box>
        </hbox>
      </hbox>
      <hbox class="zen-theme-picker-gradient">
-        <box id="PanelUI-zen-gradient-generator-rotation-dot"></box>
+        <hbox id="PanelUI-zen-gradient-generator-scheme">
-        <box id="PanelUI-zen-gradient-generator-rotation-line"></box>
+          <button id="PanelUI-zen-gradient-generator-scheme-auto" class="subviewbutton"/>
-        <box id="PanelUI-zen-gradient-generator-color-actions">
+          <button id="PanelUI-zen-gradient-generator-scheme-light" class="subviewbutton"/>
          <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>
-          <html:div class="separator"></html:div>
+        </hbox>
          <button id="PanelUI-zen-gradient-generator-color-toggle-algo" class="subviewbutton" data-l10n-id="zen-panel-ui-gradient-generator-algo-floating">
          </button>
        </box>
        <label data-l10n-id="zen-panel-ui-gradient-click-to-add" id="PanelUI-zen-gradient-generator-color-click-to-add"></label>
      </hbox>
      <hbox>
        <toolbarbutton id="PanelUI-zen-gradient-generator-color-page-left" class="toolbarbutton-1" disabled="true" />
        <hbox id="PanelUI-zen-gradient-generator-color-pages">
          <hbox>
            <box data-lightness="90" data-algo="float" data-num-dots="1" data-position="196,176" style="background: #7bcbda;"></box>
            <box data-lightness="80" data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
            <box data-lightness="70" data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
            <box data-lightness="60" data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
            <box data-lightness="50" data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
            <box data-lightness="40" data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
            <box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
            <box data-lightness="20" data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
          </hbox>
          <hbox>
            <box data-lightness="90" data-algo="float" data-num-dots="1" data-position="196,176" style="background: red;"></box>
            <box data-lightness="80" data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
            <box data-lightness="70" data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
            <box data-lightness="60" data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
            <box data-lightness="50" data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
            <box data-lightness="40" data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
            <box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
            <box data-lightness="20" data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
          </hbox>
        </hbox>
        <toolbarbutton id="PanelUI-zen-gradient-generator-color-page-right" class="toolbarbutton-1" />
      </hbox>
      <hbox id="PanelUI-zen-gradient-generator-controls">
        <hbox id="PanelUI-zen-gradient-colors-wrapper">
-          <vbox flex="1">
+          <vbox flex="1" id="PanelUI-zen-gradient-opacity-wrapper">
-            <label data-l10n-id="zen-panel-ui-gradient-generator-opacity-text"></label>
+            <box id="PanelUI-zen-gradient-slider-wave">
-            <html:input type="range" min="0" max="1" value="0.5" step="0.05" id="PanelUI-zen-gradient-generator-opacity" />
+              <svg viewBox="0 -7.605 455 70" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
                <path d="M 51.373 27.395 L 419.634 27.395" 
                      fill="none" 
                      stroke-linecap="round" 
                      stroke-linejoin="round" 
                      style="stroke-width: 8px;"/>
                <defs>
                  <linearGradient id="PanelUI-zen-gradient-generator-slider-wave-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" stop-color="light-dark(rgb(77, 77, 77), rgb(161, 161, 161))"/>
                    <stop offset="0%" stop-color="light-dark(rgba(77, 77, 77), rgba(161, 161, 161))"/>
                    <stop offset="100%" stop-color="light-dark(rgba(77, 77, 77, 0.5), rgba(161, 161, 161, 0.5))"/>
                  </linearGradient>
                </defs>
              </svg>
            </box>
            <html:input type="range" min="0.15" max="0.85" value="0.5" step="0.01" id="PanelUI-zen-gradient-generator-opacity" />
          </vbox>
          <vbox id="PanelUI-zen-gradient-generator-texture-wrapper">
          </vbox>
--- a/src/browser/themes/shared/preferences/zen-preferences.css
+++ b/src/browser/themes/shared/preferences/zen-preferences.css
@ -249,37 +249,6 @@ groupbox h2 {
  }
 }
 .zenLooksAndFeelColorOption {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--zen-primary-color);
  position: relative;
  overflow: hidden;
 }
 .zenLooksAndFeelColorOption::before {
  content: '';
  display: block;
  width: 50%;
  height: 50%;
  bottom: 0;
  left: 0;
  position: absolute;
  background: var(--zen-colors-secondary);
 }
 .zenLooksAndFeelColorOption::after {
  content: '';
  display: block;
  width: 50%;
  height: 50%;
  bottom: 0;
  right: 0;
  position: absolute;
  background: var(--zen-colors-tertiary);
 }
 /* Workspace */
 #category-zen-tabs-management > .category-icon {
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@ -47,10 +47,6 @@
  list-style-image: url('reload.svg') !important;
 }
 #PanelUI-zen-gradient-generator-color-toggle-algo {
  list-style-image: url('palette.svg');
 }
 .tab-reset-button,
 #PanelUI-zen-gradient-generator-color-remove {
  list-style-image: url('unpin.svg') !important;
@ -101,7 +97,8 @@
  list-style-image: url('chevron.svg') !important;
 }
-#zen-rice-share-options .options-header {
+#zen-rice-share-options .options-header,
 #PanelUI-zen-gradient-generator-color-page-right {
  list-style-image: url('arrow-right.svg');
 }
@ -400,7 +397,8 @@
  list-style-image: url('expand-sidebar.svg') !important;
 }
-.panel-header > .subviewbutton-back {
+.panel-header > .subviewbutton-back,
 #PanelUI-zen-gradient-generator-color-page-left {
  list-style-image: url('arrow-left.svg') !important;
 }
@ -768,3 +766,33 @@
    background: transparent !important;
  }
 }
 #PanelUI-zen-gradient-generator-scheme-auto {
  list-style-image: url('sparkles.svg');
 }
@media -moz-pref('zen.theme.window.scheme', 'auto') {
  #PanelUI-zen-gradient-generator-scheme-auto {
    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
  }
 }
 #PanelUI-zen-gradient-generator-scheme-dark {
  list-style-image: url('moon-stars.svg');
 }
@media -moz-pref('zen.theme.window.scheme', 'dark') {
  #PanelUI-zen-gradient-generator-scheme-dark {
    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
  }
 }
 #PanelUI-zen-gradient-generator-scheme-light {
  list-style-image: url('face-sun.svg');
 }
@media -moz-pref('zen.theme.window.scheme', 'light') {
  #PanelUI-zen-gradient-generator-scheme-light {
    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
  }
 }
--- a/src/browser/themes/shared/zen-icons/jar.inc.mn
+++ b/src/browser/themes/shared/zen-icons/jar.inc.mn
@ -35,15 +35,16 @@
  skin/classic/browser/zen-icons/edit-paste.svg                      (../shared/zen-icons/lin/edit-paste.svg) 
  skin/classic/browser/zen-icons/edit-redo.svg                      (../shared/zen-icons/lin/edit-redo.svg) 
  skin/classic/browser/zen-icons/edit-select-all.svg                      (../shared/zen-icons/lin/edit-select-all.svg) 
  skin/classic/browser/zen-icons/edit.svg                      (../shared/zen-icons/lin/edit.svg) 
  skin/classic/browser/zen-icons/edit-theme.svg                      (../shared/zen-icons/lin/edit-theme.svg) 
  skin/classic/browser/zen-icons/edit-undo.svg                      (../shared/zen-icons/lin/edit-undo.svg) 
  skin/classic/browser/zen-icons/edit.svg                      (../shared/zen-icons/lin/edit.svg) 
  skin/classic/browser/zen-icons/essential-add.svg                      (../shared/zen-icons/lin/essential-add.svg) 
  skin/classic/browser/zen-icons/essential-remove.svg                      (../shared/zen-icons/lin/essential-remove.svg) 
  skin/classic/browser/zen-icons/expand-sidebar.svg                      (../shared/zen-icons/lin/expand-sidebar.svg) 
  skin/classic/browser/zen-icons/ext-link.svg                      (../shared/zen-icons/lin/ext-link.svg) 
  skin/classic/browser/zen-icons/extension-blocked.svg                      (../shared/zen-icons/lin/extension-blocked.svg) 
  skin/classic/browser/zen-icons/extension.svg                      (../shared/zen-icons/lin/extension.svg) 
-  skin/classic/browser/zen-icons/ext-link.svg                      (../shared/zen-icons/lin/ext-link.svg) 
+  skin/classic/browser/zen-icons/face-sun.svg                      (../shared/zen-icons/lin/face-sun.svg) 
  skin/classic/browser/zen-icons/firefox.svg                      (../shared/zen-icons/lin/firefox.svg) 
  skin/classic/browser/zen-icons/folder.svg                      (../shared/zen-icons/lin/folder.svg) 
  skin/classic/browser/zen-icons/forget.svg                      (../shared/zen-icons/lin/forget.svg) 
@ -80,6 +81,7 @@
  skin/classic/browser/zen-icons/microphone-fill.svg                      (../shared/zen-icons/lin/microphone-fill.svg) 
  skin/classic/browser/zen-icons/microphone.svg                      (../shared/zen-icons/lin/microphone.svg) 
  skin/classic/browser/zen-icons/midi.svg                      (../shared/zen-icons/lin/midi.svg) 
  skin/classic/browser/zen-icons/moon-stars.svg                      (../shared/zen-icons/lin/moon-stars.svg) 
  skin/classic/browser/zen-icons/move-tab.svg                      (../shared/zen-icons/lin/move-tab.svg) 
  skin/classic/browser/zen-icons/new-tab-image.svg                      (../shared/zen-icons/lin/new-tab-image.svg) 
  skin/classic/browser/zen-icons/open.svg                      (../shared/zen-icons/lin/open.svg) 
@ -95,27 +97,28 @@
  skin/classic/browser/zen-icons/pocket-outline.svg                      (../shared/zen-icons/lin/pocket-outline.svg) 
  skin/classic/browser/zen-icons/popup.svg                      (../shared/zen-icons/lin/popup.svg) 
  skin/classic/browser/zen-icons/print.svg                      (../shared/zen-icons/lin/print.svg) 
  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/lin/privateBrowsing.svg) 
  skin/classic/browser/zen-icons/private-window.svg                      (../shared/zen-icons/lin/private-window.svg) 
  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/lin/privateBrowsing.svg) 
  skin/classic/browser/zen-icons/reader-mode.svg                      (../shared/zen-icons/lin/reader-mode.svg) 
  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/lin/reload.svg) 
  skin/classic/browser/zen-icons/reload-to-stop.svg                      (../shared/zen-icons/lin/reload-to-stop.svg) 
  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/lin/reload.svg) 
  skin/classic/browser/zen-icons/report.svg                      (../shared/zen-icons/lin/report.svg) 
  skin/classic/browser/zen-icons/save.svg                      (../shared/zen-icons/lin/save.svg) 
  skin/classic/browser/zen-icons/screen-blocked.svg                      (../shared/zen-icons/lin/screen-blocked.svg) 
  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/lin/screenshot.svg) 
  skin/classic/browser/zen-icons/screen.svg                      (../shared/zen-icons/lin/screen.svg) 
  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/lin/screenshot.svg) 
  skin/classic/browser/zen-icons/search-glass.svg                      (../shared/zen-icons/lin/search-glass.svg) 
  skin/classic/browser/zen-icons/search-page.svg                      (../shared/zen-icons/lin/search-page.svg) 
  skin/classic/browser/zen-icons/security-broken.svg                      (../shared/zen-icons/lin/security-broken.svg) 
  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/lin/security.svg) 
  skin/classic/browser/zen-icons/security-warning.svg                      (../shared/zen-icons/lin/security-warning.svg) 
  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/lin/security.svg) 
  skin/classic/browser/zen-icons/send-to-device.svg                      (../shared/zen-icons/lin/send-to-device.svg) 
  skin/classic/browser/zen-icons/settings.svg                      (../shared/zen-icons/lin/settings.svg) 
  skin/classic/browser/zen-icons/share.svg                      (../shared/zen-icons/lin/share.svg) 
  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/lin/sidebars-right.svg) 
  skin/classic/browser/zen-icons/sidebar.svg                      (../shared/zen-icons/lin/sidebar.svg) 
  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/lin/sidebars-right.svg) 
  skin/classic/browser/zen-icons/source-code.svg                      (../shared/zen-icons/lin/source-code.svg) 
  skin/classic/browser/zen-icons/sparkles.svg                      (../shared/zen-icons/lin/sparkles.svg) 
  skin/classic/browser/zen-icons/spell-check.svg                      (../shared/zen-icons/lin/spell-check.svg) 
  skin/classic/browser/zen-icons/split.svg                      (../shared/zen-icons/lin/split.svg) 
  skin/classic/browser/zen-icons/stop-to-reload.svg                      (../shared/zen-icons/lin/stop-to-reload.svg) 
@ -174,15 +177,16 @@
  skin/classic/browser/zen-icons/edit-paste.svg                      (../shared/zen-icons/lin/edit-paste.svg) 
  skin/classic/browser/zen-icons/edit-redo.svg                      (../shared/zen-icons/lin/edit-redo.svg) 
  skin/classic/browser/zen-icons/edit-select-all.svg                      (../shared/zen-icons/lin/edit-select-all.svg) 
  skin/classic/browser/zen-icons/edit.svg                      (../shared/zen-icons/lin/edit.svg) 
  skin/classic/browser/zen-icons/edit-theme.svg                      (../shared/zen-icons/lin/edit-theme.svg) 
  skin/classic/browser/zen-icons/edit-undo.svg                      (../shared/zen-icons/lin/edit-undo.svg) 
  skin/classic/browser/zen-icons/edit.svg                      (../shared/zen-icons/lin/edit.svg) 
  skin/classic/browser/zen-icons/essential-add.svg                      (../shared/zen-icons/lin/essential-add.svg) 
  skin/classic/browser/zen-icons/essential-remove.svg                      (../shared/zen-icons/lin/essential-remove.svg) 
  skin/classic/browser/zen-icons/expand-sidebar.svg                      (../shared/zen-icons/lin/expand-sidebar.svg) 
  skin/classic/browser/zen-icons/ext-link.svg                      (../shared/zen-icons/lin/ext-link.svg) 
  skin/classic/browser/zen-icons/extension-blocked.svg                      (../shared/zen-icons/lin/extension-blocked.svg) 
  skin/classic/browser/zen-icons/extension.svg                      (../shared/zen-icons/lin/extension.svg) 
-  skin/classic/browser/zen-icons/ext-link.svg                      (../shared/zen-icons/lin/ext-link.svg) 
+  skin/classic/browser/zen-icons/face-sun.svg                      (../shared/zen-icons/lin/face-sun.svg) 
  skin/classic/browser/zen-icons/firefox.svg                      (../shared/zen-icons/lin/firefox.svg) 
  skin/classic/browser/zen-icons/folder.svg                      (../shared/zen-icons/lin/folder.svg) 
  skin/classic/browser/zen-icons/forget.svg                      (../shared/zen-icons/lin/forget.svg) 
@ -219,6 +223,7 @@
  skin/classic/browser/zen-icons/microphone-fill.svg                      (../shared/zen-icons/lin/microphone-fill.svg) 
  skin/classic/browser/zen-icons/microphone.svg                      (../shared/zen-icons/lin/microphone.svg) 
  skin/classic/browser/zen-icons/midi.svg                      (../shared/zen-icons/lin/midi.svg) 
  skin/classic/browser/zen-icons/moon-stars.svg                      (../shared/zen-icons/lin/moon-stars.svg) 
  skin/classic/browser/zen-icons/move-tab.svg                      (../shared/zen-icons/lin/move-tab.svg) 
  skin/classic/browser/zen-icons/new-tab-image.svg                      (../shared/zen-icons/lin/new-tab-image.svg) 
  skin/classic/browser/zen-icons/open.svg                      (../shared/zen-icons/lin/open.svg) 
@ -234,27 +239,28 @@
  skin/classic/browser/zen-icons/pocket-outline.svg                      (../shared/zen-icons/lin/pocket-outline.svg) 
  skin/classic/browser/zen-icons/popup.svg                      (../shared/zen-icons/lin/popup.svg) 
  skin/classic/browser/zen-icons/print.svg                      (../shared/zen-icons/lin/print.svg) 
  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/lin/privateBrowsing.svg) 
  skin/classic/browser/zen-icons/private-window.svg                      (../shared/zen-icons/lin/private-window.svg) 
  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/lin/privateBrowsing.svg) 
  skin/classic/browser/zen-icons/reader-mode.svg                      (../shared/zen-icons/lin/reader-mode.svg) 
  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/lin/reload.svg) 
  skin/classic/browser/zen-icons/reload-to-stop.svg                      (../shared/zen-icons/lin/reload-to-stop.svg) 
  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/lin/reload.svg) 
  skin/classic/browser/zen-icons/report.svg                      (../shared/zen-icons/lin/report.svg) 
  skin/classic/browser/zen-icons/save.svg                      (../shared/zen-icons/lin/save.svg) 
  skin/classic/browser/zen-icons/screen-blocked.svg                      (../shared/zen-icons/lin/screen-blocked.svg) 
  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/lin/screenshot.svg) 
  skin/classic/browser/zen-icons/screen.svg                      (../shared/zen-icons/lin/screen.svg) 
  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/lin/screenshot.svg) 
  skin/classic/browser/zen-icons/search-glass.svg                      (../shared/zen-icons/lin/search-glass.svg) 
  skin/classic/browser/zen-icons/search-page.svg                      (../shared/zen-icons/lin/search-page.svg) 
  skin/classic/browser/zen-icons/security-broken.svg                      (../shared/zen-icons/lin/security-broken.svg) 
  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/lin/security.svg) 
  skin/classic/browser/zen-icons/security-warning.svg                      (../shared/zen-icons/lin/security-warning.svg) 
  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/lin/security.svg) 
  skin/classic/browser/zen-icons/send-to-device.svg                      (../shared/zen-icons/lin/send-to-device.svg) 
  skin/classic/browser/zen-icons/settings.svg                      (../shared/zen-icons/lin/settings.svg) 
  skin/classic/browser/zen-icons/share.svg                      (../shared/zen-icons/lin/share.svg) 
  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/lin/sidebars-right.svg) 
  skin/classic/browser/zen-icons/sidebar.svg                      (../shared/zen-icons/lin/sidebar.svg) 
  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/lin/sidebars-right.svg) 
  skin/classic/browser/zen-icons/source-code.svg                      (../shared/zen-icons/lin/source-code.svg) 
  skin/classic/browser/zen-icons/sparkles.svg                      (../shared/zen-icons/lin/sparkles.svg) 
  skin/classic/browser/zen-icons/spell-check.svg                      (../shared/zen-icons/lin/spell-check.svg) 
  skin/classic/browser/zen-icons/split.svg                      (../shared/zen-icons/lin/split.svg) 
  skin/classic/browser/zen-icons/stop-to-reload.svg                      (../shared/zen-icons/lin/stop-to-reload.svg) 
@ -313,15 +319,16 @@
  skin/classic/browser/zen-icons/edit-paste.svg                      (../shared/zen-icons/lin/edit-paste.svg) 
  skin/classic/browser/zen-icons/edit-redo.svg                      (../shared/zen-icons/lin/edit-redo.svg) 
  skin/classic/browser/zen-icons/edit-select-all.svg                      (../shared/zen-icons/lin/edit-select-all.svg) 
  skin/classic/browser/zen-icons/edit.svg                      (../shared/zen-icons/lin/edit.svg) 
  skin/classic/browser/zen-icons/edit-theme.svg                      (../shared/zen-icons/lin/edit-theme.svg) 
  skin/classic/browser/zen-icons/edit-undo.svg                      (../shared/zen-icons/lin/edit-undo.svg) 
  skin/classic/browser/zen-icons/edit.svg                      (../shared/zen-icons/lin/edit.svg) 
  skin/classic/browser/zen-icons/essential-add.svg                      (../shared/zen-icons/lin/essential-add.svg) 
  skin/classic/browser/zen-icons/essential-remove.svg                      (../shared/zen-icons/lin/essential-remove.svg) 
  skin/classic/browser/zen-icons/expand-sidebar.svg                      (../shared/zen-icons/lin/expand-sidebar.svg) 
  skin/classic/browser/zen-icons/ext-link.svg                      (../shared/zen-icons/lin/ext-link.svg) 
  skin/classic/browser/zen-icons/extension-blocked.svg                      (../shared/zen-icons/lin/extension-blocked.svg) 
  skin/classic/browser/zen-icons/extension.svg                      (../shared/zen-icons/lin/extension.svg) 
-  skin/classic/browser/zen-icons/ext-link.svg                      (../shared/zen-icons/lin/ext-link.svg) 
+  skin/classic/browser/zen-icons/face-sun.svg                      (../shared/zen-icons/lin/face-sun.svg) 
  skin/classic/browser/zen-icons/firefox.svg                      (../shared/zen-icons/lin/firefox.svg) 
  skin/classic/browser/zen-icons/folder.svg                      (../shared/zen-icons/lin/folder.svg) 
  skin/classic/browser/zen-icons/forget.svg                      (../shared/zen-icons/lin/forget.svg) 
@ -358,6 +365,7 @@
  skin/classic/browser/zen-icons/microphone-fill.svg                      (../shared/zen-icons/lin/microphone-fill.svg) 
  skin/classic/browser/zen-icons/microphone.svg                      (../shared/zen-icons/lin/microphone.svg) 
  skin/classic/browser/zen-icons/midi.svg                      (../shared/zen-icons/lin/midi.svg) 
  skin/classic/browser/zen-icons/moon-stars.svg                      (../shared/zen-icons/lin/moon-stars.svg) 
  skin/classic/browser/zen-icons/move-tab.svg                      (../shared/zen-icons/lin/move-tab.svg) 
  skin/classic/browser/zen-icons/new-tab-image.svg                      (../shared/zen-icons/lin/new-tab-image.svg) 
  skin/classic/browser/zen-icons/open.svg                      (../shared/zen-icons/lin/open.svg) 
@ -373,27 +381,28 @@
  skin/classic/browser/zen-icons/pocket-outline.svg                      (../shared/zen-icons/lin/pocket-outline.svg) 
  skin/classic/browser/zen-icons/popup.svg                      (../shared/zen-icons/lin/popup.svg) 
  skin/classic/browser/zen-icons/print.svg                      (../shared/zen-icons/lin/print.svg) 
  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/lin/privateBrowsing.svg) 
  skin/classic/browser/zen-icons/private-window.svg                      (../shared/zen-icons/lin/private-window.svg) 
  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/lin/privateBrowsing.svg) 
  skin/classic/browser/zen-icons/reader-mode.svg                      (../shared/zen-icons/lin/reader-mode.svg) 
  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/lin/reload.svg) 
  skin/classic/browser/zen-icons/reload-to-stop.svg                      (../shared/zen-icons/lin/reload-to-stop.svg) 
  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/lin/reload.svg) 
  skin/classic/browser/zen-icons/report.svg                      (../shared/zen-icons/lin/report.svg) 
  skin/classic/browser/zen-icons/save.svg                      (../shared/zen-icons/lin/save.svg) 
  skin/classic/browser/zen-icons/screen-blocked.svg                      (../shared/zen-icons/lin/screen-blocked.svg) 
  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/lin/screenshot.svg) 
  skin/classic/browser/zen-icons/screen.svg                      (../shared/zen-icons/lin/screen.svg) 
  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/lin/screenshot.svg) 
  skin/classic/browser/zen-icons/search-glass.svg                      (../shared/zen-icons/lin/search-glass.svg) 
  skin/classic/browser/zen-icons/search-page.svg                      (../shared/zen-icons/lin/search-page.svg) 
  skin/classic/browser/zen-icons/security-broken.svg                      (../shared/zen-icons/lin/security-broken.svg) 
  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/lin/security.svg) 
  skin/classic/browser/zen-icons/security-warning.svg                      (../shared/zen-icons/lin/security-warning.svg) 
  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/lin/security.svg) 
  skin/classic/browser/zen-icons/send-to-device.svg                      (../shared/zen-icons/lin/send-to-device.svg) 
  skin/classic/browser/zen-icons/settings.svg                      (../shared/zen-icons/lin/settings.svg) 
  skin/classic/browser/zen-icons/share.svg                      (../shared/zen-icons/lin/share.svg) 
  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/lin/sidebars-right.svg) 
  skin/classic/browser/zen-icons/sidebar.svg                      (../shared/zen-icons/lin/sidebar.svg) 
  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/lin/sidebars-right.svg) 
  skin/classic/browser/zen-icons/source-code.svg                      (../shared/zen-icons/lin/source-code.svg) 
  skin/classic/browser/zen-icons/sparkles.svg                      (../shared/zen-icons/lin/sparkles.svg) 
  skin/classic/browser/zen-icons/spell-check.svg                      (../shared/zen-icons/lin/spell-check.svg) 
  skin/classic/browser/zen-icons/split.svg                      (../shared/zen-icons/lin/split.svg) 
  skin/classic/browser/zen-icons/stop-to-reload.svg                      (../shared/zen-icons/lin/stop-to-reload.svg) 
--- a/src/browser/themes/shared/zen-icons/lin/face-sun.svg
+++ b/src/browser/themes/shared/zen-icons/lin/face-sun.svg
@ -0,0 +1 @@
 <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>
--- a/src/browser/themes/shared/zen-icons/lin/moon-stars.svg
+++ b/src/browser/themes/shared/zen-icons/lin/moon-stars.svg
@ -0,0 +1 @@
 <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>
--- a/src/browser/themes/shared/zen-icons/lin/sparkles.svg
+++ b/src/browser/themes/shared/zen-icons/lin/sparkles.svg
@ -0,0 +1 @@
 <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>
--- a/src/dom/base/Document-cpp.patch
+++ b/src/dom/base/Document-cpp.patch
@ -1,13 +1,13 @@
 diff --git a/dom/base/Document.cpp b/dom/base/Document.cpp
-index a16bef739fcde0f14ba7e53e0acfa3aa2ee1dd3a..78b9d112a56b3d909e31eb4351ee9f3b06c4ef92 100644
+index a16bef739fcde0f14ba7e53e0acfa3aa2ee1dd3a..f928c0f1df4e86bd344ab7e57dab112234fb92e8 100644
 --- a/dom/base/Document.cpp
 +++ b/dom/base/Document.cpp
@@ -3332,6 +3332,15 @@ void Document::FillStyleSetUserAndUASheets() {
   ServoStyleSet& styleSet = EnsureStyleSet();
   for (StyleSheet* sheet : *sheetService->UserStyleSheets()) {
-+    // If the url starts with "chrome://" and ends with 'zen-themes.css', then
+    // If the url starts with "file://" and ends with 'zen-themes.css', then
-+    // skip it if the document is in a chrome docshell.
+    // skip it if the document is not in a chrome docshell.
 +    // This is to avoid loading the user chrome stylesheet in the content
 +    // process, which is not allowed.
 +    auto spec = sheet->GetSheetURI()->GetSpecOrDefault();
--- a/src/widget/cocoa/nsCocoaWindow-mm.patch
+++ b/src/widget/cocoa/nsCocoaWindow-mm.patch
@ -0,0 +1,13 @@
 diff --git a/widget/cocoa/nsCocoaWindow.mm b/widget/cocoa/nsCocoaWindow.mm
 index c4627621344d35081f11a7b0e03d02eca2097609..d2e5fe429aaac8b701a03380a67f4ea978d566b3 100644
 --- a/widget/cocoa/nsCocoaWindow.mm
 +++ b/widget/cocoa/nsCocoaWindow.mm
@@ -7376,7 +7376,7 @@ - (id)initWithContentRect:(NSRect)aContentRect
 // Returns an autoreleased NSImage.
 static NSImage* GetMenuMaskImage() {
 -  const CGFloat radius = 6.0f;
 +  const CGFloat radius = 14.0f;
   const NSSize maskSize = {radius * 3.0f, radius * 3.0f};
   NSImage* maskImage = [NSImage imageWithSize:maskSize
                                       flipped:FALSE
--- a/src/zen/common/styles/zen-browser-container.css
+++ b/src/zen/common/styles/zen-browser-container.css
@ -17,7 +17,7 @@
      }
      & browser[transparent='true'] {
-        background: rgba(255, 255, 255, 0.1);
+        background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
      }
    }
  }
--- a/src/zen/common/styles/zen-browser-ui.css
+++ b/src/zen/common/styles/zen-browser-ui.css
@ -46,6 +46,8 @@
  pointer-events: none;
  isolation: isolate;
  background: var(--zen-themed-toolbar-bg-transparent);
  transition: background-color var(--inactive-window-transition);
  &::after,
  &::before {
@ -100,7 +102,7 @@
  border: none;
 }
-@supports (-moz-osx-font-smoothing: auto) {
+@media (-moz-platform: macos) {
  #zen-main-app-wrapper,
  #zen-appcontent-wrapper,
  #zen-sidebar-splitter {
@ -118,7 +120,7 @@
 }
 #zen-main-app-wrapper {
-  background: var(--zen-themed-toolbar-bg-transparent);
+  background: transparent;
  /* See bug #8814, don't an overflow here as it causes issues 
   * with firefox's rendering of the tab bar */
--- a/src/zen/common/styles/zen-popup.css
+++ b/src/zen/common/styles/zen-popup.css
@ -394,7 +394,6 @@ menuseparator {
    }
    & button {
      color-scheme: dark;
      width: min-content;
      padding: 0 10px !important;
      min-width: unset !important;
@ -402,6 +401,7 @@ menuseparator {
      border-radius: calc(var(--zen-native-inner-radius) + 2px) !important;
      background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)) !important;
      border: 1px solid light-dark(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15)) !important;
      color: var(--toolbar-color);
      :root[zen-right-side='true'] & {
        order: -1;
--- a/src/zen/common/styles/zen-theme.css
+++ b/src/zen/common/styles/zen-theme.css
@ -9,12 +9,7 @@
 */
 :host(:is(.anonymous-content-host, notification-message)),
-:root,
+:root {
 .zenLooksAndFeelColorOption {
  /** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
   * in the preferences page.
   */
  /* Default values */
  --zen-border-radius: 7px;
  --zen-primary-color: #ffb787;
@ -92,7 +87,7 @@
  --focus-outline-color: var(--button-bgcolor) !important;
  --toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
-  --toolbarbutton-icon-fill: light-dark(rgba(57, 57, 58, 0.6), rgba(251, 251, 254, 0.6)) !important;
+  --toolbarbutton-icon-fill: currentColor !important;
  --button-primary-bgcolor: var(--in-content-primary-button-background) !important;
  --button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
@ -121,7 +116,10 @@
  --zen-button-border-radius: 5px;
  --zen-button-padding: 0.6rem 1.2rem;
-  --zen-toolbar-element-bg: light-dark(rgba(89, 89, 89, 0.1), rgba(255, 255, 255, 0.1));
+  --zen-toolbar-element-bg: light-dark(
    color-mix(in srgb, currentColor 5%, transparent 5%),
    color-mix(in srgb, currentColor 10%, transparent 90%)
  ) !important;
  /* Toolbar */
  --zen-toolbar-height: 38px;
@ -162,27 +160,11 @@
  --input-bgcolor: var(--zen-colors-tertiary) !important;
  --input-border-color: var(--zen-input-border-color) !important;
  --zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #171717);
  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717);
  --zen-workspace-indicator-height: 48px;
-  @media (-moz-windows-mica) or (-moz-platform: macos) {
+  --toolbar-field-color: var(--toolbox-textcolor) !important;
    background: transparent;
    --zen-themed-toolbar-bg-transparent: transparent;
    @media -moz-pref('widget.windows.mica.toplevel-backdrop', 2) {
      --zen-themed-toolbar-bg-transparent: color-mix(
        in srgb,
        var(--zen-themed-toolbar-bg) 35%,
        transparent 65%
      );
    }
  }
  @media (-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency') {
    background: transparent;
    --zen-themed-toolbar-bg-transparent: transparent;
  }
  &[zen-private-window='true'] {
    --zen-main-browser-background: linear-gradient(
@ -239,6 +221,52 @@
 #main-window:not([chromehidden~='toolbar']) {
  min-height: 495px !important;
  @media (-moz-windows-mica) or (-moz-platform: macos) {
    background: transparent;
    --zen-themed-toolbar-bg-transparent: transparent;
    &[zen-should-be-dark-mode] {
      --zen-themed-toolbar-bg-transparent: var(--zen-themed-browser-overlay-bg);
    }
  }
  @media (-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency') {
    background: transparent;
    --zen-themed-toolbar-bg-transparent: transparent;
    &[zen-should-be-dark-mode] {
      --zen-themed-toolbar-bg-transparent: var(--zen-themed-browser-overlay-bg);
    }
  }
  &[zen-should-be-dark-mode='true'] #browser {
    color-scheme: dark;
    --tab-selected-color-scheme: dark;
  }
  &[zen-should-be-dark-mode='false'] #browser {
    color-scheme: light;
    --tab-selected-color-scheme: light;
  }
  &,
  & #tabbrowser-tabpanels,
  & panel,
  & menupopup {
    @media -moz-pref('zen.theme.window.scheme', 'dark') {
      color-scheme: dark;
    }
    @media -moz-pref('zen.theme.window.scheme', 'light') {
      color-scheme: light;
    }
    @media -moz-pref('zen.theme.window.scheme', 'auto') {
      color-scheme: light;
      @media (-moz-system-dark-theme) {
        color-scheme: dark;
      }
    }
  }
 }
@media (prefers-color-scheme: dark) {
--- a/src/zen/images/gradient.png
+++ b/src/zen/images/gradient.png
--- a/src/zen/mods/ZenMods.mjs
+++ b/src/zen/mods/ZenMods.mjs
@ -49,7 +49,11 @@
    }
    async #insertStylesheet() {
      try {
        this.#modsBackend.rebuildModsStyles();
      } catch (e) {
        console.warn('[ZenMods]: Error rebuilding mods styles:', e);
      }
    }
    async #rebuildModsStylesheet() {
--- a/src/zen/workspaces/ZenGradientGenerator.mjs
+++ b/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 {
+  function parseSinePath(pathStr) {
-    static GRADIENT_IMAGE_URL = 'chrome://browser/content/zen-images/gradient.png';
+    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
+      const darkModeChange = this.handleDarkModeChange.bind(this);
-        .matchMedia('(prefers-color-scheme: dark)')
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', darkModeChange);
-        .addListener(this.onDarkModeChange.bind(this));
+
      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) {
+    get colorHarmonies() {
-      const currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
+      return [
-      this.onWorkspaceChange(currentWorkspace, skipUpdate);
+        { 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() {
+    initColorPages() {
-      const rotationInput = document.getElementById('PanelUI-zen-gradient-generator-rotation-dot');
+      const leftButton = document.getElementById('PanelUI-zen-gradient-generator-color-page-left');
-      this._onRotationMouseDown = this.onRotationMouseDown.bind(this);
+      const rightButton = document.getElementById(
-      this._onRotationMouseMove = this.onRotationMouseMove.bind(this);
+        'PanelUI-zen-gradient-generator-color-page-right'
      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
      );
-      const endRotation = (rotation * 180) / Math.PI;
+      const pagesWrapper = document.getElementById('PanelUI-zen-gradient-generator-color-pages');
-      // Between 150 and 50, we don't update the rotation
+      const pages = pagesWrapper.children;
-      if (!(endRotation < 45 || endRotation > 130)) {
+      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;
      });
    }
    initSchemeButtons() {
      const buttons = document.getElementById('PanelUI-zen-gradient-generator-scheme');
      buttons.addEventListener('click', (event) => {
        const target = event.target.closest('.subviewbutton');
        if (!target) {
          return;
        }
      this.currentRotation = endRotation;
      this.updateCurrentWorkspace();
    }
    onRotationMouseUp(event) {
        event.preventDefault();
        event.stopPropagation();
-      document.removeEventListener('mousemove', this._onRotationMouseMove);
+        const scheme = target.id.replace('PanelUI-zen-gradient-generator-scheme-', '');
-      document.removeEventListener('mouseup', this._onRotationMouseUp);
+        if (!scheme) {
-      setTimeout(() => {
+          return;
-        this._rotating = false;
+        }
-      }, 100);
+        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;
+     * Converts an HSL color value to RGB. Conversion formula
-      const imageData = this.canvasCtx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+     * adapted from https://en.wikipedia.org/wiki/HSL_color_space.
-      // Find all pixels that are at least 90% similar to the color
+     * Assumes h, s, and l are contained in the set [0, 1] and
-      const similarPixels = [];
+     * returns r, g, and b in the set [0, 255].
-      for (let i = 0; i < imageData.data.length; i += 4) {
+     *
-        const pixelR = imageData.data[i];
+     * @param   {number}  h       The hue
-        const pixelG = imageData.data[i + 1];
+     * @param   {number}  s       The saturation
-        const pixelB = imageData.data[i + 2];
+     * @param   {number}  l       The lightness
-        if (Math.abs(r - pixelR) < 25 && Math.abs(g - pixelG) < 25 && Math.abs(b - pixelB) < 25) {
+     * @return  {Array}           The RGB representation
-          similarPixels.push(i);
+     */
    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);
      }
      return [round(r * 255), round(g * 255), round(b * 255)];
    }
-      // Check if there's an exact match
+
-      for (const pixel of similarPixels) {
+    rgbToHsl(r, g, b) {
-        const x = (pixel / 4) % this.canvas.width;
+      r /= 255;
-        const y = Math.floor(pixel / 4 / this.canvas.width);
+      g /= 255;
-        const pixelColor = this.getColorFromPosition(x, y);
+      b /= 255;
-        if (pixelColor[0] === r && pixelColor[1] === g && pixelColor[2] === b) {
+      let max = Math.max(r, g, b);
-          return { x: x / this.canvas.width, y: y / this.canvas.height };
+      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;
    }
-      // If there's no exact match, return the first similar pixel
+
-      const pixel = similarPixels[0];
+    calculateInitialPosition([r, g, b]) {
-      const x = (pixel / 4) % this.canvas.width;
+      // This function is called before the picker is even rendered, so we hard code the dimensions
-      const y = Math.floor(pixel / 4 / this.canvas.width);
+      // important: If any sort of sizing is changed, make sure changes are reflected here
-      return { x: x / this.canvas.width, y: y / this.canvas.height };
+      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
+      // Return a color as hsl based on the position in the gradient
-      const imageData = this.canvasCtx.getImageData(x, y, 1, 1);
+      const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
-      return imageData.data;
+      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.left = `${x}px`;
-        dot.style.top = `${y * 100}%`;
+        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 = [
+      const colorHarmonies = this.colorHarmonies;
        { type: 'complementary', angles: [180] },
        { type: 'splitComplementary', angles: [150, 210] },
        { type: 'analogous', angles: [30, 330] },
        { type: 'triadic', angles: [120, 240] },
        { type: 'floating', angles: [] },
      ];
      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]), Math.min(255, color.c[1]), Math.min(255, color.c[2])],
              Math.min(255, color.c[0] * factor),
              Math.min(255, color.c[1] * factor),
              Math.min(255, color.c[2] * factor),
            ],
        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
+      return this.isDarkMode ? [23, 23, 26, opacity] : [240, 240, 244, opacity];
-        ? `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%)`;
+
    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) {
+      } else if (themedColors.length === 2) {
-        return `linear-gradient(${this.currentRotation}deg, ${themedColors.map((color) => this.getSingleRGBColor(color, forToolbar)).join(', ')})`;
+        return [
-      } else {
+          `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 =
+        opacitySlider.value = browser.gZenThemePicker.currentOpacity;
          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(
+      const gradient = nsZenThemePicker.getTheme(colors, this.currentOpacity, this.currentTexture);
        colors,
        this.currentOpacity,
        this.currentRotation,
        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;
 }
--- a/src/zen/workspaces/ZenWorkspaceIcons.mjs
+++ b/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);
    }
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/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) {
--- a/src/zen/workspaces/overflow-icons.inc.css
+++ b/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;
--- 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: 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,12 +81,23 @@
  }
 }
-#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;
  & > hbox {
    justify-content: space-around;
    min-width: 100%;
    & > box {
      width: 18px;
@ -119,6 +135,7 @@
        }
      }
    }
  }
 }
 #PanelUI-zen-gradient-generator-custom-list {
@ -164,46 +181,72 @@
  }
 }
-#PanelUI-zen-gradient-generator-opacity,
+#PanelUI-zen-gradient-slider-wave {
-#PanelUI-zen-gradient-generator-texture {
+  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);
+    background: light-dark(black, white);
-    border: 2px solid var(--zen-colors-border);
+    border-radius: 999px;
-    border-radius: 12px;
+    height: var(--zen-thumb-height);
-    height: 25px;
+    width: var(--zen-thumb-width);
    width: 13px;
    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);
+    background: transparent;
    border-radius: 999px;
    height: 8px;
  }
 }
 .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);
+  min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px);
-  margin-bottom: 20px;
+  background: color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent 40%);
  background: var(--zen-toolbar-element-bg);
  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,
+  gap: 5px;
  & #PanelUI-zen-gradient-generator-color-toggle-algo {
    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15));
  }
  & 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 {
+#PanelUI-zen-gradient-generator-scheme {
-    width: 1px;
+  top: 15px;
-    margin: 0 0.5rem;
+  max-height: 32px;
    height: 30px;
  }
 }
@media not -moz-pref('zen.theme.gradient.show-custom-colors') {
@ -311,9 +358,8 @@
  position: relative;
  @media (-moz-platform: macos) {
-    width: 25%;
+    width: 5rem;
-    aspect-ratio: 1;
+    height: 5rem;
    height: unset;
  }
  &::after {
@ -381,32 +427,9 @@
  }
 }
-#PanelUI-zen-gradient-generator-rotation-line {
+#PanelUI-zen-gradient-generator-color-page-left,
-  border: 1px solid var(--zen-colors-border);
+#PanelUI-zen-gradient-generator-color-page-right {
-  position: absolute;
+  max-width: 28px;
-  --rotation-padding: 15px;
+  max-height: 28px;
-  width: calc(100% - var(--rotation-padding) * 2);
+  margin: 0 !important;
  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);
  }
 }
		`@ -1 +1 @@`
			`Subproject commit 706b33337345e4231e18313463259703b3fbc50d`				`Subproject commit 7435b28bdf962406f7e0ec54ed1774ede5b490a9`
		`@ -0,0 +1 @@`
							<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>