feat: Improved contrasting and font colors, b=no-bug, c=common, tabs, workspaces

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

@@ -15,12 +15,6 @@ pref('zen.view.sidebar-expanded', true);
 pref('zen.view.sidebar-collapsed.hide-mute-button', true);
 pref('zen.view.experimental-force-window-controls-left', false);
 
-#ifdef XP_MACOSX
-  pref('zen.view.grey-out-inactive-windows', false);
-#else
-  pref('zen.view.grey-out-inactive-windows', true);
-#endif
-
 pref('zen.view.hide-window-controls', true);
 pref('zen.view.experimental-no-window-controls', false);
 

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

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

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

@@ -65,6 +65,10 @@
       transition: 0s;
     }
 
+    &:-moz-window-inactive::after {
+      background: var(--zen-main-browser-background-toolbar);
+    }
+
     &::before {
       background: var(--zen-main-browser-background-old);
       opacity: calc(1 - var(--zen-background-opacity));
@@ -134,14 +138,6 @@
     background: ActiveCaption;
     color: CaptionText;
   }
-
-  @media -moz-pref('zen.view.grey-out-inactive-windows') {
-    transition: background-color var(--inactive-window-transition);
-    &:-moz-window-inactive {
-      background-color: InactiveCaption;
-      color: InactiveCaptionText;
-    }
-  }
 }
 
 #zen-appcontent-wrapper {

src/zen/common/styles/zen-single-components.css

@@ -119,6 +119,6 @@ body > #confetti {
     background-color 0.1s,
     scale 0.2s;
   &:active {
-    transform: scale(0.95);
+    transform: scale(0.98);
   }
 }

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

@@ -116,10 +116,7 @@
   --zen-button-border-radius: 5px;
   --zen-button-padding: 0.6rem 1.2rem;
 
-  --zen-toolbar-element-bg: light-dark(
+  --zen-toolbar-element-bg: color-mix(in srgb, currentColor 15%, transparent 85%);
-    color-mix(in srgb, currentColor 6%, transparent 94%),
-    color-mix(in srgb, currentColor 10%, transparent 90%)
-  ) !important;
 
   /* Toolbar */
   --zen-toolbar-height: 38px;
@@ -128,11 +125,7 @@
 
   --toolbarbutton-inner-padding: 5px !important;
 
-  --toolbarbutton-hover-background: color-mix(
+  --toolbarbutton-hover-background: color-mix(in srgb, currentColor 6%, transparent 94%) !important;
-    in srgb,
-    var(--zen-branding-bg-reverse) 7.5%,
-    transparent 92.5%
-  );
 
   --toolbarbutton-active-background: color-mix(
     in srgb,
@@ -225,23 +218,12 @@
 #main-window:not([chromehidden~='toolbar']) {
   min-height: 495px !important;
 
-  @media (-moz-windows-mica) or (-moz-platform: macos) {
+  @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] {
-      --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 {

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

@@ -66,7 +66,7 @@
   }
 
   &:hover #urlbar-background {
-    background-color: light-dark(rgba(89, 89, 89, 0.15), rgba(255, 255, 255, 0.2)) !important;
+    background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2)) !important;
   }
 }
 

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -1191,7 +1191,7 @@
 /* Hide the button wrapper by default */
 #tabs-newtab-button {
   display: none;
-  opacity: 0.5; /* Dimmed by default */
+  font-weight: 500;
   -moz-user-focus: ignore !important; /* Prevent focus */
 }
 
@@ -1216,7 +1216,6 @@
     /* Style when placed "in urlbar" (likely a state/attribute) */
     &[in-urlbar] {
       background: var(--tab-selected-bgcolor) !important;
-      opacity: 1 !important; /* Full opacity */
       box-shadow: var(--tab-selected-shadow); /* Apply selected tab shadow */
     }
   }
@@ -1358,7 +1357,7 @@
   }
 
   &:hover .tab-background {
-    background: light-dark(rgba(89, 89, 89, 0.15), var(--tab-selected-bgcolor));
+    background: light-dark(rgba(0, 0, 0, 0.1), var(--tab-selected-bgcolor));
   }
 
   /* Optional blurred favicon background effect (if pref `zen.theme.essentials-favicon-bg` is enabled) */

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -40,8 +40,8 @@
     return points;
   }
 
