refactor(styles): update CSS variables and layout for improved theming and spacing

src/browser/base/content/zen-styles/zen-browser-ui.css

@@ -109,7 +109,7 @@
 }
 
 #zen-main-app-wrapper {
-  background: transparent;
+  background: var(--zen-themed-toolbar-bg-transparent);
   overflow: hidden;
 
   & > * {

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -1050,14 +1050,14 @@
 #zen-essentials-container {
   padding-bottom: var(--zen-toolbox-padding);
   overflow: hidden;
-  gap: 3px;
+  gap: calc(var(--zen-toolbox-padding) - 2px);
 }
 
 #zen-essentials-container {
   overflow: hidden;
   transition: max-height 0.3s ease-out;
   opacity: 1;
-  grid-template-columns: repeat(auto-fit, minmax(48px, auto));
+  grid-template-columns: repeat(auto-fit, minmax(49px, auto));
   overflow: hidden;
   scrollbar-width: thin;
   display: grid;

src/browser/base/content/zen-styles/zen-theme.css

@@ -158,7 +158,7 @@
   --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: 45px;
+  --zen-workspace-indicator-height: 48px;
 
   @media (-moz-windows-mica) or (-moz-platform: macos) {
     background: transparent;

src/browser/base/content/zen-styles/zen-workspaces.css

@@ -425,7 +425,7 @@
 }
 
 .zen-current-workspace-indicator {
-  padding: 15px calc(4px + var(--tab-inline-padding));
+  padding: calc(15px + var(--zen-toolbox-padding)) calc(4px + var(--tab-inline-padding));
   font-weight: 600;
   position: absolute;
   max-height: var(--zen-workspace-indicator-height);
@@ -443,11 +443,10 @@
     pointer-events: none;
     content: '';
     position: absolute;
-    top: 4px;
-    left: 2px;
-    z-index: -1;
-    width: calc(100% - 4px);
-    height: calc(100% - 10px);
+    top: var(--zen-toolbox-padding);
+    left: calc(var(--zen-toolbox-padding) / 2);
+    width: calc(100% - var(--zen-toolbox-padding));
+    height: calc(100% - var(--zen-toolbox-padding) * 2);
   }
 
   &:hover,

src/browser/base/zen-components/ZenGradientGenerator.mjs

@@ -870,8 +870,11 @@
       if (color.isCustom) {
         return color.c;
       }
-      const toolbarBg = forToolbar ? this.getToolbarModifiedBase() : 'var(--zen-themed-toolbar-bg-transparent)';
-      return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, ${toolbarBg} ${(1 - this.currentOpacity) * 100}%)`;
+      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 `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${this.currentOpacity})`;
     }
 
     getGradient(colors, forToolbar = false) {

src/browser/base/zen-components/ZenTabUnloader.mjs

@@ -271,9 +271,6 @@
         tab.attention ||
         tab.hasAttribute('glance-id') ||
         tab.linkedBrowser?.zenModeActive ||
-        (typeof extraArgs.permitUnload === 'undefined'
-          ? !tab.linkedBrowser?.permitUnload()?.permitUnload
-          : !extraArgs.permitUnload) ||
         (tab.pictureinpicture && !ignoreTimestamp) ||
         (tab.soundPlaying && !ignoreTimestamp) ||
         (tab.zenIgnoreUnload && !ignoreTimestamp) ||
@@ -283,7 +280,7 @@
         return false;
       }
       if (ignoreTimestamp) {
-        return true;
+        return this._tabPermitsUnload(tab, extraArgs);
       }
       const lastActivity = tab.lastActivity;
       if (!lastActivity) {
@@ -291,7 +288,13 @@
       }
       const diff = currentTimestamp - lastActivity;
       // Check if the tab has been inactive for more than the timeout
-      return diff > lazy.zenTabUnloaderTimeout * 60 * 1000;
+      return diff > lazy.zenTabUnloaderTimeout * 60 * 1000 && this._tabPermitsUnload(tab, extraArgs);
+    }
+
+    _tabPermitsUnload(tab, extraArgs) {
+      return typeof extraArgs.permitUnload === 'undefined'
+        ? !tab.linkedBrowser?.permitUnload()?.permitUnload
+        : !extraArgs.permitUnload;
     }
   }
 

src/browser/base/zen-components/ZenViewSplitter.mjs

@@ -230,7 +230,6 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       const halfWidth = panelsWidth / 2;
       const side = event.clientX > halfWidth ? 'right' : 'left';
       this.fakeBrowser = document.createXULElement('vbox');
-      this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit);
       window.addEventListener('dragend', this.onBrowserDragEndToSplit, { once: true });
       const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
       this.fakeBrowser.setAttribute('flex', '1');
@@ -277,6 +276,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       ]);
       if (this._finishAllAnimatingPromise) {
         this._finishAllAnimatingPromise.then(() => {
+          this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit);
           this._canDrop = true;
           draggedTab._visuallySelected = true;
         });