feat: Tweak colors to blend for windows/mica, b=no-bug, c=workspaces

* add open button to background tab toast

* address comment

build/winsign/firefox_update.ps1

@@ -0,0 +1,12 @@
+
+Remove-Item -Recurse -Force engine
+Remove-Item -Recurse -Force .surfer
+
+npm run init
+
+$job = Start-Job -ScriptBlock {
+    npm run build
+}
+
+# Wait for job to complete with timeout (in seconds)
+$job | Wait-Job -Timeout 5

build/winsign/sign.ps1

@@ -6,7 +6,7 @@ param(
 $ErrorActionPreference = "Stop"
 
 echo "Preparing environment"
-git pull --recurse
+git pull origin dev --recurse
 mkdir windsign-temp -ErrorAction SilentlyContinue
 
 # Download in parallel
@@ -113,6 +113,7 @@ signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha256 /v $fi
 
 $env:ZEN_RELEASE="true"
 $env:SURFER_SIGNING_MODE="true"
+$env:SCCACHE_GHA_ENABLED="false"
 Wait-Job -Name "SurferInit"
 Wait-Job -Name "DownloadGitl10n"
 

src/browser/app/profile/features/compact-mode.inc

@@ -12,3 +12,6 @@ pref('zen.view.compact.color-sidebar', true);
 pref('zen.view.compact.animate-sidebar', true);
 pref('zen.view.compact.show-sidebar-and-toolbar-on-hover', true);
 pref('zen.view.compact.show-background-tab-toast', true);
+
+# Do not edit manually
+pref('zen.view.compact.should-enable-at-startup', false);

src/browser/app/profile/features/theme.inc

@@ -22,3 +22,4 @@ pref('zen.theme.essentials-favicon-bg', true);
 
 # Light weight themes
 pref('zen.theme.disable-lightweight', true);
+pref('zen.theme.use-sysyem-colors', false);

src/browser/app/profile/windows.inc

@@ -5,4 +5,8 @@
 # Mica
 pref("widget.windows.mica", true);
 pref("widget.windows.mica.popups", true);
+
+# 1. DWMSBT_MAINWINDOW
+# 2. DWMSBT_TRANSIENTWINDOW (default, also used for popups)
+# 3(default). DWMSBT_TABBEDWINDOW
 pref("widget.windows.mica.toplevel-backdrop", 2);

src/browser/base/content/zen-panels/gradient-generator.inc

@@ -100,7 +100,13 @@
                 </defs>
               </svg>
             </box>
-            <html:input type="range" min="0.3" max="0.9" value="0.4" step="0.001" id="PanelUI-zen-gradient-generator-opacity" />
+            <html:input type="range" max="0.9" value="0.4" step="0.001" id="PanelUI-zen-gradient-generator-opacity"
+#ifdef XP_MACOSX
+              min="0.25"
+#else
+              min="0.35"
+#endif
+              />
           </vbox>
           <vbox id="PanelUI-zen-gradient-generator-texture-wrapper">
           </vbox>

src/browser/components/BrowserGlue-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/BrowserGlue.sys.mjs b/browser/components/BrowserGlue.sys.mjs
-index bde641f7112adde948707c172b9f18d3635d8ef1..3f430451586904e6be086114ec10f719745093be 100644
+index bde641f7112adde948707c172b9f18d3635d8ef1..70c4769d265210084c8ee2910fa68a0a38d6fb34 100644
 --- a/browser/components/BrowserGlue.sys.mjs
 +++ b/browser/components/BrowserGlue.sys.mjs
 @@ -8,6 +8,7 @@ import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
@@ -10,6 +10,15 @@ index bde641f7112adde948707c172b9f18d3635d8ef1..3f430451586904e6be086114ec10f719
    AboutHomeStartupCache: "resource:///modules/AboutHomeStartupCache.sys.mjs",
    AWToolbarButton: "resource:///modules/aboutwelcome/AWToolbarUtils.sys.mjs",
    ASRouter: "resource:///modules/asrouter/ASRouter.sys.mjs",
+@@ -1496,7 +1497,7 @@ BrowserGlue.prototype = {
+       windowcount++;
+       let tabbrowser = win.gBrowser;
+       if (tabbrowser) {
+-        pagecount += tabbrowser.visibleTabs.length - tabbrowser.pinnedTabCount;
++        pagecount += tabbrowser.visibleTabs.filter(t => t.getAttribute("pending")!=="true").length;
+       }
+     }
+ 
 @@ -1659,6 +1660,8 @@ BrowserGlue.prototype = {
      } else if (profileDataVersion < APP_DATA_VERSION) {
        lazy.ProfileDataUpgrader.upgrade(profileDataVersion, APP_DATA_VERSION);

src/browser/themes/shared/preferences/zen-preferences.css

@@ -592,7 +592,6 @@ groupbox h2 {
 #dataCollectionGroup,
 #websiteAdvertisingCategory,
 #websiteAdvertisingGroup,
-#webAppearanceGroup,
 #helpButton {
   display: none !important;
 }

src/browser/themes/shared/zen-icons/icons.css

@@ -163,7 +163,8 @@
   list-style-image: url('search-page.svg') !important;
 }
 
-#open-file-button {
+#open-file-button,
+#zen-open-background-tab-button {
   list-style-image: url('open.svg') !important;
 }
 