-  const MAX_OPACITY = 0.9;
+  const MAX_OPACITY = 0.8;
-  const MIN_OPACITY = AppConstants.platform === 'win' ? 0.2 : 0.15;
+  const MIN_OPACITY = 0.3;
 
   class nsZenThemePicker extends ZenMultiWindowFeature {
     static MAX_DOTS = 3;
@@ -973,10 +973,14 @@
     }
 
     themedColors(colors) {
+      const colorToBlend = this.isDarkMode ? [255, 255, 255] : [0, 0, 0]; // Default to white for dark mode, black otherwise
+      const opacity = this.currentOpacity;
+      // Convert opacity into a percentage where the lowest is 80% and the highest is 100%
+      // The more transparent, the more white the color will be blended with. In order words,
+      // make the transparency relative to these 2 ends.
+      const blendPercentage = 80 + opacity * 20; // 80% to 100% range
       return colors.map((color) => ({
-        c: color.isCustom
+        c: color.isCustom ? color.c : this.blendColors(color.c, colorToBlend, blendPercentage),
-          ? color.c
-          : [Math.min(255, color.c[0]), Math.min(255, color.c[1]), Math.min(255, color.c[2])],
         isCustom: color.isCustom,
         algorithm: color.algorithm,
         lightness: color.lightness,
@@ -986,8 +990,8 @@
 
     onOpacityChange(event) {
       this.currentOpacity = parseFloat(event.target.value);
-      // If we reached a whole number (e.g., 0.1, 0.2, etc.), send a haptic feedback
+      // If we reached a whole number (e.g., 0.1, 0.2, etc.), send a haptic feedback.
-      if ((this.currentOpacity * 10) % 1 === 0) {
+      if (((this.currentOpacity * 10) | 0) % 10 === 0) {
         Services.zen.playHapticFeedback();
       }
       this.updateCurrentWorkspace();
@@ -1032,7 +1036,7 @@
       return (brightest + 0.05) / (darkest + 0.05);
     }
 
-    blendColorsRaw(rgb1, rgb2, percentage) {
+    blendColors(rgb1, rgb2, percentage) {
       const p = percentage / 100;
       return [
         Math.round(rgb1[0] * p + rgb2[0] * (1 - p)),
@@ -1048,7 +1052,7 @@
 
       for (let i = 0; i < 10; i++) {
         const mid = (low + high) / 2;
-        const blended = this.blendColorsRaw(dominantColor, blendTarget, mid);
+        const blended = this.blendColors(dominantColor, blendTarget, mid);
         const contrast = this.contrastRatio(blended, blendTarget);
 
         if (contrast >= minContrast) {
@@ -1059,7 +1063,7 @@
         }
       }
 
-      return bestMatch || this.blendColorsRaw(dominantColor, blendTarget, 10); // fallback
+      return bestMatch || this.blendColors(dominantColor, blendTarget, 10); // fallback
     }
 
     getGradient(colors, forToolbar = false) {
@@ -1118,7 +1122,7 @@
       if (!this.canBeTransparent) {
         // Blend the color with the toolbar background
         const toolbarBg = this.getToolbarModifiedBaseRaw();
-        accentColor = this.blendColorsRaw(
+        accentColor = this.blendColors(
           toolbarBg.slice(0, 3),
           accentColor,
           (1 - this.currentOpacity) * 100
@@ -1260,11 +1264,6 @@
       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
@@ -1279,6 +1278,10 @@
           return;
         }
 
+        if (theme === null) {
+          browser.gZenThemePicker.invalidateGradientCache();
+        }
+
         // Do not rebuild if the workspace is not the same as the current one
         const windowWorkspace = await browser.gZenWorkspaces.getActiveWorkspace();
         if (windowWorkspace.uuid !== uuid && theme !== null) {
@@ -1296,25 +1299,6 @@
           }
         }
 
-        if (this.isDarkMode) {
-          if (window.matchMedia('(-moz-windows-mica)').matches) {
-            browser.document.documentElement.style.setProperty(
-              '--zen-themed-browser-overlay-bg',
-              'transparent'
-            );
-          } else {
-            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',
@@ -1328,7 +1312,6 @@
             browser.gZenThemePicker.previousBackgroundResolve();
           }
           delete browser.gZenThemePicker.previousBackgroundOpacity;
-          browser.gZenThemePicker.invalidateGradientCache();
         }
 
         browser.gZenThemePicker.resetCustomColorList();
@@ -1463,12 +1446,10 @@
             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,
+              '--toolbox-textcolor': isDarkMode ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)',
             },
             {
               duration: 0.05,

src/zen/workspaces/ZenWorkspaces.mjs

@@ -650,6 +650,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
         Services.prefs.setBoolPref('zen.swipe.is-fast-swipe', false);
         document.documentElement.removeAttribute('swipe-gesture');
         gZenUIManager.tabsWrapper.style.removeProperty('scrollbar-width');
+        document.documentElement.style.setProperty('--zen-background-opacity', '1');
         delete this._hasAnimatedBackgrounds;
         this.updateTabsContainers();
         document.removeEventListener('popupshown', this.popupOpenHandler, { once: true });
@@ -1674,15 +1675,23 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
         const [existingBackground, existingGrain] =
           await gZenThemePicker.getGradientForWorkspace(workspace);
         const percentage = Math.abs(offsetPixels) / 200;
-        if (!this._hasAnimatedBackgrounds) {
+        await new Promise((resolve) => {
-          this._hasAnimatedBackgrounds = true;
+          requestAnimationFrame(() => {
-          document.documentElement.style.setProperty(
+            document.documentElement.style.setProperty('--zen-background-opacity', percentage);
-            '--zen-main-browser-background-old',
+            if (!this._hasAnimatedBackgrounds) {
-            existingBackground
+              this._hasAnimatedBackgrounds = true;
-          );
+              document.documentElement.style.setProperty(
-          document.documentElement.style.setProperty('--zen-main-browser-background', nextGradient);
+                '--zen-main-browser-background-old',
-        }
+                existingBackground
-        document.documentElement.style.setProperty('--zen-background-opacity', percentage);
+              );
+              document.documentElement.style.setProperty(
+                '--zen-main-browser-background',
+                nextGradient
+              );
+            }
+            resolve();
+          });
+        });
         // Fit the offsetPixels into the grain limits. Both ends may be nextGrain and existingGrain,
         // so we need to use the min and max of both. For example, existing may be 0.2 and next may be 0.5,
         // meaning we should convert the offset to a percentage between 0.2 and 0.5. BUT if existingGrain

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

@@ -455,6 +455,6 @@
   }
 
   #PanelUI-zen-gradient-slider-wave svg path {
-    stroke: dimgray !important;
+    stroke: light-dark(rgba(77, 77, 77, 0.5), rgba(161, 161, 161, 0.5)) !important;
   }
 }

src/zen/workspaces/zen-workspaces.css

@@ -138,7 +138,7 @@
 /* Mark workspaces indicator */
 .zen-current-workspace-indicator {
   padding: calc(2px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
-  font-weight: 600;
+  font-weight: 500;
   position: relative;
   max-height: var(--zen-workspace-indicator-height);
   min-height: var(--zen-workspace-indicator-height);
@@ -160,7 +160,7 @@
     position: absolute;
     top: var(--zen-toolbox-padding);
     left: calc(var(--zen-toolbox-padding) + 2px);
-    width: calc(100% - var(--zen-toolbox-padding) * 2 - 4px);
+    width: calc(100% - var(--zen-toolbox-padding) * 3);
     height: calc(100% - var(--zen-toolbox-padding) * 2);
   }
 
@@ -194,7 +194,6 @@
   }
 
   .zen-current-workspace-indicator-name {
-    opacity: 0.5;
     display: block;
     white-space: nowrap;
     overflow: hidden;
@@ -208,6 +207,8 @@
     visibility: collapse;
     transition: opacity 0.1s;
     order: 5;
+    --toolbarbutton-inner-padding: 6px;
+    --tab-border-radius: 8px;
 
     :root[zen-renaming-tab='true'] & {
       display: none;