src/toolkit/mozapps/extensions/content/aboutaddons-css.patch

@@ -0,0 +1,18 @@
+diff --git a/toolkit/mozapps/extensions/content/aboutaddons.css b/toolkit/mozapps/extensions/content/aboutaddons.css
+index d8f84dcbf83d4768b9b8174ccf07706702d690a5..afce2630bf64a262b0f6a9e752db5c745167bf6a 100644
+--- a/toolkit/mozapps/extensions/content/aboutaddons.css
++++ b/toolkit/mozapps/extensions/content/aboutaddons.css
+@@ -105,6 +105,13 @@ h2 {
+ .category[name="theme"] {
+   background-image: url("chrome://mozapps/skin/extensions/category-themes.svg");
+ }
++
++@media -moz-pref('zen.theme.disable-lightweight') {
++  .category[name="theme"] {
++    display: none;
++  }
++}
++
+ .category[name="plugin"] {
+   background-image: url("chrome://mozapps/skin/extensions/category-plugins.svg");
+ }

src/zen/common/ZenUIMigration.mjs

@@ -17,6 +17,9 @@ class nsZenUIMigration {
       }
     }
     this.clearVariables();
+    if (this.shouldRestart) {
+      Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
+    }
   }
 
   get _migrationVersion() {
@@ -59,8 +62,7 @@ class nsZenUIMigration {
     if (userChromeFile.exists() || userContentFile.exists()) {
       Services.prefs.setBoolPref('toolkit.legacyUserProfileCustomizations.stylesheets', true);
       console.log('ZenUIMigration: User stylesheets detected, enabling legacy stylesheets.');
-      Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
-      return;
+      this.shouldRestart = true;
     }
   }
 

src/zen/common/styles/zen-browser-container.css

@@ -19,6 +19,12 @@
       & browser[transparent='true'] {
         background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
       }
+
+      @media not -moz-pref('layout.css.prefers-color-scheme.content-override', 2) {
+        & browser[type='content'] {
+          color-scheme: env(-moz-content-preferred-color-scheme);
+        }
+      }
     }
   }
 }

src/zen/common/styles/zen-popup.css

@@ -40,8 +40,13 @@
 menupopup,
 panel {
   --panel-background: var(--arrowpanel-background);
-  --panel-border-radius: var(--zen-native-inner-radius);
   --menuitem-padding: 6px !important;
+  --panel-shadow-margin: 10px;
+
+  /* This should match GetMenuMaskImage() on macOS, or be overridden below */
+  @media (-moz-platform: macos) {
+    --panel-border-radius: 10px;
+  }
 }
 
 /* split-view popup */

src/zen/common/styles/zen-theme.css

@@ -118,7 +118,12 @@
 
   --zen-toolbar-element-bg: light-dark(
     color-mix(in oklch, var(--toolbox-textcolor) 8%, transparent),
-    color-mix(in oklch, var(--toolbox-textcolor) 15%, transparent)
+    color-mix(in oklch, var(--toolbox-textcolor) 12.5%, transparent)
+  );
+
+  --zen-toolbar-element-bg-hover: light-dark(
+    color-mix(in srgb, var(--zen-toolbar-element-bg) 75%, transparent),
+    color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent)
   );
 
   /* Toolbar */
@@ -130,7 +135,7 @@
 
   --toolbarbutton-inner-padding: 5px !important;
 
-  --toolbarbutton-hover-background: var(--zen-toolbar-element-bg) !important;
+  --toolbarbutton-hover-background: var(--zen-toolbar-element-bg-hover) !important;
 
   --toolbarbutton-active-background: color-mix(
     in srgb,
@@ -172,11 +177,7 @@
   --toolbar-field-color: var(--toolbox-textcolor) !important;
 
   &[zen-private-window='true'] {
-    --zen-main-browser-background: linear-gradient(
-      130deg,
-      light-dark(rgb(247, 217, 255), rgb(10, 6, 11)) 0%,
-      light-dark(rgb(242, 198, 255), rgb(19, 7, 22)) 100%
-    );
+    --zen-main-browser-background: linear-gradient(130deg, rgb(10, 6, 11) 0%, rgb(19, 7, 22) 100%);
     --zen-main-browser-background-toolbar: var(--zen-main-browser-background);
     --zen-primary-color: light-dark(rgb(93, 42, 107), rgb(110, 48, 125)) !important;
     --toolbox-textcolor: currentColor !important;
@@ -227,9 +228,6 @@
   @media (-moz-windows-mica) or (-moz-platform: macos) or ((-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency')) {
     background: transparent;
     --zen-themed-toolbar-bg-transparent: transparent;
-    @media -moz-pref('widget.windows.mica.toplevel-backdrop', 2) {
-      --zen-themed-toolbar-bg-transparent: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3));
-    }
   }
 
   &[zen-should-be-dark-mode='true'] #browser {
@@ -249,22 +247,27 @@
   &:not([zen-should-be-dark-mode]) #zen-toast-container {
     @media -moz-pref('zen.view.window.scheme', 0) {
       color-scheme: dark;
+      --toolbar-color-scheme: dark;
     }
 
     @media -moz-pref('zen.view.window.scheme', 1) {
       color-scheme: light;
+      --toolbar-color-scheme: light;
     }
 
     @media -moz-pref('zen.view.window.scheme', 2) {
       color-scheme: light;
+      --toolbar-color-scheme: light;
       @media (-moz-system-dark-theme) {
         color-scheme: dark;
+        --toolbar-color-scheme: dark;
       }
     }
 
     :root[privatebrowsingmode='temporary'] &,
     &[privatebrowsingmode='temporary'] {
       color-scheme: dark;
+      --toolbar-color-scheme: dark;
     }
   }
 }

src/zen/compact-mode/ZenCompactMode.mjs

@@ -36,11 +36,12 @@ var gZenCompactModeManager = {
   preInit() {
     // Remove it before initializing so we can properly calculate the width
     // of the sidebar at startup and avoid overflowing items not being hidden
-    this._wasInCompactMode = Services.xulStore.getValue(
-      AppConstants.BROWSER_CHROME_URL,
-      'zen-main-app-wrapper',
-      'zen-compact-mode'
-    );
+    this._wasInCompactMode =
+      Services.xulStore.getValue(
+        AppConstants.BROWSER_CHROME_URL,
+        'zen-main-app-wrapper',
+        'zen-compact-mode'
+      ) || Services.prefs.getBoolPref('zen.view.compact.should-enable-at-startup', false);
     lazyCompactMode.mainAppWrapper.removeAttribute('zen-compact-mode');
 
     this.addContextMenu();
@@ -106,6 +107,9 @@ var gZenCompactModeManager = {
     lazyCompactMode.mainAppWrapper.setAttribute('zen-compact-mode', value);
     document.documentElement.setAttribute('zen-compact-mode', value);
     Services.xulStore.persist(lazyCompactMode.mainAppWrapper, 'zen-compact-mode');
+    if (typeof this._wasInCompactMode === 'undefined') {
+      Services.prefs.setBoolPref('zen.view.compact.should-enable-at-startup', value);
+    }
     this._updateEvent();
     return value;
   },
@@ -687,7 +691,15 @@ var gZenCompactModeManager = {
       !this._nextTimeWillBeActive &&
       this.canHideSidebar
     ) {
-      gZenUIManager.showToast('zen-background-tab-opened-toast');
+      gZenUIManager.showToast('zen-background-tab-opened-toast', {
+        button: {
+          id: 'zen-open-background-tab-button',
+          command: () => {
+            const targetWindow = window.ownerGlobal.parent || window;
+            targetWindow.gBrowser.selectedTab = tab;
+          },
+        },
+      });
     }
     delete this._nextTimeWillBeActive;
   },

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -541,7 +541,7 @@
         case 'unload-switch':
         case 'reset-switch':
         case 'switch':
-          if (behavior.includes('unload') && !selectedTab.hasAttribute('zen-essential')) {
+          if (behavior.includes('unload')) {
             if (selectedTab.hasAttribute('glance-id')) {
               break;
             }

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -41,7 +41,7 @@
   }
 
   const MAX_OPACITY = 0.9;
-  const MIN_OPACITY = 0.3;
+  const MIN_OPACITY = AppConstants.platform === 'macosx' ? 0.25 : 0.35;
 
   const EXPLICIT_LIGHTNESS_TYPE = 'explicit-lightness';
 
@@ -425,7 +425,7 @@
     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 padding = 30;
       const rect = {
         width: 338,
         height: 338,
@@ -445,7 +445,7 @@
       // 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
+      const padding = 30; // each side
       const dotHalfSize = 36 / 2; // half the size of the dot
       x += dotHalfSize;
       y += dotHalfSize;
@@ -462,8 +462,9 @@
       }
       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]
+      let saturation = normalizedDistance * 100; // stays high even in center
       if (type !== EXPLICIT_LIGHTNESS_TYPE) {
+        saturation = 80 + (1 - normalizedDistance) * 20;
         // Set the current lightness to how far we are from the center of the circle
         // For example, moving the dot outside will have higher lightness, while moving it inside will have lower lightness
         this.#currentLightness = Math.round((1 - normalizedDistance) * 100);
@@ -691,7 +692,7 @@
 
       const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
       const rect = dotPad.getBoundingClientRect();
-      const padding = 20;
+      const padding = 30;
 
       let updatedDots = [...dots];
       const centerPosition = { x: rect.width / 2, y: rect.height / 2 };
@@ -840,7 +841,7 @@
 
       const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
       const rect = gradient.getBoundingClientRect();
-      const padding = 20;
+      const padding = 30;
 
       const centerX = rect.left + rect.width / 2;
       const centerY = rect.top + rect.height / 2;
@@ -973,7 +974,7 @@
       if (this.dragging) {
         event.preventDefault();
         const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect();
-        const padding = 20; // each side
+        const padding = 30; // each side
         // do NOT let the ball be draged outside of an imaginary circle. You can drag it anywhere inside the circle
         // if the distance between the center of the circle and the dragged ball is bigger than the radius, then the ball
         // should be placed on the edge of the circle. If it's inside the circle, then the ball just follows the mouse
@@ -1009,6 +1010,7 @@
     }
 
     themedColors(colors) {
+      // For non-Mica themes, we return the colors as they are
       return [...colors];
     }
 
@@ -1032,24 +1034,38 @@
       return `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${baseColor[3]})`;
     }
 
+    get isMica() {
+      return window.matchMedia('(-moz-windows-mica)').matches;
+    }
+
     get canBeTransparent() {
-      return window.matchMedia(
-        '(-moz-windows-mica) or (-moz-platform: macos) or ((-moz-platform: linux) and -moz-pref("zen.widget.linux.transparency"))'
-      ).matches;
+      return (
+        this.isMica ||
+        window.matchMedia(
+          '(-moz-platform: macos) or ((-moz-platform: linux) and -moz-pref("zen.widget.linux.transparency"))'
+        ).matches
+      );
     }
 
     blendWithWhiteOverlay(baseColor, opacity) {
-      const blendColor = [255, 255, 255];
-      const blendAlpha = 0.2;
-      const baseAlpha = baseColor[3] !== undefined ? baseColor[3] : 1;
-      const blended = [];
-
-      for (let i = 0; i < 3; i++) {
-        blended[i] = Math.round(blendColor[i] * (1 - opacity) + baseColor[i] * opacity);
+      let colorToBlend;
+      let colorToBlendOpacity;
+      if (this.isMica) {
+        colorToBlend = !this.isDarkMode ? [0, 0, 0] : [255, 255, 255];
+        colorToBlendOpacity = 0.35;
+      } else if (AppConstants.platform === 'macosx') {
+        colorToBlend = [255, 255, 255];
+        colorToBlendOpacity = 0.3;
       }
-
-      const blendedAlpha = +(blendAlpha * (1 - opacity) + baseAlpha * opacity).toFixed(3);
-      return `rgba(${blended[0]}, ${blended[1]}, ${blended[2]}, ${blendedAlpha})`;
+      if (colorToBlend) {
+        const blendedAlpha = Math.min(
+          1,
+          opacity + MIN_OPACITY + colorToBlendOpacity * (1 - (opacity + MIN_OPACITY))
+        );
+        baseColor = this.blendColors(baseColor, colorToBlend, blendedAlpha * 100);
+        opacity += colorToBlendOpacity * (1 - opacity);
+      }
+      return `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${opacity})`;
     }
 
     getSingleRGBColor(color, forToolbar = false) {
@@ -1067,11 +1083,21 @@
       } else {
         color = color.c;
       }
+      if (this.isLegacyVersion && this.isDarkMode) {
+        // In legacy version, we blend with white overlay or black overlay based on if we are in dark mode
+        color = this.blendColors(color, [0, 0, 0], 30);
+      }
       return this.blendWithWhiteOverlay(color, opacity);
     }
 
     luminance([r, g, b]) {
-      return 0.2126 * (r / 255) + 0.7152 * (g / 255) + 0.0722 * (b / 255);
+      // These magic numbers are extracted from the wikipedia article on relative luminance
+      // https://en.wikipedia.org/wiki/Relative_luminance
+      var 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) {
@@ -1098,7 +1124,11 @@
 
       const rotation = -45; // TODO: Detect rotation based on the accent color
       if (themedColors.length === 0) {
-        return forToolbar ? this.getToolbarModifiedBase() : 'transparent';
+        return forToolbar
+          ? this.getToolbarModifiedBase()
+          : this.isDarkMode
+            ? 'rgba(0, 0, 0, 0.4)'
+            : 'transparent';
       } else if (themedColors.length === 1) {
         return this.getSingleRGBColor(themedColors[0], forToolbar);
       } else {
@@ -1145,6 +1175,10 @@
     }
 
     shouldBeDarkMode(accentColor) {
+      if (Services.prefs.getBoolPref('zen.theme.use-sysyem-colors')) {
+        return this.isDarkMode;
+      }
+
       if (!this.canBeTransparent) {
         const toolbarBg = this.getToolbarModifiedBaseRaw();
         accentColor = this.blendColors(
@@ -1160,7 +1194,9 @@
       let darkText = this.getToolbarColor(true); // e.g. [r, g, b, a]
       let lightText = this.getToolbarColor(false); // e.g. [r, g, b, a]
 
-      lightText[3] -= 0.4; // Reduce alpha for light text
+      if (this.canBeTransparent) {
+        lightText[3] -= 0.25; // Reduce alpha for light text
+      }
 
       // Composite text color over background
       darkText = this.blendColors(bg, darkText.slice(0, 3), (1 - darkText[3]) * 100);
@@ -1312,7 +1348,7 @@
       let workspaceTheme = theme || workspace.theme;
 
       await this.foreachWindowAsActive(async (browser) => {
-        if (!browser.gZenThemePicker.promiseInitialized) {
+        if (!browser.gZenThemePicker?.promiseInitialized) {
           return;
         }
 
@@ -1482,14 +1518,15 @@
           );
           browser.gZenThemePicker.isLegacyVersion = this.isLegacyVersion;
           let isDarkMode = isDarkModeWindow;
-          if (!isDefaultTheme && !this.isLegacyVersion) {
+          const isUsingCustomColors = workspaceTheme.gradientColors.some((color) => color.isCustom);
+          if (!isDefaultTheme && !this.isLegacyVersion && !isUsingCustomColors) {
             // Check for the primary color
             isDarkMode = browser.gZenThemePicker.shouldBeDarkMode(dominantColor);
             browser.document.documentElement.setAttribute('zen-should-be-dark-mode', isDarkMode);
             browser.gZenThemePicker.panel.removeAttribute('invalidate-controls');
           } else {
             browser.document.documentElement.removeAttribute('zen-should-be-dark-mode');
-            if (!this.isLegacyVersion) {
+            if (!this.isLegacyVersion && !isUsingCustomColors) {
               browser.gZenThemePicker.panel.setAttribute('invalidate-controls', 'true');
             }
           }
@@ -1502,7 +1539,7 @@
         }
 
         if (!skipUpdate) {
-          this.dots = [];
+          browser.gZenThemePicker.dots = [];
           browser.gZenThemePicker.recalculateDots(workspaceTheme.gradientColors);
         }
       });
@@ -1596,7 +1633,7 @@
         currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
       }
 
-      await this.onWorkspaceChange(currentWorkspace, true, skipSave ? gradient : null);
+      await this.onWorkspaceChange(currentWorkspace, skipSave, skipSave ? gradient : null);
     }
 
     async handlePanelClose() {

src/zen/workspaces/ZenWorkspaces.mjs

@@ -889,6 +889,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   async initializeWorkspaces() {
     let activeWorkspace = await this.getActiveWorkspace();
     this.activeWorkspace = activeWorkspace?.uuid;
+    await gZenSessionStore.promiseInitialized;
     try {
       if (activeWorkspace) {
         window.gZenThemePicker = new nsZenThemePicker();
@@ -897,7 +898,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     } catch (e) {
       console.error('gZenWorkspaces: Error initializing theme picker', e);
     }
-    await gZenSessionStore.promiseInitialized;
     await this.workspaceBookmarks();
     await this.initializeTabsStripSections();
     this._initializeEmptyTab();

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

@@ -235,7 +235,7 @@
 .zen-theme-picker-gradient {
   position: relative;
   overflow: hidden;
-  border-radius: calc(var(--zen-native-content-radius) - 4px);
+  border-radius: calc(var(--arrowpanel-border-radius) - 4px);
 
   min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px);
   background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.03));
@@ -243,7 +243,7 @@
     light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)) 1px,
     transparent 0
   );
-  background-position: -20px -20px;
+  background-position: -23px -23px;
   background-size: 6px 6px;
 
   & .zen-theme-picker-dot {

src/zen/workspaces/zen-workspaces.css

@@ -22,7 +22,6 @@
     display: none !important;
   }
 
-  --toolbarbutton-hover-background: transparent !important;
   border-radius: var(--zen-button-border-radius) !important;
   background: transparent;
   appearance: unset !important;
@@ -69,7 +68,7 @@
 
     &:hover,
     &[dragged='true']{
-      background-color: var(--zen-toolbar-element-bg);
+      background-color: var(--toolbarbutton-hover-background);
     }
 
     & label {
@@ -215,7 +214,10 @@
     transition: opacity 0.1s;
     order: 5;
     --toolbarbutton-inner-padding: 6px;
-    --tab-border-radius: 8px;
+
+    & image {
+      border-radius: calc(var(--border-radius-medium) - 4px);
+    }
 
     :root[zen-renaming-tab='true'] & {
       display: none;

surfer.json

@@ -19,7 +19,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.14.3b",
+        "displayVersion": "1.14.5b",
         "github": {
           "repo": "zen-browser/desktop"
         },